养老场景显示未读消息数

src/projects/pension/components/NavMenu.vue

@@ -4,9 +4,10 @@
 			<span class="mui-icon iconfont icon-shouye2"></span>
 			<span class="mui-tab-label">首页</span>
 		</router-link>
-		<router-link :to="router[1]" :class="'mui-tab-item '+(routeName==router[1]['name']?'mui-active':'')">
+		<router-link :to="router[1]" :class="'message-nav mui-tab-item '+(routeName==router[1]['name']?'mui-active':'')">
 			<span class="mui-icon iconfont icon-xiaoxi1"></span>
 			<span class="mui-tab-label">消息</span>
+			<i v-show="wd_message_num && wd_message_num>0" v-text="wd_message_num"></i>
 		</router-link>
 		<router-link :to="router[2]" :class="'mui-tab-item '+(routeName==router[2]['name']?'mui-active':'')">
 			<span class="mui-icon iconfont icon-wode1"></span>
@@ -16,6 +17,10 @@
 </template>
 
 <script>
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
 	export default {
 		name: 'NavMenu',
 		props: {
@@ -51,6 +56,9 @@
 					console.log(newValue)
 				}
 			},
+			...mapGetters({
+				wd_message_num: 'wd_message_num',
+			})
 		}
 	}
 </script>
@@ -59,4 +67,20 @@
 <style scoped src="$project/assets/css/xpgj.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
 <style scoped>
+	.message-nav {
+		position: relative;
+	}
+
+	.message-nav i {
+		position: absolute;
+		top: 1px;
+		right: 40px;
+		background-color: red;
+		border-radius: 9px;
+		color: #fff;
+		padding: 0px 6px;
+		font-size: 12px;
+		line-height: 18px;
+		z-index: 99;
+	}
 </style>

src/projects/pension/views/Master/Home.vue

@@ -101,7 +101,7 @@
 					<div class="mui-col-xs-12">
 						<ul class="mui-table-view mui-grid-view mui-grid-9 vongi-floor-padded">
 							<li class="mui-table-view-cell mui-media mui-col-xs-6">
-								<a  @click="toPay()" >
+								<a @click="toPay()">
 									<div class="vongi-shop-img"><img src="http://oss.xiaoxinda.com/smart/person/2020/10/18174320745.png" width="100%" /></div>
 									<div class="mui-media-body">老人智能安全监控手表</div>
 									<div class="mui-media-body color-yellow">¥0.01</div>
@@ -122,7 +122,7 @@
 
 <script>
 	require('$project/assets/js/mui.picker.min.js');
-	import * as API  from '@/apis/Master/live'
+	import * as API from '@/apis/Master/live'
 	import * as API_Notice from '@/apis/Common/notice'
 	import * as API_User from '$project/apis/user'
 	import Common from '$project/components/Common.vue'
@@ -159,12 +159,12 @@
 				API.submit({
 					"personId": this.person_data.id,
 					"payPersonId": this.person_data.id,
-					"goodsId":"2",
+					"goodsId": "2",
 				}).then(data => {
 
 					var url = window.location.href.split("#")[0];
 					var param = JSON.stringify(data).replace("{", "").replace("}", "").replace(/\",\"/g, "&").replace(/,\"/g, "&").replace(
-							/:/g, "=").replace(/\":\"/g, "=").replace(/\"/g, "");
+						/:/g, "=").replace(/\":\"/g, "=").replace(/\"/g, "");
 					param = param.replace('=//', '://');
 					window.location = url + "?#/master/live/pay?" + param;
 
@@ -223,7 +223,9 @@
 				//this.isLoading = true;
 				API_Notice.prefetch().then(response => {
 					this.isLoading = false;
-
+					
+					this.set_wd_message_num(response);
+					
 					this.getLastNotice();
 				}).catch(error => {
 					this.isLoading = false;
@@ -247,13 +249,13 @@
 			},
 			//引入图片
 			requirePic(file) {
-                if (file) {
-                    if (file.indexOf('http') == 0) {
-                        return file;
-                    } else {
-                        return require('$project/assets/img/' + file);
-                    }
-                }
+				if (file) {
+					if (file.indexOf('http') == 0) {
+						return file;
+					} else {
+						return require('$project/assets/img/' + file);
+					}
+				}
 			},
 			//设置判断首页模式
 			setHomeModel() {
@@ -275,6 +277,7 @@
 			},
 			...mapMutations({
 				set_persion_home_model: types.SET_PERSION_HOME_MODEL,
+				set_wd_message_num: types.SET_WD_MESSAGE_NUM,
 			})
 		},
 		mounted() {