update chat

chat/src/components/index.vue

@@ -4,16 +4,19 @@
 		<div class="service" v-if="!knowledge">
 			<!-- 头部信息 -->
 			<div class="header row allAlignment item-center">
-				<div class="row item-center" >
+				<div class="row item-center">
 					<img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
 					<img class="logo" :src="img_http + logo" alt="">
 					<p>{{service_info.name}}</p>
 
 				</div>
 				<div class="row">
-					<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">
+					<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>
 			</div>
 			<div class="main" id="main">
@@ -54,17 +57,21 @@
 							<div class="HeadPortrait row center">
 								<img v-if="item.type == 'service'" :src="require('@/assets/headAdvent.png')">
 							</div>
-							<div class="messageWindow dialogueA col-w" :style="item.type == 'user'?'text-align: right;':''">
-								<div v-if="item.type == 'service'" class="customerService left" v-html="item.content.text"></div>
+							<div class="messageWindow dialogueA col-w"
+								 :style="item.type == 'user'?'text-align: right;':''">
+								<div v-if="item.type == 'service'" class="customerService left"
+									 v-html="item.content.text"></div>
 								<div v-if="item.type == 'user'" class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment box-img">
+									<yd-lightbox v-if="item.content.img" style="display:inline-block"
+												 class="row rightAlignment box-img">
 										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
 									</yd-lightbox>
 									<div v-else v-html="item.content"></div>
 								</div>
 							</div>
 							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'" :src="user_info.avatar? user_info.avatar: require('@/assets/user1.png') ">
+								<img v-if="item.type == 'user'"
+									 :src="require('@/assets/timg.jpg') ">
 							</div>
 						</div>
 						<!-- 转人工分组 -->
@@ -82,69 +89,74 @@
 					</div>
 				</div>
 
-				<!-- ********************************************************** -->
-				<!-- 人工会话模版 -->
-				<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 v-if="showHistory"  v-for="item in hisSviceChat" >
+					<!-- 客服信息 -->
+					<div v-if="item.to_id.startsWith('KF')">
+						<div class="row allAlignment" style="margin-top:.3rem;">
+							<div class="HeadPortrait row center">
+								<img v-if="service_info.avatar == '' " :src="avatar_imgs">
+								<img v-if="service_info.avatar != ''" :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 class="HeadPortrait row center">
+							</div>
+							<div class="HeadPortrait row center">
 
-								</div>
 							</div>
 						</div>
-						<!-- 用户信息 -->
-						<div v-else>
+					</div>
+					<!-- 用户信息 -->
+					<div v-else>
 
-							<div class="row allAlignment" style="margin-top:.3rem;">
-								<div class="HeadPortrait row center">
+						<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 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="require('@/assets/timg.jpg') ">
+							</div>
 						</div>
 					</div>
+				</div>
+
+
+				<!-- ********************************************************** -->
+				<!-- 人工会话模版 -->
+				<div v-if="link_success" v-for="(item,index) in chat" :key="index">
 
 					<!-- 历史消息 -->
-					<div class="promptBox"  v-if="item.type == 'historyMsg'" >
+					<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;">
 							<div class="HeadPortrait row center">
-								<img :src=" img_http + service_info.avatar">
+								<img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
+								<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="customerService left imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
+									<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>
@@ -173,7 +185,8 @@
 								</div>
 							</div>
 							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'" :src="user_info.avatar? user_info.avatar: require('@/assets/user1.png') ">
+								<img v-if="item.type == 'user'"
+									 :src="require('@/assets/timg.jpg') ">
 							</div>
 						</div>
 					</div>
@@ -188,7 +201,7 @@
 							</button>
 						</div>
 
-						<div class="column item-center "
+						<div class="column item-center"
 							 style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
 							 v-if="item.content.state  == 'closeInform' ">
 							<p class="row center wrap">{{item.content.text}}</p>
@@ -305,8 +318,8 @@
 							</p>
 						</div>
 						<div class="row center">
-							<img style="width:1.8rem;height:1.8rem;"
-								 :src="img_http + service_info.avatar">
+							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar == ''" :src="avatar_imgs">
+							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar != ''" :src="img_http + service_info.avatar">
 						</div>
 					</div>
 					<div class="leftMain-chenter"
@@ -330,11 +343,11 @@
 					<yd-cell-item>
 						<yd-textarea
 								slot="right"
-								 contenteditable="true"
-								 v-model.trim="text_info"
-								 @keydown="inputNumFun()"
-								 placeholder="请输入你的问题："
-								 maxlength="100">
+								contenteditable="true"
+								v-model.trim="text_info"
+								@keydown="inputNumFun()"
+								placeholder="请输入你的问题："
+								maxlength="100">
 						</yd-textarea>
 
 					</yd-cell-item>
@@ -353,7 +366,7 @@
 					<div
 							@click="send()"
 							style="color:#ccc;border:.02rem solid #ddd;width:1rem;height:.66rem;border-radius:.1rem;"
-							:style="text_info.length>0?'background:#5EA0F7;color:fff;':''"
+							:style="text_info.length>0?'background:#5EA0F7;color:#fff;':''"
 							class="row center"
 					>发送
 					</div>
@@ -442,7 +455,9 @@
 	import "../css/index.css";
 	import knowledgeLibrary from './knowledgeLibrary'
 	import frce from "./frce.js";
-	import avatarImg from "./../assets/user.png"
+	import avatarImgs from "./../assets/user.png"
+	import defaultImgs from "./../assets/timg.jpg"
+
 	export default {
 		name: "service",
 		// 模板注册
@@ -493,24 +508,24 @@
 				logo: '',
 				isExit: false,
 				historyMsg: false, // 是否展示历史信息
-				historyMsgtext:"", // 历史信息内容提示
-				hisSviceChat:[],
-
-				avatar: avatarImg,
+				historyMsgtext: "", // 历史信息内容提示
+				hisSviceChat: [],
+				showHistory:true,
+				avatar_imgs:avatarImgs,
 			};
 		},
 		// 方法
 		methods: {
 			// 退出聊天
-			is_exit(){
+			is_exit() {
 				this.socket_send(JSON.stringify({
 					type: 'kfCloseUser',
 					data: {
 						to_id: this.user_info.id,
 						kf_id: this.service_info.id,
 						group_id: this.service_info.group,
-						conversationId:this.conversationId,
-						type:6,
+						conversationId: this.conversationId,
+						type: 6,
 					}
 				}));
 				this.socket_close(this.user_info.id);
@@ -609,7 +624,7 @@
 							kf_id: redata.data.kf_id,
 							kf_name: "",
 							serverInfo: {
-								avatar: this.avatarImg,
+								avatar: avatarImgs,
 								client_id:"",
 								group:"",
 								id: "",
@@ -634,6 +649,7 @@
 				if (redata.message_type == "chatMessage") {
 					// 转接的时候清除历史信息
 					this.hisSviceChat = [];
+					// this.getHistory = false;
 					this.$dialog.loading.close();
 					let obj = {};
 					if (this.$public.isJSON(redata.data.content)) {
@@ -651,8 +667,14 @@
 
 				//系统消息通知客户结束通话
 				if (redata.message_type == 'closeBysever') {
+					this.showHistory = false
 					this.setInit();
 				}
+				if(redata.message_type == "changeKeFuSuccess"){
+					this.$dialog.alert({
+						mes: redata.data.content
+					});
+				}
 
 				//系统消息通转人工
 				if (redata.message_type == 'notice') {
@@ -696,8 +718,9 @@
 				}
 
 				// 历史信息
-				if(redata.message_type == 'toOld'){
-					console.log(redata,'历史信息')
+				if (redata.message_type == 'toOld') {
+					console.log(redata, '历史信息')
+					this.hisSviceChat = [];
 					let obj = redata;
 					this.historyMsgtext = obj.data.content;
 					this.chat.push({
@@ -710,7 +733,7 @@
 						res.content = JSON.parse(res.content)
 						this.hisSviceChat.push(res)
 					})
-					console.log(this.hisSviceChat)
+
 
 				}
 
@@ -763,10 +786,13 @@
 				}
 
 				this.post('api/index/register/autoReg', data, obj).then(res => {
-					console.log(res,"用户信息");
-					if (res.data.code == 1) {
+					if(res.data.code == 0){
+						this.$dialog.alert({
+							mes: res.data.msg
+						});
+					}else 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);
@@ -832,7 +858,7 @@
 			send() {
 				if (this.text_info == '') return;
 				let str = this.text_info;
-				let formatStr = str.replace(/\n|\r\n/g,"<br>");
+				let formatStr = str.replace(/\n|\r\n/g, "<br>");
 
 				let type = 'toRobot';
 				let data = {};
@@ -845,7 +871,9 @@
 				// console.log(JSON.stringify(obj))
 				//和人工发送消息
 				if (this.link_success) {
-
+					// if(this.getHistory){
+					// 	this.getHistory = false;
+					// }
 					data = {
 						from_name: this.user_info.name,
 						content: JSON.stringify(obj),
@@ -1091,11 +1119,12 @@
 						'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currentTime[0], 'index')
 					}
 				}).then(res => {
-					//console.log(res);
 					if (res.data.code == 1) {
+						console.log(res.data.data,'评价')
 						this.bottomShow = false;
-						// this.hintSwitch.evaluateOnOff = true;
-						this.haveEvaluation = true;// 标识已评价
+						//this.hintSwitch.evaluateOnOff = true;
+						this.haveEvaluation = true; // 标识已评价
+
 					}
 				})
 
@@ -1157,7 +1186,7 @@
 			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
 			this.$dialog.loading.open('网络连接中...')
 
-			this.$axios.get('api/index/index/systime?t='+ 100).then(res => {
+			this.$axios.get('api/index/index/systime?t=' + 100).then(res => {
 				if (res.data.code == 1) {
 					this.logo = res.data.data.logo;
 					this.currentTime = res.data.data.time.split(' ')
@@ -1196,6 +1225,7 @@
 		width: 0.4rem;
 		height: 0.4rem;
 	}
+
 	/* 聊天 */
 	.memeImg {
 		width: 0.6rem;
@@ -1349,11 +1379,13 @@
 		width: 0.32rem;
 		height: 0.32rem;
 	}
+
 	.icon-msg {
 		width: 0.32rem;
 		height: 0.32rem;
 		margin: 0 0.1rem;
 	}
+
 	.customerService {
 		background: #ffffff;
 		padding: 0.2rem;
@@ -1649,15 +1681,15 @@
 		border: none;
 		padding-right: 0.3rem;
 		padding-left: 0.3rem;
-
+		border-bottom: 0.01rem solid rgb(221, 221, 221);
 	}
 
 	div /deep/ .yd-textarea > textarea {
 		box-sizing: border-box;
 		height: auto;
-		min-height: 1.2rem;
+		min-height: 1.1rem;
 		font-size: 0.28rem;
-		padding-top: 0.4rem;
+		padding-top: 0.2rem;
 	}
 
 	.yd-textarea {