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

static/css/common.css

@@ -190,7 +190,7 @@
     overflow-y: auto;
 }
 .chatVisitorPage .chatBox{
-    padding: 0 4px;
+    padding: 5px 4px;
 }
 .chatBox .el-col{margin:10px 0;}
 .chatUser{
@@ -372,7 +372,7 @@ a{color: #07a9fe;text-decoration: none;}
 .visitorIconBox{
     display: flex;
     align-items: center;
-    color: rgb(126, 126, 126);
+    color:#9c9c9c;
 }
 .visitorIconBox .iconBtn{
     margin-right: 10px;

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

@@ -18,13 +18,16 @@ new Vue({
         timer:null,
         sendDisabled:false,
         flyLang:GOFLY_LANG[LANG],
-        textareaFocused:false,
-        replys:[],
         showIconBtns:false,
         showFaceIcon:false,
         isIframe:false,
         kefuInfo:{},
         showLoadMore:false,
+        messages:{
+            page:1,
+            pagesize:5,
+            list:[],
+        },
     },
     methods: {
         //初始化websocket
@@ -83,7 +86,7 @@ new Vue({
                 content.avator = msg.avator;
                 content.name = msg.name;
                 content.content =replaceContent(msg.content);
-                content.is_kefu = false;
+                content.is_kefu = true;
                 content.time = msg.time;
                 this.msgList.push(content);
 
@@ -147,7 +150,7 @@ new Vue({
             content.avator=_this.visitor.avator;
             content.content = replaceContent(_this.messageContent);
             content.name = _this.visitor.name;
-            content.is_kefu = true;
+            content.is_kefu = false;
             content.time = _this.getNowDate();
             content.show_time=false;
             _this.msgList.push(content);
@@ -206,6 +209,7 @@ new Vue({
                         return;
                     }
                     _this.visitor=res.result;
+                    _this.getHistoryMessage();
                     _this.setCache("visitor",res.result);
                     //_this.getMesssagesByVisitorId();
                     _this.initConn();
@@ -216,8 +220,40 @@ new Vue({
             // }
         },
         //获取信息列表
-        loadMoreMessages:function(){
+        getHistoryMessage:function(){
+            let params={
+                page:this.messages.page,
+                pagesize: this.messages.pagesize,
+                visitor_id: this.visitor.visitor_id,
+            }
+            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"];
 
+                    } else {
+                        item.is_kefu = false;
+                        item.avator=item["visitor_avator"];
+                    }
+                    item.time = item["create_time"];
+                    item.content=replaceContent(item["content"]);
+                    _this.msgList.unshift(item);
+                }
+                if(_this.messages.page==1){
+                    _this.scrollBottom();
+                }
+                _this.messages.page++;
+            });
         },
         //滚动到底部
         scrollBottom:function(){
@@ -226,31 +262,6 @@ new Vue({
                 $('.chatVisitorPage').scrollTop($(".chatVisitorPage")[0].scrollHeight);
             });
         },
-        //软键盘问题
-        textareaFocus:function(){
-            this.scrollBottom()
-            if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
-                $(".chatContext").css("margin-bottom","0");
-                $(".chatBoxSend").css("position","static");
-                this.textareaFocused=true;
-            }
-        },
-        textareaBlur:function(){
-            if(this.textareaFocused&&/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
-                var chatBoxSendObj=$(".chatBoxSend");
-                var chatContextObj=$(".chatContext");
-                if(this.textareaFocused&&chatBoxSendObj.css("position")!="fixed"){
-                    chatContextObj.css("margin-bottom","105px");
-                    chatBoxSendObj.css("position","fixed");
-                    this.textareaFocused=false;
-                }
-
-            }
-        },
-        sendReply:function(title){
-            this.messageContent=title;
-            this.chatToUser();
-        },
         //获取日期
         getNowDate : function() {// 获取日期
             var d = new Date(new Date());
@@ -284,6 +295,7 @@ new Vue({
                     avator:_this.kefuInfo.avatar,
                     name :_this.kefuInfo.nickname,
                     time:_this.getNowDate(),
+                    is_kefu:true,
                 }
                 _this.msgList.push(msg);
                 _this.scrollBottom();
@@ -470,15 +482,6 @@ new Vue({
                 }
             });
         },
-        //自动
-        getAutoReply:function(){
-            var _this=this;
-            $.get("/autoreply?kefu_id="+KEFU_ID,function(res) {
-                if(res.code==200){
-                    _this.replys=res.result;
-                }
-            });
-        },
         //提示音
         alertSound:function(){
             alertSound("chatMessageAudio",'/static/images/alert2.ogg');
@@ -533,6 +536,5 @@ new Vue({
         //滚动底部
         //this.scrollBottom();
 
-        this.getAutoReply();
     }
 })

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>

static/templates/chat_page.html

@@ -32,18 +32,18 @@
         <div class="chatEntBox">
             <div class="chatContext chatVisitorPage">
                 <div class="chatBox">
-                    <div class="chatNotice" v-on:click="loadMoreMessages" v-show="showLoadMore">
+                    <div class="chatNotice" v-on:click="getHistoryMessage" v-show="showLoadMore">
-                        <a class="chatNoticeContent">点击加载更多记录</a>
+                        <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}">
+                    <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==false}">
                         <div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
-                        <div v-if="v.is_kefu!=true" style="display: flex;">
+                        <div v-if="v.is_kefu==true" style="display: flex;">
                             <el-avatar style="margin-right:10px;flex-shrink: 0;"  :size="36" :src="v.avator"></el-avatar>
                             <div class="chatMsgContent">
                                 <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
                             </div>
                         </div>
-                        <div class="kefuMe" v-if="v.is_kefu==true" style="display: flex;justify-content: flex-end;">
+                        <div class="kefuMe" v-if="v.is_kefu==false" style="display: flex;justify-content: flex-end;">
                             <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
                             <el-avatar style="margin-left:10px;flex-shrink: 0;"  :size="36" :src="v.avator"></el-avatar>
                         </div>