Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
aqm
/
Customer-Service-Web
3
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

update pc_chat

luke 6 năm trước cách đây
mục cha
cb033f5d42
commit
d9729c08fb
4 tập tin đã thay đổi với 748 bổ sung và 683 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 63 61
      pc_chat/index.html
  2. 18 16
      pc_chat/src/components/chat.vue
  3. 90 92
      pc_chat/src/components/leaveMsg.vue
  4. 577 514
      pc_chat/src/components/ledgeBase.vue

+ 63 - 61
pc_chat/index.html
Xem Tập Tin 

@@ -1,69 +1,71 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html>
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <!-- 外部链接图片加载 -->
 
-    <meta name="referrer" content="no-referrer" />
 
-    <title>pc-chat</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
-  <script>
 
-    let name = getQueryString('type');
 
-    console.log(name)
 
-    function getQueryString(name) {
 
-    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
 
-    var r = window.location.search.substr(1).match(reg);
 
-    if (r != null) {
 
-        return unescape(r[2]);
 
-    }
 
-    return null;
 
-  }
 
-  // !function (window) {
 
-  // /* 设计图文档宽度 */
 
-  // var docWidth = 100/1920;
 
+<html lang="en">
 
+<head>
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+	<!-- 外部链接图片加载 -->
 
+	<meta name="referrer" content="no-referrer"/>
 
+	<title>pc-chat</title>
 
+</head>
 
+<body>
 
+<div id="app"></div>
 
+<!-- built files will be auto injected -->
 
+</body>
 
+<script>
 
+	let name = getQueryString('type');
 
+	// console.log(name)
 
 
 
-  // var doc = window.document,
 
-  //     docEl = doc.documentElement,
 
-  //     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
 
+	function getQueryString(name) {
 
+		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
 
+		var r = window.location.search.substr(1).match(reg);
 
+		if (r != null) {
 
+			return unescape(r[2]);
 
+		}
 
+		return null;
 
+	}
 
 
 
-  // var recalc = (function refreshRem () {
 
-      
-  //     let client_width   = document.body.clientWidth
 
-  //     console.log(client_width)
 
-  //     /* 8.55：小于320px不再缩小，11.73：大于440px不再放大 */
 
-  //     if(client_width <500){
 
-  //       docWidth = 10/750
 
-  //       //var clientWidth = docEl.getBoundingClientRect().width;
 
-  //       ///docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.73), 8.55) * 5 + 'px';
 
-  //       docEl.style.fontSize =parseInt(414/750*100) +'px';
 
-  //     }else{
 
+	// !function (window) {
 
+	// /* 设计图文档宽度 */
 
+	// var docWidth = 100/1920;
 
 
 
-  //       docEl.style.fontSize =docWidth*1920 + 'px';//pcduan
 
-  //     }
 
-  //     console.log('11',docEl.style.fontSize)
 
-  //     return refreshRem;
 
-  // })();
 
+	// var doc = window.document,
 
+	//     docEl = doc.documentElement,
 
+	//     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
 
 
 
-  // /* 添加倍屏标识，安卓为1 */
 
-  // docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
 
+	// var recalc = (function refreshRem () {
 
 
 
-  // if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
 
-  //     /* 添加IOS标识 */
 
-  //     doc.documentElement.classList.add('ios');
 
-  //     /* IOS8以上给html添加hairline样式，以便特殊处理 */
 
-  //     if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
 
-  //         doc.documentElement.classList.add('hairline');
 
-  // }
 
+	//     let client_width   = document.body.clientWidth
 
+	//     console.log(client_width)
 
+	//     /* 8.55：小于320px不再缩小，11.73：大于440px不再放大 */
 
+	//     if(client_width <500){
 
+	//       docWidth = 10/750
 
+	//       //var clientWidth = docEl.getBoundingClientRect().width;
 
+	//       ///docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.73), 8.55) * 5 + 'px';
 
+	//       docEl.style.fontSize =parseInt(414/750*100) +'px';
 
+	//     }else{
 
 
 
-  // if (!doc.addEventListener) return;
 
-  // window.addEventListener(resizeEvt, recalc, false);
 
-  // doc.addEventListener('DOMContentLoaded', recalc, false);
 
+	//       docEl.style.fontSize =docWidth*1920 + 'px';//pcduan
 
+	//     }
 
+	//     console.log('11',docEl.style.fontSize)
 
+	//     return refreshRem;
 
+	// })();
 
 
 
-  // }(window);
 
-  
-  </script>
 
-</html>
 
+	// /* 添加倍屏标识，安卓为1 */
 
+	// docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
 
+
 
+	// if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
 
+	//     /* 添加IOS标识 */
 
+	//     doc.documentElement.classList.add('ios');
 
+	//     /* IOS8以上给html添加hairline样式，以便特殊处理 */
 
+	//     if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
 
+	//         doc.documentElement.classList.add('hairline');
 
+	// }
 
+
 
+	// if (!doc.addEventListener) return;
 
+	// window.addEventListener(resizeEvt, recalc, false);
 
+	// doc.addEventListener('DOMContentLoaded', recalc, false);
 
+
 
+	// }(window);
 
+
 
+</script>
 
+</html>

+ 18 - 16
pc_chat/src/components/chat.vue
Xem Tập Tin 

@@ -1,12 +1,12 @@
 
 <template>
 
 <template>
 
 	<div v-loading="allLoading" element-loading-text="拼命连接中">
 
 	<div v-loading="allLoading" element-loading-text="拼命连接中">
 
-		<!-- -->
 
-		<el-container class="chatBox">
 
+		<div class="chatBox">
 
 			<!-- ************************* 头部消息 ************************* -->
 
 			<!-- ************************* 头部消息 ************************* -->
 
 			<el-header height='80px'>
 
 			<el-header height='80px'>
 
 				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
 
 				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
 
 					<el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
 
 					<el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
 
-					<el-col class="tit nopd" v-if="machineAndAtl == 100"><span>{{service.kf_name}}</span></el-col>
 
+					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><span v-if="service">{{service.serverInfo.name}}</span>
 
+					</el-col>
 
 					<el-col>
 
 					<el-col>
 
 						<div class="imgBox">
 
 						<div class="imgBox">
 
 							<i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
 
 							<i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
 
@@ -21,7 +21,7 @@
 
 					</el-col>
 
 					</el-col>
 
 				</el-row>
 
 				</el-row>
 
 			</el-header>
 
 			</el-header>
 
-			<el-conatiner class="cationer">
 
+			<div class="cationer">
 
 
 
 				<!--****************************** 聊天会话框模块 *****************************-->
 
 				<!--****************************** 聊天会话框模块 *****************************-->
 
 				<el-main>
 
 				<el-main>
 
@@ -327,10 +327,14 @@
 
 					<el-row class="rt">
 
 					<el-row class="rt">
 
 						<el-col :span='24' class="artificial pd20">
 
 						<el-col :span='24' class="artificial pd20">
 
 							<div class="infor">
 
 							<div class="infor">
 
-								<div>
 
+								<div v-if="machineAndAtl == 10">
 
 									<span>姓名:</span>
 
 									<span>姓名:</span>
 
 									<span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
 
 									<span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
 
 								</div>
 
 								</div>
 
+								<div v-else-if="machineAndAtl == 100">
 
+									<span>姓名:</span>
 
+									<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
 
+								</div>
 
 								<div>
 
 								<div>
 
 									<span>工号:</span>
 
 									<span>工号:</span>
 
 									<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
 
 									<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
 
@@ -364,7 +368,7 @@
 
 					</el-row>
 
 					</el-row>
 
 				</el-aside>
 
 				</el-aside>
 
 
 
-			</el-conatiner>
 
+			</div>
 
 			<!-- 评价框 -->
 
 			<!-- 评价框 -->
 
 			<el-card class="box-card" v-if="evlShow">
 
 			<el-card class="box-card" v-if="evlShow">
 
 				<!-- <div class="close" @click="closeEvl(10)"> -->
 
 				<!-- <div class="close" @click="closeEvl(10)"> -->
 
@@ -396,8 +400,7 @@
 
 				</div>
 
 				</div>
 
 			</el-card>
 
 			</el-card>
 
 			<div class="zzBox" v-if="zzShow"></div>
 
 			<div class="zzBox" v-if="zzShow"></div>
 
-			<!-- </div> -->
 
-		</el-container>
 
+		</div>
 
 	</div>
 
 	</div>
 
 </template>
 
 </template>
 
 <script>
 
 <script>
 
@@ -484,7 +487,6 @@
 
 				timeout: 10000,          //10s一次心跳检测
 
 				timeout: 10000,          //10s一次心跳检测
 
 				timeoutObj: null,
 
 				timeoutObj: null,
 
 				serverTimeoutObj: null,
 
 				serverTimeoutObj: null,
 
-				apiToken: ''
 
 			}
 
 			}
 
 		},
 
 		},
 
 		methods: {
 
 		methods: {
 
@@ -609,7 +611,7 @@
 
 				this.initWebSocket();
 
 				this.initWebSocket();
 
 				this.chatCont = [];
 
 				this.chatCont = [];
 
 				this.customerSviceChat = [];
 
 				this.customerSviceChat = [];
 
-
 
+				this.reconnect();
 
 				//this.questionShow = true;
 
 				//this.questionShow = true;
 
 			},
 
 			},
 
 
 
@@ -799,8 +801,8 @@
 
 			/*************连接建立失败重连***************** */
 
 			/*************连接建立失败重连***************** */
 
 			websocketonerror() {
 
 			websocketonerror() {
 
 				console.log('连接建立失败重连');
 
 				console.log('连接建立失败重连');
 
-				//重新链接
 
-				this.reconnect();
 
+				this.goBack();
 
+
 
 			},
 
 			},
 
 
 
 			/**************数据接收***************** */
 
 			/**************数据接收***************** */
 
@@ -849,6 +851,7 @@
 
 					this.artAndLeave = 10;
 
 					this.artAndLeave = 10;
 
 					this.machineAndAtl = 100;
 
 					this.machineAndAtl = 100;
 
 					this.service = redata.data;
 
 					this.service = redata.data;
 
+					console.log(this.service, '============客服信息')
 
 					this.serviceImg = redata.data.serverInfo.avatar;
 
 					this.serviceImg = redata.data.serverInfo.avatar;
 
 				}
 
 				}
 
 				// 暂无客服
 
 				// 暂无客服
 
@@ -858,10 +861,8 @@
 
 				}
 
 				}
 
 				//接收客服会话
 
 				//接收客服会话
 
 				if (redata.message_type == 'chatMessage') {
 
 				if (redata.message_type == 'chatMessage') {
 
-
 
 					//存储会话超时间
 
 					//存储会话超时间
 
 					this.webTime = redata.data.time;
 
 					this.webTime = redata.data.time;
 
-
 
 					//会话大于两分钟显示
 
 					//会话大于两分钟显示
 
 					let timer = ''
 
 					let timer = ''
 
 					if (this.returnTimer == '') {
 
 					if (this.returnTimer == '') {
 
@@ -957,7 +958,7 @@
 
 			/************关闭会话*******************/
 
 			/************关闭会话*******************/
 
 			websocketonclose(e) {
 
 			websocketonclose(e) {
 
 				console.log('断开会话', e);
 
 				console.log('断开会话', e);
 
-				this.reconnect()
 
+				this.goBack();
 
 			},
 
 			},
 
 
 
 			/*************数据发送***************** */
 
 			/*************数据发送***************** */
 
@@ -1061,6 +1062,7 @@
 
 
 
 			/*************跳转人工客服***************** */
 
 			/*************跳转人工客服***************** */
 
 			jumpService(id) {
 
 			jumpService(id) {
 
+
 
 				this.jumpArtl = true;
 
 				this.jumpArtl = true;
 
 				this.closeByServer = false;
 
 				this.closeByServer = false;
 
 				this.group = id;
 
 				this.group = id;
 
@@ -1877,7 +1879,7 @@
 
 	.retract {
 
 	.retract {
 
 		position: absolute;
 
 		position: absolute;
 
 		right: 0;
 
 		right: 0;
 
-		top: 225px;
 
+		top: 290px;
 
 		z-index: 999;
 
 		z-index: 999;
 
 	}
 
 	}

+ 90 - 92
pc_chat/src/components/leaveMsg.vue
Xem Tập Tin 

@@ -1,98 +1,96 @@
 
 <template>

 <template>

-  <div>

     <el-container class="chatBox">

     <el-container class="chatBox">

-      <el-header height='80px'>

-        <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">

-          <el-col class="tit nopd">

-              <span @click="back()" class="back pointer"></span>

-              <span>我要留言</span>

-            </el-col>

-          <el-col>

-          </el-col>

-        </el-row>

-      </el-header>

-      <el-conatiner class="cationer">

+        <el-header height='80px'>

+            <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">

+                <el-col class="tit nopd">

+                    <span @click="back()" class="back pointer"></span>

+                    <span>我要留言</span>

+                </el-col>

+                <el-col>

+                </el-col>

+            </el-row>

+        </el-header>

+        <div class="cationer">

 

 

-      <el-main>

-          <form action="">

-              <div class="call">

-                  <label for="">

-                      <span>您的称呼</span>

-                      <span class="star"> *</span>

-                  </label>

-                  <el-input v-model="call" placeholder="请输入内容" style="paddiing:0 9px;"></el-input>

-              </div>

-              <div class="phone">

-                  <label for="">

-                     <span>您的手机号</span>

-                      <span class="star"> *</span>

-                      <span class="tips" v-if="error">(请输入正确的手机号)</span>

-                  </label>

-                  <el-input v-model="phone" @blur='sureinfor(1)' placeholder="请输入手机号" style="paddiing:0 9px;"></el-input>

-              </div>

-              <div class="qq">

-                  <label for="">

-                     <span>您的QQ号</span>

-                  </label>

-                  <el-input v-model="QQ" type="number"  placeholder="请输入QQ号" style="paddiing:0 9px;"></el-input>

-              </div>  

-              <div class="wx">

-                  <label for="">

-                     <span>您的微信号</span>

-                  </label>

-                  <el-input v-model="WX" placeholder="请输入微信号" style="paddiing:0 9px;"></el-input>

-              </div>                    

-              <div class="eMail">

-                  <label for="">

-                      <span>您的邮箱地址</span>

-                      <span class="star"> </span>

-                      <span class="tips" v-if="emailError">(请输入正确的邮箱地址)</span>

-                  </label>

-                  <el-input v-model="eMail" @blur='sureinfor(10)' placeholder="请输入邮箱地址" style="paddiing:0 9px;"></el-input>

-              </div>     

-              <div class="leaveMsg">

-                  <label for="">

-                      <span>您的留言信息</span>

-                      <span class="star"> *</span>

-                  </label>

-                 <el-input type="textarea" placeholder="比赛中遇到作弊怎么办？" v-model="leaveInfor"></el-input>

-              </div>

-              <!-- 上传图片 -->

-              <div class="addPhoto">

-                  <label for="">

-                      <span>上传图片</span>

-                  </label> 

-                   <!-- :on-preview="handlePictureCardPreview"  :on-remove="handleRemove" -->

-                  <el-upload style="margin-top:14px;"  

-                  action="/api/index/upload/uploadImg" 

-                  :before-upload ="beforeAvatarUpload"

-                  :on-progress="onProgress"

-                  :on-change ='uploadChange'

-                  :on-success ='uploadSuccess' 

-                  :on-error="uploadError"

-                  :on-remove="handleRemove"

-                  :auto-upload="false"

-                  list-type="picture-card" 

-                  ref="upload"  

-                  >

-                                    <!-- :file-list="uploadImg"

-                   -->

-                      <i slot="default" class="el-icon-plus"></i>

-                  </el-upload>

-                  <!-- :visible.sync="dialogVisible" -->

-                  <el-dialog >

-                    <img width="100%" :src="dialogImageUrl" alt="">

-                  </el-dialog>

-              </div>

-              <!-- 按钮 -->

-              <div class="btn">

-                  <el-button type="primary" @click = 'sub()'>提交留言</el-button>

-              </div>                                     

-          </form>

-      </el-main>

-      </el-conatiner>

+            <el-main>

+                <form action="">

+                    <div class="call">

+                        <label for="">

+                            <span>您的称呼</span>

+                            <span class="star"> *</span>

+                        </label>

+                        <el-input v-model="call" placeholder="请输入内容" style="paddiing:0 9px;"></el-input>

+                    </div>

+                    <div class="phone">

+                        <label for="">

+                            <span>您的手机号</span>

+                            <span class="star"> *</span>

+                            <span class="tips" v-if="error">(请输入正确的手机号)</span>

+                        </label>

+                        <el-input v-model="phone" @blur='sureinfor(1)' placeholder="请输入手机号" style="paddiing:0 9px;"></el-input>

+                    </div>

+                    <div class="qq">

+                        <label for="">

+                            <span>您的QQ号</span>

+                        </label>

+                        <el-input v-model="QQ" type="number"  placeholder="请输入QQ号" style="paddiing:0 9px;"></el-input>

+                    </div>

+                    <div class="wx">

+                        <label for="">

+                            <span>您的微信号</span>

+                        </label>

+                        <el-input v-model="WX" placeholder="请输入微信号" style="paddiing:0 9px;"></el-input>

+                    </div>

+                    <div class="eMail">

+                        <label for="">

+                            <span>您的邮箱地址</span>

+                            <span class="star"> </span>

+                            <span class="tips" v-if="emailError">(请输入正确的邮箱地址)</span>

+                        </label>

+                        <el-input v-model="eMail" @blur='sureinfor(10)' placeholder="请输入邮箱地址" style="paddiing:0 9px;"></el-input>

+                    </div>

+                    <div class="leaveMsg">

+                        <label for="">

+                            <span>您的留言信息</span>

+                            <span class="star"> *</span>

+                        </label>

+                        <el-input type="textarea" placeholder="比赛中遇到作弊怎么办？" v-model="leaveInfor"></el-input>

+                    </div>

+                    <!-- 上传图片 -->

+                    <div class="addPhoto">

+                        <label for="">

+                            <span>上传图片</span>

+                        </label>

+                        <!-- :on-preview="handlePictureCardPreview"  :on-remove="handleRemove" -->

+                        <el-upload style="margin-top:14px;"

+                                   action="/api/index/upload/uploadImg"

+                                   :before-upload ="beforeAvatarUpload"

+                                   :on-progress="onProgress"

+                                   :on-change ='uploadChange'

+                                   :on-success ='uploadSuccess'

+                                   :on-error="uploadError"

+                                   :on-remove="handleRemove"

+                                   :auto-upload="false"

+                                   list-type="picture-card"

+                                   ref="upload"

+                        >

+                            <!-- :file-list="uploadImg"

+		   -->

+                            <i slot="default" class="el-icon-plus"></i>

+                        </el-upload>

+                        <!-- :visible.sync="dialogVisible" -->

+                        <el-dialog >

+                            <img width="100%" :src="dialogImageUrl" alt="">

+                        </el-dialog>

+                    </div>

+                    <!-- 按钮 -->

+                    <div class="btn">

+                        <el-button type="primary" @click='sub()'>提交留言</el-button>

+                    </div>

+                </form>

+            </el-main>

+        </div>

     </el-container>

     </el-container>

-  </div>

 </template>

 </template>

 <script>

 <script>

 import '../css/index.css'

 import '../css/index.css'

@@ -136,7 +134,7 @@ export default {
 
               _this.$axios.post('/api/index/User/LeavingMessage',params).then(res =>{

               _this.$axios.post('/api/index/User/LeavingMessage',params).then(res =>{

                 console.log('res',res)

                 console.log('res',res)

                 if(res.data.code == 1){

                 if(res.data.code == 1){

-                  _this.$message.error('留言成功')

+                  _this.$message.success('留言成功')

                   _this.$emit('value',10);

                   _this.$emit('value',10);

                 }

                 }

               })

               })

+ 577 - 514
pc_chat/src/components/ledgeBase.vue
Xem Tập Tin 

@@ -1,520 +1,583 @@
 
 <template>

 <template>

-  <div>

-    <el-container class="chatBox">

-      <el-header height='80px'>

-        <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">

-          <el-col class="tit nopd">

-              <span @click="back()" class="back pointer"></span>

-              <span>留言知识库</span>

-          </el-col>

-        </el-row>

-      </el-header>

-      <el-conatiner class="cationer">

-        <el-main class="">

-          <div class="leaveCont">

-            <div class=" head row">

-                <el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">

-                    <el-option

-                      v-for="item in options"

-                      :key="item.value"

-                      :label="item.label"

-                      :value="item.value">

-                    </el-option>

-                </el-select>

-                <el-input

-                    placeholder="请输入关键词"

-                    suffix-icon="el-icon-search"

-                    v-model="crux"

-                    class="crux"

-                    >

-                </el-input>

-                <div class="">

-                  <el-button type="primary" @click="search()" style="height:40px;width:100px;margin-left:10px;">查询</el-button>

-                </div>

-              </div>

-

-              <div class="nav">

-                  <div class="list" v-for="item in problemType" :key="item.id" @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">

-                      <span>{{item.name}}</span>

-                  </div>

-              </div>

-              <!-- 折叠面板 -->

-              <div class="fold"  v-if="noBase">

-                <el-collapse accordion>

-                        <el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">

-                            <template slot="title">

-                                <div style="width:100%;" class="quesTit">

-                                    <span>{{item.content}}</span>

-                                    <span>{{item.add_time}}</span>

-                                </div>

-                            </template>

-                            <div>

-                                <div class="conversationBox">

-                                    <div class="timer">

-                                   {{item.add_time}}

-                                    </div>            

-                                    <div class="customer row allAlignment">

-                                    <div></div>

-                                    <div class="row">

-                                        <div class="cont right">

-                                        <div>{{item.content}}</div>

-                                        </div>            

-                                        <div class="headImg" style="margin-right:0">

-                                            <img src="./../assets/st-img/user.png" alt="">

-                                        </div>

-                                    </div>

-                                    </div>

-                                </div>

-                                <div class="conversationBox">

-                                    <div class="timer">

-                                       {{item.dealWith_time}}

-                                    </div>

-                                    <div class=" row">

-                                    <div class="conversation row">

-                                        <div class="headImg">

-                                        <img src="./../assets/st-img/headAdvent.png" alt="">

-                                        </div>

-                                        <div class="cont left" >

-                                        <div>{{item.reply_content}}</div>

-                                        </div>

-                                    

-                                    </div>

-                                    <div style="width:66px;"></div>

-                                    </div>

-                                </div>                                

-                            </div>

-              

-                        </el-collapse-item>

-                </el-collapse>

-              </div>

-              <div v-if="!noBase">

-                  <div class="noBase">

-                    <span>暂无数据</span>

-                  </div>

-              </div>

-          </div>

-          <div class="launch">

-            <el-button type="primary" @click="launchLeave">发起留言</el-button>

-          </div>

-        </el-main>

-      </el-conatiner>

-    </el-container>

-  </div>

+	<div class="chatBox">

+		<el-header height='80px'>

+			<el-row type="flex" justify='space-between' align='middle' style="height:100%;">

+				<el-col class="tit nopd">

+					<span @click="back()" class="back pointer"></span>

+					<span>留言知识库</span>

+				</el-col>

+			</el-row>

+		</el-header>

+		<div class="cationer">

+			<el-main class="">

+				<div class="leaveCont">

+					<div class=" head row">

+						<el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">

+							<el-option

+									v-for="item in options"

+									:key="item.value"

+									:label="item.label"

+									:value="item.value">

+							</el-option>

+						</el-select>

+						<el-input

+								placeholder="请输入关键词"

+								suffix-icon="el-icon-search"

+								v-model="crux"

+								class="crux"

+						>

+						</el-input>

+						<div class="">

+							<el-button type="primary" @click="search()"

+									   style="height:40px;width:100px;margin-left:10px;">查询

+							</el-button>

+						</div>

+					</div>

+

+					<div class="nav">

+						<div class="list" v-for="item in problemType" :key="item.id"

+							 @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">

+							<span>{{item.name}}</span>

+						</div>

+					</div>

+					<!-- 折叠面板 -->

+					<div class="fold" v-if="noBase">

+						<el-collapse accordion>

+							<el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">

+								<template slot="title">

+									<div style="width:100%;" class="quesTit">

+										<span>{{item.content}}</span>

+										<span>{{item.add_time}}</span>

+									</div>

+								</template>

+								<div>

+									<div class="conversationBox">

+										<div class="timer">

+											{{item.add_time}}

+										</div>

+										<div class="customer row allAlignment">

+											<div></div>

+											<div class="row">

+												<div class="cont right">

+													<div>{{item.content}}</div>

+												</div>

+												<div class="headImg" style="margin-right:0">

+													<img src="./../assets/st-img/user.png" alt="">

+												</div>

+											</div>

+										</div>

+									</div>

+									<div class="conversationBox">

+										<div class="timer">

+											{{item.dealWith_time}}

+										</div>

+										<div class=" row">

+											<div class="conversation row">

+												<div class="headImg">

+													<img src="./../assets/st-img/headAdvent.png" alt="">

+												</div>

+												<div class="cont left">

+													<div>{{item.reply_content}}</div>

+												</div>

+

+											</div>

+											<div style="width:66px;"></div>

+										</div>

+									</div>

+								</div>

+

+							</el-collapse-item>

+						</el-collapse>

+					</div>

+					<div v-if="!noBase">

+						<div class="noBase">

+							<span>暂无数据</span>

+						</div>

+					</div>

+				</div>

+				<div class="launch">

+					<el-button type="primary" @click="launchLeave">发起留言</el-button>

+				</div>

+			</el-main>

+		</div>

+	</div>

 </template>

 </template>

 <script>

 <script>

-import '../css/index.css'

-export default {

-  name:'leaveMsg',

-  data(){

-      return{

-          dialogImageUrl:'',

-          selt:{value:'week',label:'最近一周'},//选中默认值

-          seltValue:'', // 选中的值

-          crux:'',  //关键词

-          activeNames:'', //折叠面板选中效果

-          activity:'1', //活动列表选中状态

-          options:[{

-            value:'week',

-            label:'最近一周'

-          },

-          {

-            value:'oneMonth',

-            label:'最近一个月'  

-          },

-          {

-            value:'threeMonth',

-            label:'最近三个月'

-          }],

-          problemType:'', //类

-          knowLedgeBase:'', //知识库问答数据

-          problemName:'账号',//类名

-          noBase : true  //无数据状态 

-      }

-  },

-  methods:{

-    // 返回传值到父组件

-      back(){

-          this.$emit('value',10)

-      },

-      // 跳转发起留言

-      launchLeave(){

-        this.$emit('value',1000)

-      },

-      // 切换类

-      acty(type,name){

-        this.activity = type;

-        this.problemName = name;

-      },

-      // 获取下拉框的值

-      selectGet(value){

-        // 获取下拉框的value值

-        this.seltValue = value;

-      },

-      // 获取数据

-      getLeave(data){

-        this.$axios.post('/api/index/Message/index',data).then(res =>{

-          if(res.data.status == 1){

-            this.knowLedgeBase = res.data.data;

-            if(this.knowLedgeBase.length >0){

-              this.noBase = true;

-            }else{

-              this.noBase = false;

-            }

-          }

-          console.log('res',this.knowLedgeBase)

-        })

-      },

-      // 查询数据

-      search(){

-        let optionCont = '';

-        if(this.seltValue == ''){

-          optionCont = this.selt.value;

-        }else{

-          optionCont = this.seltValue;

-        }        

-        let data ={

-          time : optionCont,

-          key: this.crux,

-          type:this.problemName

-        }

-        this.getLeave(data)

-      }

-  },

-  mounted() {

-    this.activity = '1';

-    this.$axios.post('/api/index/Message/type').then(res =>{

-      if(res.data.status == 1){

-        this.problemType = res.data.data;

-        let optionCont = '';

-        if(this.seltValue == ''){

-          optionCont = this.selt.value;

-        }else{

-          optionCont = this.seltValue;

-        }        

-        let data ={

-          time : optionCont,

-          key: this.crux,

-          type:this.problemName

-        }

-        // console.log('1213',this.problemType)

-        // 获取留言数据

-        this.getLeave(data)

-      }

-    })

-  }

-}

+	import '../css/index.css'

+

+	export default {

+		name: 'leaveMsg',

+		data() {

+			return {

+				dialogImageUrl: '',

+				selt: {value: 'week', label: '最近一周'},//选中默认值

+				seltValue: '', // 选中的值

+				crux: '',  //关键词

+				activeNames: '', //折叠面板选中效果

+				activity: '1', //活动列表选中状态

+				options: [{

+					value: 'week',

+					label: '最近一周'

+				},

+					{

+						value: 'oneMonth',

+						label: '最近一个月'

+					},

+					{

+						value: 'threeMonth',

+						label: '最近三个月'

+					}],

+				problemType: '', //类

+				knowLedgeBase: '', //知识库问答数据

+				problemName: '账号',//类名

+				noBase: true  //无数据状态

+			}

+		},

+		methods: {

+			// 返回传值到父组件

+			back() {

+				this.$emit('value', 10)

+			},

+			// 跳转发起留言

+			launchLeave() {

+				this.$emit('value', 1000)

+			},

+			// 切换类

+			acty(type, name) {

+				this.activity = type;

+				this.problemName = name;

+			},

+			// 获取下拉框的值

+			selectGet(value) {

+				// 获取下拉框的value值

+				this.seltValue = value;

+			},

+			// 获取数据

+			getLeave(data) {

+				this.$axios.post('/api/index/Message/index', data).then(res => {

+					if (res.data.status === 1) {

+						this.knowLedgeBase = res.data.data;

+						if (this.knowLedgeBase.length > 0) {

+							this.noBase = true;

+						} else {

+							this.noBase = false;

+						}

+					}

+					console.log('res', this.knowLedgeBase)

+				})

+			},

+			// 查询数据

+			search() {

+				let optionCont = '';

+				if (this.seltValue == '') {

+					optionCont = this.selt.value;

+				} else {

+					optionCont = this.seltValue;

+				}

+				let data = {

+					time: optionCont,

+					key: this.crux,

+					type: this.problemName

+				}

+				this.getLeave(data)

+			}

+		},

+		mounted() {

+			this.activity = '1';

+			this.$axios.post('/api/index/Message/type').then(res => {

+				if (res.data.status === 1) {

+					this.problemType = res.data.data;

+					let optionCont = '';

+					if (this.seltValue == '') {

+						optionCont = this.selt.value;

+					} else {

+						optionCont = this.seltValue;

+					}

+					let data = {

+						time: optionCont,

+						key: this.crux,

+						type: this.problemName

+					}

+					// console.log('1213',this.problemType)

+					// 获取留言数据

+					this.getLeave(data)

+				}

+			})

+		}

+	}

 </script>

 </script>

 <style scoped>

 <style scoped>

-  .chatBox{

-    width: 700px;

-  }

-

-  .el-header{

-    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);

-  }

-    .tit{

-      height: 100%;

-      line-height: 80px;

-      text-align: left;

-      padding-left: 20px;

-    }

-    .tit span{

-        font-size: 18px;

-    }

-  .el-col span{

-    font-size: 18px;

-    color: #FFFFFF;

-  }

-  .imgBox{

-    text-align: right;

-  }

-  .imgBox img{

-    margin-right: 20px;

-  }

-  .imgBox img:nth-last-child(1){

-    margin-right: 0

-  }

-  .el-main{

-    background: #fff;

-    width: 445px;

-    padding: 0;

-  }

-  .el-aside{

-    background: #F5F5F5;

-    width: 255px;

-  }

-  .cationer,.artificial{

-    display: flex;

-    justify-content: space-between;

-    /* align-items: center; */

-  }

-  .rt{

-    width: 255px;

-    box-sizing:inherit;

-  }

-  .artificial{

-    /* width: 150px; */

-    /* padding:0 20px; */

-    margin-top: 23px;

-    margin-bottom: 9px;

-    vertical-align: middle;

-        /* flex-direction: column;*/

-            

-  }

-  .infor div{

-    margin-bottom: 3px;

-  }

-  .infor div span,.autograph span{

-    color: #999999;

-    font-size: 14px;

-    font-weight:400;

-  }

-  .infor div span:nth-child(2),.autograph span:nth-child(2){

-    color: #666666;

-    margin-left: 4px;

-  }

-  .headPortrait{

-    width: 100px;

-    height: 100px;

-  }

-  .autograph{

-    margin-bottom: 11px;

-  }

-  .advent{

-    border-top: 1px solid #DDDDDD;

-    padding: 20px;

-  }

-  .advent img{

-    width: 215px;

-    height: 350px;

-  }

-  .pd{

-    padding: 20px;

-  }

-  .pd20{

-    padding: 0 20px;

-  }

-/* 留言框 */

-.el-main{

-    position: relative;

-    height: 600px;

-    overflow: auto;

-}

-.el-main .leaveCont{

-  box-sizing: border-box;

-  height: 510px;

-  padding: 20px 20px 13px;

-}

-label{

-    font-size: 14px;

-    color: #666666;

-    

-}

-

-

-.star{

-    color: #F04992;

-    vertical-align: middle;

-   

-}

-.tips{

-    font-size: 12px;

-    color: #F04992;

-    margin-left: 20px;

-}

-.addPhoto{

-    margin: 20px 0 0;

-}

-.addPhoto label{

-    margin-bottom: 14px;

-}

-.el-textarea{

-    margin-top: 10px;

-}

-.btn{

-    position: absolute;

-    /* bottom: 23px; */

-    right: 20px;

-}

-.el-button{

-    width: 120px;

-    height: 48px;

-    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);

-    border-radius:10px;

-}

-.back{

-    display: inline-block;

-    width: 25px;

-    height: 25px;

-    background: url("./../assets/st-img/back.png") no-repeat;

-    background-size: 100% 100%;

-    vertical-align: middle;

-}

-.nopd{

-  padding: 0;

-}

-.pointer{

-  cursor: pointer;

-}

-.selt{

-  margin-right: 15px;

-  width: 160px;

-}

-.cationer .head{

-  width: 100%;

-  margin-bottom: 20px;

-}

-.crux{

-  width: 230px;

-}

-    /* 主体 */

-.nav{

-  height: 40px;

-  background: #5EA0F7;

-  border-radius:5px 5px 0px 0px;

-  display: flex;

-  justify-content: space-between;

-  padding: 10px 10px 0;

-}

-.nav .list{

-  width: 90px;

-  height: 40px;

-  line-height: 40px;

-  text-align: center;

-  cursor: pointer;

-}

-.nav .list span{

-  color: #fff;

-}

-.listActy{

-  background: #fff;

-  border-radius:5px 5px 0px 0px;

-    

-}

-.listActy span{

-  color: #5EA0F7!important;

-}

-.list .quesTit{

-  height: 40px;;

-  display: flex;

-  justify-content: space-between;

-  align-items: center;

-}

-.list .el-collapse-item__header {

-   color: #666666!important;  

-}

-.list .quesTit span{

-  color: #666666;

-  font-size: 16px;

-}

-.list .quesTit span:nth-last-child(1){

-  color: #999999;

-  font-size: 14px;

-  margin-right: 10px;

-}

-  /* 会话 */

-.conversationBox{

-  margin-top: 26px;

-}

-.timer{

-  text-align: center;

-  margin: 10px 0;

-  color: #999999;

-  font-size: 12px;

-}

-.headImg{

-  width: 40px;

-  height: 40px;

-  margin-right: 13px;

-}

-.headImg img{

-  width: 40px;

-  height: 40px;

-}

-.conversation .cont,.customer .cont{

-  background: #ffffff;

-  padding: 9px 8px 12px 10px;

-  display: inline-block;

-  border: 1px solid rgba(223, 223, 223, 1);

-  border-radius: 5px;

-  position: relative;

-}

-.left::after{

-  position: absolute;

-  content: "";

-  display: inline-block;

-  left: -4px;

-  top: 5px;

-  width: 5px;

-  height: 9px;

-  background: #fff;

-  -webkit-transform: skewX(30deg);

-  transform: skewX(30deg);

-  /* z-index: -1; */

-  border-left: 1px solid #dfdfdf;

-  border-top: 1px solid #dfdfdf;

-} 

-div.noafter::after{

-  content: '';

-  width: 0;

-  height: 0;

-  display: inline;

-  position: relative;

-  border: 0;

-}

-.conversation .cont div,.customer .cont div{

-  color: #666666;

-  font-size: 16px;

-}

-  .customer{

-  justify-content: space-between;

-}

-.customer .cont{

-  margin-right: 13px;

-  border: 0;

-  background: #5EA0F7;

-}

-.customer .cont div{

-  color: #FFFFFF;

-}

-  .right::after{

-  position: absolute;

-  content: "";

-  display: inline-block;

-  right: -3px;

-  top: 6px;

-  width: 5px;

-  height: 9px;

-  background: #5ea0f7;

-  -webkit-transform: skewX(-30deg);

-  transform: skewX(-30deg);

-  border-left: 1px solid #5ea0f7;

-  border-top: 1px solid #5ea0f7;

-}

-  .col{

-  color: #999999;

-}

-.change{

-  color: #5ea0f7;

-}

-.launch{

-  box-sizing: border-box;

-  border-top: 1px solid #DDDDDD;

-  padding: 16px 20px 0 0;

-  position: relative;

-  height: 80px;

-}

-.launch button{

-  position: absolute;

-  right: 20px;

-}

-.noBase{

-  width: 100%;

-  height: 50px;

-  line-height: 50px;

-  background: #e0e0e0;

-  text-align: center;

-}

+	.chatBox {

+		width: 700px;

+	}

+

+	.el-header {

+		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);

+	}

+

+	.tit {

+		height: 100%;

+		line-height: 80px;

+		text-align: left;

+		padding-left: 20px;

+	}

+

+	.tit span {

+		font-size: 18px;

+	}

+

+	.el-col span {

+		font-size: 18px;

+		color: #FFFFFF;

+	}

+

+	.imgBox {

+		text-align: right;

+	}

+

+	.imgBox img {

+		margin-right: 20px;

+	}

+

+	.imgBox img:nth-last-child(1) {

+		margin-right: 0

+	}

+

+	.el-main {

+		background: #fff;

+		width: 445px;

+		padding: 0;

+	}

+

+	.el-aside {

+		background: #F5F5F5;

+		width: 255px;

+	}

+

+	.cationer, .artificial {

+		display: flex;

+		justify-content: space-between;

+		/* align-items: center; */

+	}

+

+	.rt {

+		width: 255px;

+		box-sizing: inherit;

+	}

+

+	.artificial {

+		/* width: 150px; */

+		/* padding:0 20px; */

+		margin-top: 23px;

+		margin-bottom: 9px;

+		vertical-align: middle;

+		/* flex-direction: column;*/

+

+	}

+

+	.infor div {

+		margin-bottom: 3px;

+	}

+

+	.infor div span, .autograph span {

+		color: #999999;

+		font-size: 14px;

+		font-weight: 400;

+	}

+

+	.infor div span:nth-child(2), .autograph span:nth-child(2) {

+		color: #666666;

+		margin-left: 4px;

+	}

+

+	.headPortrait {

+		width: 100px;

+		height: 100px;

+	}

+

+	.autograph {

+		margin-bottom: 11px;

+	}

+

+	.advent {

+		border-top: 1px solid #DDDDDD;

+		padding: 20px;

+	}

+

+	.advent img {

+		width: 215px;

+		height: 350px;

+	}

+

+	.pd {

+		padding: 20px;

+	}

+

+	.pd20 {

+		padding: 0 20px;

+	}

+

+	/* 留言框 */

+	.el-main {

+		position: relative;

+		height: 600px;

+		overflow: auto;

+	}

+

+	.el-main .leaveCont {

+		box-sizing: border-box;

+		height: 510px;

+		padding: 20px 20px 13px;

+	}

+

+	label {

+		font-size: 14px;

+		color: #666666;

+

+	}

+

+

+	.star {

+		color: #F04992;

+		vertical-align: middle;

+

+	}

+

+	.tips {

+		font-size: 12px;

+		color: #F04992;

+		margin-left: 20px;

+	}

+

+	.addPhoto {

+		margin: 20px 0 0;

+	}

+

+	.addPhoto label {

+		margin-bottom: 14px;

+	}

+

+	.el-textarea {

+		margin-top: 10px;

+	}

+

+	.btn {

+		position: absolute;

+		/* bottom: 23px; */

+		right: 20px;

+	}

+

+	.el-button {

+		width: 120px;

+		height: 48px;

+		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);

+		border-radius: 10px;

+	}

+

+	.back {

+		display: inline-block;

+		width: 25px;

+		height: 25px;

+		background: url("./../assets/st-img/back.png") no-repeat;

+		background-size: 100% 100%;

+		vertical-align: middle;

+	}

+

+	.nopd {

+		padding: 0;

+	}

+

+	.pointer {

+		cursor: pointer;

+	}

+

+	.selt {

+		margin-right: 15px;

+		width: 160px;

+	}

+

+	.cationer .head {

+		width: 100%;

+		margin-bottom: 20px;

+	}

+

+	.crux {

+		width: 230px;

+	}

+

+	/* 主体 */

+	.nav {

+		height: 40px;

+		background: #5EA0F7;

+		border-radius: 5px 5px 0px 0px;

+		display: flex;

+		justify-content: space-between;

+		padding: 10px 10px 0;

+	}

+

+	.nav .list {

+		width: 90px;

+		height: 40px;

+		line-height: 40px;

+		text-align: center;

+		cursor: pointer;

+	}

+

+	.nav .list span {

+		color: #fff;

+	}

+

+	.listActy {

+		background: #fff;

+		border-radius: 5px 5px 0px 0px;

+

+	}

+

+	.listActy span {

+		color: #5EA0F7 !important;

+	}

+

+	.list .quesTit {

+		height: 40px;;

+		display: flex;

+		justify-content: space-between;

+		align-items: center;

+	}

+

+	.list .el-collapse-item__header {

+		color: #666666 !important;

+	}

+

+	.list .quesTit span {

+		color: #666666;

+		font-size: 16px;

+	}

+

+	.list .quesTit span:nth-last-child(1) {

+		color: #999999;

+		font-size: 14px;

+		margin-right: 10px;

+	}

+

+	/* 会话 */

+	.conversationBox {

+		margin-top: 26px;

+	}

+

+	.timer {

+		text-align: center;

+		margin: 10px 0;

+		color: #999999;

+		font-size: 12px;

+	}

+

+	.headImg {

+		width: 40px;

+		height: 40px;

+		margin-right: 13px;

+	}

+

+	.headImg img {

+		width: 40px;

+		height: 40px;

+	}

+

+	.conversation .cont, .customer .cont {

+		background: #ffffff;

+		padding: 9px 8px 12px 10px;

+		display: inline-block;

+		border: 1px solid rgba(223, 223, 223, 1);

+		border-radius: 5px;

+		position: relative;

+	}

+

+	.left::after {

+		position: absolute;

+		content: "";

+		display: inline-block;

+		left: -4px;

+		top: 5px;

+		width: 5px;

+		height: 9px;

+		background: #fff;

+		-webkit-transform: skewX(30deg);

+		transform: skewX(30deg);

+		/* z-index: -1; */

+		border-left: 1px solid #dfdfdf;

+		border-top: 1px solid #dfdfdf;

+	}

+

+	div.noafter::after {

+		content: '';

+		width: 0;

+		height: 0;

+		display: inline;

+		position: relative;

+		border: 0;

+	}

+

+	.conversation .cont div, .customer .cont div {

+		color: #666666;

+		font-size: 16px;

+	}

+

+	.customer {

+		justify-content: space-between;

+	}

+

+	.customer .cont {

+		margin-right: 13px;

+		border: 0;

+		background: #5EA0F7;

+	}

+

+	.customer .cont div {

+		color: #FFFFFF;

+	}

+

+	.right::after {

+		position: absolute;

+		content: "";

+		display: inline-block;

+		right: -3px;

+		top: 6px;

+		width: 5px;

+		height: 9px;

+		background: #5ea0f7;

+		-webkit-transform: skewX(-30deg);

+		transform: skewX(-30deg);

+		border-left: 1px solid #5ea0f7;

+		border-top: 1px solid #5ea0f7;

+	}

+

+	.col {

+		color: #999999;

+	}

+

+	.change {

+		color: #5ea0f7;

+	}

+

+	.launch {

+		box-sizing: border-box;

+		border-top: 1px solid #DDDDDD;

+		padding: 16px 20px 0 0;

+		position: relative;

+		height: 80px;

+	}

+

+	.launch button {

+		position: absolute;

+		right: 20px;

+	}

+

+	.noBase {

+		width: 100%;

+		height: 50px;

+		line-height: 50px;

+		background: #e0e0e0;

+		text-align: center;

+	}

 </style>

 </style>