'0819-c01'

src/views/service/chat/components/aside.vue

@@ -42,6 +42,9 @@
         </div>
         <div class="infinite-list-wrapper" style="overflow: auto">
             <div>
+                <div class="" v-if="chatUserList.list.length == 0">
+                    
+                </div>
                 <div class="chat-loading-sk" v-for="(item,indx) in 10" v-if="chatUserList.loading && chatUserList.list.length == 0">
                     <el-skeleton :animated="true">
                         <template #template>

src/views/service/chat/components/chatBody.vue

@@ -80,6 +80,18 @@
                                 <div class="name">表情</div>
                             </div>
                         </template>
+                        <div class="swiper-item-box">
+                            <div class="flex_r swiper-item-box-l" v-for="(im, ix) in emojiList" :key="ix">
+                                <div
+                                    class="icon_ emoji-items"
+                                    v-for="(item, index) in im"
+                                    :key="index"
+                                    :style="{ opacity: ix === opacityGroup && (index == 5 || index == 6 || index == 7) ? opacity : 1 }"
+                                >
+                                    <el-image class="img" :src="emojiUrl + item.image" @click="chooseEmoji(item.text)"></el-image>
+                                </div>
+                            </div>
+                        </div>
                     </el-popover>
                 </div>
                 <div class="emoji-item">
@@ -152,6 +164,7 @@ import { Push } from "@/utils/push";
 export default {
     data () {
         return {
+            emojiUrl,
             userLoading:true,
             inputMessage:"",
             isChat:false,
@@ -177,8 +190,8 @@ export default {
             uploadImg:"",
 			pushData: {
 				obj:null,
-				auth:"http://192.168.3.16:9881/plugin/webman/push/auth",
-				url: 'ws://192.168.3.16:3131',
+				auth:"http://192.168.2.142:9881/plugin/webman/push/auth",
+				url: 'ws://192.168.2.142:3131',
 			},
         }
     },
@@ -198,6 +211,7 @@ export default {
         chatData: { type: Object, default: () => {} }
     },
     created(){
+        this.initEmoji()
         this.initPush();
     },
     watch: {
@@ -354,6 +368,9 @@ export default {
             this.previewImageUrl = '';
             this.fileList = [];
         },
+        chooseEmoji(data){
+            this.inputMessage += data;
+        },
         handleKeyCode(event){
             if (event.keyCode == 13) {
                 if (!event.ctrlKey) {
@@ -521,6 +538,65 @@ export default {
         width: 170px;
     }
 }
+.flex_r {
+    display: flex;
+    flex-direction: row;
+}
+.swiper-item-box {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-height: 300px;
+    overflow: auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    .swiper-item-box-l {
+        width: calc(100%);
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+    .swiper-item-box-r {
+        width: calc(37.5%);
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+
+    .emoji-item {
+        width: calc(12.5%);
+        height: calc(12.5%);
+        flex-shrink: 0;
+        transition: all 0.1s;
+        padding: 10px 0;
+        
+        .img {
+            width: 55%;
+            height: 55%;
+            cursor: pointer;
+        }
+        &:hover {
+            background-color: #f8f8f8;
+        }
+    }
+}
+.emoji-items {
+        width: calc(12.5%);
+        height: calc(12.5%);
+        flex-shrink: 0;
+        transition: all 0.1s;
+        padding: 10px 0;
+        text-align: center;
+        .img {
+            width: 55%;
+            height: 55%;
+            cursor: pointer;
+        }
+        &:hover {
+            background-color: #f8f8f8;
+        }
+    }
 .msg-time {
 	width: 100%;
 	color: #a3a3a3;