优化小红点刷新显示

src/components/TabBar.vue

@@ -1,38 +1,31 @@
 <template>
   <div>
     <van-tabbar route v-model="active" @change="handleChange">
-      <van-tabbar-item v-for="(item, index) in data" :badge="item.dot || ''" :to="item.to" :icon="item.icon" :key="index">
-        {{ item.title }}
-      </van-tabbar-item>
+      <van-tabbar-item  to="/works" icon="home-o" >待办</van-tabbar-item>
+      <van-tabbar-item  :badge="dotNum" to="/message" icon="comment-o" >消息</van-tabbar-item>
+      <van-tabbar-item  to="/menu" icon="apps-o" >菜单</van-tabbar-item>
+      <van-tabbar-item  to="/isMy" icon="user-o" >我的</van-tabbar-item>
     </van-tabbar>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'TabBar',
-  props: {
-    defaultActive: {
-      type: Number,
-      default: 0
-    },
-    data: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
   data() {
     return {
-      active: this.defaultActive
+      active: 0,
+      dot:0,
     }
   },
-  mounted() {
-
+  computed:{
+    ...mapGetters(['dotNum']),
   },
   methods: {
-    handleChange(value) {
-      this.$emit('change', value)
+    handleChange(v) {
+      if(v == 1){
+        this.$store.dispatch('redDot')
+      }
     }
   }
 }

src/components/layouts/index.vue

@@ -7,50 +7,19 @@
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </div>
     <div v-if="!$route.meta.hideTabBar" class="layout-footer">
-      <TabBar :data="tabTars" @change="handleChange" />
+      <TabBar />
     </div>
   </div>
 </template>
 
 <script>
 import TabBar from '@/components/TabBar'
-import { userInfo,getDot } from '@/api/public'
+import { userInfo } from '@/api/public'
 export default {
   data() {
     return {
       container: null,
       include: [],
-      tabTars: [
-        {
-          title: '待办',
-          to: {
-            name: 'works'
-          },
-          icon: 'home-o',
-        },
-        {
-          title: '消息',
-          to: {
-            name: 'message'
-          },
-          icon: 'comment-o',
-          dot:false
-        },
-        {
-          title: '菜单',
-          to: {
-            name: 'menu'
-          },
-          icon: 'apps-o'
-        },
-        {
-          title: '我的',
-          to: {
-            name: 'isMy'
-          },
-          icon: 'user-o'
-        }
-      ]
     }
   },
   components: {
@@ -58,7 +27,6 @@ export default {
   },
   created() {
     this.getUserInfo();
-    this.getDotData();
   },
   watch: {
     $route(to, from) {
@@ -82,14 +50,8 @@ export default {
     }
   },
   methods: {
-    getDotData(){
-      getDot().then(res=>{
-        this.tabTars[1].dot = res.data;
-      })
-    },
     getUserInfo() {
       userInfo().then(info => {
-        console.log(info, 'info')
         this.$store.commit('SET_USER_NAME', info.user.name)
         this.$store.commit('SET_USER_ROLELIST', info.roleList)
         this.$store.commit('SET_USER_ID', info.user.id)
@@ -99,15 +61,10 @@ export default {
         //登陆之后手动触发一次水印数据刷新
           this.$parent.$refs.watercom.getWater(1)
       })
-      this.$store.dispatch('getOrgTree')
-      this.$store.dispatch('getOrgTreeHangshe')
+      this.$store.dispatch('getOrgTree');
+      this.$store.dispatch('getOrgTreeHangshe');
+      this.$store.dispatch('redDot')
     },
-    handleChange(v) {
-      if(v == 1){
-        this.getDotData();
-      }
-      console.log('tab value:', v)
-    }
   }
 }
 </script>

src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   wholeTree: state => state.app.wholeTree,
   commonTree: state => state.app.commonTree,
   dictionary: state => state.app.dictionary,
+  dotNum: state => state.app.dotNum,
 }
 
 export default getters

src/store/modules/app.js

@@ -1,4 +1,12 @@
-import {deptTreeSelect, handsheDeptTreeSelect, getDict,hangsheAndOrgTree, userAndOrgTree,wholeTreeSelect } from '@/api/public'
+import {
+  deptTreeSelect,
+  handsheDeptTreeSelect,
+  getDict,
+  hangsheAndOrgTree,
+  userAndOrgTree,
+  wholeTreeSelect,
+  getDot
+} from '@/api/public'
 export default {
   state: {
     //用户名
@@ -20,19 +28,22 @@ export default {
     //完整树
     wholeTree:[],
     //字典
-    dictionary: []
+    dictionary: [],
+    //未读消息数
+    dotNum:0
   },
   mutations : {
+    SET_DOT_NUM(state, num) {
+      state.dotNum = num;
+    },
     SET_USER_NAME(state, name) {
       state.userName = name;
     },
     SET_ORGTREE: (state, val) => {
       state.orgTree = val
-
     },
     SET_ORGTREE_HANGSHE: (state, val) => {
       state.orgTreeHangshe = val
-
     },
     SET_DEPTREE: (state, val) => {
       state.depTree = val
@@ -44,11 +55,16 @@ export default {
       state.commonTree = val
     },
     SET_DICT_ITEM(state, dictItem) {
-      console.log(dictItem,'dictItem' )
       state.dictionary.push(dictItem);
-    }
+    },
   },
   actions : {
+    //获取未读消息数
+    redDot({commit, state}){
+      getDot().then(res=>{
+        commit('SET_DOT_NUM', res.data)
+      })
+    },
     //设置字典
     setDict({commit, state}, key) {
       console.log('字典已存在:',state.dictionary.some(item => item.key === key));

src/views/menu/message/index.vue

@@ -14,7 +14,7 @@
         :pullup="pullup">
         <empty v-if="!dataList.length" />
         <card class="list-item" v-else v-for="(v,i) in dataList" :key="i">
-          <van-cell :title="v.title" :label="v.content" @click="clickItem(v)">
+          <van-cell :title="v.title" :label="v.content" @click="clickItem(v,i)">
             <template #right-icon>
               <i  class="point-icon" :class="{'active':!v.isRead}" />
             </template>
@@ -78,7 +78,7 @@ export default {
       query:{
         type:1,
         pageNum:1,
-        pageSize:10,
+        pageSize:20,
       },
       pullup:true,
       message:null,
@@ -97,8 +97,9 @@ export default {
     },
     onClickLeft(){
       this.show = false;
+      this.$store.dispatch('redDot');
     },
-    clickItem(v){
+    clickItem(v,i){
       let queryMethod,data;
       if(this.query.type == 1){
         queryMethod = setRead;

src/views/menu/visitRecord/index.vue

@@ -6,7 +6,7 @@
       <div class="search-flex">
         <select-cell
           style="border-right: 1px solid #f5f5f5;"
-          title="出入类型"
+          title="介绍信类型"
           is-all
           :border="false"
           v-model="query.type"