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

<template>
	<!-- 消息中心 -->
	<el-drawer
			style="margin-top: 50px"
			:visible.sync="drawer"
			:modal="false"
			:show-close="false"
			size="90%">
		<div>
			<el-col :span="6" class="left-list">
				<div class="tabs">
					<a :class="switchMessageType=='all'?'active':''" @click="switchMessage('all')">全部消息</a>
					<a :class="switchMessageType=='system'?'active':''" @click="switchMessage('system')">系统公告</a>
					<a :class="switchMessageType=='person'?'active':''" @click="switchMessage('person')">个人消息</a>
				</div>
				<ul class="message-list" v-if="switchMessageType == 'all'">
					<li class="list-item">
						<p class="item-info">
							<span class="name">GFF_D345</span>
							<span class="time">11:30:54</span>
						</p>
						<p>客服满意度调查</p>
					</li>
					<li class="list-item">
						<p class="item-info">
							<span class="name">GFF_D345</span>
							<span class="time">11:30:54</span>
						</p>
						<p>客服满意度调查</p>
					</li>
				</ul>
				<ul class="message-list" v-if="switchMessageType == 'system'">
					<li class="list-item">
						<p class="item-info">
							<span class="name">GFF_D345</span>
							<span class="time">11:30:54</span>
						</p>
						<p>我是系统公告</p>
					</li>
				</ul>

				<ul class="message-list" v-if="switchMessageType == 'person'">
					<li class="list-item">
						<p class="item-info">
							<span class="name">GFF_D345</span>
							<span class="time">11:30:54</span>
						</p>
						<p>我是个人消息</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">
					<ul>
						<li><p>发件人：管理员</p></li>
						<li><p>收件人：客服小王</p></li>
						<li><p>时 间：2019年7月2日(星期二) 上午9:53</p></li>
					</ul>
					<div class="message-content">
						如果您在一份订单里订购了多种商品并且销售方只给您发出了部分商品时，您与销售方之间仅就实际直接向您发出的商品建立了合同关系；只有在销售方实际直接向
						您发出了订单中订购的其他商品时，您和销售方之间就订单中该其他已实际直接向您发出的商品建立了合同关系。
					</div>
				</el-row>
			</el-col>
		</div>
	</el-drawer>
</template>

<script>

	export default {
		name: "messageCenter",
		data() {
			return {
				drawer: false,
				switchMessageType: "all",
			}
		},
		computed: {
			get_drawer() {
				return this.$store.getters.get_drawer;
			},
		},
		watch: {
			get_drawer(data) {
				console.log(data)
				this.drawer = data;
			},
		},
		methods: {
			handleClose() {
				this.$store.dispatch("SET_DRAWER", false);
			},
			switchMessage(num) {
				this.switchMessageType = num;
			},
		},

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

		.list-item {
			padding: 10px 20px;

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

		.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: 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>
	.el-drawer__container {
		outline: none !important;
	}

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

</style>