客服界面访客列表提示最新消息

static/css/common.css

@@ -236,6 +236,8 @@
 }
 .onlineUsers:hover,.onlineUsers.cur{background-color: #f0f9eb;color: #67C23A;}
 .imgGray {-webkit-filter: grayscale(100%);-ms-filter: grayscale(100%);filter: grayscale(100%);filter: gray;color:#888;}
+.hasLastMsg{line-height: normal;}
+.lastNewMsg{font-size: 12px;color: #7f7f7f;margin-top: 4px;}
 /*客服页*/
 .chatKfPageApp{
     max-width: 800px;

static/html/chat_main.html

@@ -70,12 +70,13 @@
                         <el-tabs v-model="leftTabActive" @tab-click="handleTabClick">
                             <el-tab-pane label="在线用户" name="first">
                                 <el-row  v-for="item in users" :key="item.uid" class="">
-                                    <div style="cursor:pointer" class="onlineUsers" v-bind:class="{'cur': item.uid==currentGuest }" v-on:click="talkTo(item.uid,item.username)">
+                                    <div 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-col>
                                         <el-col :span="16">
-                                            <{item.username}>
+                                            <div><{item.username}></div>
+                                            <div class="lastNewMsg"><{item.last_message}></div>
                                         </el-col>
                                     </div>
                                 </el-row>

static/js/chat-main.js

@@ -142,7 +142,11 @@ var app=new Vue({
                     notification.close();
                     _this.talkTo(msg.id,msg.name);
                 });
-
+                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.scrollBottom();
             }
         },
@@ -191,6 +195,7 @@ var app=new Vue({
         },
         //处理当前在线用户列表
         addOnlineUser:function (retData) {
+            retData.last_message="新访客";
             let vid=retData.uid;
             this.users.push(retData);
             for(let i=0;i<this.visitors.length;i++){
@@ -217,13 +222,16 @@ var app=new Vue({
         },
         //处理当前在线用户列表
         handleOnlineUsers:function (retData) {
-            this.users = retData;
             if (this.currentGuest == "") {
                 this.chatTitle = "连接成功,等待处理中...";
             }
             this.usersMap=[];
             for(let i=0;i<retData.length;i++){
                 this.usersMap[retData[i].uid]=retData[i].username;
+                retData[i].last_message="新访客";
+            }
+            if(this.users.length==0){
+                this.users = retData;
             }
             for(let i=0;i<this.visitors.length;i++){
                 let vid=this.visitors[i].visitor_id;