客服端历史消息记录也分页加载

static/js/chat-main.js

@@ -56,6 +56,12 @@ var app=new Vue({
         ipBlacks:[],
         sendDisabled:false,
         showFaceIcon:false,
+        showLoadMore:false,
+        messages:{
+            page:1,
+            pagesize:15,
+            list:[],
+        },
     },
     methods: {
         //跳转
@@ -185,7 +191,10 @@ var app=new Vue({
             //获取当前访客信息
             this.getVistorInfo(guestId);
             //获取当前客户消息
-            this.getMesssagesByVisitorId(guestId);
+            this.messages.page=1;
+            this.msgList=[];
+            this.getHistoryMessage();
+            //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);
@@ -365,6 +374,42 @@ var app=new Vue({
                 }
             });
         },
+        getHistoryMessage(){
+            let params={
+                page:this.messages.page,
+                pagesize: this.messages.pagesize,
+                visitor_id: this.currentGuest,
+            }
+            let _this=this;
+            $.get("/2/messagesPages",params,function(res){
+                let msgList=res.result.list;
+                if(msgList.length>=_this.messages.pagesize){
+                    _this.showLoadMore=true;
+                }else{
+                    _this.showLoadMore=false;
+                }
+                for(let i in msgList){
+                    let item = msgList[i];
+                    //let content = {}
+                    if (item["mes_type"] == "kefu") {
+                        item.is_kefu = true;
+                        item.avator=item["kefu_avator"];
+                        item.name=item["kefu_name"];
+                    } else {
+                        item.is_kefu = false;
+                        item.avator=item["visitor_avator"];
+                        item.name=item["visitor_name"];
+                    }
+                    item.content=replaceContent(item["content"]);
+                    item.time = item["create_time"];
+                    _this.msgList.unshift(item);
+                }
+                if(_this.messages.page==1){
+                    _this.scrollBottom();
+                }
+                _this.messages.page++;
+            });
+        },
         //获取信息列表
         getMesssagesByVisitorId(visitorId,isAll){
             let _this=this;

static/js/chat-page.js

@@ -246,6 +246,7 @@ new Vue({
                         item.avator=item["visitor_avator"];
                     }
                     item.time = item["create_time"];
+                    item.content=replaceContent(item["content"]);
                     _this.msgList.unshift(item);
                 }
                 if(_this.messages.page==1){

static/templates/chat_main.html

@@ -92,6 +92,9 @@
                             <el-button v-on:click="closeVisitor(visitor.visitor_id)" size="small" type="success" plain icon="el-icon-close">结束</el-button>
                         </div>
                         <div class="chatBox">
+                            <div style="text-align: center;" v-on:click="getHistoryMessage" v-show="showLoadMore">
+                                <a href="javascript:;" class="chatNoticeContent" style="color: #07a9fe;">点击加载更多记录</a>
+                            </div>
                             <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
                                 <div class="chatTime"><{v.time}></div>
                                 <div class="chatRow">
@@ -123,9 +126,6 @@
                                 <el-tooltip content="上传附件" placement="top">
                                     <div  class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/uploadfile')" style="font-size: 26px;"></div>
                                 </el-tooltip>
-                                <el-tooltip content="消息记录" placement="top">
-                                    <div  class="iconBtn el-icon-chat-line-round" v-on:click="getMesssagesByVisitorId(visitor.visitor_id,true)" style="font-size: 24px;"></div>
-                                </el-tooltip>
 
                             </div>
                             <div class="clear"></div>