Customer-Service-Web/service_exe/src/renderer/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" @change="getStartEndAjaxTime(value)"  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; height: 77vh;overflow-y: scroll;">
						<el-table
							:header-cell-style="{background:'#eef1f6',color:'#606266'}"
							:row-style="{background:'#ffffff',color:'#606266'}"
							:data="tableData"
							stripe
							@row-dblclick="click_row"
							:size="size"
							style="width: 100%;"
							:default-sort = "{prop: 'sortable', order: 'message_status'}"
						>
							<el-table-column prop="nick_name"  width="120" label="用户名"></el-table-column>
							<el-table-column prop="add_time" width="160" label="留言时间" sortable></el-table-column>
							<el-table-column prop="content"  label="留言内容">
								<template slot-scope="scope">
									<el-popover width="800" trigger="hover" placement="top">
										<p  >{{ scope.row.content }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.content }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column prop="phone" width="160" label="手机"></el-table-column>
							<el-table-column prop="email" width="240"  label="邮箱"></el-table-column>
							<el-table-column prop="message_status" width="120"  label="当前状态"  sortable>
								<template slot-scope="scope">
									<span style="color:#FF6600" v-if="scope.row.message_status == '0'"> 未回复</span>
									<span v-if="scope.row.message_status == '1'">已处理</span>
								</template>
							</el-table-column>
							<el-table-column prop="user_name" width="160"label="处理人"></el-table-column>
						</el-table>
					</div>
					<div  v-show="pages >9" style=" padding: 10px;">
						<el-pagination background layout="prev, pager, next" prev-text='上一页' next-text='下一页' :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"
					:visible.sync="drawer"
					size="1000px">
				<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 style="	height: 88vh;background:#e6d0d033;overflow-y:auto; padding-bottom: 30px;" :span="16">
							<div class="chat_box">
								<!-- 内容展示 -->
								<el-row id="main">
									<el-col class="user">
										<span style="color: #999999;">用户<span style="color:#666;">{{userInfo.account_name}}</span>留言</span>
										<div class="user_text">{{getUserItem.content}}</div>
										<div class="img block " v-for="item in getUserItem.image">
											<el-image 
												style="width: 100px; height: 100px"
												:src="img_http +item" 
												:fit="fit"
												:preview-src-list="[img_http +item]">
											</el-image>
										</div>
									</el-col>


									<div v-if="getUserItem.message_status == 0">
										<el-col class="serive">
											<el-input class="serive_text" resize="none" type="textarea"
												@blur="widthCheck($event.target, 100)" placeholder="请回复用户留言"
												maxlength="120" show-word-limit
												v-model.trim="leaveInfor"></el-input>
										</el-col>
										<el-col>
											<el-upload style="margin:10px;"
													:action='uploadImg'
													:before-upload="beforeAvatarUpload"
													:on-change='uploadChange'
													:on-success='uploadSuccess'
													:on-error="uploadError"
													:on-remove="handleRemove"
													:auto-upload="false"
													list-type="picture-card"
													ref="upload"
													:file-list="fileList"
													: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>
									</div>
									<div v-else>
										<el-col class="serive">
											<span style="color: #999999;">客服<span style="color: #5399f5">{{getUserItem.user_name}}</span>回复用户<span style="color:#666;">{{userInfo.account_name}}</span>留言</span>
											<div class="serive_text">{{getUserItem.reply_content}}</div>
											<div style="padding: 10px 15px;">
												<div class="img block"  v-for="item in getUserItem.images">
													<el-image 
														style="width: 100px; height: 100px"
														:src="img_http +item" 
														:fit="fit"
														:preview-src-list="[img_http +item]">
													</el-image>
												</div>
											</div>
										</el-col>
									</div>
								</el-row>

								<div v-if="getUserItem.message_status == 0" class="chatting">
									<el-button class="send" type="primary" @click="sendMessage">提交</el-button>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<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: window.url_https_ajax,//图片路径域
				fileList:[],
				imgUrl:'',
				users:[],
				fit:'contain',
				isSendMessage:false,//是否提交
				size:'small',//表单大小
				isUpImg:false,//是否提交图片片
				img_number:'',//图片数量
				uploadImg:'',//

			};
		},
		components: {
			leftNav,
			hader,
			historicalRecord,
			messageCenter
		},
		mounted() {
			// this.img_http = window.url_https_ajax;
			this.uploadImg = this.img_http+"/index/upload/uploadImg"
			this.frceArr = frce.frce;
			this.value = this.options[2].value;
			if(typeof this.$store.getters.get_user_info  != 'string'){
				this.users = this.$store.getters.get_user_info;
			}else if(this.$store.getters.get_user_info!= ""){
				this.users = JSON.parse(this.$store.getters.get_user_info);
			}
			this.getStartEndAjaxTime(this.value)
		},
		computed: {

		},
		watch: {
		
		},
		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';
				// const isLt1M = file.size / 1024 / 1024 < 0.5;
				// if (!isJPG) {
				// 	this.$message.error('上传只能是图片格式!');
				// }
				// if (!isLt1M) {
				// 	this.$message.error('上传图片大小单张不能超过0.5MB!');
				// }
				//return isJPG && isLt1M;
			},
			// 上传成功时的回调
			uploadSuccess(res, file, fileList) {
				console.log();
				this.img_number ++;
				this.imgUrl = this.imgUrl ? this.imgUrl + "," + res.data.src :res.data.src;
				if(this.fileList.length == this.img_number){
					console.log(this.imgUrl);
					this.sendData();
				}
			},
			// 发送中
			onProgress() {

			},
			// 上传失败
			uploadError() {
				this.$message.error('上传失败，请重新上传')
			},
			//删除回掉
			handleRemove(file, fileList,) {
				this.fileList = fileList;
				// this.uploadImg = fileList;
			},
			// 每次改变图片状态返回的回调
			uploadChange(file, fileList) {
				// console.log(file)
				const isJPG = file.raw.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt1M = file.size / 1024 / 1024 < 0.5;
				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
					fileList.pop();
					this.fileList = fileList;
					return false
				}
				if (!isLt1M) {
					this.$message.error('上传图片大小单张不能超过0.5MB!');
					fileList.pop()
					this.fileList = fileList;
					return false
				}
				this.$refs.upload.clearFiles();
				if(!this.isUpImg){
					this.fileList.push(file)
				}else{
					this.fileList = fileList
				}
			},
			handleExceed(files, fileList) {
				this.$message.error(`图片上传数量最多4张`);
			},

			//提交留你数据
			sendData(){
				let parmas = {
					"user_id":this.users.id,
					"message_id":this.uid,
					"reply_content":this.leaveInfor,
					"images":this.imgUrl,
				}
				this.$http.post(this.$ports.Message.dealmessage, parmas).then(res => {
					this.$message.success(res.data.msg);
					this.leaveInfor = '';
					this.drawer = false;
					this.getSessionList(1)
					this.$refs.upload.clearFiles();
					this.fileList =[];
				})
			},

			//提交留言
			sendMessage() {
				if(this.leaveInfor && this.isSendMessage){
					if(this.fileList.length <1){
						this.sendData();
					}else{
						this.isUpImg = true;
						this.$refs.upload.submit();
						this.img_number = 0;
						this.isSendMessage  = false;
					}
					// setTimeout(()=>{
			
					// },1500)
				}else{
					this.$message.error(`请输入留言信息`);
				}
			},

			/*****************获取当前聊天用户信息****************/
			get_user(id) {
				let obj = {
					headers: {
						"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + 'service'),
						'userToken': this.token
					},
				};

				this.$http.post(this.$ports.userInfo.accountInfo, {
					account_id: id
				},obj).then(res => {
					if (res.data.code == 1) {
						this.userInfo = res.data.data;
					}
				})
			},

			widthCheck(str, len) {
				var temp = 0
				for (var i = 0; i < str.value.length; i++) {
					if (str.value.length < 4) {
						str.value = ''
					}
				}
			},

			// 获取请求参数开始和结束时间
			getStartEndAjaxTime(e) {
				console.log(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 searchText =this.input3
				let str = "index" + "customer-service" + "message" + "service";
				this.$http.get(this.$ports.Message.index, {params:{
						start_time: this.startTime,
						end_time: this.endTime,
						pageSize: size,
						pageNumber:page,
						searchText:searchText,
					},headers: {
						apiToken: this.$md5(str),
						userToken: this.token
					}}
				).then(res => {
					if (res.data.status == 1) {
						this.tableData = res.data.data.list;
						//this.pages = res.data.data.length;
						this.pages = res.data.data.total;
						// console.log(res.data.data)
					}
				});
			},

			//获取留言列表数据（行）
			click_row(row, column, event) {
				this.uid = row.message_id;
				this.drawer = true;
				this.isSendMessage = true;
				this.getUserItem = row;
				if(this.getUserItem.image){
					if(this.getUserItem.image.includes(',') && typeof this.getUserItem.image == 'string'){
						this.getUserItem.image = this.getUserItem.image.split(',');
					}else{
						if(typeof this.getUserItem.image == 'string'){
							this.getUserItem.image =[this.getUserItem.image]
						}else{
							this.getUserItem.image =this.getUserItem.image
						}
					}
				}
				if(this.getUserItem.images){
					if(this.getUserItem.images.includes(',') && typeof this.getUserItem.images == 'string'){
						this.getUserItem.images = this.getUserItem.images.split(',');
					}else{
						if(typeof this.getUserItem.images == 'string'){
							this.getUserItem.images = [this.getUserItem.images]
						}else{
							this.getUserItem.images = this.getUserItem.images
						}
					}
				}
				// console.log(this.getUserItem.images);
				this.get_user(row.account_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 !important;
		height: 100px !important;
		line-height: 100px !important;
	}

	.el-upload-list--picture-card .el-upload-list__item {
		width: 100px !important;
		height: 100px !important;
		line-height: 100px !important;
	}
</style>
<style lang="less" scoped>
	.name-wrapper{
		width: 240px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.chatting {
		text-align: center;
	}

	.serive {
		padding: 0 10px;
		text-align: right;

		.serive_text {
			width: 100%;
			margin-top: 20px;
			background: #F5F5F5;
			border: 1px solid #EEEEEE;
			 padding: 20px;
			font-size: 14px;
			color: #666;
			word-wrap: break-word;
		
		}
	}

	.user {
		.user_text {
			width: 100%;
			margin-top: 20px;
			background: #F5F5F5;
			border: 1px solid #EEEEEE;
			padding: 20px;
			font-size: 14px;
			color: #666;
			word-wrap: break-word;
			// line-height: 1.8;
		}

		.img {
			margin-top: 20px;
		}
	}

	.netSendCol {
		cursor: not-allowed;
	}

	.content_box {
		.chat_user {
			border-top: 1px solid #D5E5FF;
			.block{
				// padding: 10px 0;
				text-align: center;
				border: 1px solid #eff2f6;
				display: inline-block;
				width: 20%;
				box-sizing: border-box;
				vertical-align: top;
				margin-left: 10px;
			}
		}
	}

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