优化消息中心数据获取

Author: zhigang.li

Diff for: src/api/user.js

@@ -29,6 +29,13 @@ export const logout = (token) => {
   })
 }
 
+export const getUnreadCount = () => {
+  return axios.request({
+    url: 'message/count',
+    method: 'get'
+  })
+}
+
 export const getMessage = () => {
   return axios.request({
     url: 'message/init',

Diff for: src/components/main/main.vue

@@ -12,7 +12,7 @@
     <Layout>
       <Header class="header-con">
         <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
-          <user :message-unread-count="messageUnreadCount" :user-avator="userAvator"/>
+          <user :message-unread-count="unreadCount" :user-avator="userAvator"/>
           <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
           <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
           <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
@@ -68,8 +68,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'errorCount',
-      'messageUnreadCount'
+      'errorCount'
     ]),
     tagNavList () {
       return this.$store.state.app.tagNavList
@@ -91,6 +90,9 @@ export default {
     },
     hasReadErrorPage () {
       return this.$store.state.app.hasReadErrorPage
+    },
+    unreadCount () {
+      return this.$store.state.user.unreadCount
     }
   },
   methods: {
@@ -102,7 +104,8 @@ export default {
       'setHomeRoute'
     ]),
     ...mapActions([
-      'handleLogin'
+      'handleLogin',
+      'getUnreadMessageCount'
     ]),
     turnToPage (route) {
       let { name, params, query } = {}
@@ -170,6 +173,8 @@ export default {
         name: this.$config.homeName
       })
     }
+    // 获取未读消息条数
+    this.getUnreadMessageCount()
   }
 }
 </script>

Diff for: src/mock/index.js

@@ -1,7 +1,7 @@
 import Mock from 'mockjs'
 import { login, logout, getUserInfo } from './login'
 import { getTableData, getDragList, uploadImage } from './data'
-import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash } from './user'
+import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash, messageCount } from './user'
 
 // 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
 Mock.setup({
@@ -21,5 +21,6 @@ Mock.mock(/\/message\/content/, getContentByMsgId)
 Mock.mock(/\/message\/has_read/, hasRead)
 Mock.mock(/\/message\/remove_readed/, removeReaded)
 Mock.mock(/\/message\/restore/, restoreTrash)
+Mock.mock(/\/message\/count/, messageCount)
 
 export default Mock

Diff for: src/mock/user.js

@@ -49,3 +49,7 @@ export const removeReaded = () => {
 export const restoreTrash = () => {
   return true
 }
+
+export const messageCount = () => {
+  return 3
+}

Diff for: src/store/module/user.js

@@ -6,7 +6,8 @@ import {
   getContentByMsgId,
   hasRead,
   removeReaded,
-  restoreTrash
+  restoreTrash,
+  getUnreadCount
 } from '@/api/user'
 import { setToken, getToken } from '@/libs/util'
 
@@ -18,6 +19,7 @@ export default {
     token: getToken(),
     access: '',
     hasGetInfo: false,
+    unreadCount: 0,
     messageUnreadList: [],
     messageReadedList: [],
     messageTrashList: [],
@@ -43,6 +45,9 @@ export default {
     setHasGetInfo (state, status) {
       state.hasGetInfo = status
     },
+    setMessageCount (state, count) {
+      state.unreadCount = count
+    },
     setMessageUnreadList (state, list) {
       state.messageUnreadList = list
     },
@@ -120,6 +125,13 @@ export default {
         }
       })
     },
+    // 此方法用来获取未读消息条数，接口只返回数值，不返回消息列表
+    getUnreadMessageCount ({ state, commit }) {
+      getUnreadCount().then(res => {
+        const { data } = res
+        commit('setMessageCount', data)
+      })
+    },
     // 获取消息列表，其中包含未读、已读、回收站三个列表
     getMessageList ({ state, commit }) {
       return new Promise((resolve, reject) => {
@@ -156,14 +168,15 @@ export default {
       })
     },
     // 把一个未读消息标记为已读
-    hasRead ({ commit }, { msg_id }) {
+    hasRead ({ state, commit }, { msg_id }) {
       return new Promise((resolve, reject) => {
         hasRead(msg_id).then(() => {
           commit('moveMsg', {
             from: 'messageUnreadList',
             to: 'messageReadedList',
             msg_id
           })
+          commit('setMessageCount', state.unreadCount - 1)
           resolve()
         }).catch(error => {
           reject(error)