update

service/src/components/messageCenter.vue

@@ -10,7 +10,7 @@
 		<div>
 			<el-col :span="6" class="left-list">
 				<div class="tabs">
-					<el-badge :value="12" class="item">
+					<el-badge :value="unreadNum" class="item">
 						<a :class="switchMessageType=='unread'?'active':''" @click="switchMessage('unread')">未读信息</a>
 					</el-badge>
 
@@ -21,29 +21,22 @@
 
 				</div>
 				<ul class="message-list" v-if="switchMessageType == 'unread'">
-					<li class="list-item">
+					<li class="list-item"  v-for="item in unreadList" :key="item.id" @click="toReading(item)">
 						<p class="item-info">
-							<span class="name">GFF_D345</span>
-							<span class="time">11:30:54</span>
+							<span class="name">{{item.title}}</span>
+							<span class="time">{{item.sendtime}}</span>
 						</p>
-						<p>我是未读信息123213213</p>
+						<p>{{item.atext}}</p>
 					</li>
 				</ul>
 
 				<ul class="message-list" v-if="switchMessageType == 'read'">
-					<li class="list-item">
+					<li class="list-item" v-for="item in readList" :key="item.id"  @click="toReading(item)">
 						<p class="item-info">
-							<span class="name">GFF_D345</span>
-							<span class="time">11:30:54</span>
+							<span class="name">{{item.title}}</span>
+							<span class="time">{{item.sendtime}}</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>
+						<p>{{item.atext}}</p>
 					</li>
 				</ul>
 
@@ -54,16 +47,21 @@
 					<strong>客服满意度调查！</strong>
 					<i @click="handleClose" class="el-icon-close"></i>
 				</el-row>
-				<el-row class="messageBox">
+				<el-row class="messageBox" v-if="nomessage">
+					<ul>
+						<li><p>发件人：管理员</p></li>
+						<li><p>收件人：123</p></li>
+						<li><p>时 间：123</p></li>
+					</ul>
+					<div class="message-content">123</div>
+				</el-row>
+				<el-row class="messageBox" v-if="nomessage == false">
 					<ul>
 						<li><p>发件人：管理员</p></li>
-						<li><p>收件人：客服小王</p></li>
-						<li><p>时 间：2019年7月2日(星期二) 上午9:53</p></li>
+						<li><p>收件人：{{userName}}</p></li>
+						<li><p>时 间：{{messageBox.sendtime}}</p></li>
 					</ul>
-					<div class="message-content">
-						如果您在一份订单里订购了多种商品并且销售方只给您发出了部分商品时，您与销售方之间仅就实际直接向您发出的商品建立了合同关系；只有在销售方实际直接向
-						您发出了订单中订购的其他商品时，您和销售方之间就订单中该其他已实际直接向您发出的商品建立了合同关系。
-					</div>
+					<div class="message-content">{{messageBox.atext}}</div>
 				</el-row>
 			</el-col>
 		</div>
@@ -78,17 +76,36 @@
 			return {
 				drawer: false,
 				switchMessageType: "unread",
+
+				nomessage:true,
+
+				userID:null,
+				userName:null,
+				//已读列表
+				readList:[],
+				//未读列表
+				unreadList:[],
+				//未读数量
+				unreadNum:null,
+				// 详情
+				messageBox:[],
+
 			}
 		},
 		computed: {
 			get_drawer() {
 				return this.$store.getters.get_drawer;
 			},
+
 		},
 		watch: {
 			get_drawer(data) {
 				console.log(data)
 				this.drawer = data;
+				this.userID = this.$store.getters.get_user_info.id;
+				this.userName = this.$store.getters.get_user_info.user_name;
+				this.readnotice();
+				this.unreadnotice();
 			},
 		},
 		methods: {
@@ -98,6 +115,52 @@
 			switchMessage(num) {
 				this.switchMessageType = num;
 			},
+			// 已读信息
+			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;
+					}
+				});
+			},
+			// 未读信息
+			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;
+						this.unreadNum =  res.data.data.length;
+					}
+				});
+			},
+
+			// 点击显示当前详细内容
+			toReading(item){
+				console.log(item);
+				this.nomessage = false;
+				this.messageBox = item;
+			}
 		},
 
 	}