vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表
2023-03-07 09:42:41 时间
当访客一进去聊天界面以后,需要获取一下历史消息展示到界面,并且需要能分页的原理展示
在顶部有一个加载更多记录的按钮,点击就能按分页获取数据
//展示历史消息记录
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"
,说明是客服发的消息,设置isme
为false
;否则,说明是访客发的消息,设置isme
为true
。 - 使用工具库中的
shortTime
函数处理消息的时间,并存到time
属性中。 - 设置消息的
show_time
属性为true
。 - 把处理过的消息插入到消息列表的开头。
- 如果消息类型是
- 把页面变量
historyList.page
加 1。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的