update src

service/src/pages/LeaveMessage.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
 		<div class="row allAlignment">
-			<leftNav />
+			<leftNav/>
 			<div>
-				<hader />
+				<hader/>
 				<messageCenter></messageCenter>
 				<div class="column allAlignment box" style="background:#F6F8FF; ">
 					<div style="height:8vh; background:#FFF; " class="row allAlignment">
@@ -38,7 +38,7 @@
 								:data="tableData"
 								stripe
 								@row-dblclick="click_row"
-								style="width: 100%; height: 650px; "
+								style="width: 100%;"
 						>
 							<el-table-column prop="name" label="用户名"></el-table-column>
 							<el-table-column prop="time" label="留言时间" width="180"></el-table-column>
@@ -71,10 +71,11 @@
 						</el-table>
 					</div>
 					<div v-show="pages >9" style=" padding: 10px;">
-						<el-pagination background layout="prev, pager, next" :total="pages"></el-pagination>
+						<el-pagination background layout="prev, pager, next" :total="pages" @prev-click='upData'
+									   @next-click="downData" @current-change="current_page"></el-pagination>
 					</div>
 					<div class="right_box" v-show="isShow">
-						<historicalRecord :show="isShow" :uid="uid" v-on:childValue="childValue" />
+						<historicalRecord :show="isShow" :uid="uid" v-on:childValue="childValue"/>
 					</div>
 				</div>
 			</div>
@@ -91,9 +92,9 @@
 				<el-row class="content_box">
 					<el-row class="headers">
 						<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-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">
@@ -101,7 +102,6 @@
 								<!-- 内容展示 -->
 								<el-row id="main">
 									<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="">
@@ -109,7 +109,9 @@
 									</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-input class="text" resize="none" type="textarea"
+												  @blur="widthCheck($event.target, 100)" placeholder="请回复用户留言"
+												  v-model="leaveInfor"></el-input>
 									</el-col>
 									<el-col>
 										<el-upload style="margin:10px;"
@@ -175,13 +177,14 @@
 	import historicalRecord from "@/components/historicalRecord";
 	import messageCenter from "@/components/messageCenter";
 	import frce from '../assets/frce.js';
+
 	export default {
 		name: "SessionHistory",
 		data() {
 			return {
 				isShow: false,
 				uid: "",
-				pages: 10,
+				pages: 0,
 				tableData: [],
 				options: [
 					{
@@ -209,13 +212,13 @@
 				input3: "",
 				startTime: "", // 请求结果开始时间
 				endTime: "", // 请求结果结束时间
-				drawer:false,
+				drawer: false,
 				sendCol: false, // 发送按钮切换样式
 				leaveInfor: '', // 留言信息
 				dialogImageUrl: '',
-				userInfo:[], //用户信息
-				getUserItem:[],
-				img_http:'http://kfadmin.bocai186.com',//图片路径域
+				userInfo: [], //用户信息
+				getUserItem: [],
+				img_http: 'http://kfadmin.bocai186.com',//图片路径域
 				// img_http: 'http://192.168.2.187:8090',//图片路径域
 			};
 		},
@@ -228,6 +231,7 @@
 		mounted() {
 			this.frceArr = frce.frce;
 			this.value = this.options[2].value;
+			this.getSessionList(1)
 		},
 		computed: {
 
@@ -242,9 +246,26 @@
 			}
 		},
 		methods: {
+
+			/******************上一页*****************/
+			upData(e) {
+				this.getSessionList(e)
+			},
+
+			/*********************下一页******************/
+			downData(e) {
+				this.getSessionList(e)
+			},
+
+			/*******************选择页数******************/
+			current_page(e) {
+				this.getSessionList(e)
+
+			},
+
 			// 上传之前
 			beforeAvatarUpload(file) {
-				console.log(file,'上传之前')
+				console.log(file, '上传之前')
 				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
 				if (!isJPG) {
 					this.$message.error('上传只能是图片格式!');
@@ -277,7 +298,7 @@
 			},
 			// 每次改变图片状态返回的回调
 			uploadChange(file, fileList) {
-				if(fileList.length > 4) {
+				if (fileList.length > 4) {
 					this.$message.error('上传图片最多4张')
 					return false
 				}
@@ -289,7 +310,7 @@
 			get_user(id) {
 				let obj = {
 					headers: {
-						"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' +  this.time + 'service'),
+						"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + this.time + 'service'),
 						'userToken': this.token
 					},
 					account_id: id
@@ -297,31 +318,31 @@
 
 				this.post('api' + this.$ports.userInfo.accountInfo, obj).then(res => {
 					if (res.data.code == 1) {
-						console.log(res.data.data,'用户信息');
+						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)
+				// 手动上传
+				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)
 			},
 
 
@@ -338,29 +359,29 @@
 			getStartEndAjaxTime(e) {
 				let time = new Date();
 				let time2 = new Date(time)
-				function getDate (year,month,date){
-					return year+'-'+((month+1)<10?'0'+(month+1):month+1)+'-'+(date<10?'0'+date:date)
+
+				function getDate(year, month, date) {
+					return year + '-' + ((month + 1) < 10 ? '0' + (month + 1) : month + 1) + '-' + (date < 10 ? '0' + date : date)
 				}
+
 				if (e == "今日") {
 					time2.setDate(time.getDate())
 				} else if (e == "最近3天") {
-					time2.setDate(time.getDate()-3)
+					time2.setDate(time.getDate() - 3)
 				} else if (e == "最近7天") {
-					time2.setDate(time.getDate()-7)
+					time2.setDate(time.getDate() - 7)
 				} else if (e == "最近15天") {
-					time2.setDate(time.getDate()-15)
+					time2.setDate(time.getDate() - 15)
 				} else if (e == "最近30天") {
-					time2.setDate(time.getDate()-30)
+					time2.setDate(time.getDate() - 30)
 				}
-				this.endTime = getDate(time.getFullYear(),time.getMonth(),time.getDate())
-				this.startTime = getDate(time2.getFullYear(),time2.getMonth(),time2.getDate())
-				this.getSessionList()
+				this.endTime = getDate(time.getFullYear(), time.getMonth(), time.getDate())
+				this.startTime = getDate(time2.getFullYear(), time2.getMonth(), time2.getDate())
+				this.getSessionList(1)
 			},
 			// 获取列表数据
-			getSessionList() {
-				console.log('start',this.startTime,'end',this.endTime);
-				let str =
-					"index" + "customer-service" + "message" + this.time + "service";
+			getSessionList(page, size = 10) {
+				let str = "index" + "customer-service" + "Message" + this.time + "service";
 				let obj = {
 					headers: {
 						"Content-Type": "application/x-www-form-urlencoded",
@@ -372,12 +393,15 @@
 					"api/service/Message/index", {
 						start_time: this.startTime,
 						end_time: this.endTime,
+						pageSize: size,
+						pageNumber: page
 					},
 					obj
 				).then(res => {
-					if(res.data.data){
+					if (res.data.data) {
 						this.tableData = res.data.data;
-						console.log(this.tableData)
+						this.pages = res.data.data.length;
+						console.log(this.pages)
 					}
 				});
 			},
@@ -385,7 +409,7 @@
 				// console.log(this.value);
 				// console.log(row.uid)
 				this.uid = row.uid;
-				this.drawer =true;
+				this.drawer = true;
 				// this.isShow = true;
 				this.getUserItem = row;
 				console.log(this.getUserItem)
@@ -409,19 +433,22 @@
 		height: 100px;
 		line-height: 100px;
 	}
+
 	.el-upload-list--picture-card .el-upload-list__item {
-		width:100px;
+		width: 100px;
 		height: 100px;
-		line-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;
@@ -438,6 +465,7 @@
 			}
 		}
 	}
+
 	.user {
 		.text {
 			margin-top: 20px;
@@ -448,6 +476,7 @@
 			color: #666;
 			line-height: 1.8;
 		}
+
 		.img {
 			margin-top: 20px;
 		}
@@ -456,25 +485,30 @@
 	.netSendCol {
 		cursor: not-allowed;
 	}
-	.content_box{
-		.chat_user{
+
+	.content_box {
+		.chat_user {
 			border-top: 1px solid #D5E5FF;
 		}
 	}
+
 	.user_box {
 		height: 100vh;
 	}
 
-	.el-pagination .btn-next .el-icon{
+	.el-pagination .btn-next .el-icon {
 		display: none;
 	}
+
 	.cell {
 		text-align: center;
 	}
+
 	.el-pagination {
 		text-align: center;
 		font-size: 0;
 	}
+
 	.el-table::before {
 		z-index: 0 !important;
 	}
@@ -482,12 +516,14 @@
 	.input-with-select {
 		width: 100%;
 	}
+
 	.name_box {
 		margin-left: 20px;
 		font-size: 14px;
 		font-weight: bold;
 		color: rgba(102, 102, 102, 1);
 	}
+
 	.box {
 		width: 100%;
 	}
@@ -501,43 +537,52 @@
 			  background: red; */
 		/* //background: rgba(255, 255, 255, 0.315); */
 	}
+
 	.el-input-group__append {
 		text-align: center;
 	}
+
 	.el-table td {
 		padding: 8px 0;
 	}
-	.headers{
+
+	.headers {
 		display: flex;
 		justify-content: flex-start;
 		padding: 0 20px;
-		height:50px;
+		height: 50px;
 		line-height: 50px;
 	}
+
 	.user_box {
 		padding: 20px;
 		background: #F6F8FF;
 	}
-	.chuli{
-		width:70px;
-		height:30px;
-		border-radius:5px;
+
+	.chuli {
+		width: 70px;
+		height: 30px;
+		border-radius: 5px;
 		color: #fff;
 		background: #FF6600
 	}
+
 	.title {
 		font-weight: bold;
 		color: #333333;
 		font-size: 14px;
 	}
+
 	li {
 		margin: 10px 0;
 		color: #999999;
 	}
-	ul{
+
+	ul {
 		margin: 0;
 		padding: 0;
 	}
+
 	#main {
 		height: 65vh;
 	}
@@ -547,15 +592,17 @@
 		height: 40px;
 		line-height: 40px;
 	}
+
 	.send {
 		margin: 0 auto;
 		color: #fff;
 		width: 60%;
-		height:40px;
-		background:rgba(221,221,221,1);
-		opacity:1;
-		border-radius:5px;
+		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%);
 	}