up

chat/src/components/index.vue

@@ -163,13 +163,12 @@
 								<div class="HeadPortrait row center">
 
 								</div>
-								<div class="messageWindow dialogueA col-w" style="text-align: right;">
-									<div class="user right imgSrc">
-
+								<div class="messageWindow dialogueA col-w row rightAlignment" >
+									<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></span>
+										<div v-html="item.content.text" v-else></div>
 									</div>
 								</div>
 								<div class="HeadPortrait row center">
@@ -181,7 +180,7 @@
 
 					<div v-for="(item,index) in chat" :key="index">
 
-						<!-- 历史消息 -->
+						<!-- 展示历史消息 -->
 						<div class="promptBox" v-if="item.type == 'historyMsg'">
 							<div class="prompt help">
 								<span>{{historyMsgtext}}</span>
@@ -198,9 +197,8 @@
 									<img id="321" v-if="service_info.avatar != '' "
 										 :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
 								</div>
-								<div class="messageWindow dialogueA col-w">
+								<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>
@@ -223,9 +221,8 @@
 								<div class="HeadPortrait row center">
 
 								</div>
-								<div class="messageWindow dialogueA col-w" style="text-align: right;">
-
-									<div class="user right imgSrc">
+								<div class="messageWindow dialogueA col-w row rightAlignment" >
+									<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>
@@ -364,12 +361,12 @@
 							<p>
 								<!-- 客服性别 -->
 								<span>性别:</span>
-								保密
+								{{service_info.gender == "0" ? "保密" :service_info.gender == 1? '男' :'女' }}
 							</p>
 							<p>
 								<!-- 客服职务 -->
 								<span>职务:</span>
-								咨询服务
+								{{service_info.job_name}}
 							</p>
 						</div>
 						<div class="row center">
@@ -396,11 +393,12 @@
 			<!-- 底部输入框 -->
 			<div class="footer row wrap" id='input_box'>
 				<!-- @keydown="inputNumFun()" -->
-				<textarea
+				<textarea 
 						id="textarea"
 						v-model.trim="text_info"
 						placeholder="请输入你的问题："
-						maxlength="100"
+						maxlength="450"
+						@keyup ='keyup_maxlength()'
 				>
 				</textarea>
 
@@ -500,10 +498,10 @@
 			<!-- 接收返回消息 -->
 			<knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime"/>
 		</div>
-		<!-- 发送消息音频提示 -->
+		<!-- 发送消息音频提示
 		<audio id="send" src="../../static/send.wav"></audio>
 		<!-- 接收消息音频提示 -->
-		<audio id="receive" src="../../static/receive.wav"></audio>
+		<!-- <audio id="receive" src="../../static/receive.wav"></audio> --> 
 	</div>
 </template>
 
@@ -601,13 +599,7 @@
 						type: 6,
 					}
 				}));
-
-
-				// this.websock.close()
-				// this.setInit();
-				// this.initWebsocket()
-
-
+				this.setInit();
 			},
 			/*******************************************/
 			//设置token加密
@@ -655,11 +647,18 @@
 			socket_message(e) {
 				if (!e.data) return;
 				const redata = JSON.parse(e.data);
-				console.log(redata);
-
-				if (redata.type == 'pong') return false;
 				//心跳检测
 				this.heatBeat();
+				// 心跳检测
+				if (redata.message_type == "ping") {
+					this.websock.send('{"type":"pong"}')
+					return false;
+				}
+				if (redata.type == 'pong') return false;
+
+				if (redata.type != 'pong' || redata.message_type != "ping") {
+					console.log(redata)
+				}
 				//欢迎语
 				if (redata.message_type == 'helloMessage') {
 					this.isTurnArtifcial = true;
@@ -766,8 +765,27 @@
 				// 客服等待排队
 				if (redata.message_type == "inqueue") {
 					this.waitingMsg = true;
-					this.automaticRolling();
-					this.waitingText = redata.content;
+					// this.automaticRolling();
+					// this.waitingText = redata.content;
+					this.$dialog.confirm({
+						title: '温馨提示',
+						mes: redata.content,
+						opts: [{
+							txt: '取消排队',
+                            color: true,
+                            callback: () => {
+								
+								this.socket_send(JSON.stringify({
+									"type": "cancelqueue",
+									"data": {
+										"uid": localStorage.getItem('uid')
+									}
+								}));
+								this.isTurnArtifcial =true;
+                                // this.$dialog.toast({mes: '你点了确定', timeout: 1000});
+                            }
+                        }]
+					});
 				}
 
 				//人工会话回复
@@ -779,32 +797,28 @@
 					this.receiveAudio();
 					this.$dialog.loading.close();
 					let obj = {};
-					let isSession = false;
+					let thisTime = '';
 					if (this.$public.isJSON(redata.data.content)) {
 						obj = JSON.parse(redata.data.content);
 						obj.text = this.turnFace(obj.text);
-						isSession = true;
-					} else {
-						obj.text = redata.data.content;
-					}
-
-					let thisTime = '';
-					let newTime = redata.data.time.split(':');
-					if (this.webTime) {
-						let lastTime = this.webTime.split(":");
-						if (newTime[0] == lastTime[0] && newTime[1] < (lastTime[1] + 2)) {
-							thisTime = ''
+						//接收消息大于两分钟显示时间
+						let newTime = redata.data.time.split(':');
+						if (this.webTime) {
+							let lastTime = this.webTime.split(":");
+							if (newTime[0] == lastTime[0] && newTime[1] < (lastTime[1] + 2)) {
+								thisTime = ''
+							} else {
+								thisTime = redata.data.time;
+							}
 						} else {
 							thisTime = redata.data.time;
 						}
-					} else {
-						if (isSession) {
-							thisTime = redata.data.time;
-						}
-					}
-					if (isSession) {
 						this.webTime = redata.data.time;
+					} else {
+						obj.text = redata.data.content;
 					}
+
+				
 					this.chat.push({
 						type: 'service',
 						time: thisTime ? thisTime : '',
@@ -912,6 +926,7 @@
 
 				//获取发送时间
 				if (redata.message_type == "webTime") {
+
 					if (this.webTime) {
 						let newTime = redata.data.webTime.split(':');
 						let time = this.webTime.split(':');
@@ -925,9 +940,10 @@
 						}
 					} else {
 						this.chat[this.chatIndex].time = redata.data.webTime;
-						// this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
+						this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
 					}
 					this.webTime = redata.data.webTime
+
 				}
 
 
@@ -1028,6 +1044,7 @@
 					} else if (res.data.code == 1) {
 						this.user_info = res.data.data;
 						// console.log(this.user_info)
+						localStorage.setItem('uid', res.data.data.id)
 						// 游客 token
 						localStorage.setItem("token", res.data.data.token);
 						localStorage.setItem("tutype", res.data.tutype);
@@ -1071,7 +1088,7 @@
 			//转人工
 			turnArtificial(id) {
 				this.group = id;
-				this.$dialog.loading.open('转接中...')
+				// this.$dialog.loading.open('转接中...')
 				if (this.isTurnArtifcial) {
 					let data = {
 						'type': 'userInit',
@@ -1145,15 +1162,16 @@
 				this.sendAudio();
 			},
 
-			// 消息发送
+			// 消息发送音频
 			sendAudio() {
-				console.log(1)
-				let send = document.getElementById('send')
+				let send = new Audio(); 
+				send.src = '../../static/audio/send.wav';
 				send.play()
 			},
-			// 消息接收
+			// 消息接收音频
 			receiveAudio() {
-				let receive = document.getElementById('receive')
+				let receive = new Audio()
+				receive.src = "../../static/audio/receive.wav";
 				receive.play();
 			},
 
@@ -1275,6 +1293,10 @@
 					});
 				}
 			},
+			/***********************************/
+			keyup_maxlength(){
+				//console.log(this.text_info.length);
+			},
 
 			/*******************************************/
 			//手机弹窗处理
@@ -1648,6 +1670,10 @@
 		border-radius: 0.1rem;
 		font-size: 0.28rem;
 		color: #fff;
+		max-width: 19.1rem;
+		table-layout:fixed;
+		word-break: break-all;
+		overflow:hidden;
 	}
 
 	.HeadPortrait {