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" v-if="!link_success">
					<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>
					<span style="margin:5px 0 0 5px"><img src="@/assets/on_icon.png" alt=""></span>
				</div>
				<div class="row item-center" v-else>
					<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>
					<span v-if="service_on" style="margin:5px 0 0 5px"><img src="@/assets/on_icon.png" alt=""></span>
					<span v-if="!service_on" style="margin:5px 0 0 5px"><img src="@/assets/off_icon.png" alt=""></span>
				</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-if="( chat.length -1 )  + hisLength >= chatNum" @click="is_show_evaluate()" src="@/assets/Service2.png">
					<img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png" v-if="!isExit">
				</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 == 'error'" class="row allAlignment"
							 style="margin-top:.3rem;">
							<div class="HeadPortrait row center">
								<img v-if="item.type == 'error'" :src="require('@/assets/headAdvent.png')">
							</div>
							<div class="messageWindow dialogueA col-w">
								<!-- <div v-if="item.type == '1001'" 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-if="item.type == 'error'" class="customerService left">{{item.content.text}}
									<div style="color:#5EA0F7;padding-left:.1rem;cursor:pointer;" @click="connectionService">转人工客服</div>
								</div>
								<!-- </div> -->
							</div>
							<div class="HeadPortrait row center">
								<img v-if="item.type == 'user'"
									 :src="require('@/assets/timg.jpg') ">
							</div>
						</div>


						<!-- 和机器人会话互动 -->
						<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="require('@/assets/timg.jpg') ">
							</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">
					<!--历史消息-->
					<div v-if="showHistory" v-for="item in hisSviceChat">
						<!-- 客服信息 -->
						<div v-if="item.from_id.startsWith('KF')">
							<div style="width: 100%;text-align: center;">
								<span v-if="item.time_line">{{item.time_line}}</span>
							</div>
							<div class="row allAlignment" style="margin-top:.3rem;margin-top: 0.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>
								<div class="HeadPortrait row center">

								</div>
							</div>
						</div>
						<!-- 用户信息 -->
						<div v-else>
							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
								<span v-if="item.time_line">{{item.time_line}}</span>
							</div>
							<div class="row allAlignment" style="margin-top:.3rem;">
								<div class="HeadPortrait row center">

								</div>
								<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>
										<div v-html="item.content.text" v-else></div>
									</div>
								</div>
								<div class="HeadPortrait row center">
									<img :src="require('@/assets/timg.jpg') ">
								</div>
							</div>
						</div>
					</div>

					<div v-for="(item,index) in chat" :key="index">

						<!-- 展示历史消息 -->
						<div class="promptBox" v-if="item.type == 'historyMsg'">
							<div class="prompt help">
								<span>{{historyMsgtext}}</span>
							</div>
						</div>
						<!-- 客服会话 -->
						<div v-if="item.type == 'service'">
							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
								<span v-if="item.time ">{{item.time}}</span>
							</div>
							<div class="row allAlignment" style="margin-top:.3rem;">
								<div class="HeadPortrait row center">
									<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-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 style="width: 100%;text-align: center;margin-top: 0.3rem;">
								<span v-if="item.time">{{item.time}}</span>
							</div>
							<div class="row allAlignment" style="margin-top:.3rem;">
								<div class="HeadPortrait row center">

								</div>
								<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>{{item.content.text}}</span>
									</div>
								</div>
								<div class="HeadPortrait row center">
									<img v-if="item.type == 'user'"
										 :src="require('@/assets/timg.jpg') ">
								</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>

				<div v-if="Chrome_height" style="height:40px">

				</div>

				<div v-if="Safari_height" style="height:90px">

				</div>

			</div>

			<!-- 底部弹窗评价 -->
			<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, evaluateState = 100" 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>
								{{service_info.gender == "0" ? "保密" :service_info.gender == 1? '男' :'女' }}
							</p>
							<p>
								<!-- 客服职务 -->
								<span>职务:</span>
								{{service_info.job_name}}
							</p>
						</div>
						<div class="row center">
							<img style="width:1.8rem;height:1.8rem;" v-if="!trueImg" :src="avatar_imgs">
							<img style="width:1.8rem;height:1.8rem;" v-if="trueImg" :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'>
				<!-- @keydown="inputNumFun()" -->
				 <!-- <textarea  
						id="textarea"
						v-model.trim="text_info"
						placeholder="请输入你的问题："
						maxlength="450"
						@keyup ='keyup_maxlength()'
						 :style="{height:iboxheight}" 
					
				>
				</textarea>  -->

				 <autoTextarea placeholder="" lineHeight="30px" border="false" fontSize="18px" />

				<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>
		<!-- 发送消息音频提示
		<audio id="send" src="../../static/send.wav"></audio>
		接收消息音频提示
		<audio id="receive" src="../../static/receive.wav"></audio>
		-->
	</div>
</template>

<script>
	import "../css/index.css";
	import knowledgeLibrary from './knowledgeLibrary'
	import frce from "./frce.js";
	import defaultImgs from "./../assets/timg.jpg"
	import headPortrait from "./../assets/headPortrait.png"
	import autoTextarea from 'auto-textarea'
	export default {
		name: "service",
		// 模板注册
		components: {
			knowledgeLibrary,
			autoTextarea
		},
		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://manage.281570.com',//图片路径域
				//img_http:'http://192.168.2.186:8090',//图片路径域

				robot: [],//和机器人聊天临时数据
				chat: [],//人工会话
				error_num: 1001,//机器人回答超出能力之外编号
				isConnection: true,//人工分组列表开关
				ibox_height:'auto',
				//客服信息
				service_info: {
					avatar: headPortrait,
					job_name: '001',
					name: '智能客服',
					signature: ""
				},
				link_success: false,//人工链接成功
				service_on: true,
				closeByServer: false, //客服关闭会话
				serverNotOnlin: false, //客服掉线
				willOverTime: false, //超时关闭会话
				overTimeMsg: '', // 超时提示内容
				conversationId: '',//会话工单
				chatNum: 0,//触发评价按钮条件
				haveEvaluation: false,//是否已评价
				evalArea: '', //评价备注
				source: {},//来源信息
				initData: 1,//
				isTurnArtifcial: true,
				Chrome_height: false,	// chrome浏览器增加会话框高度
				Safari_height:false, //  苹果浏览器增加会话框高度
				logo: '',
				isExit: false,
				historyMsg: false, // 是否展示历史信息
				historyMsgtext: "", // 历史信息内容提示
				hisSviceChat: [],
				showHistory: true,
				avatar_imgs: headPortrait,
				webTime: '',//人工会话上一次发送消息时间
				chatIndex: '',//人工会话上一次下标
				/*****************websockt心跳变量*******************/
				reconnectData: null,
				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
				timeout: 5000,          //5s一次心跳检测
				timeoutObj: null,
				serverTimeoutObj: null,
				waitingMsg: false, // 是否显示等待排队
				serviceNotOnlineText: '',
				comtSuccess:false,
				hisLength:0,
				trueImg:false,
			};
		},
		// 方法
		methods: {
			// 退出聊天
			is_exit() {
				this.webTime = ''
				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.setInit();

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

			/*******************************************/
			//初始化Websocket链接
			initWebSocket(apiToken) {
				let sock_ip = ''; // 线上
				// let sock_ip = 'ws://192.168.2.187:9101';  // 本地

				this.websock = new WebSocket("ws://ky.281570.com:9101?apiToken=" + 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() {
				console.log('我链接了');
			},

			/*******************************************/
			//连接建立失败重连
			socket_error() {
				console.log('连接建立失败重连');
				// this.initWebSocket();
				// this.setInit();
				// this.reconnect();
			},

			/*******************************************/
			//数据接收
			socket_message(e) {
				if (!e.data) return;
				const redata = JSON.parse(e.data);
				//心跳检测
				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;
					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: 'error',
							content: {text: "您的问题暂无法处理"}
						})
						// this.error_num++;
					} else {
						this.robot.push({
							type: 'service',
							content: {text: redata.data.content}
						})
					}
					console.log(this.robot);
					// this.automaticRolling();
					//data
					//this.robot =
				}


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

						}
					}
					this.service_on = true;
					this.isExit = true;
					this.link_success = true;
					// localStorage.getItem('comtSuccess',true)
					this.$dialog.loading.close();
					this.service_info = server.serverInfo;
					this.conversationId = server.conversationId;
				}

				// 客服掉线.
				if (redata.message_type == 'serviceoffline') {
					this.chat.push({
						type: 'system',
						content: {
							text: redata.msg,
							state: 'closeInform',
						}
					})
					this.automaticRolling();
					this.service_on = false;
					// let that = this;
					// setTimeout(function () {
					//     that.link_success = false;
					//     that.serverNotOnlin = true;
					//     that.closeByServer = true;
					//     that.chat.splice(-1)
					// },3000)

				}
				// 客服不在线请稍后再试
				if (redata.message_type == 'kfNotOnlin') {
					this.service_on = false;
				}

				// 客服会话超时
				if (redata.message_type == 'overtime') {
					this.willOverTime = true;
					this.automaticRolling();
					// this.goBack();
					this.overTimeMsg = redata.data.content;
				}

				// 客服等待排队
				if (redata.message_type == "inqueue") {
					this.waitingMsg = true;
					// 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});
                            }
                        }]
					});
				}

				//人工会话回复
				if (redata.message_type == "chatMessage") {
					// 转接的时候清除历史信息
					// this.hisSviceChat = [];
					// this.getHistory = false;
					// 接收提示音
					this.receiveAudio();
					this.$dialog.loading.close();
					let obj = {};
					let thisTime = '';
					if (this.$public.isJSON(redata.data.content)) {
						obj = JSON.parse(redata.data.content);
						obj.text = this.turnFace(obj.text);
						//接收消息大于两分钟显示时间
						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;
						}
						this.webTime = redata.data.time;
					} else {
						obj.text = redata.data.content;
					}

				
					this.chat.push({
						type: 'service',
						time: thisTime ? thisTime : '',
						content: obj
					})
				}
				//系统消息通知客户结束通话
				if (redata.message_type == 'closeBysever') {
					this.setInit();
					this.showHistory = false;
					this.link_success = false;
					this.isTurnArtifcial = true;
					localStorage.removeItem('comtSuccess');
					this.comtSuccess = false;

				}

				if (redata.message_type == "changeKeFuSuccess") {
					this.$dialog.alert({
						mes: redata.data.content
					});
				}


				//系统消息通转人工
				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') {
					this.hisSviceChat = [];
					let obj = redata;
					this.historyMsgtext = obj.data.content;
					this.chat.push({
						type: 'historyMsg',
						content: {
							text: this.historyMsgtext,
						}
					})
					let historyTime = '';
					this.hisLength =obj.data.chatLog.length
					obj.data.chatLog.forEach(res => {
						// console.log(res,'历史信息');
						res.content = JSON.parse(res.content);
						let time_line = this.$public.customFormatDateTime(res.time_line, '', 3);
						// res.time_line  =
						if (!historyTime) {
							res.time_line = time_line
						} else {
							let newTime = time_line.split(':');
							let lastTime = historyTime.split(':');
							if (newTime[0] == lastTime[0] && newTime[1] < (lastTime[1] + 2)) {
								res.time_line = '';
							} else {
								res.time_line = time_line
							}
						}
						historyTime = time_line;
						this.hisSviceChat.push(res);
					})

				}

				//获取发送时间
				if (redata.message_type == "webTime") {
					// console.log(this.chat)
					// console.log(this.chatIndex)
					if (this.webTime) {
						let newTime = redata.data.webTime.split(':');
						let time = this.webTime.split(':');

						if (newTime[0] * 1 > time[0] * 1) {
							// console.log('newTime[0]')
							this.$set(this.chat[this.chatIndex], 'time', redata.data.webTime);
						} else if (newTime[0] * 1 == time[0] * 1 && (newTime[1] * 1 - time[1] * 1) > 2) {
							this.$set(this.chat[this.chatIndex], 'time', redata.data.webTime);
							// console.log('newTime[1]')
						}
					} else {
						this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
					}
					this.webTime = redata.data.webTime

				}


				// 评价返回
				if (redata.message_type == "evaluate") {
					if (redata.data.status == 1) {
						this.comtSuccess = true;
						localStorage.setItem('comtSuccess',true)
					}
				}
				//屏幕滚动
				this.automaticRolling();
			},

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


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


			/***************************************/
			//socket重连
			reconnect() {
				if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
					return
				}
				this.lockReconnect = true;
				this.reconnectData && clearTimeout(this.reconnectData);
				this.reconnectData = setTimeout(() => {
					this.initWebSocket(this.apiToken);
					//this.registered()
					// console.log('-----lail-----');
					this.lockReconnect = false;
				}, 2000)
			},

			/*************************************/
			//心跳检测
			heatBeat() {
				this.timeoutObj && clearTimeout(this.timeoutObj);
				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
				this.timeoutObj = setTimeout(() => {
					// console.log('发送', {type: 'ping'});
					this.socket_send(JSON.stringify({type: 'ping'}))   //根据后台要求发送
					this.serverTimeoutObj = setTimeout(() => {
						// console.log('------close-------')
						this.websock.close(); //如果 4秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
					}, 4000);
				}, this.timeout)
			},

			/*****************************************/
			//用户匿名注册
			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.$http.post('/index/register/autoReg', data, obj).then(res => {
					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)
						localStorage.setItem('uid', res.data.data.id)
						// 游客 token
						localStorage.setItem("token", res.data.data.token);
						localStorage.setItem("tutype", res.data.tutype);
						//Websocket链接

						this.$dialog.loading.close();
						this.initWebSocket(this.apiToken);
						//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.$http.post('/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();
			},
			checkSetType(){
				let u = navigator.userAgent, app = navigator.appVersion;
					let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
					let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
					if (isAndroid) {
						return 'android';
					}
					if (isIOS) {
				　　　　return 'ios';
					}
			},

			/*******************************************/
			//转人工
			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,
							'settype':this.checkSetType()
						}
					}
					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) {
					// if(this.getHistory){
					// 	this.getHistory = false;
					// }
					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.chatIndex = this.chat.length;
					this.chat.push({
						type: 'user',
						time: '',
						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)
				this.sendAudio();
			},

			// 消息发送音频
			sendAudio() {
				let send = new Audio(); 
				send.src = '../../static/audio/send.wav';
				send.play()
			},
			// 消息接收音频
			receiveAudio() {
				let receive = new Audio()
				receive.src = "../../static/audio/receive.wav";
				receive.play();
			},

			/*******************************************/
			//获取转接人工客服列表
			connectionService() {
				// if (!this.isConnection) return
				let obj = {
					headers: {
						"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
					}
				}
				// this.isConnection = false;
				//api
				this.$http.get('/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 (/iPhone/.test(navigator.userAgent)) {
						this.Safari_height = true; //input_box+'px';
					}
					if (/Linux/.test(navigator.userAgent)) {
						this.Chrome_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];
				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt2M = picavalue.size / 1000 / 1000 > 2;

				if (isLt2M) {
					this.$dialog.notify({
						mes: '图片过大不支持上传哦！',
						timeout: 2000,
					});
				} else if (!isJPG) {
					this.$dialog.notify({
						mes: '只能上传图片哦！',
						timeout: 2000,
					});
				} else {
					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
						// let img = imgSrc;
						// 数据结构请求
						self.$http.uploadPost('/index/upload/uploadImg', formData).then(res => {
							e.target.value = "";
							// 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.chatIndex = self.chat.length;
									//本地储存
									self.chat.push({
										type: 'user',
										time:"",
										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}))
								self.automaticRolling();
							}
						})
					});
				}
			},
			/***********************************/
			keyup_maxlength(){
				let ct=this.text_info;
				let leng=ct.replace(/[^\x00-\xff]/g,"aa").length;
				let len=Math.ceil(leng/25);
				if(leng>12){
					len=len+1;
				}
				if(len >0){
					this.ibox_height=(len)*27;
				
					this.ibox_height=this.ibox_height+'px';

				}
			},
			

			/*******************************************/
			//手机弹窗处理
			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(localStorage.getItem('comtSuccess')){
					this.$dialog.notify({
						mes: '亲，您已经评价了...',
						timeout: 3000,
					});
					return false;
				}

				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() {

				if (this.evaluateState != 100) {
					this.bottomShow = false;
					this.haveEvaluation = true; // 标识已评价
					this.socket_send(JSON.stringify({
						type: 'evaluate', data: {
							evaluate_id: this.evaluateState,
							conversationId: this.conversationId,
							// evaluate_content:''
						}
					}))
					let that = this
					this.$dialog.notify({
						mes: '感谢你的评价！',
						timeout: 2000,
						callback: () => {
							//console.log('我走咯！');
						}
					});

				} else {
					this.$dialog.notify({
						mes: '亲，请选择评价类型...',
						timeout: 2000,
						callback: () => {
							//console.log('我走咯！');
						}
					});
				}
			},

			/************************************************/
			//人工聊天初始化
			setInit() {
				this.haveEvaluation = false;
				this.chat = [];
				this.evaluateState = 100;
				this.hisSviceChat = [];
				this.meme = false
				// this.frceArr = [];//表情包代码
				this.isConnection = true;
				this.isExit = false;
				this.service_info = {
					avatar: '/static/customer/images/robot.png',
					job_name: '001',
					name: '智能客服',
					signature: " "
				}
			},

			/* ****************获取聊天次数****************** */
			getChatNum() {
				this.$http.get('/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;
						// console.log(this.chatNum, '聊天限制')
					}
				})
			},
			// 留言知识库返回到主页
			returnIndex(data) {
				console.log(data)
				this.knowledge = data
			}
		},

		/**
		 * 视图挂载前
		 */
		mounted() {
			this.source.appuid = this.$public.getQueryString('appuid');//用户标识
			this.source.appid = this.$public.getQueryString('appid');//用户来源
			this.frceArr = frce.frce;
			//console.log(this.source);
			//页面初始化获取系统时间第一步
			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
			this.$dialog.loading.open('网络连接中...');
			this.$http.get('/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' + window.location.origin);
					//匿名注册
					this.registered();
					//获取机器人热门问题
					this.getProblem();
					//获取配置信息
					this.getChatNum();
				}

			})
		},

		destroyed() {
			this.setInit();
			this.websock.close() //离开路由之后断开websocket连接
			this.lockReconnect = true;
			clearTimeout(this.reconnectData);      //离开清除 timeout
			clearTimeout(this.timeoutObj);         //离开清除 timeout
			clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
		},
		// 计算
		computed: {
			inputmsg() {
				return this.text_info;
			},
			iboxheight(){
				return this.ibox_height;
			}
		},
		// 监听
		watch: {},
		// 组件生命周期结束销毁阶段
		beforeDestroy() {
			this.timers = false;
		}
	};
</script>

<style scoped>
	#textarea {
		margin: 15px;
		border: none;
	}

	.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;
		max-width: 19.1rem;
		table-layout:fixed;
		word-break: break-all;
		text-align: left;
	}

	.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 {
		margin-top: 0.06rem;
		margin-left: 0.2rem;
		width: 0.32rem;
		height: 0.32rem;
	}

	.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 {
		vertical-align: middle;
		margin-right: 0.4rem;
	}

	.artificial {
		margin: 0.3rem 0 0 1.3rem;
		width: 77%;
		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;
		border-bottom: 0.01rem solid rgb(221, 221, 221);
	}

	div /deep/ .yd-textarea > textarea {
		height: 1.2rem;
		font-size: 0.28rem;
		padding-top: 0.2rem;
	}

	.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%;
	}

	.row .rightAlignment {
		text-align: right;
		display: block;
	}
	#main{
		/* margin-bottom: .3rem; */
	}
	/*
	*留言知识库
	 */

</style>