开源在线客服系统-客服系统历史消息记录功能-点击加载历史聊天记录-分页展 ...

之前开发的开源在线客服系统gofly，访客端一直没有展示历史聊天记录，最近抽时间给加上了
实现的效果就是，访客刚进聊天界面，如果存在历史记录，按5条分页，默认查询加载5条聊天记录。
如果历史记录超过5条，顶部出现 “点击加载更多” 按钮，点击按钮就分页查询历史记录，堆入消息记录数组里。
 
访客前端js部分，因为历史记录里需要区分是客服发的，还是访客发的，所以进行了判断。
js数组unshift的意思就是往数组前面插入元素

1.         //获取信息列表
2.         getHistoryMessage:function(){
3.             let params={
4.                 page:this.messages.page,
5.                 pagesize: this.messages.pagesize,
6.                 visitor_id: this.visitor.visitor_id,
7.             }
8.             let _this=this;
9.             $.get("/2/messagesPages",params,function(res){
10.                 let msgList=res.result.list;
11.                 if(msgList.length>=_this.messages.pagesize){
12.                     _this.showLoadMore=true;
13.                 }else{
14.                     _this.showLoadMore=false;
15.                 }
16.                 for(let i in msgList){
17.                     let item = msgList[i];
18.                     let content = {}
19.                     if (item["mes_type"] == "kefu") {
20.                         item.is_kefu = true;
21.                         item.avator=item["kefu_avator"];
23.                     } else {
24.                         item.is_kefu = false;
25.                         item.avator=item["visitor_avator"];
26.                     }
27.                     item.time = item["create_time"];
28.                     _this.msgList.unshift(item);
29.                 }
30.                 if(_this.messages.page==1){
31.                     _this.scrollBottom();
32.                 }
33.                 _this.messages.page++;
34.             });
35.         },

复制代码

 
后端golang gin框架部分：
 

1. func GetMessagespages(c *gin.Context) {
2.     visitorId := c.Query("visitor_id")
3.     page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
4.     pageSize, _ := strconv.Atoi(c.DefaultQuery("pagesize", "10"))
5.     if pageSize > 20 {
6.         pageSize = 20
7.     }
8.     count := models.CountMessage("visitor_id = ?", visitorId)
9.     list := models.FindMessageByPage(uint(page), uint(pageSize), "message.visitor_id = ?", visitorId)
10.     c.JSON(200, gin.H{
11.         "code": 200,
12.         "msg":  "ok",
13.         "result": gin.H{
14.             "count":    count,
15.             "page":     page,
16.             "list":     list,
17.             "pagesize": pageSize,
18.         },
19.     })
20. }

复制代码

 
models部分，你可以参考我的代码，但是我的和你的业务表结构不一致，自己修改才能使用

1. //查询条数
2. func CountMessage(query interface{}, args ...interface{}) uint {
3.     var count uint
4.     DB.Model(&Message{}).Where(query, args...).Count(&count)
5.     return count
6. }
7. //分页查询
8. func FindMessageByPage(page uint, pagesize uint, query interface{}, args ...interface{}) []*MessageKefu {
9.     offset := (page - 1) * pagesize
10.     if offset < 0 {
11.         offset = 0
12.     }
13.     var messages []*MessageKefu
14.     DB.Table("message").Select("message.*,visitor.avator visitor_avator,visitor.name visitor_name,user.avator kefu_avator,user.nickname kefu_name").Offset(offset).Joins("left join user on message.kefu_id=user.name").Joins("left join visitor on visitor.visitor_id=message.visitor_id").Where(query, args...).Limit(pagesize).Order("message.id desc").Find(&messages)
15.     for _, mes := range messages {
16.         mes.CreateTime = mes.CreatedAt.Format("2006-01-02 15:04:05")
17.     }
18.     return messages
19. }

复制代码

实现的效果图

 
 
 
这个客服系统是开源的，但是不能用于任何商业性项目。
如果需要商用，可以联系我，购买部署多用户商务版
官网地址：gofly.v1kf.com
开源地址：https://github.com/taoshihan1991/go-fly
  开源地址：唯一客服（开源学习版）   官网地址：唯一客服官网
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！