访客点击加载更多历史消息

master
taoshihan 2 years ago
parent 4711e1812c
commit 2c216b8c9f

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

@ -18,13 +18,16 @@ new Vue({
timer:null, timer:null,
sendDisabled:false, sendDisabled:false,
flyLang:GOFLY_LANG[LANG], flyLang:GOFLY_LANG[LANG],
textareaFocused:false,
replys:[],
showIconBtns:false, showIconBtns:false,
showFaceIcon:false, showFaceIcon:false,
isIframe:false, isIframe:false,
kefuInfo:{}, kefuInfo:{},
showLoadMore:false, showLoadMore:false,
messages:{
page:1,
pagesize:5,
list:[],
},
}, },
methods: { methods: {
//初始化websocket //初始化websocket
@ -83,7 +86,7 @@ new Vue({
content.avator = msg.avator; content.avator = msg.avator;
content.name = msg.name; content.name = msg.name;
content.content =replaceContent(msg.content); content.content =replaceContent(msg.content);
content.is_kefu = false; content.is_kefu = true;
content.time = msg.time; content.time = msg.time;
this.msgList.push(content); this.msgList.push(content);
@ -147,7 +150,7 @@ new Vue({
content.avator=_this.visitor.avator; content.avator=_this.visitor.avator;
content.content = replaceContent(_this.messageContent); content.content = replaceContent(_this.messageContent);
content.name = _this.visitor.name; content.name = _this.visitor.name;
content.is_kefu = true; content.is_kefu = false;
content.time = _this.getNowDate(); content.time = _this.getNowDate();
content.show_time=false; content.show_time=false;
_this.msgList.push(content); _this.msgList.push(content);
@ -206,6 +209,7 @@ new Vue({
return; return;
} }
_this.visitor=res.result; _this.visitor=res.result;
_this.getHistoryMessage();
_this.setCache("visitor",res.result); _this.setCache("visitor",res.result);
//_this.getMesssagesByVisitorId(); //_this.getMesssagesByVisitorId();
_this.initConn(); _this.initConn();
@ -216,8 +220,39 @@ 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"];
_this.msgList.unshift(item);
}
if(_this.messages.page==1){
_this.scrollBottom();
}
_this.messages.page++;
});
}, },
//滚动到底部 //滚动到底部
scrollBottom:function(){ scrollBottom:function(){
@ -226,31 +261,6 @@ new Vue({
$('.chatVisitorPage').scrollTop($(".chatVisitorPage")[0].scrollHeight); $('.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() {// 获取日期 getNowDate : function() {// 获取日期
var d = new Date(new Date()); var d = new Date(new Date());
@ -284,6 +294,7 @@ new Vue({
avator:_this.kefuInfo.avatar, avator:_this.kefuInfo.avatar,
name :_this.kefuInfo.nickname, name :_this.kefuInfo.nickname,
time:_this.getNowDate(), time:_this.getNowDate(),
is_kefu:true,
} }
_this.msgList.push(msg); _this.msgList.push(msg);
_this.scrollBottom(); _this.scrollBottom();
@ -470,15 +481,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:function(){
alertSound("chatMessageAudio",'/static/images/alert2.ogg'); alertSound("chatMessageAudio",'/static/images/alert2.ogg');
@ -533,6 +535,5 @@ new Vue({
//滚动底部 //滚动底部
//this.scrollBottom(); //this.scrollBottom();
this.getAutoReply();
} }
}) })

@ -32,18 +32,18 @@
<div class="chatEntBox"> <div class="chatEntBox">
<div class="chatContext chatVisitorPage"> <div class="chatContext chatVisitorPage">
<div class="chatBox"> <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> </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 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> <el-avatar style="margin-right:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
<div class="chatMsgContent"> <div class="chatMsgContent">
<div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div> <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
</div> </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> <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> <el-avatar style="margin-left:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
</div> </div>

Loading…
Cancel
Save