update src

pc_chat/src/components/chat.vue

@@ -194,6 +194,12 @@
 								</div>
 							</div>
 
+							<div class="promptBox " v-if="serverNotOnlin">
+								<div class="prompt help">
+									<span>{{serviceNotOnlineText}}</span>
+								</div>
+							</div>
+
 							<!-- 排队等待 -->
 							<div class="evaluate" v-if="waitingMsg">
 								<span>{{waitingText}}</span>
@@ -340,6 +346,7 @@
 								</div>
 							</div>
 
+
 							<!-- 客服会话超时 -->
 							<div class="promptBox" v-if="willOverTime">
 								<div class="prompt help">
@@ -809,6 +816,7 @@
 
 			// 退出聊天
 			exit(){
+
 				this.websocketsend(JSON.stringify({
 					type: 'kfCloseUser',
 					data: {
@@ -985,6 +993,7 @@
 					this.artAndLeave = 0;
 					this.chatCont = [];
 				} else {
+					this.closeByServer = true;
 					this.machineAndAtl = 10;
 					this.macNotPro = false;
 					this.jumpArtl = false;
@@ -1200,7 +1209,13 @@
 				//心跳检测
 				this.heatBeat();
 
-				if (redata.type != 'pong') {
+				// 心跳检测
+				if(redata.message_type == "ping"){
+					this.websock.send('{"type":"pong"}')
+					return false;
+				}
+
+				if (redata.type != 'pong' || redata.message_type != "ping") {
 					console.log(redata)
 				}
 				// 欢迎语
@@ -1365,20 +1380,19 @@
 				}
 				// 客服关闭会话.
 				if (redata.message_type == 'closeBysever') {
-					this.goBack(1);
+					// this.goBack(1);
 					this.machineAndAtl = 10;
 					this.selNum = 0;
 					this.machine = [];
 					this.showleaveIcon = true;
-					this.reconnect();
 					this.resigtermsg = true;
 				}
 				// 客服掉线.
 				if (redata.message_type == 'serviceoffline') {
+					this.serviceNotOnlineText = redata.msg;
 					this.service_on = false;
 					this.serverNotOnlin = true;
 					this.closeByServer = true;
-					this.automaticRolling();
 				}
 				// 客服转接
 				if (redata.message_type == 'changeKeFuSuccess') {
@@ -1429,6 +1443,7 @@
 						this.tokNum = 0;
 					}
 				}
+
 			},
 
 			closedWating() {
@@ -1508,7 +1523,7 @@
 				} else if (this.machineAndAtl == 100) { //人工聊天
 					// 人工聊天超时隐藏
 					this.willOverTime = false;
-					//发送给客服消息-本地储存
+					// 发送给客服消息-本地储存
 					this.customerSviceChat.push({
 						time: '',
 						content: this.turnFace(this.shieldingKeyword(formatStr)),
@@ -1618,7 +1633,7 @@
 					}
 					if (res.data.code == 1) {
 						this.user_info = res.data.data;
-						 console.log(this.user_info,"用户信息")
+						 // console.log(this.user_info,"用户信息")
 						localStorage.setItem('uid', res.data.data.id)
 						// 游客 token
 						localStorage.setItem("token", res.data.data.token);
@@ -2019,7 +2034,7 @@
 	}
 
 	.help {
-		width: 80%;
+		width: 90%;
 	}
 
 	.help .prompt {

pc_chat/src/components/leaveMsg.vue

@@ -15,37 +15,44 @@
 					<div class="call">
 						<label for="">
 							<span>您的称呼</span>
+							<span class="star"> *</span>
 						</label>
-						<el-input v-model="call" placeholder="请输入内容"></el-input>
+						<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="请输入手机号"></el-input>
+						<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号"></el-input>
+						<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="请输入微信号"></el-input>
+						<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="请输入邮箱地址"
-								  ></el-input>
+								  style="paddiing:0 9px;"></el-input>
 					</div>
 					<div class="leaveMsg">
 						<label for="">
 							<span>您的留言信息</span>
+							<span class="star"> *</span>
 						</label>
 						<el-input type="textarea" @blur="widthCheck($event.target, 100)" placeholder="比赛中遇到作弊怎么办？"
 								  v-model="leaveInfor"></el-input>
@@ -59,7 +66,6 @@
 						<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"
@@ -67,10 +73,11 @@
 								   :auto-upload="false"
 								   list-type="picture-card"
 								   ref="upload"
+								   :limit="4"
+								   :on-exceed="handleExceed"
 						>
 							<i slot="default" class="el-icon-plus"></i>
 						</el-upload>
-						<!-- :visible.sync="dialogVisible" -->
 						<el-dialog>
 							<img width="100%" :src="dialogImageUrl" alt="">
 						</el-dialog>
@@ -101,7 +108,8 @@
 				emailError: false,
 				QQ: "",
 				WX: '',
-				uploadImg: [] //上传图片的数据集合
+				uploadImg: [],//上传图片的数据集合
+				imgUrl:'',
 			}
 		},
 		methods: {
@@ -111,27 +119,38 @@
 			},
 			// 提交
 			sub() {
-
-				this.$refs.upload.submit();
-				let _this = this;
-				let uid = localStorage.getItem('uid');
-				console.log(_this.uploadImg, '图片');
-				let formData = new FormData();
-				formData.append("name", _this.call);
-				formData.append("email", _this.eMail);
-				formData.append("content", _this.leaveInfor);
-				formData.append("phone", _this.phone);
-				// formData.append("qq", _this.QQ);
-				// formData.append("wechat", _this.WX);
-				formData.append("file", _this.uploadImg);
-				formData.append("account_id", uid);
-
-				_this.$axios.post('/api/index/User/LeavingMessage', formData).then(res => {
-					if (res.data.code == 1) {
-						_this.$message.success('留言成功')
-						_this.$emit('value', 10);
-					}
-				})
+				if (this.call == '') {
+					this.$message.error('请填写称呼!');
+				} else if (this.phone == '') {
+					this.$message.error('请填写手机号!');
+				} else if (this.leaveInfor == '') {
+					this.$message.error('请填写留言信息!');
+				} else {
+					// 手动上传
+					this.$refs.upload.submit();
+					let _this = this;
+					let uid = localStorage.getItem('uid');
+
+					setTimeout(function () {
+						console.log(this.imgUrl,"上传的图片")
+						let params = {
+							'name': _this.call,
+							'email': _this.eMail,
+							'content': _this.leaveInfor,
+							'phone': _this.phone,
+							'qq': _this.QQ,
+							'wechat': _this.WX,
+							'file': _this.imgUrl,
+							'account_id': uid,
+						}
+						_this.$axios.post('/api/index/User/LeavingMessage', params).then(res => {
+							if (res.data.code == 1) {
+								_this.$message.success('留言成功')
+								_this.$emit('value', 10);
+							}
+						})
+					}, 1500)
+				}
 			},
 			widthCheck(str, len) {
 				var temp = 0
@@ -151,7 +170,8 @@
 					} else {
 						this.error = false;
 					}
-				} else if (type == 10) {
+				}
+				else if (type == 10) {
 					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.eMail)) {
 						this.emailError = true;
 						this.eMail = '';
@@ -163,38 +183,37 @@
 			// 上传之前
 			beforeAvatarUpload(file) {
 				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
+				const isLt1M = file.size / 1024 / 1024 < 2;
 				if (!isJPG) {
 					this.$message.error('上传只能是图片格式!');
 				}
-				return isJPG
+				if (!isLt1M) {
+					this.$message.error('上传文件大小不能超过 2MB!');
+				}
+
+				return isJPG && isLt1M;
 			},
 			// 上传成功时的回调
 			uploadSuccess(res, file) {
-				// console.log('res',file)
-				this.uploadImg.push(URL.createObjectURL(file.raw))
-				// console.log(this.uploadImg)
-				return this.uploadImg
+				this.imgUrl = this.imgUrl ? this.imgUrl + "," + res.data.src :res.data.src;
+				console.log(this.imgUrl)
 			},
-			// 发送中
-			onProgress() {
 
-			},
 			// 上传失败
 			uploadError() {
 				this.$message.error('上传失败，请重新上传')
 			},
-			handleRemove(file, fileList) {
-				// console.log('123',fileList)
-				// 重置为空数组赋值
-				// this.uploadImg = []
-				// fileList.forEach((res,index) => {
-				//   this.uploadImg.push(URL.createObjectURL(res.raw))
-				// });
-				// console.log(this.uploadImg)
+
+			handleExceed(files, fileList) {
+				this.$message.error(`图片上传数量最多4张`);
+			},
+			//删除回掉
+			handleRemove(file, fileList,) {
+				this.uploadImg = fileList
 			},
 			// 每次改变图片状态返回的回调
 			uploadChange(file, fileList) {
-				// console.log('每次改变图片状态返回的回调', fileList)
+				console.log('每次改变图片状态返回的回调', fileList)
 			},
 		}
 	}