APP端 消息Tab 页 每一类消息也需要显示各自的脚本

src/store/getters.js

@@ -12,6 +12,9 @@ const getters = {
   commonTree: state => state.app.commonTree,
   dictionary: state => state.app.dictionary,
   dotNum: state => state.app.dotNum,
+  businessUnReadCount: state => state.app.businessUnReadCount,
+  messageUnReadCount: state => state.app.messageUnReadCount,
+  noticeUnReadCount: state => state.app.noticeUnReadCount,  
 }
 
 export default getters

src/store/modules/app.js

@@ -29,13 +29,25 @@ export default {
     wholeTree:[],
     //字典
     dictionary: [],
-    //未读消息数
-    dotNum:0
+    //未读消息总数
+    dotNum:0,
+    businessUnReadCount:0,
+    messageUnReadCount:0,
+    noticeUnReadCount:0
   },
   mutations : {
     SET_DOT_NUM(state, num) {
       state.dotNum = num;
     },
+    SET_DOT_BUSINESSUNREADCOUNT(state, num) {
+      state.businessUnReadCount = num;
+    },
+    SET_DOT_MESSAGEUNREADCOUNT(state, num) {
+      state.messageUnReadCount = num;
+    },
+    SET_DOT_NOTICEUNREADCOUNT(state, num) {
+      state.noticeUnReadCount = num;
+    },
     SET_USER_NAME(state, name) {
       state.userName = name;
     },
@@ -62,7 +74,10 @@ export default {
     //获取未读消息数
     redDot({commit, state}){
       getDot().then(res=>{
-        commit('SET_DOT_NUM', res.data)
+        commit('SET_DOT_NUM', res.data.totalCount)
+        commit('SET_DOT_BUSINESSUNREADCOUNT', res.data.businessUnReadCount)
+        commit('SET_DOT_MESSAGEUNREADCOUNT', res.data.messageUnReadCount)
+        commit('SET_DOT_NOTICEUNREADCOUNT', res.data.noticeUnReadCount)
       })
     },
     //设置字典

src/views/home/message/index.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="message">
   <div v-if="!show" class="page-container">
-    <van-tabs v-model="query.type" @change="refreshData">
-      <van-tab title="通知公告" name="1"></van-tab>
-      <van-tab title="业务提醒" name="2"></van-tab>
-      <van-tab title="消息" name="3"></van-tab>
+    <van-tabs v-model="query.type" @change="refreshData"  color="#008cd6">
+      <van-tab title="通知公告" name="1" :badge="getUnReadCount(noticeUnReadCount)"></van-tab>
+      <van-tab title="业务提醒" name="2" :badge="getUnReadCount(businessUnReadCount)"></van-tab>
+      <van-tab title="消息" name="3" :badge="getUnReadCount(messageUnReadCount)"></van-tab>
     </van-tabs>
     <div class="card-list">
       <Scroll
@@ -89,7 +89,7 @@ export default {
     };
   },
   computed:{
-    ...mapGetters(['orgId','id','roleList'])
+    ...mapGetters(['orgId','id','roleList','businessUnReadCount','messageUnReadCount','noticeUnReadCount'])
   },
   mounted(){
     this.getDataList();
@@ -100,6 +100,16 @@ export default {
     })
   },
   methods:{
+    getUnReadCount(count)
+    {
+      if(count && count>0)
+      {
+        return count;
+      }
+      else{
+        return null;
+      }
+    },
     preview(file){
       this.openFilePreview(file);
     },
@@ -223,7 +233,9 @@ export default {
 </style>
 <style lang="scss" scoped>
 .message{
-
+  ::v-deep .van-info{
+    border:none !important;
+  }
 }
 .card-list{
   padding:0 20px 20px 20px;