显示new

static/html/chat_main.html

@@ -43,7 +43,9 @@
                                 <el-row  v-for="item in users" :key="item.uid" class="">
                                     <div :title="item.last_message" style="cursor:pointer" class="onlineUsers hasLastMsg" v-bind:class="{'cur': item.uid==currentGuest }" v-on:click="talkTo(item.uid,item.username)">
                                         <el-col :span="4">
-                                            <el-avatar :size="40" :src="item.avator"></el-avatar>
+                                            <el-badge value="new" :hidden="item.hidden_new_message" class="item">
+                                                <el-avatar :size="40" :src="item.avator"></el-avatar>
+                                            </el-badge>
                                         </el-col>
                                         <el-col :span="16">
                                             <div style="height:20px;overflow: hidden"><{item.username}></div>

static/js/chat-main.js

@@ -134,6 +134,7 @@ var app=new Vue({
                 for(let i=0;i<this.users.length;i++){
                     if(this.users[i].uid==msg.id){
                         this.$set(this.users[i],'last_message',msg.content);
+                        this.$set(this.users[i],'hidden_new_message',false);
                     }
                 }
                 this.scrollBottom();
@@ -165,6 +166,11 @@ var app=new Vue({
             this.getVistorInfo(guestId);
             //获取当前客户消息
             this.getMesssagesByVisitorId(guestId);
+            for(var i=0;i<this.users.length;i++){
+                if(this.users[i].uid==guestId){
+                    this.$set(this.users[i],'hidden_new_message',true);
+                }
+            }
         },
         //发送给客户
         chatToUser() {