Customer-Service-Web/chat/src/components/index.vue

<template>
	<div>
		<!-- 聊天 -->
		<div class="service" v-if="!knowledge">
			<!-- 头部信息 -->
			<div class="header row allAlignment 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">
				</div>
			</div>
			<div class="main" id="main">

				<!-- ********************************************************** -->
				<!-- 机器人聊天板块 -->
				<div v-if="!link_success">
					<!-- 系统欢迎语 -->
					<div v-if="welcome.length > 0" v-for="(item,i) in  welcome" :key="'w'+i">
						<div class="row allAlignment" style="margin-top:.3rem;">
							<div class="HeadPortrait row center">
								<img :src="require('@/assets/headAdvent.png')">
							</div>
							<div class="messageWindow dialogueA col-w">
								<div class="customerService left" v-html="item"></div>
							</div>
						</div>
					</div>

					<!-- 系统消息下拉选择 -->
					<div class="artificial" v-if="problem.length > 0 && welcome.length > 0">
						<div class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;"
							 v-for="(item,index) in problem" :key="index" @click="pushMessage(item.robot_content)">
							<span>{{item.robot_name}}</span>
							<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
						</div>
						<div class="row item-center" style="height:.72rem;">
							<p>以上问题都不是</p>
							<div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
						</div>
					</div>

					<!-- 和机器人会话 -->
					<div v-for="(item,i) in robot" :key="'r'+i">
						<!-- 和机器人会话互动 -->
						<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
							 style="margin-top:.3rem;">
							<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 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-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') ">
							</div>
						</div>
						<!-- 转人工分组 -->
						<div class="artificial" v-if="item.type == 'artificial_service' ">
							<div @click="turnArtificial(items.id)" v-for="(items,indexs) in item.content"
								 :key="'r'+indexs" class="row item-center allAlignment"
								 style="height:.75rem;border-bottom:.01rem solid #EEE;">
								<p>
									人工客服:
									<span style="color:#5EA0F7;padding-left:.1rem;">{{items.name}}</span>
								</p>
								<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
							</div>
						</div>
					</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>
								<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;">
							<div class="HeadPortrait row center">
								<img :src=" 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-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-if="item.type == 'user'">

						<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 v-if="item.type == 'user'" :src="user_info.avatar? user_info.avatar: require('@/assets/user1.png') ">
							</div>
						</div>
					</div>

					<!-- 常规系统消息评价 -->
					<div class="row center " v-if="item.type== 'system' ">
						<div class="column item-center "
							 style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
							 v-if="item.content.state  =='getEvaluate' && !haveEvaluation ">
							<p class="row center wrap">{{item.content.text}}</p>
							<button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
							</button>
						</div>

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


					</div>
				</div>

				<div v-if="box_height" style="height:65px">

				</div>
			</div>
			<!-- 中间弹窗登录 -->
			<!-- <yd-popup
			  v-model="centerShow"
			  position="center"
			  width="6.9rem"
			  height="8rem"
			  :masker-opacity=".2"
			>
			  <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
				<img
				  @click="centerShow = false"
				  style="width: 0.32rem;height: 0.32rem;"
				  src="@/assets/Service5.png"
				>
			  </div>
			  <div class="row center" style="font-size:.56rem;">
				<p style="color:#F04992;">HX</p>
				<span style="color:#5EA0F7;">669</span>
			  </div>
			  <input class="loginInput" type="text" placeholder="姓名">
			  <input class="loginInput" type="text" placeholder="手机号">
			  <input class="loginInput" type="email" placeholder="邮箱地址">
			  <div class="row" style="margin:0 .2rem;">
				<input class="loginInput" placeholder="输入验证码" type="text" style="margin:.5rem 0 0 0;">
				<p
				  @click="initialLoginCode"
				  class="row center"
				  style="width:100%;height:.8rem;margin-top:.5rem;background:#F1E1E0;border-radius: .1rem;margin-left:.2rem;font-size:.3rem;color:#666;"
				>{{loginCode}}</p>
			  </div>
			  <div class="row center sub" style="margin:.5rem .2rem .2rem .2rem;">登录</div>
			</yd-popup> -->

			<!-- 底部弹窗评价 -->
			<yd-popup v-model="bottomShow" position="bottom" height="6.5rem" :masker-opacity=".2">
				<div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
					<img @click.stop="bottomShow = false" style="width: 0.32rem;height: 0.32rem;"
						 src="@/assets/Service5.png">
				</div>
				<div style="color:#666;text-align: center;font-size:.28rem;">感谢您的咨询，请对我们的服务做出评价</div>
				<div style="height:2.3rem;" class="row allAlignment evaluatebtn">
					<div style="width:33%;height:100%;">
						<div class="row wrap center" @click="evaluateClick(1)">
							<img style="width:.66rem;height:.66rem;"
								 :src="evaluateState =='1'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')">
							<p>满意</p>
						</div>
					</div>
					<div style="width:33%;height:100%;" @click="evaluateClick(2)">
						<div class="row wrap center">
							<img style="width:.66rem;height:.66rem;"
								 :src="evaluateState =='2'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')">
							<p>一般</p>
						</div>
					</div>
					<div style="width:33%;height:100%;" @click="evaluateClick(3)">
						<div class="row wrap center">
							<img style="width:.66rem;height:.66rem;"
								 :src="evaluateState =='3'?require('@/assets/evaluate3a.png'):require('@/assets/evaluate3.png')">
							<p>不满意</p>
						</div>
					</div>
				</div>
				<!-- <div class="evaluateBox">
				  <textarea placeholder="评价备注" v-model="evalArea"></textarea>
				</div> -->
				<div class="row center sub" @click="evaluateEsc">确定</div>
			</yd-popup>

			<!-- 左侧弹窗客服信息 -->
			<yd-popup v-model="leftShow" position="left" width="4.8rem" :masker-opacity=".2">
				<div class="leftHader row item-center">
					<img @click="leftShow = false" class="icon" src="@/assets/Service4.png">
					<img class="logo" :src="img_http + logo" alt="">
					<p style="color:#FFF;font-size:.34rem;">{{service_info.name}}</p>


				</div>
				<div>
					<div class="leftMain-top row">
						<div>
							<p>
								<!-- 客服名字 -->
								<span>姓名:</span>
								{{service_info.name}}
							</p>
							<p>
								<!-- 客服工号 -->
								<span>工号:</span>
								{{service_info.job_name}}
							</p>
							<p>
								<!-- 客服性别 -->
								<span>性别:</span>
								保密
							</p>
							<p>
								<!-- 客服职务 -->
								<span>职务:</span>
								咨询服务
							</p>
						</div>
						<div class="row center">
							<img style="width:1.8rem;height:1.8rem;"
								 :src="img_http + service_info.avatar">
						</div>
					</div>
					<div class="leftMain-chenter"
						 style="padding:0 .3rem;margin-top:.3rem;padding-bottom:.6rem;border-bottom:.01rem solid #ddd;"
					>
						<!-- 客服个性签名 -->
						<span>个性签名：</span>
						{{service_info.signature}}
					</div>
					<!-- 广告图 -->
					<div class="leftMain-bottom row center" style="padding:0 .3rem;margin-top:.6rem;">
						<a :href="'http://'+advertisement.advertisement_url" target="_blank" rel="noopener noreferrer">
							<img style="width:4.2rem;height:7rem;" :src="img_http+advertisement.advertisement_img">
						</a>
					</div>
				</div>
			</yd-popup>
			<!-- 底部输入框 -->
			<div class="footer row wrap" id='input_box'>
				<yd-cell-group>
					<yd-cell-item>
						<yd-textarea
								slot="right"
								 contenteditable="true"
								 v-model.trim="text_info"
								 @keydown="inputNumFun()"
								 placeholder="请输入你的问题："
								 maxlength="100">
						</yd-textarea>

					</yd-cell-item>
				</yd-cell-group>
				<div class="send row item-center" style="border-bottom:.01rem solid #ddd">
					<img
							:src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
							@click="faceClick"
							style="width:.48rem;height:.48rem"
					>
					<input type="file" id="file" @change="uploadIMG" accept="image/jpeg,image/jpg,image/png,image/svg"
						   style="display:none">
					<label for="file">
						<img src="@/assets/imge.png" style="width:.46rem;height:.42rem">
					</label>
					<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;':''"
							class="row center"
					>发送
					</div>
				</div>
				<!-- 表情包 -->
				<div v-show="meme" class="memeBox">
					<yd-slider autoplay="0" :loop="false">
						<yd-slider-item>
							<div>
								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
									<li v-for="(item,index) in frceArr" :key="index" v-show="index<15">
										<img
												class="memeImg"
												:src="require(`@/assets/${index}.gif`)"
												@click="memeImg(index)"
										>
									</li>
								</ul>
							</div>
						</yd-slider-item>
						<yd-slider-item>
							<div>
								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
									<li v-for="(item,index) in frceArr" :key="index" v-show="index>15&&index<=30">
										<img
												class="memeImg"
												:src="require(`@/assets/${index}.gif`)"
												@click="memeImg(index)"
										>
									</li>
								</ul>
							</div>
						</yd-slider-item>
						<yd-slider-item>
							<div>
								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
									<li v-for="(item,index) in frceArr" :key="index" v-show="index>30&&index<=45">
										<img
												class="memeImg"
												:src="require(`@/assets/${index}.gif`)"
												@click="memeImg(index)"
										>
									</li>
								</ul>
							</div>
						</yd-slider-item>
						<yd-slider-item>
							<div>
								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
									<li v-for="(item,index) in frceArr" :key="index" v-show="index>45&&index<=60">
										<img
												class="memeImg"
												:src="require(`@/assets/${index}.gif`)"
												@click="memeImg(index)"
										>
									</li>
								</ul>
							</div>
						</yd-slider-item>
						<yd-slider-item>
							<div>
								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
									<li v-for="(item,index) in frceArr" :key="index" v-show="index>60">
										<img
												class="memeImg"
												:src="require(`@/assets/${index}.gif`)"
												@click="memeImg(index)"
										>
									</li>
								</ul>
							</div>
						</yd-slider-item>
					</yd-slider>
				</div>
			</div>
		</div>
		<!-- 留言知识库 -->
		<div v-if="knowledge">
			<!-- 接收返回消息 -->
			<knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime"/>
		</div>
	</div>
</template>

<script>
	import "../css/index.css";
	import knowledgeLibrary from './knowledgeLibrary'
	import frce from "./frce.js";
	import avatarImg from "./../assets/user.png"
	export default {
		name: "service",
		// 模板注册
		components: {
			knowledgeLibrary
		},
		data() {
			return {
				/*-----------------------------------------------*/
				text_info: "", //输入框内容
				knowledge: false,//留言知识库开关
				leftShow: false, //左侧详细开关
				evaluateOnOff: false, //人工客服评价通知
				bottomShow: false, //底部评价弹窗开关
				meme: false, // 表情包开关
				frceArr: [], //表情包代码
				evaluateState: 100,//评价状态
				websock: null,//创建websock
				user_info: '',//用户信息
				apiToken: '',//通话调用凭证
				currentTime: '',//接口调用服务器时间
				problem: [],//机器人问题
				welcome: [],//欢迎语
				advertisement: '', //广告
				img_http: 'http://103.108.43.176:8080',//图片路径域
				//img_http:'http://192.168.2.186:8090',//图片路径域

				robot: [],//和机器人聊天临时数据
				chat: [],//人工会话
				error_num: 1001,//机器人回答超出能力之外编号
				isConnection: true,//人工分组列表开关
				//客服信息
				service_info: {
					avatar: '/static/customer/images/robot.png',
					job_name: '001',
					name: '智能客服',
					signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
				},
				link_success: false,//人工链接成功
				conversationId: '',//会话工单
				chatNum: 0,//触发评价按钮条件
				haveEvaluation: false,//是否已评价
				evalArea: '', //评价备注
				source: {},//来源信息
				initData: 1,//
				isTurnArtifcial: true,
				box_height: false,//苹果浏览器增加会话框高度
				logo: '',
				isExit: false,
				historyMsg: false, // 是否展示历史信息
				historyMsgtext:"", // 历史信息内容提示
				hisSviceChat:[],

				avatar: avatarImg,
			};
		},
		// 方法
		methods: {
			// 退出聊天
			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,
					}
				}));
				this.socket_close(this.user_info.id);
				this.setInit();
				this.initWebsocket()
				this.isExit = false;

			},
			/*******************************************/
			//设置token加密
			setApiToken(name, controller, time, modules) {
				let txetVal = name + 'customer-service' + controller + time + modules;
				let sssd = txetVal.toLowerCase();
				return this.$md5(txetVal.toLowerCase());
			},

			/*******************************************/
			//初始化Websocket链接
			initWebsocket() {

				let sock_ip = 'ws://103.108.43.176:9101'; // 线上
				// let sock_ip = 'ws://192.168.2.187:9101';  // 本地

				this.websock = new WebSocket(sock_ip + "?apiToken=" + this.apiToken);
				//数据返回
				this.websock.onmessage = this.socket_message;
				//数据发送
				this.websock.onopen = this.socket_open;
				//重新链接
				this.websock.onerror = this.socket_error;
				//关闭链接
				this.websock.onclose = this.socket_close;
			},

			/*******************************************/
			//连接建立之后执行send方法发送数据
			socket_open() {
				// let actions = {"test":"12345"};
				console.log('我链接了');
				//this.socket_send(JSON.stringify(actions));
			},

			/*******************************************/
			//连接建立失败重连
			socket_error() {
				this.initWebSocket();
			},

			/*******************************************/
			//数据接收
			socket_message(e) {
				if (!e.data) return;
				const redata = JSON.parse(e.data);
				console.log(redata);
				//欢迎语
				if (redata.message_type == 'helloMessage') {
					this.isTurnArtifcial = true;
					if (this.initData == 1) {
						this.welcome.push(redata.data.content);
						//this.welcome.push('请点击您想咨询的问题，若都不是，请在输入框直接输入');
					}
				}
				//广告语
				if (redata.message_type == 'advertisement') {
					this.advertisement = redata.data[0]
				}

				//机器人回复
				if (redata.message_type == "robotMessage") {
					// console.log(redata);
					if (redata.data.content == "error") {
						this.robot.push({
							type: this.error_num,
						})
						this.error_num++;
					} else {
						this.robot.push({
							type: 'service',
							content: {text: redata.data.content}
						})
					}
					this.automaticRolling();
					//data
					//this.robot =
				}


				//人工链接
				if (redata.message_type == 'connect') {
					let server= {};
					if (redata.data) {
						server = redata.data
					} else {
						server = {
							conversationId: redata.data.conversationId,
							kf_id: redata.data.kf_id,
							kf_name: "",
							serverInfo: {
								avatar: this.avatarImg,
								client_id:"",
								group:"",
								id: "",
								intime:"",
								job_name: "",
								name: "tank",
								signature: "",
								status: 0,
								task: 0,
							}

						}
					}
					this.isExit = true;
					this.link_success = true;
					this.$dialog.loading.close();
					this.service_info = server.serverInfo;
					this.conversationId = server.conversationId;
				}

				//人工会话回复
				if (redata.message_type == "chatMessage") {
					// 转接的时候清除历史信息
					this.hisSviceChat = [];
					this.$dialog.loading.close();
					let obj = {};
					if (this.$public.isJSON(redata.data.content)) {
						obj = JSON.parse(redata.data.content);
						obj.text = this.turnFace(obj.text)
					} else {
						obj.text = redata.data.content;
					}
					this.chat.push({
						type: 'service',
						content: obj
					})
					// this.setNum++;
				}

				//系统消息通知客户结束通话
				if (redata.message_type == 'closeBysever') {
					this.setInit();
				}

				//系统消息通转人工
				if (redata.message_type == 'notice') {
					this.$dialog.loading.close();
					this.isTurnArtifcial = true;
					let _this = this;
					this.$dialog.alert({
						mes: redata.content, callback: () => {
							this.initData = 100;
							_this.$dialog.loading.open('数据加载中...');
							setTimeout(() => {
								_this.$dialog.loading.close();
								_this.registered();
							}, 2000);
						}
					});
				}

				//系统消息评价
				if (redata.message_type == "getEvaluate") {
					// this.evaluateOnOff = true;
					// console.log( this.chat)
					this.chat.push({
						type: 'system',
						content: {
							text: redata.data.content,
							state: 'getEvaluate',
						}
					})
				}

				//会话关闭前通知用户
				if (redata.message_type == 'overtime') {
					this.chat.push({
						type: 'system',
						content: {
							text: redata.data.content,
							state: 'closeInform',
						}
					})
				}

				// 历史信息
				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();
			},

			/*******************************************/
			//数据发送
			socket_send(Data) {
				this.websock.send(Data);
			},


			/*******************************************/
			//关闭
			socket_close(e) {
				// console.log('断开连接', e);
				this.initData = 100;
				this.link_success = false;
				this.registered();
				// this.websock.close()
			},

			/*****************************************/
			//用户匿名注册
			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.$public.getQueryString('appid'),
					appuid: this.$public.getQueryString('appuid'),
				}

				let obj = {
					headers: {
						"apiToken": this.setApiToken('autoReg', 'register', this.currentTime[0], 'index')
					}
				}

				this.post('api/index/register/autoReg', data, obj).then(res => {
					console.log(res,"用户信息");
					if (res.data.code == 1) {
						this.user_info = res.data.data;

						// 游客 token
						localStorage.setItem("token", res.data.data.token);
						localStorage.setItem("tutype", res.data.tutype);
						//Websocket链接

						setTimeout(() => {
							this.$dialog.loading.close();
							this.initWebsocket();
						}, 2000)
						//console.log(res.data.data)
					}
				})
			},

			/******************************************/
			//获取热门问题
			getProblem() {
				let obj = {
					headers: {
						// 'Content-Type': 'application/x-www-form-urlencoded',
						"apiToken": this.setApiToken('index', 'robot', this.currentTime[0], 'index')
					}
				}
				this.post('api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, obj).then(res => {
					//console.log(res.data.data);
					this.problem = res.data.data;
				})
			},

			/*******************************************/
			//推送机器人消息
			pushMessage(e) {
				this.robot.push({
					type: 'service',
					content: {text: e}
				});
				this.automaticRolling();
			},

			/*******************************************/
			//转人工
			turnArtificial(id) {
				this.group = id;
				this.$dialog.loading.open('转接中...')
				if (this.isTurnArtifcial) {

					let data = {
						'type': 'userInit',
						data: {
							'uid': this.user_info.id,
							'name': this.user_info.name,
							'avatar': this.user_info.avatar,
							'group': this.group
						}
					}
					this.socket_send(JSON.stringify(data));
					this.isTurnArtifcial = false
				}
			},

			/******************************************/
			// 消息发送
			send() {
				if (this.text_info == '') return;
				let str = this.text_info;
				let formatStr = str.replace(/\n|\r\n/g,"<br>");

				let type = 'toRobot';
				let data = {};
				let obj = {
					text: formatStr,
					img: '',
					type: ''
				}
				this.meme = false;
				// console.log(JSON.stringify(obj))
				//和人工发送消息
				if (this.link_success) {

					data = {
						from_name: this.user_info.name,
						content: JSON.stringify(obj),
						from_id: this.user_info.id,
						avatar: '',
						to_id: this.service_info.id,
						to_name: this.service_info.name,
						conversationId: this.conversationId,
					}
					type = 'chatMessage';
					this.chat.push({
						type: 'user',
						content: {text: this.turnFace(obj.text)}
					})
				} else {//和机器人聊天
					data = {
						groups_id: '1',
						robot_name: formatStr,
						robotgroups_id: '1',
					}

					console.log(this.turnFace(formatStr));
					type = 'toRobot';
					//本地存放数据
					this.robot.push({
						type: 'user',
						content: this.turnFace(formatStr) //obj
					})
				}
				this.socket_send(JSON.stringify({type, data}))
				this.text_info = '';
				this.automaticRolling();
				// console.log(data)
			},

			/*******************************************/
			//获取转接人工客服列表
			connectionService() {
				if (!this.isConnection) return
				let obj = {
					headers: {
						"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
					}
				}
				this.isConnection = false;
				//api
				this.get('api/index/groups/index', obj).then(res => {
					if (res.data.code == 1) {
						this.robot.push({
							type: 'artificial_service',
							content: res.data.data
						});
						this.automaticRolling();
					}
				})
				//this.hintSwitch.connection = true; //系统提示开关激活
				// 此处为请求
			},

			/*******************************************/
			//发送消息后自动滚动高度
			automaticRolling() {
				this.$nextTick(() => {
					let msg = document.getElementById('main') // 获取对象
					// let input_box = document.getElementById('input_box') // 获取对象

					//判断是否是苹果手机自代浏览器
					if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
						this.box_height = true; //input_box+'px';
					}

					msg.scrollTop = msg.scrollHeight // 滚动高度

				})
			},

			/*******************************************/
			//图片发送
			uploadIMG(e) {
				//console.log(e);
				let self = this;
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				let picavalue = files[0];
				//console.log(picavalue);
				if (picavalue.size / 1000 > 20000) {
					this.$message({
						message: "图片过大不支持上传",
						type: "warning"
					});
				} else {
					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
						// let img = imgSrc;

						// 数据结构请求
						self.post('api/index/upload/uploadImg', formData).then(res => {
							// console.log(res.data.code)
							if (res.data.code == 1) {
								let type = 'toRobot';
								let data = {};
								let obj = {
									text: '',
									img: res.data.data.src,
									type: ''
								}
								if (self.link_success) {
									//和人工聊天发送图片
									data = {
										from_name: self.user_info.name,
										content: JSON.stringify(obj),
										from_id: self.user_info.id,
										avatar: '',
										to_id: self.service_info.id,
										to_name: self.service_info.name,
										conversationId: self.conversationId,
									}
									type = 'chatMessage';
									//本地储存
									self.chat.push({
										type: 'user',
										content: {img: res.data.data.src}
									});
								} else {
									//和机器发送图片
									data = {
										groups_id: '1',
										robot_name: res.data.data.src,
										robotgroups_id: '1',
									}
									type = 'toRobot';
									//本地储存
									self.robot.push({
										type: 'user',
										content: {img: res.data.data.src}
									});
								}
								self.socket_send(JSON.stringify({type, data}))
								this.automaticRolling();
							}
						})
					});
				}
			},

			/*******************************************/
			//手机弹窗处理
			inputShow(e) {
				//console.log('a')
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/iPhone\sOS/i) == "iphone os") {
					var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;

					setTimeout(() => {
						document.body.scrollTop = document.body.scrollHeight - (nowClientHeight / 2)
					}, 200);
				} else {
					setTimeout(function () {
						e.target.scrollIntoView({behavior: "smooth", block: "end"});
					}, 100);
				}
			},

			/******************文字信息转表情******************/
			turnFace(data) {
				let str = data.match(/\#\[.*?\]\//g);
				let arr = Array.from(new Set(str));
				arr.forEach(e => {
					let imgsrc = '';
					for (let i = 0; i < this.frceArr.length; i++) {
						let expText = e.slice(1, e.length - 1);
						if (expText == this.frceArr[i]) {
							imgsrc = '<img class="hover" src="' + require(`@/assets/${i}.gif`) + '"/>'
							break;
						}
					}

					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
				})
				return data;
			},


			/*******************************************/
			// 表情包开关
			faceClick() {
				this.meme = !this.meme;
			},

			/*******************************************/
			//当表情被点击
			memeImg(i) {
				this.text_info = this.text_info + "#" + this.frceArr[i] + "/";
				//this.text_info = this.text_info + '<img  :src="' + require(`@/assets/${i}.gif`) +'"/>';
				// console.log( this.text_info);
			},

			// /*******************************************/
			// //验证码
			// initialLoginCode() {
			//   this.loginCode = "";
			//   for (let i = 1; i <= 4; i++) {
			//     this.loginCode =
			//       this.loginCode + frce.arr[Math.floor(Math.random() * 32)];
			//   }
			// },

			/********************************************/
			//显示隐藏评价
			is_show_evaluate() {
				if (this.evaluateState == 100) {
					this.bottomShow = true;
				} else {
					if (!this.haveEvaluation) {
						this.bottomShow = false;
					} else {
						this.$dialog.notify({
							mes: '亲，您已经评价了...',
							timeout: 5000,
							callback: () => {
								//console.log('我走咯！');
							}
						});
					}
				}
			},

			/*******************************************/
			//切换评价状态
			evaluateClick(type) {
				// console.log(type);
				this.evaluateState = type;
			},

			/*******************************************/
			//提交评价信息
			evaluateEsc() {
				this.get('/api/index/evaluate/putEvaluate', {
					params: {
						'evaluateId': this.evaluateState,
						'conversationId': this.conversationId,
					}, headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currentTime[0], 'index')
					}
				}).then(res => {
					//console.log(res);
					if (res.data.code == 1) {
						this.bottomShow = false;
						// this.hintSwitch.evaluateOnOff = true;
						this.haveEvaluation = true;// 标识已评价
					}
				})

			},

			/************************************************/
			//人工聊天初始化
			setInit() {
				this.haveEvaluation = false;
				this.chat = [];
				this.evaluateState = 100;
				this.meme = false
				this.frceArr = [];//表情包代码
				this.isConnection = true;
				this.service_info = {
					avatar: '/static/customer/images/robot.png',
					job_name: '001',
					name: '智能客服',
					signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
				}
			},

			/* ****************获取聊天次数****************** */
			getChatNum() {
				this.get('/api/index/evaluate/minRound', {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('minround', 'evaluate', this.currentTime[0], 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.chatNum = res.data.data.systemconfig_data
					}
				})
			},
			// 留言知识库返回到主页
			returnIndex(data) {
				this.knowledge = data
			}

		},

		/**
		 * 组件挂载阶段
		 */
		created() {
			this.frceArr = frce.frce;
			// this.initialLoginCode();
		},

		/**
		 * 视图挂载前
		 */
		mounted() {
			this.source.appuid = this.$public.getQueryString('appuid');//用户标识
			this.source.appid = this.$public.getQueryString('appid');//用户来源
			//console.log(this.source);
			//页面初始化获取系统时间第一步
			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
			this.$dialog.loading.open('网络连接中...')

			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(' ')
					this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;

					// console.log( this.currentTime[0] );
					this.apiToken = this.$md5('customer-service' + this.currentTime[0] + window.location.origin);
					//匿名注册
					this.registered();
					//获取机器人热门问题
					this.getProblem();
					//获取配置信息
					this.getChatNum();
				}
			})
		},
		// 计算
		computed: {
			inputmsg() {
				return this.text_info;
			}
		},
		// 监听
		watch: {},
		// 组件生命周期结束销毁阶段
		beforeDestroy() {
			this.timers = false;
		}
	};
</script>

<style scoped>

	.logo {
		margin: 0 0.1rem;
		width: 0.4rem;
		height: 0.4rem;
	}
	/* 聊天 */
	.memeImg {
		width: 0.6rem;
		height: 0.6rem;
		margin: 0.15rem 0.4rem;
	}

	.dialogueA {
		padding-left: 0.3rem;
		padding-right: 0.3rem;
	}

	.dialogueB {
		padding-right: 0.3rem;
		padding-left: 0.3rem;
	}

	.left {
		position: relative;
		z-index: 99;
		background: #fff;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -0.08rem;
		top: 0.2rem;
		width: 0.125rem;
		height: 0.2rem;
		background: #fff;
		transform: skewX(30deg);
		z-index: -1;
		border-left: 0.02rem solid #dfdfdf;
		border-top: 0.02rem solid #dfdfdf;
	}

	.right {
		position: relative;
		z-index: 99;
		background: #5ea0f7;
		border: 0.02rem solid #5ea0f7;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -0.07rem;
		top: 0.2rem;
		width: 0.125rem;

		height: 0.2rem;
		background: #5ea0f7;
		transform: skewX(-30deg);
		z-index: -1;
		border-left: 0.02rem solid #5ea0f7;
		border-top: 0.02rem solid #5ea0f7;
	}

	.service {
		width: 100%;
		color: #555;
		font-size: 0.28rem;
		padding-top: 1rem;
		background: #f5f5f5;
	}

	.header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
		height: 1rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		font-size: 0.34rem;
		color: #fff;
		padding: 0 0.3rem;
	}

	.main {
		height: 83vh;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 0.3rem;
	}

	.btn {
		display: inline-block;
		padding: 0 0.36rem;
		text-align: center;
		line-height: 0.4rem;
		background: rgba(221, 221, 221, 1);
		border-radius: 0.3rem;
		color: #fff;
		font-size: 0.24rem;
		max-width: 6rem;
		margin: 0 auto;
		margin-top: 0.3rem;
	}

	.btn .click {
		color: #5ea0f7;
	}

	.btnRouter {
		color: #5ea0f7;
	}

	.systemDialogue {
		min-height: 0.8rem;
		width: 100%;
	}

	.manUserDialogue {
		min-height: 1rem;
	}

	.manPlatformDialogue {
		min-height: 1rem;
	}

	.user {
		padding: 0.2rem;
		display: inline-block;
		border-radius: 0.1rem;
		font-size: 0.28rem;
		color: #fff;
	}

	.HeadPortrait {
		width: 1rem;
		height: 1rem;
		/* background: #ddd; */
		border-radius: 0.1rem;
	}

	.HeadPortrait img {
		width: 100%;
		height: 100%;
	}

	.icon {
		width: 0.32rem;
		height: 0.32rem;
	}
	.icon-msg {
		width: 0.32rem;
		height: 0.32rem;
		margin: 0 0.1rem;
	}
	.customerService {
		background: #ffffff;
		padding: 0.2rem;
		display: inline-block;
		border-radius: 0.1rem;
		font-size: 0.28rem;
		border: 1px solid rgba(223, 223, 223, 1);
	}

	.customerService {
		/* min-height: 1rem; */
	}

	.system {
		width: 100%;
		border: 0.01rem solid rgba(223, 223, 223, 1);
		border-radius: 0.1rem;
	}

	div /deep/ .yd-accordion-head {
		/* border-radius: 0.1rem; */
		border-bottom: 0.01rem solid rgb(238, 238, 238);
		padding: 0 0.2rem;
	}

	div /deep/ .yd-accordion-title, div /deep/ .yd-accordion-head-arrow {
		min-height: 0.8rem !important;
	}

	div /deep/ .yd-textarea textarea {
		-webkit-user-select: auto;
	}

	.footer {
		min-height: 1.2rem;
		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
		background: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.input {
		width: 60%;
		min-height: 1.2rem;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		border: none;
		padding-right: 0.3rem;
		padding-left: 0.3rem;
		font-size: 0.28rem;
	}

	.send {
		width: 40%;
		position: absolute;
		right: 0;
		top: 0;
		background: #fff;
		height: 1.2rem;
	}

	.memeBox {
		height: 3rem;
		width: 100%;
	}

	.send img {
		margin-right: 0.4rem;
	}

	.artificial {
		margin-top: 0.3rem;
		border: 0.01rem solid #dfdfdf;
		background: #fff;
		border-radius: 0.1rem;
		padding: 0 0.2rem;
	}

	div /deep/ .yd-accordion-head-arrow:after {
		border: none;
		width: 0.3rem;
		height: 0.3rem;
		background: url("../assets/addright.png") no-repeat;
		background-size: 100% 100%;
		transform: rotate(0deg);
	}

	div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
		transform: rotate(-270deg);
	}

	div /deep/ .yd-accordion {
		border-radius: 0.1rem;
	}

	div /deep/ .yd-accordion-content {
		border-radius: 0.1rem;
	}

	.imgSrc img {
		width: 1.2rem;
	}

	.leftHader {
		height: 1rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
		padding: 0 0.3rem;
	}

	.leftMain-top {
		margin-top: 0.4rem;
		font-size: 0.28rem;
		line-height: 0.45rem;
		padding: 0 0.3rem;
		color: #666;
	}

	.leftMain-top span {
		color: #999;
	}

	.leftMain-top > div {
		width: 50%;
	}

	.leftMain-center {
		margin-top: 0.3rem;
		color: #666;
		line-height: 0.5rem;
	}

	.leftMain-chenter span {
		color: #999;
		font-size: 0.28rem;
	}

	.evaluate {
		height: 1.7rem;
		background: #fff;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
		color: #666;
		margin-top: 0.3rem;
	}

	.evaluateBtn {
		width: 1.4rem;
		height: 0.6rem;
		border: none;
		background: #f04992;
		color: #fff;
		border-radius: 0.1rem;
	}

	div /deep/ .yd-popup {
		border-radius: 0.2rem 0.2rem 0 0;
	}

	div /deep/ .yd-popup-content {
	}

	.evaluatebtn > div p {
		height: 50%;
		width: 100%;
		text-align: center;
		margin-top: 0.14rem;
	}

	.evaluatebtn > div {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.evaluateBox {
		margin: 0 0.2rem;
		height: 1.5rem;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
		background: #f5f5f5;
	}

	.evaluateBox textarea {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		border: none;
		border-radius: 0.1rem;
		padding: 0.2rem;
		color: #999;
		font-size: 0.28rem;
	}

	.sub {
		margin: 0 0.2rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		height: 1rem;
		font-size: 0.34rem;
		color: #fff;
		border-radius: 0.1rem;
		margin-top: 0.4rem;
	}

	div /deep/ .yd-popup-content {
		background: #fff;
		border-radius: 0.1rem;
	}

	.loginInput {
		height: 0.8rem;
		border: 0.01rem solid #ddd;
		background: #f5f5f5;
		border-radius: 0.1rem;
		margin-top: 0.5rem;
		padding: 0.2rem;
		font-size: 0.28rem;
		margin: 0.2rem;
		margin-top: 0.5rem;
		width: 94%;
		color: #999;
	}

	/* 留言 */
	.leave-header {
		height: 1rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		color: #fff;
		font-size: 0.34rem;
		padding: 0 0.3rem;
	}

	.leave-main {
		height: 10rem;
		background: #f5f5f5;
		font-size: 0.28rem;
		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
	}

	.leave-main > div {
		height: 1.3rem;
		margin-bottom: 0.2rem;
	}

	.leave-main > div input {
		height: 0.8rem;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
		background: #fff;
		padding: 0.2rem;
		width: 100%;
		margin-top: 0.1rem;
	}

	.leave-main-txt {
		background: #fff;
		padding: 0.2rem;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
	}

	.imgMsg {
		height: 1.5rem;
		padding: 0 0.2rem;
		margin-top: 0.1rem;
		font-size: 0.24rem;
		background: #fff;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
	}

	.yd-cell-box {
		width: 60%;
		min-height: 1.2rem;

		border: none;
		padding-right: 0.3rem;
		padding-left: 0.3rem;

	}

	div /deep/ .yd-textarea > textarea {
		box-sizing: border-box;
		height: auto;
		min-height: 1.2rem;
		font-size: 0.28rem;
		padding-top: 0.4rem;
	}

	.yd-textarea {
		padding: 0;
	}

	.yd-cell-box {
		margin: 0;
	}

	.yd-cell-item {
		padding: 0;
	}

	div /deep/ .yd-cell:after {
		height: 0;
	}

	div /deep/ .yd-textarea-counter {
		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%;
	}

	/*
	*留言知识库
	 */

</style>