Customer-Service-Web/service/src/pages/LeaveMessage.vue

<template>
	<div>
		<div class="row allAlignment">
			<leftNav/>
			<div>
				<hader/>
				<messageCenter></messageCenter>
				<div class="column allAlignment box" style="background:#F6F8FF; ">
					<div style="height:8vh; background:#FFF; " class="row allAlignment">
						<div class="name_box row center">
							<span>留言列表</span>
						</div>
						<div class="row center allAlignment">
							<el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
								></el-option>
							</el-select>
							<div>
								<el-input
										placeholder="请输入内容"
										size="mini"
										v-model="input3"
										class="input-with-select"
								>
									<el-button slot="append" icon="el-icon-search"></el-button>
								</el-input>
							</div>
						</div>
					</div>
					<div style="margin:0 20px;">
						<el-table
								:header-cell-style="{background:'#eef1f6',color:'#606266'}"
								:row-style="{background:'#ffffff',color:'#606266'}"
								:data="tableData"
								stripe
								@row-dblclick="click_row"
								style="width: 100%;"
						>
							<el-table-column prop="name" label="用户名"></el-table-column>
							<el-table-column prop="time" label="留言时间" width="180"></el-table-column>
							<el-table-column prop="content" label="留言内容"></el-table-column>
							<el-table-column prop="phone" label="手机"></el-table-column>
							<el-table-column prop="email" label="邮箱"></el-table-column>
							<el-table-column prop="endTime" label="当前状态">
								<template slot-scope="scope">
                  <span
						  style="color:#FF6600"
						  v-if="scope.row.currentState === '未回复'"
				  >{{scope.row.currentState}}</span>
									<span v-if="scope.row.currentState === '已回复'">{{scope.row.currentState}}</span>
								</template>
							</el-table-column>
							<!-- <el-table-column
											  prop="currentState"
											  label="当前状态"
											  width="100"
											  :filters="[{ text: '未回复', value: '未回复' }, { text: '已回复', value: '已回复' }]"
											  :filter-method="filterTag"
											  filter-placement="bottom-end">
											  <template slot-scope="scope">
												  <el-tag
												  :type="scope.row.currentState === '未回复' ? 'primary' : 'success'"
												  disable-transitions>{{scope.row.currentState}}</el-tag>
											  </template>
							</el-table-column>-->
							<el-table-column prop="satisfaction" label="处理人"></el-table-column>
						</el-table>
					</div>
					<div v-show="pages >9" style=" padding: 10px;">
						<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"/>
					</div>
				</div>
			</div>


			<!-- 详情抽屉-->
			<el-drawer
					id="leaveMessage"
					:close-on-press-escape="true"
					:show-close="false"
					style="margin-top:50px"
					:visible.sync="drawer"
					size="780px">
				<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-row>
					<el-row class="chat_user">
						<el-col :span="17">
							<div class="chat_box">
								<!-- 内容展示 -->
								<el-row id="main">
									<el-col class="user">
										<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>
										<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>账号：{{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>来源ip：{{getUserItem.account_ip}}</li>
									<li>来源终端：{{getUserItem.system}}-{{getUserItem.browse}}</li>
								</ul>

							</div>
						</el-col>
					</el-row>
				</el-row>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	import "@/css/index.css";
	import leftNav from "@/components/leftNav";
	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() {
			return {
				isShow: false,
				uid: "",
				pages: 0,
				tableData: [],
				options: [
					{
						value: "今日",
						label: "今日"
					},
					{
						value: "最近3天",
						label: "最近3天"
					},
					{
						value: "最近7天",
						label: "最近7天"
					},
					{
						value: "最近15天",
						label: "最近15天"
					},
					{
						value: "最近30天",
						label: "最近30天"
					}
				],
				value: "",
				input3: "",
				startTime: "", // 请求结果开始时间
				endTime: "", // 请求结果结束时间
				drawer: false,
				sendCol: false, // 发送按钮切换样式
				leaveInfor: '', // 留言信息
				dialogImageUrl: '',
				userInfo: [], //用户信息
				getUserItem: [],
				img_http: 'http://kfadmin.bocai186.com',//图片路径域
				// img_http: 'http://192.168.2.187:8090',//图片路径域

				uploadImg:[],
				users:[]
			};
		},
		components: {
			leftNav,
			hader,
			historicalRecord,
			messageCenter
		},
		mounted() {
			this.frceArr = frce.frce;
			this.value = this.options[2].value;
			this.getSessionList(1)
			this.get_vuex_info();
		},
		computed: {

			// 获取客服查询时间
			getValueChange() {
				return this.value;
			}
		},
		watch: {
			getValueChange(val) {
				this.getStartEndAjaxTime(val);
			}
		},
		methods: {

			/******************上一页*****************/
			upData(e) {
				this.getSessionList(e)
			},

			/*********************下一页******************/
			downData(e) {
				this.getSessionList(e)
			},

			/*******************选择页数******************/
			current_page(e) {
				this.getSessionList(e)

			},

			// 上传之前
			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) {
				// this.uploadImg = []
				// fileList.forEach((res,index) => {
				//   this.uploadImg.push(URL.createObjectURL(res.raw))
				// });
				// console.log(this.uploadImg)
			},
			// 每次改变图片状态返回的回调
			uploadChange(file, fileList) {

			},
			handleExceed(files, fileList) {
				this.$message.error(`图片上传数量最多4张`);
			},
			sendMessage() {
				this.$refs.upload.submit();
				console.log(this.uploadImg, '图片');
				let formData = new FormData();
				formData.append("user_id",this.users.id);
				formData.append("message_id", this.uid);
				formData.append("reply_content", this.leaveInfor);
				formData.append("images",this.uploadImg);

				this.post('/api/service/Message/dealmessage', formData).then(res => {
					console.log(res,'提交成功')
					return false;
				})
			},

			/*****************获取当前聊天用户信息****************/
			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;
					}
				})
			},

			get_vuex_info(){
				this.users = this.$store.getters.get_user_info
				console.log(this.users,'用户信息');
			},



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

				if (e == "今日") {
					time2.setDate(time.getDate())
				} else if (e == "最近3天") {
					time2.setDate(time.getDate() - 3)
				} else if (e == "最近7天") {
					time2.setDate(time.getDate() - 7)
				} else if (e == "最近15天") {
					time2.setDate(time.getDate() - 15)
				} else if (e == "最近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(1)
			},
			// 获取列表数据
			getSessionList(page, size = 10) {
				let str = "index" + "customer-service" + "Message" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					}
				};
				this.post(
					"api/service/Message/index", {
						start_time: this.startTime,
						end_time: this.endTime,
						pageSize: size,
						pageNumber: page
					},
					obj,
					str
				).then(res => {
					if (res.data.data) {
						this.tableData = res.data.data;
						this.pages = res.data.data.length;
						console.log(this.pages)
					}
				});
			},
			click_row(row, column, event) {
				// console.log(this.value);
				console.log(row)
				this.uid = row.message_id;
				this.drawer = true;
				// this.isShow = true;
				this.getUserItem = row;
				console.log(this.getUserItem)
				this.get_user(row.message_id)
			},
			childValue(e) {
				//console.log(e);
				//this.drawer =true;
				// this.isShow = e;
			},

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

	.user_box {
		height: 100vh;
	}

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

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

	.right_box {
		position: fixed;
		top: 33px;
		right: 0;
		width: 100%;
		/* height: 100vh;
			  background: red; */
		/* //background: rgba(255, 255, 255, 0.315); */
	}

	.el-input-group__append {
		text-align: center;
	}

	.el-table td {
		padding: 8px 0;
	}

	.headers {
		display: flex;
		justify-content: flex-start;
		padding: 0 20px;
		height: 50px;
		line-height: 50px;
	}

	.user_box {
		padding: 20px;
		background: #F6F8FF;
	}

	.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 {
		margin: 0;
		padding: 0;
	}

	#main {
		height: 65vh;
	}

	.icons {
		padding: 0 20px;
		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;
	}

	.send.sendCol {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
	}

</style>