update chat

chat/config/index.js

@@ -21,7 +21,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST  localhost 192.168.2.195
+    host: '192.168.2.161', // can be overwritten by process.env.HOST  localhost 192.168.2.195
     port: 8006, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

chat/src/components/index.vue

@@ -11,7 +11,7 @@
 
 				</div>
 				<div class="row">
-					<yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary" @click="is_exit()">退出聊天</yd-button>
+					<yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary" @click.native="is_exit()">退出聊天</yd-button>
 					<img class="icon-msg" v-show=" (chat.length -1) > chatNum " @click="is_show_evaluate()" src="@/assets/Service2.png">
 					<img class="icon-msg"  @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png">
 				</div>
@@ -48,13 +48,6 @@
 
 					<!-- 和机器人会话 -->
 					<div v-for="(item,i) in robot" :key="'r'+i">
-						<!-- 系统提示语 -->
-					<!--	<div v-if="item.type==1001 " class="artificial">
-							<div class="row item-center" style="padding-left:.2rem;height:.72rem;">
-								<p>您的问题小智无法回答请:</p>
-								<div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
-							</div>
-						</div>-->
 						<!-- 和机器人会话互动 -->
 						<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
 							 style="margin-top:.3rem;">
@@ -92,6 +85,57 @@
 				<!-- ********************************************************** -->
 				<!-- 人工会话模版 -->
 				<div v-if="link_success" v-for="(item,index) in chat" :key="index">
+
+					<!--历史消息-->
+					<div v-for="(item,index) in hisSviceChat" :key="index">
+						<!-- 客服信息 -->
+						<div v-if="item.to_id.startsWith('KF')">
+							<div class="row allAlignment" style="margin-top:.3rem;">
+								<div class="HeadPortrait row center">
+									<img :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
+								</div>
+								<div class="messageWindow dialogueA col-w">
+									<div class="customerService left imgSrc">
+										<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
+											<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<div v-html="item.content.text" v-else></div>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+
+								</div>
+							</div>
+						</div>
+						<!-- 用户信息 -->
+						<div v-else>
+
+							<div class="row allAlignment" style="margin-top:.3rem;">
+								<div class="HeadPortrait row center">
+
+								</div>
+								<div class="messageWindow dialogueA col-w" style="text-align: right;">
+									<div class="user right imgSrc">
+										<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
+											<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<span v-html="item.content.text" v-else>{{item.content.text}}</span>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+									<img :src="user_info.avatar? user_info.avatar: require('@/assets/user1.png') ">
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- 历史消息 -->
+					<div class="promptBox"  v-if="item.type == 'historyMsg'" >
+						<div class="prompt help">
+							<span>{{historyMsgtext}}</span>
+						</div>
+					</div>
+
 					<!-- 客服会话 -->
 					<div v-if="item.type == 'service'">
 						<div class="row allAlignment" style="margin-top:.3rem;">
@@ -114,6 +158,7 @@
 
 					<!-- 用户会话 -->
 					<div v-if="item.type == 'user'">
+
 						<div class="row allAlignment" style="margin-top:.3rem;">
 							<div class="HeadPortrait row center">
 
@@ -148,64 +193,10 @@
 							 v-if="item.content.state  == 'closeInform' ">
 							<p class="row center wrap">{{item.content.text}}</p>
 						</div>
-					</div>
-				</div>
 
-				<!-- 常规系统消息 -->
-				<!-- <div class="row center" v-if="hintSwitch.serviceOffline">
-				  <div class="btn">
-					当前客服不在线，如需帮助请
-					<span
-					  class="click"
-					  style="display: inline-block;margin-left:.1rem;"
-					  @click="flag = true"
-					>留言</span>
-				  </div>
-				</div>
-				<div class="row center" v-if="hintSwitch.queue">
-				  <div class="btn">
-					当前客服较忙，需要排队
-					<span class="click" style="display: inline-block;margin-left:.1rem;">第25位</span> 请稍候，如需取消等待请
-					<span
-					  class="click"
-					  style="display: inline-block;margin-left:.1rem;"
-					  @click="flag = true,hintSwitch.queue = false"
-					>留言</span>
-				  </div>
-				</div>
-				<div class="row center" v-if="hintSwitch.serviceOn">
-				  <div class="btn">请注意，当前客服已连接</div>
-				</div>
-				<div class="row center" v-if="hintSwitch.serviceOff">
-				  <div class="btn">当前客服已中断连接</div>
-				</div>
-				<div class="row center" v-if="hintSwitch.connection">
-				  <span class="btn">已联系人工客服</span>
-				</div>
-				<div class="row center" v-if="hintSwitch.evaluateOnOff">
-				  <div class="btn">
-					您好，您此次的评价为
-					<span
-					  class="click"
-					  style="display: inline-block;margin-left:.1rem;"
-					>{{evaluateBox.txt}}</span>
-				  </div>
-				</div>
-				<div class="row center" v-if="hintSwitch.welcome">
-				  <div class="btn">欢迎来到客服服务中心</div>
-				</div>
-				<div class="row center" v-if="hintSwitch.SessionTimeout">
-				  <div class="btn">您好，我们长时间没有收到您的回复，稍后将自动结束本次会话</div>
-				</div>
-				<div class="row center" v-if="hintSwitch.inSessionTimeout">
-				  <div class="btn">您好，未能收到您的回复，本次对话将自动结束 如需继续咨询请 重新连接客服</div>
-				</div>
-				<div class="row center" v-if="hintSwitch.serviceSessionTimeout">
-				  <div class="btn">正在查询中，请稍等</div>
+
+					</div>
 				</div>
-				<div class="row center" v-if="hintSwitch.talkTime">
-				  <div class="btn">后台返回的时间戳</div>
-				</div> -->
 
 				<div v-if="box_height" style="height:65px">
 
@@ -502,25 +493,29 @@
 				box_height: false,//苹果浏览器增加会话框高度
 				logo: '',
 				isExit: false,
+				historyMsg: false, // 是否展示历史信息
+				historyMsgtext:"", // 历史信息内容提示
+				hisSviceChat:[],
 			};
 		},
 		// 方法
 		methods: {
 			// 退出聊天
 			is_exit(){
-				console.log('123')
-				// console.log(this.service,'客服')
-				// console.log(this.user_info,'用户')
 				this.socket_send(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,
+						to_id: this.user_info.id,
+						kf_id: this.service_info.id,
+						group_id: this.service_info.group,
+						conversationId:this.conversationId,
 						type:6,
 					}
-				}))
+				}));
+				this.socket_close(this.user_info.id);
+				this.setInit();
+				this.initWebsocket()
+				this.isExit = false;
 
 			},
 			/*******************************************/
@@ -568,7 +563,7 @@
 			socket_message(e) {
 				if (!e.data) return;
 				const redata = JSON.parse(e.data);
-				// console.log(redata);
+				console.log(redata);
 				//欢迎语
 				if (redata.message_type == 'helloMessage') {
 					this.isTurnArtifcial = true;
@@ -613,7 +608,8 @@
 
 				//人工会话回复
 				if (redata.message_type == "chatMessage") {
-					console.log(redata,'欢迎消息')
+					// 转接的时候清除历史信息
+					this.hisSviceChat = [];
 					this.$dialog.loading.close();
 					let obj = {};
 					if (this.$public.isJSON(redata.data.content)) {
@@ -675,6 +671,25 @@
 					})
 				}
 
+				// 历史信息
+				if(redata.message_type == 'toOld'){
+					console.log(redata,'历史信息')
+					let obj = redata;
+					this.historyMsgtext = obj.data.content;
+					this.chat.push({
+						type: 'historyMsg',
+						content: {
+							text: this.historyMsgtext,
+						}
+					})
+					obj.data.chatLog.forEach(res => {
+						res.content = JSON.parse(res.content)
+						this.hisSviceChat.push(res)
+					})
+					console.log(this.hisSviceChat)
+
+				}
+
 				//屏幕滚动
 				this.automaticRolling();
 			},
@@ -689,7 +704,7 @@
 			/*******************************************/
 			//关闭
 			socket_close(e) {
-				console.log('断开连接', e);
+				// console.log('断开连接', e);
 				this.initData = 100;
 				this.link_success = false;
 				this.registered();
@@ -700,11 +715,23 @@
 			//用户匿名注册
 			registered() {
 				let token = localStorage.getItem('token');
+
+				let appuid = this.$public.getQueryString('appuid');
+				let tutype = this.$public.getQueryString('tutype');
+				if (appuid && tutype >= 1) {
+					token = localStorage.getItem('token');
+				} else if (!appuid && tutype < 1) {
+					token = localStorage.getItem('token');
+				} else {
+					token = '';
+				}
+
 				let data = {
-					token: token != null ? token : '',//
-					appid: this.source.appid,//
-					appuid: this.source.appuid,//
+					token: token != null ? token : '',
+					appid: this.$public.getQueryString('appid'),
+					appuid: this.$public.getQueryString('appuid'),
 				}
+
 				let obj = {
 					headers: {
 						"apiToken": this.setApiToken('autoReg', 'register', this.currentTime[0], 'index')
@@ -712,11 +739,13 @@
 				}
 
 				this.post('api/index/register/autoReg', data, obj).then(res => {
+					console.log(res,"用户信息");
 					if (res.data.code == 1) {
 						this.user_info = res.data.data;
-						console.log(this.user_info,"用户信息");
 
+						// 游客 token
 						localStorage.setItem("token", res.data.data.token);
+						localStorage.setItem("tutype", res.data.tutype);
 						//Websocket链接
 
 						setTimeout(() => {
@@ -792,6 +821,7 @@
 				// console.log(JSON.stringify(obj))
 				//和人工发送消息
 				if (this.link_success) {
+
 					data = {
 						from_name: this.user_info.name,
 						content: JSON.stringify(obj),
@@ -1105,7 +1135,6 @@
 
 			this.$axios.get('api/index/index/systime?t='+ 100).then(res => {
 				if (res.data.code == 1) {
-					console.log(res.data,"123")
 					this.logo = res.data.data.logo;
 					this.currentTime = res.data.data.time.split(' ')
 					this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;
@@ -1627,6 +1656,41 @@
 		display: none;
 	}
 
+
+	.promptBox {
+		display: flex;
+		justify-content: center;
+		height: 26px;
+		margin: 10px 0 10px;
+		/* line-height: 26px; */
+	}
+
+	.promptBoxH {
+		display: flex;
+		justify-content: center;
+		height: 50px;
+		margin: 10px 0 10px;
+		/* line-height: 26px; */
+	}
+
+	.prompt {
+		line-height: 25px;
+		text-align: center;
+		background: #DDDDDD;
+		border-radius: 30px;
+		width: 140px;
+		color: #FFFFFF;
+		font-size: 12px;
+	}
+
+	.help {
+		width: 80%;
+	}
+
+	.help .prompt {
+		width: 100%;
+	}
+
 	/*
 	*留言知识库
 	 */