update service

service/src/pages/LeaveMessage.vue

@@ -38,7 +38,7 @@
 								:data="tableData"
 								stripe
 								@row-dblclick="click_row"
-								style="width: 100%"
+								style="width: 100%; height: 650px; "
 						>
 							<el-table-column prop="name" label="用户名"></el-table-column>
 							<el-table-column prop="time" label="留言时间" width="180"></el-table-column>
@@ -87,55 +87,76 @@
 					:show-close="false"
 					style="margin-top:50px"
 					:visible.sync="drawer"
-					size="720px">
+					size="780px">
 				<el-row class="content_box">
 					<el-row class="headers">
-						<el-col :span="12">Guest78...</el-col>
-						<el-col :span="12" style="text-align: right">
-							<el-button class="chuli" type="warning">未处理</el-button>
-						</el-col>
+						<el-col :span="12">留言信息</el-col>
+<!--						<el-col :span="12" style="text-align: right">-->
+<!--							<el-button class="chuli" type="warning">未处理</el-button>-->
+<!--						</el-col>-->
 					</el-row>
 					<el-row class="chat_user">
 						<el-col :span="17">
 							<div class="chat_box">
 								<!-- 内容展示 -->
 								<el-row id="main">
-									123123
-								</el-row>
-								<!--·········· 文本编辑框 ···········-->
-								<el-row class="chatting">
-									<!--表情-->
-									<el-col class="icons">
-										<i class="el-icon-edit"></i>
-										<i class="el-icon-share"></i>
-										<i class="el-icon-delete"></i>
+									<el-col class="user">
+										<p>{{userInfo.nick_name}}的留言信息:</p>
+										<div class="text">{{getUserItem.content}}</div>
+										<div class="img" v-for="item in getUserItem.image">
+											<img :src="img_http +item" alt="">
+										</div>
+									</el-col>
+
+									<el-col class="serive">
+										<el-input class="text" resize="none" type="textarea" @blur="widthCheck($event.target, 100)" placeholder="请回复用户留言"  v-model="leaveInfor"></el-input>
 									</el-col>
-									<!-- 发送信息　-->
 									<el-col>
-										<textarea></textarea>
-										<el-button class="send">发送</el-button>
+										<el-upload style="margin:10px;"
+												   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"
+												   :limit="4"
+												   :on-exceed="handleExceed"
+										>
+											<i slot="default" class="el-icon-plus"></i>
+										</el-upload>
+
+										<el-dialog>
+											<img width="100%" :src="dialogImageUrl" alt="">
+										</el-dialog>
 									</el-col>
 								</el-row>
+
+								<el-row class="chatting">
+									<el-button class="send" type="primary" @click="sendMessage">提交</el-button>
+								</el-row>
 							</div>
 						</el-col>
 						<el-col :span="7">
 							<div class="user_box">
 								<ul>
 									<li class="title">用户信息</li>
-									<li>账号：123</li>
-									<li>标签：123</li>
-									<li>昵称：123</li>
-									<li>手机：123</li>
-									<li>邮箱：123</li>
-									<li>地址：123</li>
-									<li>备注：123</li>
+									<li>账号：{{userInfo.account_name}}</li>
+									<li>标签：{{userInfo.label}}</li>
+									<li>昵称：{{userInfo.nick_name}}</li>
+									<li>手机：{{userInfo.account_phone}}</li>
+									<li>邮箱：{{userInfo.account_email}}</li>
+									<li>地址：{{userInfo.address}}</li>
+									<li>备注：{{userInfo.remark}}</li>
 								</ul>
 
 								<ul>
 									<li class="title">访问信息</li>
-									<li>来源渠道：直接访问</li>
-									<li>来源终端：123</li>
-									<li>来源终端：windows10 - chrome</li>
+									<li>来源ip：{{getUserItem.account_ip}}</li>
+									<li>来源终端：{{getUserItem.system}}-{{getUserItem.browse}}</li>
 								</ul>
 
 							</div>
@@ -153,7 +174,7 @@
 	import hader from "@/components/hader";
 	import historicalRecord from "@/components/historicalRecord";
 	import messageCenter from "@/components/messageCenter";
-
+	import frce from '../assets/frce.js';
 	export default {
 		name: "SessionHistory",
 		data() {
@@ -188,7 +209,14 @@
 				input3: "",
 				startTime: "", // 请求结果开始时间
 				endTime: "", // 请求结果结束时间
-				drawer:false
+				drawer:false,
+				sendCol: false, // 发送按钮切换样式
+				leaveInfor: '', // 留言信息
+				dialogImageUrl: '',
+				userInfo:[], //用户信息
+				getUserItem:[],
+				img_http:'http://kfadmin.bocai186.com',//图片路径域
+				// img_http: 'http://192.168.2.187:8090',//图片路径域
 			};
 		},
 		components: {
@@ -198,9 +226,11 @@
 			messageCenter
 		},
 		mounted() {
+			this.frceArr = frce.frce;
 			this.value = this.options[2].value;
 		},
 		computed: {
+
 			// 获取客服查询时间
 			getValueChange() {
 				return this.value;
@@ -212,6 +242,98 @@
 			}
 		},
 		methods: {
+			// 上传之前
+			beforeAvatarUpload(file) {
+				console.log(file,'上传之前')
+				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
+				if (!isJPG) {
+					this.$message.error('上传只能是图片格式!');
+				}
+				return isJPG
+			},
+			// 上传成功时的回调
+			uploadSuccess(res, file) {
+				// console.log('res',file)
+				this.uploadImg.push(URL.createObjectURL(file.raw))
+				// console.log(this.uploadImg)
+				return this.uploadImg
+			},
+			// 发送中
+			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)
+			},
+			// 每次改变图片状态返回的回调
+			uploadChange(file, fileList) {
+				if(fileList.length > 4) {
+					this.$message.error('上传图片最多4张')
+					return false
+				}
+			},
+			handleExceed(files, fileList) {
+				this.$message.error(`图片上传数量最多4张`);
+			},
+			/*****************获取当前聊天用户信息****************/
+			get_user(id) {
+				let obj = {
+					headers: {
+						"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' +  this.time + 'service'),
+						'userToken': this.token
+					},
+					account_id: id
+				};
+
+				this.post('api' + this.$ports.userInfo.accountInfo, obj).then(res => {
+					if (res.data.code == 1) {
+						console.log(res.data.data,'用户信息');
+						this.userInfo = res.data.data;
+					}
+				})
+			},
+
+			sendMessage() {
+					// 手动上传
+					this.$refs.upload.submit();
+					let _this = this;
+					setTimeout(function () {
+						let params = {
+							'name': _this.call,
+							'email': _this.eMail,
+							'content': _this.leaveInfor,
+							'phone': _this.phone,
+							'qq': _this.QQ,
+							'wechat': _this.WX,
+							'file': _this.uploadImg.join(',')
+						}
+						_this.$axios.post('/api/service/Message/dealmessage', params).then(res => {
+							console.log('res', res)
+							return false;
+						})
+					}, 500)
+			},
+
+
+			widthCheck(str, len) {
+				var temp = 0
+				for (var i = 0; i < str.value.length; i++) {
+					if (str.value.length < 4) {
+						str.value = ''
+					}
+				}
+			},
+
 			// 获取请求参数开始和结束时间
 			getStartEndAjaxTime(e) {
 				let time = new Date();
@@ -247,16 +369,15 @@
 					}
 				};
 				this.post(
-					"api/service/Message/index",
-					{
+					"api/service/Message/index", {
 						start_time: this.startTime,
-						end_time: this.endTime
+						end_time: this.endTime,
 					},
 					obj
 				).then(res => {
-					console.log(res)
 					if(res.data.data){
-						this.tableData = res.data.data
+						this.tableData = res.data.data;
+						console.log(this.tableData)
 					}
 				});
 			},
@@ -266,6 +387,9 @@
 				this.uid = row.uid;
 				this.drawer =true;
 				// this.isShow = true;
+				this.getUserItem = row;
+				console.log(this.getUserItem)
+				this.get_user(row.message_id)
 			},
 			childValue(e) {
 				//console.log(e);
@@ -273,23 +397,65 @@
 				// this.isShow = e;
 			},
 
-			// resetDateFilter() {
-			//     this.$refs.filterTable.clearFilter('date');
-			// },
-			// clearFilter() {
-			//     this.$refs.filterTable.clearFilter();
-			// },
-			// formatter(row, column) {
-			//     return row.address;
-			// },
 			filterTag(value, row) {
 				return row.tag === value;
 			}
 		}
 	};
 </script>
-
+<style>
+	.el-upload--picture-card {
+		width: 100px;
+		height: 100px;
+		line-height: 100px;
+	}
+	.el-upload-list--picture-card .el-upload-list__item {
+		width:100px;
+		height: 100px;
+		line-height:100px;
+	}
+</style>
 <style lang="less" scoped>
+	.chatting {
+		text-align: center;
+	}
+	.serive {
+		padding: 0 10px;
+		text-align: right;
+		.text {
+			margin-top: 20px;
+			background: #F5F5F5;
+			border: 1px solid #EEEEEE;
+			padding: 20px;
+			font-size: 14px;
+			color: #666;
+			line-height: 1.8;
+
+			.el-textarea__inner {
+				border: none;
+				resize: none;
+				height: 300px;
+			}
+		}
+	}
+	.user {
+		.text {
+			margin-top: 20px;
+			background: #F5F5F5;
+			border: 1px solid #EEEEEE;
+			padding: 20px;
+			font-size: 14px;
+			color: #666;
+			line-height: 1.8;
+		}
+		.img {
+			margin-top: 20px;
+		}
+	}
+
+	.netSendCol {
+		cursor: not-allowed;
+	}
 	.content_box{
 		.chat_user{
 			border-top: 1px solid #D5E5FF;
@@ -374,7 +540,6 @@
 	}
 	#main {
 		height: 65vh;
-		border-bottom: 1px solid #D5E5FF;
 	}
 
 	.icons {
@@ -382,22 +547,18 @@
 		height: 40px;
 		line-height: 40px;
 	}
-	textarea {
-		padding: 0 20px;
-		outline: none;
-		border: none;
-		width: 400px;
-		height: 90px;
-		resize: none;
-	}
 	.send {
+		margin: 0 auto;
 		color: #fff;
-		width: 70px;
+		width: 60%;
 		height:40px;
 		background:rgba(221,221,221,1);
 		opacity:1;
 		border-radius:5px;
 	}
+	.send.sendCol {
+		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
+	}
 
 </style>
 

service/src/pages/login.vue

@@ -157,7 +157,7 @@
 	.boxData{
 		width: 200px;
 		/* height: 70px; */
-		border: 1px solid #C6DCFF;
+		/*border: 1px solid #C6DCFF;*/
 		background: #F6F8FF;
 		position: relative;
 	}