<template>
<div v-cloak>
<!--客服窗口开始-->
<div class="qqBox">
<div v-if="loginAgain" class="loginAgain"></div>
<!--头部-->
<div class="BoxHead">
<div class="internetName" style="margin-left: 5px">
上线
</div>
<div style="margin-top: 13px; margin-left: 5px">
<van-switch :value="sender.onlineState" active-color="#25AEF3" inactive-color="#F1F3F4" size="24px"
id="onLine" v-on:click="online" />
</div>
<div class="internetName" style="margin-left: 5px">
发送 hxx
</div>
<div class="internetName" style="margin-left: 5px">
设置send id
</div>
<input v-model="sendId" placeholder="sendId">
<div class="internetName" style="margin-left: 5px">
设置msg 内容
</div>
<input v-model="msg" placeholder="msg">
<div style="margin-top: 13px; margin-left: 5px">
<van-switch :value="sender.onlineState" active-color="#25AEF3" inactive-color="#F1F3F4" size="24px"
id="onLine" v-on:click="sendmsg1" />
</div>
</div>
</div>
</div>
</template>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = "100px";
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + "px";
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
import com from "../../com.js"
import io from "socket.io-client"; //引入socket.io-client
import {
CellGroup,
Toast
} from "vant";
export default {
metaInfo: {
title: "客服聊天",
},
data() {
return {
socket: null,
uid: '',
sendId: '',
msg: '',
sender: {
id: 0,
isService: 0,
name: "",
onlineState: false,
outTradeNo: "",
source: "",
mobile: "",
nickName: "",
cardNo: "",
receptNum: 0,
sendto: '',
sendmsg: ""
},
revicer: {
id: 0,
isService: 0,
name: "",
outTradeNo: "",
source: "",
mobile: "",
nickName: "",
cardNo: "",
receptNum: 0,
},
infoTemplate: {},
currentEasy: 0,
pageIndex: 1,
current_state: 1,
pageSize: 10,
sendInfo: "",
abutmentUrl: "https://m.baidu.com/",
temporaryReceptNumber: 0,
temporaryUserName: "",
customerImg: require("../assets/Images/service/customerImg.png"),
serviceImg: require("../assets/Images/service/serviceImg.png"),
messageTip: "您好，很抱歉我们暂时无法为您提供服务，如需帮助，请留言，我们将尽快联系并解决您的问题",
noCode: +new Date(),
msgTimer: null,
isSelectSession: false,
expressionShow: false,
changeReceptNumber: false,
showProductDetail: false,
showLoginBtn: true,
loginAgain: false,
currentHasPeople: false,
changeUserName: false,
onlineShow: true,
offlineShow: true,
lastSession: true,
sendState: true,
allowSession: true,
fastReplay: [],
conversition: [],
currentSessionPeople: [],
offLineSessionPeople: [],
productDetail: {},
expressions: [{
title: "[呵呵]",
image: require("../assets/Images/Expression/smilea_thumb.gif"),
}
],
serviceTool: [{
id: 1,
text: "客户信息",
state: true,
},
{
id: 2,
text: "快捷回复",
state: false,
},
{
id: 3,
text: "对接页面",
state: false,
},
],
browseCard: {
Id: 0,
Name: "",
ShortDescription: "",
DefaultPictureUrl: "",
Amount: 0,
Type: 0,
},
};
},
methods: {
online() {
// console.log("online" + com.getMin())
//this.socket = io(process.env.VUE_APP_URL || "/");
this.socket.emit("joinChat", {
uid: this.uid
});
},
sendmsg1() {
console.log("sendmsg1 ")
console.log("sendi , " + this.sendId)
console.log("msg , " + this.msg)
let msg = {
sender: {
uid: ''
},
receiver: {
uid: ''
},
type: 'text',
content: {
text: ''
}
}
msg.sender.uid = this.uid
msg.receiver.uid = this.sendId
msg.content.text = this.msg
this.socket.emit("sendmsg2", msg);
},
//初始化
init() {
//hxx
this.sender.sendto = this.$route.query.sendto
this.sender.sendmsg = this.$route.query.sendmsg
this.sender.id = parseInt(this.$route.query.sendId);
console.log("connect 111" + JSON.stringify(this.sender))
if (!(this.sender.id > 0)) {
alert("请添加sendId参数");
return false;
}
var uid = this.$route.query.uid || ''
if (uid == '') {
alert("请添加uid参数");
return false;
}
this.uid = uid;
this.sender.mobile = this.$route.query.mobile
let userInfo = this.$store.state.userList.filter(
(x) => x.id == this.sender.id
)[0];
this.fastReplay = this.$store.state.fastReply;
if (userInfo) {
this.sender.name = userInfo.name;
this.temporaryUserName = userInfo.name; //修改昵称时的临时记录昵称
this.sender.isService = userInfo.isService;
this.sender.receptNum = userInfo.receptNum;
this.temporaryReceptNumber = userInfo.receptNum; //修改接待用户数量时的临时记录接待用户数量
} else {
alert("请保证sendId参数在userList.json文件中存在");
return false;
}
},
//查看大图
loadOverImg() {
this.$previewRefresh();
this.toBottom(100);
},
//发送图片
sendImage(e) {
},
//压缩图片
dataURLtoFile(dataurl, filename = "file") {
},
//回车发送
enterSend() {
if (this.sendInfo) this.signalrService(this.sendInfo, 1, 0);
else {
this.showMsg("内容不得为空");
}
},
//发送消息给会员或客服
toSend(content, identity, type) {
if (type === 0 && content.length <= 0) {
this.showMsg("请输入发送内容");
return;
}
if (type === 2 && this.sender.isService) {
this.expressionShow = !this.expressionShow;
}
this.signalrService(content, identity, type);
},
//1.信息组装
signalrService(
content,
identity,
type,
isSendOther = true,
isRobot = false
) {
if (this.sendState) {
let createDate = this.nowTime();
let noCode = +new Date();
this.infoTemplate = {
SendId: this.sender.id,
ReviceId: isRobot ? 0 : this.revicer.id,
Content: content,
Identity: identity,
Type: type,
State: isRobot || !this.sender.onlineState ? 1 : 0,
NoCode: noCode,
OutTradeNo: this.revicer.outTradeNo,
CreateDateUtc: createDate,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
if (isSendOther) this.sendMsg(this.infoTemplate);
this.sendState = isRobot || !this.sender.onlineState ? true : false;
this.sendInfo = type == 2 ? this.sendInfo : "";
this.toBottom(100);
} else {
this.showMsg("发送太快啦，请稍后再试");
}
},
//2.发送信息
sendMsg(data) {
this.socket.emit("sendMsg", data);
this.sendFailed(data);
},
//开启信息状态定时器
sendFailed(msg) {
this.msgTimer = setTimeout(() => {
this.conversition.forEach((x) => {
if (x.NoCode != null && x.NoCode == msg.NoCode) {
x.State = -1;
}
});
this.sendState = true;
}, 20000);
},
//修改在线状态
changeOnLine() {
console.log("send online msg ++++ " + com.getMin())
if (!this.sender.onlineState) {
console.log("xxxxxxxxxxxxxxxxxxx")
this.loading();
this.socket.emit("joinChat", {
SendId: this.sender.id,
SendName: this.sender.name,
ReviceId: -1,
ReviceName: this.revicer.name,
IsService: true,
NoCode: this.noCode,
});
} else {
//离线
this.loading();
this.isSelectSession = false;
this.socket.emit("offLine", {
SendId: this.sender.id,
NoCode: this.noCode,
});
}
},
//加载动画
loading() {
Toast.loading({
duration: 0,
message: "",
forbidClick: true,
});
},
//关闭加载动画
closeLoad() {
Toast.clear();
},
//弹屏提示
showMsg(msg) {
Toast(msg);
},
//点击卡片
openCard(id) {
this.openProductDetail(parseInt(id));
},
openProductDetail(id) {
this.loading();
// #### 模拟数据库取商品数据 ####
let product = this.$store.state.productList.filter((x) => x.Id === id);
if (product.length > 0) {
this.productDetail = product[0];
this.showProductDetail = true;
}
this.closeLoad();
},
//客服收到信息提醒
playMusic() {
let audio = document.getElementById("tipMusic");
if (audio != null) {
audio.currentTime = 0;
audio.play();
}
},
//切换快捷回复
selectEasy(id) {
if (id == this.currentEasy) {
this.currentEasy = 0;
} else {
this.currentEasy = id;
}
},
//选中快捷回复
selectReplay(text) {
this.sendInfo = text;
},
//切换客服工具
changeState(serviceTool) {
this.serviceTool.map((a) => {
if (a.id == serviceTool.id) {
a.state = true;
this.current_state = a.id;
} else {
a.state = false;
}
});
},
//打开表情包
changeExpression() {
this.expressionShow = !this.expressionShow;
},
//获取当前时间
nowTime() {
var myDate = new Date();
//获取当前年
var year = myDate.getFullYear();
//获取当前月
var month = myDate.getMonth() + 1;
//获取当前日
var date = myDate.getDate();
var h = myDate.getHours(); //获取当前小时数(0-23)
var m = myDate.getMinutes(); //获取当前分钟数(0-59)
var s = myDate.getSeconds();
var t = myDate.getMilliseconds();
var now =
year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s + ":" + t;
return now;
},
//客服选择会话
selectSession(obj, type) {
this.allowSession = type == 1 ? true : false;
this.currentSessionPeople.forEach((item) => {
item.IsSelect = false;
});
this.current_state = 1;
// this.abutmentUrl = "";
this.lastSession = true;
obj.IsSelect = true;
obj.UnRead = 0;
let revicer = this.$store.state.userList.filter(
(x) => x.id === obj.SendId
);
if (revicer.length > 0) {
this.revicer.id = revicer[0].id;
this.revicer.nickName = revicer[0].nickName;
this.revicer.source = revicer[0].source;
this.revicer.mobile = revicer[0].mobile;
this.revicer.cardNo = revicer[0].cardNo;
this.revicer.outTradeNo = obj.OutTradeNo;
this.revicer.name = revicer[0].name;
this.isSelectSession = true;
this.pageIndex = 1;
this.socket.emit("changeMsgRead", obj.OutTradeNo);
}
},
//发送消息模板
toSendInfo(data) {
/*
* identity:【0：机器人】【1：客服】 【2：顾客】
* type:【0:文本】 【1:图片】 【2:表情】 【3:商品卡片/订单卡片】
* */
this.conversition.push({
SendId: data.SendId,
ReviceId: data.ReviceId,
Content: data.Content,
Identity: data.Identity,
Type: data.Type,
State: data.State,
NoCode: data.NoCode,
OutTradeNo: data.OutTradeNo,
CreateDateUtc: data.CreateDate,
Title: data.Title,
Description: data.Description,
Label: data.Label,
Thumbnail: data.Thumbnail,
noSend: true,
});
this.toBottom(100);
},
//回到底部
toBottom(time) {
setTimeout(() => {
let RightCont = document.getElementById("RightCont");
if (RightCont != null) {
let scrollHeight2 = RightCont.scrollHeight;
RightCont.scrollTop = scrollHeight2;
}
}, time);
clearTimeout();
},
//关闭商品详情
onCloseProduct() {
this.showProductDetail = false;
},
//加载更多
loadMore() {
/*
* ##发起请求获取更多聊天记录
*/
this.showMsg("发起请求获取更多聊天记录");
},
//修改客服昵称
changName() {
this.changeUserName = false;
if (this.temporaryUserName == "") {
this.temporaryUserName = this.sender.name;
this.showMsg("客服昵称不得为空");
} else {
/*
* ##发起请求修改数据库客服昵称
*/
this.showMsg("发起请求修改数据库客服昵称");
//this.sender.name = this.temporaryUserName;
}
},
//修改接待人数
changNumber() {
this.changeReceptNumber = false;
if (this.temporaryReceptNumber <= 0) {
this.temporaryReceptNumber = this.receptNumber;
this.showMsg("接待人数必须大于0");
} else {
/*
* ##发起请求修改数据库接待人数
*/
this.showMsg("发起请求修改数据库接待人数");
//this.sender.receptNum = this.temporaryReceptNumber;
}
},
//关闭会员会话
closeSeesion(session) {
this.socket.emit("closeSeesion", {
SendId: session.SendId,
OutTradeNo: session.OutTradeNo,
});
},
//客服关闭离线会话
removeOffLine(session, event) {
if (event) {
event.stopPropagation ?
event.stopPropagation() :
(event.cancelBubble = true);
}
for (let index in this.offLineSessionPeople) {
if (this.offLineSessionPeople[index].SendId == session.SendId) {
this.offLineSessionPeople.splice(index, 1);
}
}
},
},
watch: {
currentSessionPeople: function(newVal) {
this.currentHasPeople = false;
if (newVal.length > 0 && this.sender.isService) {
this.currentHasPeople =
newVal.filter((x) => x.ReviceId === this.sender.id).length > 0 ?
true :
false;
}
},
},
mounted() {
this.init();
this.socket = io(process.env.VUE_APP_URL || "/");
this.socket.on("connect", () => {
console.log("socket status")
})
this.socket.on("disconnect", () => {
console.log("hxx disconnect ")
})
this.socket.on("reviceMsg", (data) => {
console.log("rcv rcv msg ,hxx111 ", JSON.stringify(data))
if (this.sender.isService && data.ReviceId == this.sender.id) {
this.playMusic();
this.currentSessionPeople.forEach((x) => {
if (x.SendId == data.SendId) {
if (!x.IsSelect) x.UnRead++;
switch (data.Type) {
case 0:
x.SessionContent = data.Content;
break;
case 1:
x.SessionContent = "图片";
break;
case 2:
x.SessionContent = "表情";
break;
case 3:
x.SessionContent = "卡片";
break;
}
}
});
}
if (this.sender.onlineState) this.toSendInfo(data);
});
//客服离线成功
// 接收机器人回复的信息
// 加入会话成功
this.socket.on("joinSuccess", (data) => {
this.closeLoad();
if (
data.user.SendId === this.sender.id &&
data.user.NoCode == this.noCode &&
this.sender.isService
) {
this.sender.onlineState = true;
let oldSessionPeople = this.currentSessionPeople;
if (data.users.length > oldSessionPeople.length) {
for (let i in data.users) {
for (let j in oldSessionPeople) {
if (oldSessionPeople[j].SendId == data.users[i].SendId) {
data.users[i].SessionContent =
oldSessionPeople[j].SessionContent;
data.users[i].UnRead = oldSessionPeople[j].UnRead;
}
}
}
} else {
for (let i in oldSessionPeople) {
for (let j in data.users) {
if (oldSessionPeople[i].SendId == data.users[j].SendId) {
data.users[j].SessionContent =
oldSessionPeople[i].SessionContent;
data.users[j].UnRead = oldSessionPeople[i].UnRead;
}
}
}
}
}
//更新客服离线的列表
if (this.sender.isService && data.user.ReviceId === this.sender.id) {
this.offLineSessionPeople = this.offLineSessionPeople.filter(
(x) => x.SendId !== data.user.SendId
);
}
this.currentSessionPeople = data.users;
});
//当前用户接收加入提示信息
this.socket.on("joinTip", (data) => {
this.sender.onlineState = true;
this.revicer.id = data.ReviceId;
this.revicer.name = data.ReviceName;
this.revicer.outTradeNo = data.ReviceOutTradeNo;
this.infoTemplate = {
SendId: 0,
ReviceId: 0,
Content: "客服" + data.ReviceName + "为您服务",
Identity: 3,
Type: 0,
State: 1,
NoCode: null,
CreateDateUtc: null,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
if (this.browseCard.Id > 0) {
this.infoTemplate = {
SendId: this.sender.id,
ReviceId: this.revicer.id,
Content: "" + this.browseCard.Id,
Identity: 2,
Type: 3,
State: 1,
OutTradeNo: this.revicer.outTradeNo,
NoCode: +new Date(),
CreateDateUtc: null,
Title: this.browseCard.Name,
Description: this.browseCard.ShortDescription,
Label: this.browseCard.Amount,
Thumbnail: this.browseCard.DefaultPictureUrl,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
}
this.toBottom(100);
});
//当前用户接收加入失败提示
this.socket.on("joinError", (data) => {
this.infoTemplate = {
SendId: 0,
ReviceId: 0,
Content: data.msg,
Identity: 3,
Type: 0,
State: 1,
NoCode: null,
OutTradeNo: null,
CreateDateUtc: null,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
this.toBottom(100);
this.closeLoad();
});
//当前用户接收对方离线提示
this.socket.on("offLineTip", (data) => {
this.showMsg(data.msg);
this.conversition.forEach((x) => {
if (x.SendId == this.sender.id) {
x.State = -1;
this.sendState = true;
}
});
});
//修改信息状态
this.socket.on("changOrShowMsg", (data) => {
this.sendState = true;
clearTimeout(this.msgTimer);
this.conversition.forEach((x) => {
if (x.NoCode != null && x.NoCode == data.NoCode) {
x.State = 1;
}
});
});
//接收信息
this.socket.on("offSuccess", (data) => {
this.closeLoad();
this.currentSessionPeople = data.Users;
if (
!this.sender.isService &&
this.sender.onlineState &&
this.revicer.id == data.SendId
) {
this.infoTemplate = {
SendId: 0,
ReviceId: 0,
Content: "当前客服已离线",
Identity: 3,
Type: 0,
State: 1,
NoCode: null,
OutTradeNo: null,
CreateDateUtc: null,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
this.sender.onlineState = false;
} else if (this.noCode == data.NoCode && this.sender.isService) {
this.sender.onlineState = !this.sender.onlineState;
this.currentSessionPeople = [];
this.offLineSessionPeople = [];
}
});
//客服主动关闭会话
this.socket.on("closeSessionSuccess", (data) => {
if (!this.sender.isService) {
this.infoTemplate = {
SendId: 0,
ReviceId: 0,
Content: "客服结束了本次会话",
Identity: 3,
Type: 0,
State: 1,
NoCode: null,
OutTradeNo: null,
CreateDateUtc: null,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
this.sender.onlineState = false;
} else {
if (data.SendId === this.revicer.id) {
this.isSelectSession = false;
}
let offLineSessionPeople = this.currentSessionPeople.filter(
(x) => x.SendId === data.SendId
);
if (offLineSessionPeople.length > 0) {
offLineSessionPeople[0].SessionContent = "客服主动结束会话";
this.offLineSessionPeople.push(offLineSessionPeople[0]);
}
}
this.currentSessionPeople = data.Users;
});
//会员刷新或关闭离线
this.socket.on("customerDisconnect", (data) => {
//将中间会话窗口关闭
if (data.SendId == this.revicer.id) {
this.isSelectSession = false;
}
let offLineSessionPeople = this.currentSessionPeople.filter(
(x) => x.SendId === data.SendId
);
if (offLineSessionPeople.length > 0) {
offLineSessionPeople[0].SessionContent = "已下线";
offLineSessionPeople[0].IsSelect = false;
this.offLineSessionPeople.push(offLineSessionPeople[0]);
}
this.currentSessionPeople = data.Users ?
data.Users :
this.currentSessionPeople;
});
//客服刷新或关闭离线
this.socket.on("serviceDisconnect", (data) => {
if (this.sender.onlineState) {
this.infoTemplate = {
SendId: 0,
ReviceId: 0,
Content: "当前客服已下线",
Identity: 3,
Type: 0,
State: 1,
NoCode: null,
OutTradeNo: null,
CreateDateUtc: null,
Title: null,
Description: null,
Label: null,
Thumbnail: null,
NoSend: true,
};
this.toSendInfo(this.infoTemplate);
this.sender.onlineState = false;
this.currentSessionPeople = data.Users ?
data.Users :
this.currentSessionPeople;
}
});
//多设备在线时，强制旧设备下线
this.socket.on("squeezeOut", (data) => {
if (this.noCode === data.noCode) {
if (!this.sender.isService) {
this.signalrService("账户已在其他设备登陆，会话中断", 3, 0, false);
this.sender.onlineState = false;
} else {
this.currentSessionPeople = [];
this.loginAgain = true;
//离线
this.isSelectSession = false;
this.socket.emit("offLine", {
SendId: this.sender.id,
NoCode: this.noCode,
});
alert("账户已在其他设备登陆，会话中断");
}
}
});
},
};
</script>
<style scoped>
@import url("../assets/CSS/chat.css");
@import url("../assets/CSS/service.css");
</style>
|