Customer-Service-Web/service/src/components/messageCenter.vue

<template>
	<!-- 消息中心 -->
	<el-drawer
			:close-on-press-escape="true"
			style="margin-top: 50px"
			:visible.sync="drawer"
			:modal="false"
			:show-close="false"
			:before-close="handleClose"
			size="90%">
		<div>
			<el-col :span="6" class="left-list">
				<div class="tabs">
					<el-badge :value="unreadNum" class="item">
						<a :class="switchMessageType=='unread'?'active':''" @click="switchMessage('unread')">未读信息</a>
					</el-badge>

					<el-badge class="item">
						<a :class="switchMessageType=='read'?'active':''" @click="switchMessage('read')">已读信息</a>
					</el-badge>


				</div>
				<ul class="message-list" v-if="switchMessageType == 'unread'">
					<li class="list-item"  :class="{active:markupCode == index}"  v-for="(item,index) in unreadList" :key="item.id" @click="toReading(item,index)">
						<p class="item-info">
							<span class="name">{{item.title}}</span>
							<span class="time">{{item.sendtime}}</span>
						</p>
						<p>{{item.atext}}</p>
					</li>
				</ul>

				<ul class="message-list" v-if="switchMessageType == 'read'">
					<li class="list-item" :class="{active:markupCode == index}" v-for="(item,index) in readList" :key="item.id"  @click="toReading(item,index)">
						<p class="item-info">
							<span class="name">{{item.title}}</span>
							<span class="time">{{item.sendtime}}</span>
						</p>
						<p>{{item.atext}}</p>
					</li>
				</ul>


			</el-col>

			<el-col :span="18">
				<el-row class="title">
					<strong>客服满意度调查！</strong>
					<i @click="handleClose" class="el-icon-close"></i>
				</el-row>
				<el-row class="messageBox" v-if="switchMessageType == 'unread'">
					<div v-if="unreadList.length > 0">
						<ul >
							<li><p>发件人：{{unreadListOne.admin_name}}</p></li>
							<li><p>收件人：{{userName}}</p></li>
							<li><p>时 间：{{unreadListOne.sendtime}}</p></li>
						</ul>
						<div class="message-content">{{unreadListOne.atext}}</div>
					</div>
				</el-row>
				<el-row class="messageBox" v-if="switchMessageType == 'read'">
					<div  v-if="readList.length > 0">
						<ul>
							<li><p>发件人：{{messageBox.admin_name}}</p></li>
							<li><p>收件人：{{userName}}</p></li>
							<li><p>时 间：{{messageBox.sendtime}}</p></li>
						</ul>
						<div class="message-content">{{messageBox.atext}}</div>
					</div>
				</el-row>
			</el-col>
		</div>
	</el-drawer>
</template>

<script>

	export default {
		name: "messageCenter",
		data() {
			return {
				drawer: false,
				switchMessageType: "unread",

				nomessage:true,

				userID:null,
				userName:null,
				//已读列表
				readList:[],
				//未读列表
				unreadList:[],
				//未读第一个
				unreadListOne:{},
				//未读数量
				unreadNum:null,
				// 详情
				messageBox:{},
				//标记代码
				markupCode:0,

			}
		},
		computed: {
			get_drawer() {
				return this.$store.getters.get_drawer;
			},

		},
		watch: {
			get_drawer(data) {
				// console.log('22',data)
				this.drawer = data;
				this.userID = this.$store.getters.get_user_info.id;
				this.userName = this.$store.getters.get_user_info.user_name;
				if(data){
					this.readnotice();
					this.unreadnotice();
				}
			},
		},
		methods: {
			handleClose() {
				this.$store.dispatch("SET_DRAWER", false);
			},
			switchMessage(num) {
				this.switchMessageType = num;
				this.markupCode = 0 ;
				if(this.switchMessageType == 'unread'){
					this.unreadnotice();
				}else if(this.switchMessageType=='read'){
					this.readnotice();	
				}
			},
			// 已读信息
			readnotice(){
				let str = "readnotice" + "customer-service" + "index" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					},
					user_id: this.userID
				};
				this.post("api/service/index/readnotice", obj).then(res => {
					// console.log(res)
					if(res.data.code === 1){
						console.log("已读",res.data.data)
						this.readList =  res.data.data;
						if(res.data.data.length > 0){
							this.messageBox = res.data.data[0];
						}
					}
				});
			},
			// 未读信息
			unreadnotice(){
				let str = "unreadnotice" + "customer-service" + "index" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					},
					user_id: this.userID
				};
				this.post("api/service/index/unreadnotice", obj).then(res => {
					console.log(res)
					if(res.data.code === 1){
						console.log("未读",res.data.data)
						this.unreadList = res.data.data;
						// console.log(this.unreadListOne,'第一个')
						this.unreadNum =res.data.data.length >0 ? res.data.data.length-1 : 0;
						if(res.data.data.length > 0){
							this.unreadListOne = res.data.data[0];
							this.readInfo(res.data.data[0].id)
						}

					}
				});
			},

			//读取信息
			readInfo(id){
				//this.messageBox.id
				let str = "updatenotice" + "customer-service" + "index" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					},
					servicenotice_id: id
				};
				this.post("api/service/index/updatenotice", obj).then(res => {
					console.log(res)
					if(res.data.code === 1){
						console.log("已读",res.data.data)
						// this.unreadList = res.data.data;
						// this.unreadListOne = res.data.data[0];
						// // console.log(this.unreadListOne,'第一个')
						// this.unreadNum =  res.data.data.length;

					}
				});
			},
			

			// 点击显示当前详细内容
			toReading(item,index){
				// console.log(item,index);
				if( this.markupCode == index) return
				this.markupCode = index;
				this.nomessage = false;
				this.messageBox = item;
				if(this.switchMessageType == 'unread'){
					this.readInfo(item.id)
				}
			}
		},

	}
</script>

<style lang="less" scoped>
	.left-list {
		border-right: 1px solid #D5E5FF;
		height: 100vh;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		height: 48px;
		line-height: 48px;
		border-bottom: 1px solid #D5E5FF;

		a {
			font-size: 14px;
			cursor: pointer;
		}

		a.active {
			color: #5399F5;
			border-bottom: 2px solid #5399F5;
		}
	}

	.message-list {
		margin: 0;
		// /* 奇数背景色 */
		// .list-item:nth-of-type(odd) {
		// 	background: #F6F8FF;
		// }
		// /* 偶数背景色 */
		// .list-item:nth-of-type(even) {
		// 	background: #fff;
		// }
		.active{
			background: #F6F8FF;
		}
		.list-item {
			padding: 10px 20px;

			p {
				color: #666;
				font-size: 14px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}

		.item-info {
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;

			span {
				font-size: 14px;
				color: #666;
			}

			span.time {
				color: #999;
			}
		}
	}

	.title {
		padding: 0 10px;
		height: 48px;
		line-height: 48px;
		border-bottom: 1px solid #D5E5FF;

		i {
			margin-top: 15px;
			font-size: 18px;
			cursor: pointer;
			float: right;
		}
	}

	.messageBox {
		padding: 15px 20px;
		li {
			margin: 10px 0;
			p {
				font-size: 14px;
				color: #999999;
			}
		}

		.message-content {
			margin-top: 20px;
			background: #F5F5F5;
			border: 1px solid #EEEEEE;
			padding: 20px;
			font-size: 14px;
			color: #666;
			line-height: 1.8;
		}
	}

</style>
<style>
	.left-list .el-badge__content.is-fixed {
		position: absolute;
		top: 12px !important;
		right: 10px !important;
	}
	.el-drawer__container {
		outline: none !important;
	}

	.el-drawer__header {
		padding: 0 !important;
		height: 10px !important;
		margin-bottom: 0 !important;
	}

</style>