当访客一进去聊天界面以后,需要获取一下历史消息展示到界面,并且需要能分页的原理展示

vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表_ios

 

 

在顶部有一个加载更多记录的按钮,点击就能按分页获取数据

//展示历史消息记录
            getHistoryList(){
                var _this=this;
                let pagesize=5;
                this.$axios.get(this.ApiHost+'/2/messages_page',{params:{
                    pagesize:5,
                    ent_id:this.visitor.ent_id,
                    page:this.historyList.page,
                    visitor_id:this.visitor.visitor_id,
                }}).then(function (response) {
                    let result=response.data.result;
                    let msgList=result.list;
                    if(msgList.length>=pagesize){
                        _this.historyList.moreMessageBtn=true;
                    }else{
                        _this.historyList.moreMessageBtn=false;
                    }
                    for(var i=0;i<msgList.length;i++) {
                        let row = msgList[i];
                        if (row["mes_type"] == "kefu") {
                            row.isme = false;
                        } else {
                            row.isme = true;
                        }
                        row.time = tools.shortTime(row["time"]);
                        row.show_time=true;
                        _this.msgList.unshift(row);
                    }
                    _this.historyList.page++;
                }).catch(function (error) {
                });
            },

 

定义的一个函数 getHistoryList,用于展示消息记录。它通过 axios.get 发送一个 GET 请求到接口 /2/messages_page,并传递了一些参数,如:页面大小、企业 ID、当前页码、访客 ID 等。

如果请求成功,则返回的数据会被处理:

  • 检查消息列表的长度,若长度大于等于页面大小,则 moreMessageBtn 设为 true,否则设为 false
  • 遍历消息列表:
  • 如果消息类型是 "kefu",说明是客服发的消息,设置 ismefalse;否则,说明是访客发的消息,设置 ismetrue
  • 使用工具库中的 shortTime 函数处理消息的时间,并存到 time 属性中。
  • 设置消息的 show_time 属性为 true
  • 把处理过的消息插入到消息列表的开头。
  • 把页面变量 historyList.page 加 1。

唯一在线客服系统

十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》

一款基于Golang+Vue开发的在线客服系统,软件著作权编号:2021SR1462600。一套可私有化部署的网站在线客服系统,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。


开源地址:唯一客服(开源学习版)