From 92d43c50bcf1659c67096df98e126a014584fbfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Fri, 25 Feb 2022 14:50:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A1=A8=E6=83=85=E5=8C=85?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                              | Bin 12292 -> 14340 bytes
 pages/im/components/sent/sentEmoji.vue |  79 +++
 pages/im/components/sent/sentText.vue  |  37 +-
 pages/im/components/sent/sentVoice.vue |   7 +-
 pages/im/components/sentMessageBar.vue |  66 +-
 pages/im/private/chat.vue              |   2 -
 static/.DS_Store                       | Bin 12292 -> 12292 bytes
 static/icon/emoji-icon.png             | Bin 0 -> 5665 bytes
 static/im/emoji.js                     | 795 +++++++++++++++++++++++++
 store/modules/im.js                    |   4 +-
 10 files changed, 966 insertions(+), 24 deletions(-)
 create mode 100644 pages/im/components/sent/sentEmoji.vue
 create mode 100644 static/icon/emoji-icon.png
 create mode 100644 static/im/emoji.js

diff --git a/.DS_Store b/.DS_Store
index a33bf2941480e4f068c446301e80561dc4392cbd..18bfff64ba35ed521989dae50662258bec1184ab 100644
GIT binary patch
delta 255
zcmZokXem%&U|?W$DortDU@!nOIe-{M3-ADmHU<U-o{0+jqA@@YGf<F$p_rlAGbcYe
zDJMT^;zi}j20ARPj6g}2$vgrY8+Qcr^Xh<jKxN4wrIQ~D-q<W5=*a?NOb!!mP-X=R
zmoVfr6fvZh1sCPz<maUWHGquZU?^qCW5{ICn=Bw8w)v~5BPXN&W*&uP*2x7zo||{5
zx-m_@rOrQbfxu=D@mK7UtUxV5V89I|T#?<o@#1^t$^1HjJWLSZSb&sm&e36Jgd4=h
Jz`zD{0RXP_HctQm

delta 237
zcmZoEXh~3DU|?W$DortDV9)?EIe-{M3-ADmHU<U-?uiQeqESE&Gf<F$p_HM7A(f%1
zAj2?t;zi}j1|}@5j6g}2$$!-qCL1V-Y&_!5&!|0dg2rSXf!Q1umIgWs#%7k21B4tm
ze-Q9wnJgn#x_Px&0_VgBR~hv-^C%><a+sQ#=qQ+)7)-t(>b!ZEstc1+9zy{`BG6O@
rRuBPn5I2x;MRwH2i|?5y^P2?n04)bOnE^-}Y|b%ZX2dj(4PqPspj$D~

diff --git a/pages/im/components/sent/sentEmoji.vue b/pages/im/components/sent/sentEmoji.vue
new file mode 100644
index 0000000..cb08343
--- /dev/null
+++ b/pages/im/components/sent/sentEmoji.vue
@@ -0,0 +1,79 @@
+<template>
+    <view class="emoji--lay" v-show="show">
+        <scroll-view class="scroll" :scroll-y="true">
+            <view class="emoji-flex">
+                <view class="item" v-for="(item, index) in emojiArr" :key="index" @click="$emit('onEmoji', item)">{{item.emoji}}</view>
+            </view>
+        </scroll-view>
+        <view class="tool">
+            <!-- <view class="item" @click="$emit('delete')">删除</view> -->
+            <view class="item sent" @click="$emit('sent')">发送</view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import emoji from '@/static/im/emoji'
+    export default{
+        props:{
+            show: {
+                type: Boolean,
+                default: () => {
+                    return false
+                }
+            }
+        },
+        data(){
+            return {
+                emojiArr: emoji
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .emoji--lay{
+        height: 600rpx;
+        position: relative;
+        .scroll{
+            height: 600rpx;
+            .emoji-flex{
+                padding: 15rpx 15rpx 120rpx;
+                display: flex;
+                flex-wrap: wrap;
+                .item{
+                    margin: 10rpx 15rpx;
+                    font-size: 52rpx;
+                    width: calc(12.5% - 30rpx);
+                    box-sizing: border-box;
+                }
+            }
+        }
+        .tool{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-image: linear-gradient(to top, #FFF, rgba(255, 255, 255, .0));
+            display: flex;
+            justify-content: flex-end;
+            padding: 20rpx 30rpx 30rpx;
+            .item{
+                line-height: 70rpx;
+                border-radius: 35rpx;
+                width: 140rpx;
+                text-align: center;
+                font-size: 28rpx;
+                margin-left: 20rpx;
+                background: white;
+                border: solid 1rpx #f5f5f5;
+                box-sizing: border-box;
+                &.sent{
+                    border-color: #34CE98;
+                    background: #34CE98;
+                    color: white;
+                }
+            }
+        }
+    }
+</style>
diff --git a/pages/im/components/sent/sentText.vue b/pages/im/components/sent/sentText.vue
index 40b5361..81eac2f 100644
--- a/pages/im/components/sent/sentText.vue
+++ b/pages/im/components/sent/sentText.vue
@@ -1,7 +1,17 @@
 <template>
     <view class="sent--text">
-        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
-            v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
+        <input
+            class="input"
+            type="text"
+            :auto-blur="true"
+            :focus="focusState"
+            v-model="inputTxt"
+            confirm-type="send"
+            cursor-spacing="10"
+            @focus="focus"
+            @blur="blur"
+            @confirm="sent"
+        />
     </view>
 </template>
 
@@ -27,7 +37,7 @@
         computed: {
             disabled() {
                 return this.inputTxt.length === 0
-            }
+            },
         },
         mounted() {
             RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
@@ -45,9 +55,15 @@
                 focusState: false,
                 inputTxt: ''
             }
-        },
+        },
+        created(){
+            uni.$on('emojiValue', res => {
+                this.inputTxt = res.value
+            })
+        },
+        
         methods: {
-            sent() {
+            sent() {
                 if (!this.disabled) {
                     im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                         RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
@@ -56,13 +72,16 @@
                     })
                 }
             },
-            focus() {
+            focus() {
                 this.$emit('focus')
             },
-            blur() {
+            blur(e) {
                 uni.hideKeyboard()
-                this.$emit('blur')
+                this.$emit('blur', e.detail)
             }
+        },
+        destroyed() {
+            uni.$off('emojiValue')
         }
     }
 </script>
@@ -75,7 +94,7 @@
         .input {
             background: #F3F6FB;
             height: 70rpx;
-            width: 460rpx;
+            width: 400rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
             padding: 0 20rpx;
diff --git a/pages/im/components/sent/sentVoice.vue b/pages/im/components/sent/sentVoice.vue
index 4de2701..a9e3903 100644
--- a/pages/im/components/sent/sentVoice.vue
+++ b/pages/im/components/sent/sentVoice.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="send--voice">
         <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord" @touchmove="touchmove">
-            <text class="button">按住说话</text>
+            <text class="button">按住 说话</text>
         </view>
         <!-- 录音层 -->
         <view class="lay" v-if="showRecordTip">
@@ -222,10 +222,11 @@
             line-height: 70rpx;
             justify-content: center;
             align-items: center;
-            width: 500rpx;
+            width: 400rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
-
+            padding: 0 20rpx;
+            font-weight: bold;
             .button {
                 font-size: 30rpx;
                 color: #333;
diff --git a/pages/im/components/sentMessageBar.vue b/pages/im/components/sentMessageBar.vue
index 470bee3..eaa1ebb 100644
--- a/pages/im/components/sentMessageBar.vue
+++ b/pages/im/components/sentMessageBar.vue
@@ -7,18 +7,27 @@
                 <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
             </view>
             <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
-            <view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
+            <sent-text ref="textView" v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" @blur="onBlur"  />
+            <view class="msg-type msg-popups" @click="onShowEmoji">
+                <image class="icon" src="@/static/icon/emoji-icon.png" /> 
+                <!-- 考虑唤起键盘，暂时保留v-show -->
+                <!-- <image v-show="!showEmoji" class="icon" src="@/static/icon/emoji-icon.png" /> -->
+                <!-- <image v-show="showEmoji" class="icon" src="@/static/icon/key-icon.png" /> -->
+            </view>
+            <view class="msg-type msg-popups" @click="() => {showPopups = !showPopups, showEmoji = false}"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
         </view>
         <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
+        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
+        <!-- 表情包 -->
+        <sent-emoji :show="showEmoji" @onEmoji="onEmoji" @delete="onDelete" @sent="onSent"></sent-emoji>
     </view>
 </template>
 
 <script>
     import sentText from './sent/sentText'
     import sentVoice from './sent/sentVoice'
-    import sentPopups from './sent/sentPopups'
+    import sentPopups from './sent/sentPopups'
+    import sentEmoji from './sent/sentEmoji'
 
     export default {
         props: {
@@ -34,18 +43,26 @@
         components: {
             sentText,
             sentVoice,
-            sentPopups
+            sentPopups,
+            sentEmoji
         },
         data() {
             return {
-                chatType: 1, // 0 语音，1 文本
-                showPopups: false
+                chatType    : 1, // 0 语音，1 文本
+                showPopups  : false,
+                showEmoji   : false,
+                chatText    : {
+                    value   : "",
+                    cursor  : 0
+                }
             }
         },
         methods: {
             // 切换聊天类型，语音/文本
             changeMessageType() {
-                this.chatType = this.chatType === 1 ? 0 : 1
+                this.chatType = this.chatType === 1 ? 0 : 1
+                if(this.showEmoji) this.showEmoji = false
+                if(this.showPopups) this.showPopups = false
             },
             onSuccess() {
                 this.$emit('onSuccess')
@@ -55,6 +72,39 @@
                 if(this.showPopups){
                     this.showPopups = false
                 }
+            },
+            // 输入表情
+            onEmoji(e){
+                let atMsg  = this.chatText
+                let newMsg = () => {
+                    return atMsg.value.slice(0, atMsg.cursor) + e.emoji + atMsg.value.slice(atMsg.cursor)
+                }
+                atMsg.value = newMsg()
+                atMsg.cursor += 2
+                // 全局通讯
+                uni.$emit('emojiValue', atMsg)
+            },
+            // 删除表情
+            onDelete(){
+                console.log('删除')
+            },
+            // 发送消息
+            onSent(){
+                this.$refs.textView.sent()
+                this.chatText = {
+                    value   : "",
+                    cursor  : 0
+                }
+            },
+            // 获取输入框文字最新状态
+            onBlur(e){
+                this.chatText = e
+            },
+            // 显示emoji表情
+            onShowEmoji(){
+                this.showEmoji = !this.showEmoji
+                this.chatType = 1
+                if(this.showPopups) this.showPopups = false
             }
         }
     }
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index 45c24b1..d182bab 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -1,7 +1,6 @@
 <template>
     <view class="chat">
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
-
         <view class="shade" @click="hidePop" v-show="showPop">
             <view class="pop" :style="popStyle" :class="{'show':showPop}">
                 <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
@@ -9,7 +8,6 @@
                 </view>
             </view>
         </view>
-
         <!-- chat -->
         <view class="body">
             <view class="scroll">
diff --git a/static/.DS_Store b/static/.DS_Store
index 70a5648c6f795a64dd8d9c5db45c5b36dd0dd156..0958084929c98385330ae932897c37b36763392c 100644
GIT binary patch
delta 324
zcmZokXi1ph&*;7}AewRV1vSsjUl_&t7&RvI2v~85iHb{zN=ivhZd4ZMjL1yR&kN41
zN}aq)d6z-F0Do~tez_-5ETAa0EHkw{I=v_}CAc6lIWsR^+5Q6q7$`dgKp2w)1jT|H
z7JxY%0*oPf`FW|FoXQT~5NQSu25kmM1}}zSh75*shCYT_3~Ly6FdSvL#qfsV8zT#&
z7^4!SHlqonEu%f72V)>(5Mu~qBxBU%1A?C>JF4B7yjW<0G&@5sLn=ct5GFFDGo+RU
z7v<&T=cNN}V4Q3qYynmmE8HN?3RF?Tkk3$rs%G;o;c`e2%o3f?G}%Y(>}FO;X4cKz
g3LlszUs7}5?4(@5GC4t6a`Ht{!_6!j+t^_o0Iu;`V*mgE

delta 179
zcmZokXi1ph&*;1{AexcG)XYRj!PMAtGNZEN<}Zxme2glSc?7JOM8zgoE7!|Lrx#_W
z_@|{6r<O#<3-A{w7v<;V1mqWImSpDVO)ivZU{Q9+c`*5ngfZj#$qJIvlV7PAO@1kO
za`H^!#>o~Urjr9iOE=#aEkUu!dGkE+xlEJY70zttkY;AxEWpIfw3%Ds0~4E>j)IY~
W!DdF~oh+00NP2B%(b&cgVgLX&b2*0q

diff --git a/static/icon/emoji-icon.png b/static/icon/emoji-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e94a41b2994bef56f2eb3d66525da232a19e913
GIT binary patch
literal 5665
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

literal 0
HcmV?d00001

diff --git a/static/im/emoji.js b/static/im/emoji.js
new file mode 100644
index 0000000..4ed0269
--- /dev/null
+++ b/static/im/emoji.js
@@ -0,0 +1,795 @@
+var EmojiFactory = {
+	"u1F603": {
+		"en": "Smiley Face",
+		"zh": "绗戣劯",
+		"tag": "\uD83D\uDE03",
+		"position": "-75px 0px"
+	},
+	"u1F600": {
+		"en": "Grinning Face",
+		"zh": "绗戝樆鍢�",
+		"tag": "\uD83D\uDE00",
+		"position": "0px 0px"
+	},
+	"u1F60A": {
+		"en": "Smiley",
+		"zh": "寰瑧",
+		"tag": "\uD83D\uDE0A",
+		"position": "-1725px 0px"
+	},
+	"u263A": {
+		"en": "Cute",
+		"zh": "钀岃悓鍝�",
+		"tag": "\u263A",
+		"position": "-2950px 0px"
+	},
+	"u1F609": {
+		"en": "Winking Face",
+		"zh": "鐪ㄧ溂",
+		"tag": "\uD83D\uDE09",
+		"position": "-200px 0px"
+	},
+	"u1F60D": {
+		"en": "Heart Eyes",
+		"zh": "鑹茶糠杩�",
+		"tag": "\uD83D\uDE0D",
+		"position": "-1800px 0px"
+	},
+	"u1F618": {
+		"en": "Blowing Kiss",
+		"zh": "椋炲惢",
+		"tag": "\uD83D\uDE18",
+		"position": "-375px 0px"
+	},
+	"u1F61A": {
+		"en": "Kiss Face",
+		"zh": "涔堜箞鍝�",
+		"tag": "\uD83D\uDE1A",
+		"position": "-1875px 0px"
+	},
+	"u1F61C": {
+		"en": "Crazy Face",
+		"zh": "璋冪毊",
+		"tag": "\uD83D\uDE1C",
+		"position": "-1900px 0px"
+	},
+	"u1F61D": {
+		"en": "Tongue Out",
+		"zh": "鍚愯垖澶�",
+		"tag": "\uD83D\uDE1D",
+		"position": "-1925px 0px"
+	},
+	"u1F633": {
+		"en": "Flushed Face",
+		"zh": "鑴哥孩",
+		"tag": "\uD83D\uDE33",
+		"position": "-625px 0px"
+	},
+	"u1F601": {
+		"en": "Grinning With Smiling",
+		"zh": "闇查娇鑰岀瑧",
+		"tag": "\uD83D\uDE01",
+		"position": "-25px 0px"
+	},
+	"u1F614": {
+		"en": "Pensive",
+		"zh": "娌夋€�",
+		"tag": "\uD83D\uDE14",
+		"position": "-300px 0px"
+	},
+	"u1F60C": {
+		"en": "Pleased",
+		"zh": "婊℃剰",
+		"tag": "\uD83D\uDE0C",
+		"position": "-1775px 0px"
+	},
+	"u1F612": {
+		"en": "Dissatisfied",
+		"zh": "涓嶆弧",
+		"tag": "\uD83D\uDE12",
+		"position": "-250px 0px"
+	},
+	"u1F61F": {
+		"en": "Worried Face",
+		"zh": "鑻︾摐鑴�",
+		"tag": "\uD83D\uDE1F",
+		"position": "-1975px 0px"
+	},
+	"u1F61E": {
+		"en": "Disappointed Face",
+		"zh": "澶辨湜",
+		"tag": "\uD83D\uDE1E",
+		"position": "-1950px 0px"
+	},
+	"u1F623": {
+		"en": "Helpless Face",
+		"zh": "鏃犲姪",
+		"tag": "\uD83D\uDE23",
+		"position": "-450px 0px"
+	},
+	"u1F62D": {
+		"en": "Crying",
+		"zh": "浼ゅ績",
+		"tag": "\uD83D\uDE22",
+		"position": "-425px 0px"
+	},
+	"u1F602": {
+		"en": "Laughing Tears",
+		"zh": "鍠滄瀬鑰屾常",
+		"tag": "\uD83D\uDE02",
+		"position": "-50px 0px"
+	},
+	"u1F622": {
+		"en": "Sobbing",
+		"zh": "鍝常",
+		"tag": "\uD83D\uDE2D",
+		"position": "-2075px 0px"
+	},
+	"u1F62A": {
+		"en": "Sleepy Face",
+		"zh": "鍥�",
+		"tag": "\uD83D\uDE2A",
+		"position": "-2000px 0px"
+	},
+	"u1F630": {
+		"en": "Cold Sweat",
+		"zh": "鍐锋睏",
+		"tag": "\uD83D\uDE30",
+		"position": "-550px 0px"
+	},
+	"u1F605": {
+		"en": "Happy Sweat",
+		"zh": "灏村艾",
+		"tag": "\uD83D\uDE05",
+		"position": "-100px 0px"
+	},
+	"u1F613": {
+		"en": "Sweat",
+		"zh": "姹�",
+		"tag": "\uD83D\uDE13",
+		"position": "-275px 0px"
+	},
+	"u1F62B": {
+		"en": "Tired Face",
+		"zh": "鎶撶媯",
+		"tag": "\uD83D\uDE2B",
+		"position": "-2025px 0px"
+	},
+	"u1F629": {
+		"en": "Weary Face",
+		"zh": "鐤叉儷",
+		"tag": "\uD83D\uDE29",
+		"position": "-525px 0px"
+	},
+	"u1F628": {
+		"en": "Fearful Face",
+		"zh": "鍙€�",
+		"tag": "\uD83D\uDE28",
+		"position": "-500px 0px"
+	},
+	"u1F631": {
+		"en": "Scream",
+		"zh": "灏栧彨",
+		"tag": "\uD83D\uDE31",
+		"position": "-575px 0px"
+	},
+	"u1F621": {
+		"en": "Angry Face",
+		"zh": "鐢熸皵",
+		"tag": "\uD83D\uDE21",
+		"position": "-400px 0px"
+	},
+	"u1F624": {
+		"en": "Mad Face",
+		"zh": "鎬掓皵鍐插啿",
+		"tag": "\uD83D\uDE24",
+		"position": "-475px 0px"
+	},
+	"u1F616": {
+		"en": "Confounded Face",
+		"zh": "钂欑緸",
+		"tag": "\uD83D\uDE16",
+		"position": "-350px 0px"
+	},
+	"u1F606": {
+		"en": "Big Grin",
+		"zh": "澶х瑧",
+		"tag": "\uD83D\uDE06",
+		"position": "-125px 0px"
+	},
+	"u1F60B": {
+		"en": "Hungry",
+		"zh": "棣�",
+		"tag": "\uD83D\uDE0B",
+		"position": "-1750px 0px"
+	},
+	"u1F637": {
+		"en": "Mask Face",
+		"zh": "鍙ｇ僵",
+		"tag": "\uD83D\uDE37",
+		"position": "-725px 0px"
+	},
+	"u1F60E": {
+		"en": "Sunglasses",
+		"zh": "澧ㄩ暅",
+		"tag": "\uD83D\uDE0E",
+		"position": "-1825px 0px"
+	},
+	"u1F634": {
+		"en": "Sleeping",
+		"zh": "鐫＄湢",
+		"tag": "\uD83D\uDE34",
+		"position": "-650px 0px"
+	},
+	"u1F635": {
+		"en": "Dizzy Face",
+		"zh": "澶存檿鐪艰姳",
+		"tag": "\uD83D\uDE35",
+		"position": "-675px 0px"
+	},
+	"u1F632": {
+		"en": "Shocked Face",
+		"zh": "闇囨儕",
+		"tag": "\uD83D\uDE32",
+		"position": "-600px 0px"
+	},
+	"u1F608": {
+		"en": "Purple Devil",
+		"zh": "灏忔伓榄�",
+		"tag": "\uD83D\uDE08",
+		"position": "-175px 0px"
+	},
+	"u1F47F": {
+		"en": "Devil",
+		"zh": "鎭堕瓟",
+		"tag": "\uD83D\uDC7F",
+		"position": "-1600px 0px"
+	},
+	"u1F62F": {
+		"en": "Surprised Face",
+		"zh": "鎯婂憜",
+		"tag": "\uD83D\uDE2F",
+		"position": "-2100px 0px"
+	},
+	"u1F62C": {
+		"en": "Grimacing Face",
+		"zh": "鎵鑴�",
+		"tag": "\uD83D\uDE2C",
+		"position": "-2050px 0px"
+	},
+	"u1F615": {
+		"en": "Confused",
+		"zh": "鍥版儜",
+		"tag": "\uD83D\uDE15",
+		"position": "-325px 0px"
+	},
+	"u1F636": {
+		"en": "Mouthless",
+		"zh": "鏃犲彛",
+		"tag": "\uD83D\uDE36",
+		"position": "-700px 0px"
+	},
+	"u1F607": {
+		"en": "Halo",
+		"zh": "澶╀娇鍏夌幆",
+		"tag": "\uD83D\uDE07",
+		"position": "-150px 0px"
+	},
+	"u1F60F": {
+		"en": "Smirking Face",
+		"zh": "鍌荤瑧",
+		"tag": "\uD83D\uDE0F",
+		"position": "-1850px 0px"
+	},
+	"u1F611": {
+		"en": "Expressionless Face",
+		"zh": "闈㈡棤琛ㄦ儏",
+		"tag": "\uD83D\uDE11",
+		"position": "-225px 0px"
+	},
+	"u1F648": {
+		"en": "See No Monkey",
+		"zh": "涓嶇湅",
+		"tag": "\uD83D\uDE48",
+		"position": "-2675px 0px"
+	},
+	"u1F649": {
+		"en": "Hear No Monkey",
+		"zh": "涓嶅惉",
+		"tag": "\uD83D\uDE49",
+		"position": "-2700px 0px"
+	},
+	"u1F64A": {
+		"en": "No Speaking",
+		"zh": "闂槾",
+		"tag": "\uD83D\uDE4A",
+		"position": "-2125px 0px"
+	},
+	"u1F47D": {
+		"en": "Alien",
+		"zh": "澶栨槦浜�",
+		"tag": "\uD83D\uDC7D",
+		"position": "-1575px 0px"
+	},
+	"u1F4A9": {
+		"en": "Pile Of Poo",
+		"zh": "渚夸究",
+		"tag": "\uD83D\uDCA9",
+		"position": "-1025px 0px"
+	},
+	"u1F494": {
+		"en": "Broken Heart",
+		"zh": "蹇冪",
+		"tag": "\uD83D\uDC94",
+		"position": "-2600px 0px"
+	},
+	"u1F525": {
+		"en": "Fire",
+		"zh": "鐏�",
+		"tag": "\uD83D\uDD25",
+		"position": "-2625px 0px"
+	},
+	"u1F4A2": {
+		"en": "Anger",
+		"zh": "鎰ゆ€�",
+		"tag": "\uD83D\uDCA2",
+		"position": "-950px 0px"
+	},
+	"u1F4A4": {
+		"en": "Zzz",
+		"zh": "ZZZ",
+		"tag": "\uD83D\uDCA4",
+		"position": "-1000px 0px"
+	},
+	"u1F6AB": {
+		"en": "Prohibited",
+		"zh": "绂佹",
+		"tag": "\uD83D\uDEAB",
+		"position": "-1175px 0px"
+	},
+	"u2B50": {
+		"en": "Star",
+		"zh": "鏄熸槦",
+		"tag": "\u2B50",
+		"position": "-2750px 0px"
+	},
+	"u26A1": {
+		"en": "Lightning Bolt",
+		"zh": "闂數",
+		"tag": "\u26A1",
+		"position": "-2825px 0px"
+	},
+	"u1F319": {
+		"en": "Drescent Moon",
+		"zh": "寮湀",
+		"tag": "\uD83C\uDF19",
+		"position": "-2175px 0px"
+	},
+	"u2600": {
+		"en": "Sunny",
+		"zh": "鏅存湕",
+		"tag": "\u2600",
+		"position": "-3075px 0px"
+	},
+	"u26C5": {
+		"en": "Cloudy",
+		"zh": "澶氫簯",
+		"tag": "\u26C5",
+		"position": "-2900px 0px"
+	},
+	"u2601": {
+		"en": "Cloud",
+		"zh": "浜戝僵",
+		"tag": "\u2601",
+		"position": "-3100px 0px"
+	},
+	"u2744": {
+		"en": "Snowflake",
+		"zh": "闆姳",
+		"tag": "\u2744",
+		"position": "-3175px 0px"
+	},
+	"u2614": {
+		"en": "Umbrella",
+		"zh": "闆ㄤ紴",
+		"tag": "\u2614",
+		"position": "-3125px 0px"
+	},
+	"u26C4": {
+		"en": "Snowman",
+		"zh": "闆汉",
+		"tag": "\u26C4",
+		"position": "-2875px 0px"
+	},
+	"u1F44D": {
+		"en": "Thumbs Up",
+		"zh": "璧�",
+		"tag": "\uD83D\uDC4D",
+		"position": "-1400px 0px"
+	},
+	"u1F44E": {
+		"en": "Thumbs Down",
+		"zh": "鍠濆€掑僵",
+		"tag": "\uD83D\uDC4E",
+		"position": "-1425px 0px"
+	},
+	"u1F91D": {
+		"en": "Handshake",
+		"zh": "鎻℃墜",
+		"tag": "\uD83E\uDD1D",
+		"position": "-3200px 0px"
+	},
+	"u1F44C": {
+		"en": "Ok Hand",
+		"zh": "娌￠棶棰�",
+		"tag": "\uD83D\uDC4C",
+		"position": "-1375px 0px"
+	},
+	"u1F44A": {
+		"en": "Raised Fist",
+		"zh": "涓捐捣鎷冲ご",
+		"tag": "\u270A",
+		"position": "-2975px 0px"
+	},
+	"u270A": {
+		"en": "Oncoming Fist",
+		"zh": "鍑绘嫵",
+		"tag": "\uD83D\uDC4A",
+		"position": "-1350px 0px"
+	},
+	"u270C": {
+		"en": "Victory Hand",
+		"zh": "鑰�",
+		"tag": "\u270C",
+		"position": "-3025px 0px"
+	},
+	"u270B": {
+		"en": "Raised Hand",
+		"zh": "涓炬墜",
+		"tag": "\u270B",
+		"position": "-3000px 0px"
+	},
+	"u1F64F": {
+		"en": "Folded Hands",
+		"zh": "绁堢シ",
+		"tag": "\uD83D\uDE4F",
+		"position": "-2150px 0px"
+	},
+	"u261D": {
+		"en": "Pointing Up",
+		"zh": "绗竴",
+		"tag": "\u261D",
+		"position": "-2925px 0px"
+	},
+	"u1F44F": {
+		"en": "Clapping Hands",
+		"zh": "榧撴帉",
+		"tag": "\uD83D\uDC4F",
+		"position": "-1450px 0px"
+	},
+	"u1F4AA": {
+		"en": "Flexed Biceps",
+		"zh": "鑲岃倝",
+		"tag": "\uD83D\uDCAA",
+		"position": "-1050px 0px"
+	},
+	"u1F46A": {
+		"en": "Family",
+		"zh": "瀹跺涵",
+		"tag": "\uD83D\uDC6A",
+		"position": "-1475px 0px"
+	},
+	"u1F46B": {
+		"en": "Couple",
+		"zh": "鎯呬荆",
+		"tag": "\uD83D\uDC6B",
+		"position": "-1500px 0px"
+	},
+	"u1F47C": {
+		"en": "Baby Angel",
+		"zh": "瀹濊礉澶╀娇",
+		"tag": "\uD83D\uDC7C",
+		"position": "-1550px 0px"
+	},
+	"u1F434": {
+		"en": "Horse",
+		"zh": "椹�",
+		"tag": "\uD83D\uDC34",
+		"position": "-2475px 0px"
+	},
+	"u1F436": {
+		"en": "Dog",
+		"zh": "鐙�",
+		"tag": "\uD83D\uDC36",
+		"position": "-2500px 0px"
+	},
+	"u1F437": {
+		"en": "Pig",
+		"zh": "鐚�",
+		"tag": "\uD83D\uDC37",
+		"position": "-2525px 0px"
+	},
+	"u1F47B": {
+		"en": "Ghost",
+		"zh": "楝�",
+		"tag": "\uD83D\uDC7B",
+		"position": "-1525px 0px"
+	},
+	"u1F339": {
+		"en": "Rose",
+		"zh": "鐜懓",
+		"tag": "\uD83C\uDF39",
+		"position": "-2225px 0px"
+	},
+	"u1F33B": {
+		"en": "Sunflower",
+		"zh": "鍚戞棩钁�",
+		"tag": "\uD83C\uDF3B",
+		"position": "-1250px 0px"
+	},
+	"u1F332": {
+		"en": "Pine Tree",
+		"zh": "鏉炬爲",
+		"tag": "\uD83C\uDF32",
+		"position": "-2200px 0px"
+	},
+	"u1F384": {
+		"en": "Christmas Tree",
+		"zh": "鍦ｈ癁鏍�",
+		"tag": "\uD83C\uDF84",
+		"position": "-2400px 0px"
+	},
+	"u1F381": {
+		"en": "Wrapped Gift",
+		"zh": "绀肩墿",
+		"tag": "\uD83C\uDF81",
+		"position": "-2350px 0px"
+	},
+	"u1F389": {
+		"en": "Party Popper",
+		"zh": "鑱氫細绀艰姳",
+		"tag": "\uD83C\uDF89",
+		"position": "-2425px 0px"
+	},
+	"u1F4B0": {
+		"en": "Money Bag",
+		"zh": "閽辫",
+		"tag": "\uD83D\uDCB0",
+		"position": "-1075px 0px"
+	},
+	"u1F382": {
+		"en": "Birthday Cake",
+		"zh": "鐢熸棩铔嬬硶",
+		"tag": "\uD83C\uDF82",
+		"position": "-2375px 0px"
+	},
+	"u1F356": {
+		"en": "Barbecue",
+		"zh": "BBQ",
+		"tag": "\uD83C\uDF56",
+		"position": "-2275px 0px"
+	},
+	"u1F35A": {
+		"en": "Cooked Rice",
+		"zh": "绫抽キ",
+		"tag": "\uD83C\uDF5A",
+		"position": "-1275px 0px"
+	},
+	"u1F366": {
+		"en": "Ice Cream",
+		"zh": "鍐版穱娣�",
+		"tag": "\uD83C\uDF66",
+		"position": "-2300px 0px"
+	},
+	"u1F36B": {
+		"en": "Chocolate Bar",
+		"zh": "宸у厠鍔�",
+		"tag": "\uD83C\uDF6B",
+		"position": "-1300px 0px"
+	},
+	"u1F349": {
+		"en": "Watermelon",
+		"zh": "瑗跨摐",
+		"tag": "\uD83C\uDF49",
+		"position": "-2250px 0px"
+	},
+	"u1F377": {
+		"en": "Wine Glass",
+		"zh": "绾㈤厭",
+		"tag": "\uD83C\uDF77",
+		"position": "-2325px 0px"
+	},
+	"u1F37B": {
+		"en": "Cheers",
+		"zh": "骞叉澂",
+		"tag": "\uD83C\uDF7B",
+		"position": "-1325px 0px"
+	},
+	"u2615": {
+		"en": "Coffee",
+		"zh": "鍜栧暋",
+		"tag": "\u2615",
+		"position": "-3150px 0px"
+	},
+	"u1F3C0": {
+		"en": "Basketball",
+		"zh": "绡悆",
+		"tag": "\uD83C\uDFC0",
+		"position": "-825px 0px"
+	},
+	"u26BD": {
+		"en": "Soccer Ball",
+		"zh": "瓒崇悆",
+		"tag": "\u26BD",
+		"position": "-2850px 0px"
+	},
+	"u1F3C2": {
+		"en": "Snowboarder",
+		"zh": "鍗曟澘婊戦洩",
+		"tag": "\uD83C\uDFC2",
+		"position": "-850px 0px"
+	},
+	"u1F3A4": {
+		"en": "Microphone",
+		"zh": "楹﹀厠椋�",
+		"tag": "\uD83C\uDFA4",
+		"position": "-750px 0px"
+	},
+	"u1F3B5": {
+		"en": "Musical Note",
+		"zh": "闊充箰",
+		"tag": "\uD83C\uDFB5",
+		"position": "-800px 0px"
+	},
+	"u1F3B2": {
+		"en": "Game Die",
+		"zh": "楠板瓙",
+		"tag": "\uD83C\uDFB2",
+		"position": "-775px 0px"
+	},
+	"u1F004": {
+		"en": "Mahjong Red Dragon",
+		"zh": "楹诲皢",
+		"tag": "\uD83C\uDC04",
+		"position": "-900px 0px"
+	},
+	"u1F451": {
+		"en": "Crown",
+		"zh": "鐜嬪啝",
+		"tag": "\uD83D\uDC51",
+		"position": "-2550px 0px"
+	},
+	"u1F484": {
+		"en": "Lipstick",
+		"zh": "鍙ｇ孩",
+		"tag": "\uD83D\uDC84",
+		"position": "-2575px 0px"
+	},
+	"u1F48B": {
+		"en": "Kiss",
+		"zh": "鍚�",
+		"tag": "\uD83D\uDC8B",
+		"position": "-1650px 0px"
+	},
+	"u1F48D": {
+		"en": "Ring",
+		"zh": "鎴掓寚",
+		"tag": "\uD83D\uDC8D",
+		"position": "-1675px 0px"
+	},
+	"u1F4DA": {
+		"en": "Books",
+		"zh": "涔︾睄",
+		"tag": "\uD83D\uDCDA",
+		"position": "-1100px 0px"
+	},
+	"u1F393": {
+		"en": "Graduation Cap",
+		"zh": "姣曚笟甯�",
+		"tag": "\uD83C\uDF93",
+		"position": "-2450px 0px"
+	},
+	"u270F": {
+		"en": "Pencil",
+		"zh": "閾呯瑪",
+		"tag": "\u270F",
+		"position": "-3050px 0px"
+	},
+	"u1F3E1": {
+		"en": "House With Garden",
+		"zh": "鎴垮瓙",
+		"tag": "\uD83C\uDFE1",
+		"position": "-875px 0px"
+	},
+	"u1F6BF": {
+		"en": "Shower",
+		"zh": "娣嬫荡",
+		"tag": "\uD83D\uDEBF",
+		"position": "-1200px 0px"
+	},
+	"u1F4A1": {
+		"en": "Light Bulb",
+		"zh": "鐏场",
+		"tag": "\uD83D\uDCA1",
+		"position": "-925px 0px"
+	},
+	"u1F4DE": {
+		"en": "Telephone Receiver",
+		"zh": "鐢佃瘽鍚瓛",
+		"tag": "\uD83D\uDCDE",
+		"position": "-1125px 0px"
+	},
+	"u1F4E2": {
+		"en": "Loudspeaker",
+		"zh": "鎵╅煶鍣�",
+		"tag": "\uD83D\uDCE2",
+		"position": "-1150px 0px"
+	},
+	"u1F556": {
+		"en": "Clock",
+		"zh": "琛�",
+		"tag": "\uD83D\uDD56",
+		"position": "-2650px 0px"
+	},
+	"u23F0": {
+		"en": "Alarm Clock",
+		"zh": "闂归挓",
+		"tag": "\u23F0",
+		"position": "-2775px 0px"
+	},
+	"u23F3": {
+		"en": "Hourglass",
+		"zh": "娌欐紡",
+		"tag": "\u23F3",
+		"position": "-2800px 0px"
+	},
+	"u1F4A3": {
+		"en": "Bomb",
+		"zh": "鐐稿脊",
+		"tag": "\uD83D\uDCA3",
+		"position": "-975px 0px"
+	},
+	"u1F52B": {
+		"en": "Pistol",
+		"zh": "鎵嬫灙",
+		"tag": "\uD83D\uDD2B",
+		"position": "-1700px 0px"
+	},
+	"u1F48A": {
+		"en": "Capsule",
+		"zh": "鑽�",
+		"tag": "\uD83D\uDC8A",
+		"position": "-1625px 0px"
+	},
+	"u1F680": {
+		"en": "Rocket",
+		"zh": "鐏",
+		"tag": "\uD83D\uDE80",
+		"position": "-2725px 0px"
+	},
+	"u1F30F": {
+		"en": "Globe",
+		"zh": "鍦扮悆",
+		"tag": "\uD83C\uDF0F",
+		"position": "-1225px 0px"
+	}
+};
+let EmojiList = []
+
+function setEmojiList() {
+	EmojiList.length = 0;
+	for (var unicode in EmojiFactory) {
+		var detail = EmojiFactory[unicode];
+		if (detail.tag) {
+			var lang = 'en';
+			var symbol = detail[lang];
+			EmojiList.push({
+				unicode: unicode,
+				symbol: '[' + symbol + ']',
+				emoji: detail.tag,
+			});
+		}
+	}
+}
+setEmojiList()
+export default EmojiList
diff --git a/store/modules/im.js b/store/modules/im.js
index 770eb7e..4dda8e8 100644
--- a/store/modules/im.js
+++ b/store/modules/im.js
@@ -3,7 +3,7 @@ import im from "@/utils/im/index.js"
 export default {
     state: {
         contacts: {},
-        myInfo: {}
+        myInfo: {}
     },
     getters: {
         contacts(state) {
@@ -44,7 +44,7 @@ export default {
                 name: contactInfo.name,
                 portraitUrl: contactInfo.portraitUrl
             }
-        }
+        }
     },
     actions: {
         setSenderInfo({