williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

人工客服

Browse Source
This commit is contained in:
熊丽君
2021-08-17 17:08:19 +08:00
parent af6cafafec
commit 1e26d51d92
2 changed files with 113 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/service.js
View File

@ -1,7 +1,14 @@
import request from '@/utils/request';
// 获取和某个好友的聊天记录
export function getChatRecords(params) {
return request({
url: '/chat/getChatRecords',
params
});
}
// 给某人发送信息
export function send(data) {
export function sendMsg(data) {
return request({
url: '/chat/send',
method: 'post',

336
src/views/customerService.vue
View File

@ -9,7 +9,7 @@
<!-- 聊天区域 -->
<div class="chatBox">
<!-- 聊天窗 -->
<div class="chatWindow" id="chatWindow">
<div class="chatWindow" id="chatWindow" @scroll="scroll">
<div class="loading" v-if="isLoading">
<img
class="loadingImg"
@ -22,55 +22,22 @@
v-for="(item, index) in chats"
:key="index"
>
<div
class="chatBubbleTime"
v-if="item.send_timestamp && item.time_show"
>
<span>{{ item.show_time }}</span>
<div class="chatBubbleTime" v-if="item.msgTime">
<span>{{ item.msgTime }}</span>
</div>
<div
class="chatBubble"
:class="{ chatBubbleUser: item.sender != 0 }"
:class="{ chatBubbleUser: item.type != 'rightinfo' }"
>
<div name="亮亮" class="avatar" v-if="item.sender == 0"></div>
<div class="avatar" v-if="item.type == 'rightinfo'"></div>
<div class="msgBox">
<div class="bubbleBox" v-if="item.sender == 1">
<p>{{ item.send_con }}</p>
</div>
<div
class="bubbleBox"
v-else-if="item.sender == 0 && item.send_con[0].msgInfo"
>
<p
v-for="(item_msg, index_msg) in item.send_con"
:key="index_msg"
>
{{ item_msg.msgInfo }}
</p>
</div>
<div class="bubbleBox" v-else-if="item.sender == 0">
<p>{{ item.send_con }}</p>
</div>
<div
class="bubbleBox listBox"
v-if="item.sender == 0 && item.list"
>
<div
class="bubbleList"
v-for="(item_list, index_list) in item.list"
:key="index_list"
@click="goDetail(item_list)"
>
<div class="listTitle">
{{
item_list.title ||
item_list.lawTitle ||
item_list.contractName ||
item_list.caseTitle
}}
</div>
<img src="@/assets/logo/logo.png" alt="查看详情" />
<!-- 这是自己 -->
<div class="bubbleBox" v-if="item.type == 'leftinfo'">
<p>{{ item.sendText }}</p>
</div>
<!-- 这是客服 -->
<div class="bubbleBox" v-else-if="item.type == 'rightinfo'">
<p>{{ item.sendText }}</p>
</div>
</div>
</div>
@ -93,49 +60,28 @@
</template>
<script>
import { send } from '@/api/service';
import { getChatRecords, sendMsg } from '@/api/service';
export default {
data() {
return {
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
socket: '',
userid: '23941',
numTop: 0,
queryParams: {
userId: '1385154178159804416',
pageNum: 1,
pageSize: 10,
},
msgTotal: 0,
// 待发送信息
message: '',
isEnter: false, //是否处于停止回车
// 聊天记录(假设)
chats: [
{
sender: 0, //发送人，0机器人 1用户
send_con: '你好，我是嘉策人工客服，有问题请咨询我!',
send_timestamp: '1607731220000' //发送时间,存时间戳好进行判断，若聊天间隔3分钟内，不重复显示时间
}
],
// 答复详情
replyDetail: {},
isLoading: 0 //是否正在加载中，0否1是
// 聊天记录
chats: [],
isLoading: 0, //是否正在加载中，0否1是
};
},
created() {
// localStorage.removeItem("chatsHistory");
this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
if (!this.chats) {
var chat = [
{
sender: 0, //发送人，0机器人1用户
send_con: '你好，我是嘉策人工客服，有问题请咨询我!'
}
];
chat[0].send_timestamp = this.getTime();
localStorage.setItem('chatsHistory', JSON.stringify(chat));
this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
this.getIsShowTime();
} else {
this.getIsShowTime();
}
},
created() {},
mounted() {
this.chatWindowActive();
this.init();
},
methods: {
@ -154,15 +100,21 @@ export default {
this.socket.onmessage = this.getMessage;
}
},
open: function() {
open() {
console.log('socket连接成功');
this.getMsgList();
},
error: function () {
console.log('连接错误');
if (!this.$store.state.user.userId) {
this.msgError('请先登录');
} else {
this.msgError('连接错误');
}
},
getMessage(msg) {
console.log(JSON.parse(msg.data));
this.a = JSON.parse(msg.data);
const msgInfo = JSON.parse(msg.data);
this.chats.push(msgInfo);
},
send: function (params) {
this.socket.send(params);
@ -170,6 +122,37 @@ export default {
close: function () {
console.log('socket已经关闭');
},
scroll(e) {
// console.log(e.srcElement.scrollTop);
this.numTop = e.srcElement.scrollTop;
if (e.srcElement.scrollTop == 0) {
if (
this.queryParams.pageNum * this.queryParams.pageSize >=
this.msgTotal
)
return this.msgInfo('已经到顶了');
this.queryParams.pageNum++;
this.getMsgList();
}
},
getMsgList() {
this.isLoading = 1;
getChatRecords(this.queryParams).then(({ data }) => {
data.list.map((item) => {
item.sendTime = new Date(item.sendTime).getTime();
});
// 时间戳排序
data.list.sort(function (a, b) {
return a.sendTime > b.sendTime ? 1 : -1;
});
this.chats = [...data.list, ...this.chats];
this.msgTotal = data.total;
this.isLoading = 0;
if (this.queryParams.pageNum == 1) {
this.chatWindowActive();
}
});
},
// 原回车键失去回车功能
stopEnter(event) {
if (event.keyCode === 13) {
@ -177,90 +160,34 @@ export default {
return false;
}
},
// 获取当前时间戳
getTime() {
var now_timestamp = Date.parse(new Date());
return now_timestamp;
},
// 获取是否展示时间的标志
getIsShowTime() {
var now_timestamp = Date.parse(new Date());
var minute_timestamp = 3 * 60 * 1000; //3分钟
var day_timestamp = 24 * 60 * 60 * 1000; //1天
var week_timestamp = day_timestamp * 7; //7天
var i = 0;
for (var chat of this.chats) {
var howlong = now_timestamp - chat.send_timestamp;
var time = new Date(parseInt(chat.send_timestamp));
var hour = time.getHours().toString();
if (hour.length < 2) {
hour = '0' + hour;
}
var minute = time.getMinutes().toString();
if (minute.length < 2) {
minute = '0' + minute;
}
// 展示时间格式
if (howlong > week_timestamp) {
//距今7天以上，显示日期
var year = time.getFullYear().toString();
var month = (time.getMonth() + 1).toString();
if (month.length < 2) {
month = '0' + month;
}
var day = time.getDate().toString();
if (day.length < 2) {
day = '0' + day;
}
chat.show_time =
year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
} else if (howlong > day_timestamp) {
// 距今7天以内超过1天，显示星期
var weekdays = [
'星期天',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
];
var weekday = time.getDay().toString();
chat.show_time = weekdays[weekday] + ' ' + hour + ':' + minute;
getTodayTime() {
// 获取当前时间
var day = new Date();
let seconds = day.getSeconds();
if (seconds < 10) {
seconds = '0' + seconds;
} else {
// 24小时内，显示今天
var day_now = new Date(parseInt(now_timestamp)).getDate();
var day_time = time.getDate();
if (day_now == day_time) {
chat.show_time = '今天 ' + hour + ':' + minute;
seconds = seconds;
}
let minutes = day.getMinutes();
if (minutes < 10) {
minutes = '0' + minutes;
} else {
chat.show_time = '昨天 ' + hour + ':' + minute;
}
}
// 是否展示时间
this.chats[0].time_show = true;
if (i > 0) {
var interval = chat.send_timestamp - this.chats[i - 1].send_timestamp;
if (interval > minute_timestamp) {
chat.time_show = true;
} else {
chat.time_show = false;
}
}
i++;
}
},
// 查看详情
goDetail(item) {
if (item.contractName) {
//答复类型为“合同”
alert('程序员还在开发中...');
return;
} else {
this.tool_show = -2;
this.replyDetail = item;
minutes = minutes;
}
let time =
day.getFullYear() +
'-' +
(day.getMonth() + 1) +
'-' +
day.getDate() +
' ' +
day.getHours() +
':' +
minutes +
':' +
seconds;
return time;
},
// 聊天窗内容置底
chatWindowActive() {
@ -276,95 +203,28 @@ export default {
return;
}
this.chats.push({
sender: 1,
send_con: this.message,
send_timestamp: this.getTime()
type: 'leftinfo',
sendText: this.message,
msgTime: this.getTodayTime(),
});
this.getIsShowTime();
this.chatWindowActive();
let message = this.message;
this.message = '';
this.isLoading = 1; //加载中
send({ sendText: message, receiverUserId: '1385154178159804416' }).then(
res => {
sendMsg({
sendText: message,
receiverUserId: '1385154178159804416',
type: 'leftinfo',
}).then((res) => {
console.log(res);
var that = this;
if (
res.data.replayType == 'NEEDCONTRACTUSER' ||
res.data.replayType == 'MSG' ||
res.data.replayType == 'UNKNOWN'
) {
setTimeout(function() {
that.chats.push({
sender: 0,
send_con: res.data.msgInfos,
send_timestamp: that.getTime(),
type: res.data.replayType
this.isLoading = 0;
});
that.isLoading = 0;
that.getIsShowTime();
that.chatWindowActive();
that.updateHistory(that.chats.length);
}, 1000);
} else {
let all;
if (res.data.replayType == 'QA') {
//输入"你能做些什么"测试，右侧进入问答页面
all = res.data.replyQADatas;
} else if (res.data.replayType == 'CONTRACT') {
//输入"劳动合同"测试，跳转下载链接
all = res.data.replyContractDatas;
} else if (res.data.replayType == 'LAW') {
//输入"宪法"测试，右侧进入法律页面
all = res.data.replyLawDatas;
} else if (res.data.replayType == 'CASE') {
//输入"强奸案案例"测试，右侧进入案例页面
all = res.data.replyCaseDatas;
}
let list = [];
for (let i = 0; i < 5; i++) {
if (all[i]) {
list.push(all[i]);
}
}
setTimeout(function() {
that.chats.push({
sender: 0,
send_con: res.data.msgInfos,
send_timestamp: that.getTime(),
type: res.data.replayType,
list
});
that.isLoading = 0;
that.getIsShowTime();
that.chatWindowActive();
that.updateHistory(that.chats.length);
}, 1000);
}
}
);
},
// 更新聊天记录
updateHistory(len) {
let chats = [];
for (let i = 1; i <= 20; i++) {
// unshift 将新项添加到数组起始位置
// 这里是倒着把this.chats的最近20条数据作为历史记录插入chats数组
if (this.chats[len - i]) {
chats.unshift(this.chats[len - i]);
}
}
localStorage.setItem('chatsHistory', JSON.stringify(chats));
},
// 获取工具
getTool(index) {
this.tool_show = index;
}
},
destroyed() {
// 销毁监听
this.socket.onclose = this.close;
}
},
};
</script>