|
@@ -200,13 +200,35 @@
|
|
|
|
|
|
|
|
<!--············ 和人工会话聊天模块 ··············-->
|
|
<!--············ 和人工会话聊天模块 ··············-->
|
|
|
<div v-if="machineAndAtl == 100">
|
|
<div v-if="machineAndAtl == 100">
|
|
|
-
|
|
|
|
|
|
|
+ <!--历史消息-->
|
|
|
|
|
+ <div v-for="(item,index) in hisSviceChat" :key="index">
|
|
|
|
|
+ <div class="conversationBox">
|
|
|
|
|
+ <div class="timer">{{item.time_line | formatDate}}</div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div class="conversation row">
|
|
|
|
|
+ <div class="headImg">
|
|
|
|
|
+ <img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
|
|
|
|
|
+ alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cont left" >
|
|
|
|
|
+ <div v-if="item.content != ''" v-html="item.content.text"></div>
|
|
|
|
|
+ <div v-else slot="file">
|
|
|
|
|
+ <img class="el-upload-list__item-thumbnail"
|
|
|
|
|
+ @click="handlePictureCardPreview(url+item.imgUrl)"
|
|
|
|
|
+ style="width:100%;height:auto;border-radius: 10px;"
|
|
|
|
|
+ :src="url+item.imgUrl" alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width:66px;"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<!-- 人工客服回复消息 -->
|
|
<!-- 人工客服回复消息 -->
|
|
|
<div v-for="item in customerSviceChat" :key="item.id">
|
|
<div v-for="item in customerSviceChat" :key="item.id">
|
|
|
- <!-- tem.cont != '' -->
|
|
|
|
|
<div class="conversationBox" v-if="item.type == 'service' ">
|
|
<div class="conversationBox" v-if="item.type == 'service' ">
|
|
|
- <div class="timer" v-html="item.time"></div>
|
|
|
|
|
|
|
+ <div class="timer" v-html="item.timer"></div>
|
|
|
<div class="row">
|
|
<div class="row">
|
|
|
<div class="conversation row">
|
|
<div class="conversation row">
|
|
|
<div class="headImg">
|
|
<div class="headImg">
|
|
@@ -259,6 +281,13 @@
|
|
|
<span>会话转接成功</span>
|
|
<span>会话转接成功</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 历史会话 -->
|
|
|
|
|
+ <div class="promptBox" v-if="item.str == 'historyMsg'">
|
|
|
|
|
+ <div class="prompt help">
|
|
|
|
|
+ <span>{{historyMsgtext}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 点击图片放大 -->
|
|
<!-- 点击图片放大 -->
|
|
@@ -512,6 +541,7 @@
|
|
|
serviceList: [], //后台推送的人工客服列表
|
|
serviceList: [], //后台推送的人工客服列表
|
|
|
customerWelCome: '', // 客服欢迎语
|
|
customerWelCome: '', // 客服欢迎语
|
|
|
customerSviceChat: [], // 客服会话信息
|
|
customerSviceChat: [], // 客服会话信息
|
|
|
|
|
+ hisSviceChat:[],
|
|
|
serviceImg: '',
|
|
serviceImg: '',
|
|
|
timerVote: '', //存储上一次时间
|
|
timerVote: '', //存储上一次时间
|
|
|
curtTimer: '',//当前时间
|
|
curtTimer: '',//当前时间
|
|
@@ -536,6 +566,8 @@
|
|
|
allLoading: true, //整个页面加载中
|
|
allLoading: true, //整个页面加载中
|
|
|
webTime: '',//网络时间
|
|
webTime: '',//网络时间
|
|
|
changeKeFu: false, //客服转接
|
|
changeKeFu: false, //客服转接
|
|
|
|
|
+ historyMsg: false, // 是否展示历史信息
|
|
|
|
|
+ historyMsgtext:"", // 历史信息内容提示
|
|
|
/*****************websockt心跳变量*******************/
|
|
/*****************websockt心跳变量*******************/
|
|
|
reconnectData: null,
|
|
reconnectData: null,
|
|
|
lockReconnect: false, //避免重复连接,因为onerror之后会立即触发 onclose
|
|
lockReconnect: false, //避免重复连接,因为onerror之后会立即触发 onclose
|
|
@@ -554,9 +586,36 @@
|
|
|
avatarImg: fk
|
|
avatarImg: fk
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ filters: {
|
|
|
|
|
+ formatDate: function (value) {
|
|
|
|
|
+ console.log(value);
|
|
|
|
|
+ let date = new Date(value);
|
|
|
|
|
+ let y = date.getFullYear();
|
|
|
|
|
+ let MM = date.getMonth() + 1;
|
|
|
|
|
+ MM = MM < 10 ? ('0' + MM) : MM;
|
|
|
|
|
+ let d = date.getDate();
|
|
|
|
|
+ d = d < 10 ? ('0' + d) : d;
|
|
|
|
|
+ let h = date.getHours();
|
|
|
|
|
+ h = h < 10 ? ('0' + h) : h;
|
|
|
|
|
+ let m = date.getMinutes();
|
|
|
|
|
+ m = m < 10 ? ('0' + m) : m;
|
|
|
|
|
+ let s = date.getSeconds();
|
|
|
|
|
+ s = s < 10 ? ('0' + s) : s;
|
|
|
|
|
+ return h + ':' + m;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
// 退出聊天
|
|
// 退出聊天
|
|
|
exit(){
|
|
exit(){
|
|
|
|
|
+ this.websocketsend(JSON.stringify({
|
|
|
|
|
+ type: 'kfCloseUser',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ to_id: this.service.kf_id,
|
|
|
|
|
+ kf_id: this.user_info.id,
|
|
|
|
|
+ group_id: this.service.serverInfo.group,
|
|
|
|
|
+ conversationId:this.service.conversationId
|
|
|
|
|
+ }
|
|
|
|
|
+ }))
|
|
|
this.goBack();
|
|
this.goBack();
|
|
|
},
|
|
},
|
|
|
// 关闭评价框按钮
|
|
// 关闭评价框按钮
|
|
@@ -717,6 +776,7 @@
|
|
|
this.time = '';
|
|
this.time = '';
|
|
|
this.returnTimer = '';
|
|
this.returnTimer = '';
|
|
|
this.service_on = true;
|
|
this.service_on = true;
|
|
|
|
|
+ this.historyMsg = false,
|
|
|
// this.automaticRolling();
|
|
// this.automaticRolling();
|
|
|
this.customerSviceChat = [];
|
|
this.customerSviceChat = [];
|
|
|
this.reconnect();
|
|
this.reconnect();
|
|
@@ -983,7 +1043,8 @@
|
|
|
}
|
|
}
|
|
|
this.artAndLeave = 10;
|
|
this.artAndLeave = 10;
|
|
|
this.machineAndAtl = 100;
|
|
this.machineAndAtl = 100;
|
|
|
- console.log(server, '============客服信息')
|
|
|
|
|
|
|
+ // console.log(server, '============客服信息')
|
|
|
|
|
+ this.service = server;
|
|
|
this.serviceImg = server.serverInfo.avatar;
|
|
this.serviceImg = server.serverInfo.avatar;
|
|
|
this.consult = false;
|
|
this.consult = false;
|
|
|
this.evlShow = false;
|
|
this.evlShow = false;
|
|
@@ -1082,6 +1143,7 @@
|
|
|
}
|
|
}
|
|
|
// 客服掉线.
|
|
// 客服掉线.
|
|
|
if (redata.message_type == 'serviceoffline') {
|
|
if (redata.message_type == 'serviceoffline') {
|
|
|
|
|
+ console.log(redata)
|
|
|
this.service_on = false;
|
|
this.service_on = false;
|
|
|
this.serverNotOnlin = true;
|
|
this.serverNotOnlin = true;
|
|
|
this.closeByServer = true;
|
|
this.closeByServer = true;
|
|
@@ -1122,10 +1184,14 @@
|
|
|
// 历史信息
|
|
// 历史信息
|
|
|
if(redata.message_type == 'toOld'){
|
|
if(redata.message_type == 'toOld'){
|
|
|
console.log(redata,'历史信息');
|
|
console.log(redata,'历史信息');
|
|
|
- let obj = redata.data.chatLog;
|
|
|
|
|
- let text = redata.data.content;
|
|
|
|
|
- this.customerSviceChat.push(text)
|
|
|
|
|
- this.customerSviceChat.push(obj);
|
|
|
|
|
|
|
+ let obj = redata
|
|
|
|
|
+ this.historyMsg = true;
|
|
|
|
|
+ this.historyMsgtext = obj.data.content;
|
|
|
|
|
+ obj.data.chatLog.forEach(res => {
|
|
|
|
|
+ console.log(res,'每一个')
|
|
|
|
|
+ this.hisSviceChat.push(res)
|
|
|
|
|
+ })
|
|
|
|
|
+ this.customerSviceChat.push({type: 'system', str: 'historyMsg'})
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
|