im-sevice

<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>