update pc_chat

pc_chat/src/components/chat.vue

@@ -4,19 +4,22 @@
 			<!-- ************************* 头部消息 ************************* -->
 			<el-header height='80px'>
 				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
-					<el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
-					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><span v-if="service">{{service.serverInfo.name}}</span>
+					<el-col class="tit nopd" v-if="machineAndAtl == 10"><img id="logo" :src="url + logo" alt=""><span>智能客服</span></el-col>
+					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><img id="logo" :src="url + logo" alt=""><span v-if="service">{{service.serverInfo.name}}</span>
 					</el-col>
 					<el-col>
 						<div class="imgBox">
 							<i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
 							   :class="selType?'scActy':''"></i>
-							<div style="float: right" class="pointer" @click="leaveMsg()">
+							<div v-if="showleaveIcon" style="float: right" class="pointer" @click="leaveMsg()">
 								<span style="font-size: 25px; color: #b3c1e7; margin-top: 13px;" @click="back()"
 									  class="el-icon-chat-line-round"></span>
 							</div>
-							<!-- <i class="sy pointer" @click="select(2)" :class="syType?'syActy':''"></i>
-							<i class="sq pointer" @click="select(3)" :class="sqType?'sqActy':''"></i>-->
+							<div v-if="!showleaveIcon" style="float: right; cursor: not-allowed">
+								<span  style="font-size: 25px; color: #d6d1c4; margin-top: 13px;" class="el-icon-chat-line-round"></span>
+							</div>
+
+
 						</div>
 					</el-col>
 				</el-row>
@@ -162,7 +165,7 @@
 								<div class="changeService" v-else-if="item.type == 'artService'">
 									<div v-for="(itemList,idx) in serviceList" :key="idx">
 										<span class="col6">人工客服:</span>
-										<span class="colE5 pointer gl" @click="jumpService(itemList.id)">{{itemList.name}}</span>
+										<span class="colE5 pointer gl" @click="jumpService(itemList.id, itemList.name)">{{itemList.name}}</span>
 									</div>
 								</div>
 							</div>
@@ -172,7 +175,7 @@
 							<!-- 客服不在线帮助提示框 -->
 							<div class="promptBox" v-if="artAndLeave == 100">
 								<div class="prompt help">
-									<span>当前客服不在线，如需帮助请</span>
+									<span>{{jumpName + Onlinemsg}}</span>
 									<span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
 								</div>
 							</div>
@@ -181,12 +184,14 @@
 
 						<!--············ 和人工会话聊天模块 ··············-->
 						<div v-if="machineAndAtl == 100">
+
+
 							<!-- 人工客服回复消息 -->
 							<div v-for="item in customerSviceChat" :key="item.id">
 								<!-- tem.cont != '' -->
 								<div class="conversationBox" v-if="item.type == 'service' ">
-									<div class="timer"> {{item.time}}</div>
-									<div class=" row">
+									<div class="timer">{{item.time}}</div>
+									<div class="row">
 										<div class="conversation row">
 											<div class="headImg">
 												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')" alt="">
@@ -205,6 +210,7 @@
 									</div>
 								</div>
 
+
 								<!-- 用户发送文本消息 -->
 								<div class="conversationBox" v-if="item.type == 'user' ">
 									<div>
@@ -229,6 +235,15 @@
 									</div>
 								</div>
 
+								<div v-if="item.type == 'system' ">
+									<!-- 客服会话转接 -->
+									<div class="promptBox" v-if="item.str == 'changeKeFu'">
+										<div class="prompt help">
+											<span>会话转接成功</span>
+										</div>
+									</div>
+								</div>
+
 								<!-- 点击图片放大 -->
 								<el-dialog :visible.sync="dialogVisible">
 									<img width="100%" :src="dialogImageUrl" alt="">
@@ -247,19 +262,13 @@
 								</div>
 							</div>
 
-							<!-- 客服会话转接 -->
-							<div class="promptBox" v-if="changeKeFu">
-								<div class="prompt help">
-									<span>会话转接成功</span>
-								</div>
-							</div>
-
 							<!-- 客服会话超时 -->
 							<div class="promptBox" v-if="willOverTime">
 								<div class="prompt help">
 									<span>您好，未能收到您的回复，稍后将自动结束本次会话</span>
 								</div>
 							</div>
+
 						</div>
 					</el-row>
 
@@ -319,15 +328,30 @@
 				<el-aside width='255px' v-if="retractShow">
 					<el-row class="rt">
 						<el-col :span='24' class="artificial pd20">
-							<div class="infor">
-								<div v-if="machineAndAtl == 10">
+							<div class="infor" v-if="machineAndAtl == 10">
+								<div >
 									<span>姓名:</span>
-									<span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
+									<span>智能客服</span>
+								</div>
+								<div>
+									<span>工号:</span>
+									<span>001</span>
 								</div>
-								<div v-else-if="machineAndAtl == 100">
+								<div>
+									<span>性别:</span>
+									<span>保密</span>
+								</div>
+								<div>
+									<span>职务:</span>
+									<span>咨询客服</span>
+								</div>
+							</div>
+							<div class="infor" v-if="machineAndAtl == 100">
+								<div >
 									<span>姓名:</span>
 									<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
 								</div>
+
 								<div>
 									<span>工号:</span>
 									<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
@@ -342,7 +366,7 @@
 								</div>
 							</div>
 							<div class="headPortrait">
-								<img :src="service.serverInfo?(url+service.serverInfo.avatar):require('@/assets/st-img/kf.png')"
+								<img :src="service.serverInfo ? service.serverInfo.avatar ?  (url+service.serverInfo.avatar) :require('@/assets/st-img/kf.png') : require('@/assets/st-img/kf.png')"
 									 alt="">
 							</div>
 						</el-col>
@@ -481,6 +505,11 @@
 				timeout: 10000,          //10s一次心跳检测
 				timeoutObj: null,
 				serverTimeoutObj: null,
+
+				logo:null, // logo 图片
+				Onlinemsg:"", // 系统留言信息
+				showleaveIcon: true, // 留言按钮触发条件
+				jumpName:'', // 根据类型提示售后服务名称
 			}
 		},
 		methods: {
@@ -598,7 +627,7 @@
 
 			/***************弹出评价框*************** */
 			ejectEvl(type) {
-				if (this.comtSuccess) return;
+				// if (this.comtSuccess) return;
 				this.changeIcon = 10;
 				if (type == 10) {
 					this.evlShow = true
@@ -619,6 +648,7 @@
 					this.machineAndAtl = 10;
 					this.macNotPro = false;
 					this.jumpArtl = false;
+					this.willOverTime = false;
 					this.time = '';
 					this.returnTimer = '';
 					// this.automaticRolling();
@@ -750,7 +780,7 @@
 					}
 				}).then(res => {
 					if (res.data.code == 1) {
-						this.problem = res.data.data
+						this.problem = res.data.data;
 					}
 				})
 			},
@@ -868,6 +898,10 @@
 					this.service = redata.data;
 					console.log(this.service, '============客服信息')
 					this.serviceImg = redata.data.serverInfo.avatar;
+					this.consult = false;
+					this.evlShow = false;
+					this.comtSuccess = false;
+					this.showleaveIcon = false;
 				}
 				// 暂无客服
 				if (redata.message_type == 'wait') {
@@ -912,6 +946,7 @@
 					// console.log(this.customerSviceChat);
 					this.selNum++;
 					this.automaticRolling();
+
 				}
 				//接收机器会话
 				if (redata.message_type == 'robotMessage') {
@@ -947,13 +982,13 @@
 					this.automaticRolling();
 					this.machineAndAtl = 10;
 					this.jumpArtl = false;
+					// console.log(redata.content);
+					this.Onlinemsg = redata.content;
 				}
 				// 客服关闭会话.
 				if (redata.message_type == 'closeBysever') {
 					this.goBack(1);
-					// clearTimeout(this.reconnectData);      //离开清除 timeout
-					// clearTimeout(this.timeoutObj);         //离开清除 timeout
-					// clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
+					this.machineAndAtl = 10;
 				}
 				// 客服掉线.
 				if (redata.message_type == 'serviceoffline') {
@@ -965,6 +1000,8 @@
 				if(redata.message_type == 'changeKeFuSuccess'){
 					console.log('======转接成功========')
 					this.changeKeFu = true;
+					// this.goBack();
+					this.customerSviceChat.push({type:'system', str:'changeKeFu'})
 				}
 				// 客服会话超时
 				if (redata.message_type == 'overtime') {
@@ -1086,7 +1123,7 @@
 			},
 
 			/*************跳转人工客服***************** */
-			jumpService(id) {
+			jumpService(id,name) {
 
 				this.jumpArtl = true;
 				this.closeByServer = false;
@@ -1102,6 +1139,8 @@
 					}
 				}
 				this.websock.send(JSON.stringify(data));
+				// 客服类型名称
+				this.jumpName = name;
 			},
 
 			/*************机器智能回答问题***************** */
@@ -1192,6 +1231,7 @@
 					date[0] = (new Date(date[0].replace(/-/g, '/')).getTime()) / 1000;
 					this.currTime = date[0];
 					this.hourse = date[1];
+					this.logo = res.data.data.logo;
 					// 获取机器智能问题
 					this.getProblem();
 					// 匿名注册
@@ -1518,7 +1558,7 @@
 	}
 
 	.help {
-		width: 260px;
+		width: 300px;
 	}
 
 	.help .prompt {
@@ -1939,4 +1979,15 @@
 		background: rgba(0, 0, 0, 0.1);
 	}
 
+	#logo {
+		margin-right: 10px;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		display: inline-block;
+		border-radius: 50%;
+		vertical-align: sub;
+		position: relative;
+		top: 4px;
+	}
 </style>