新增消息中心

Author: [email protected]

.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
-    'no-undef': 'off'
+    'no-undef': 'off',
+    'camelcase': 'off'
   },
   parserOptions: {
     parser: 'babel-eslint'

src/api/user.js

@@ -28,3 +28,50 @@ export const logout = (token) => {
     method: 'post'
   })
 }
+
+export const getMessage = () => {
+  return axios.request({
+    url: 'message/init',
+    method: 'get'
+  })
+}
+
+export const getContentByMsgId = msg_id => {
+  return axios.request({
+    url: 'message/content',
+    method: 'get',
+    params: {
+      msg_id
+    }
+  })
+}
+
+export const hasRead = msg_id => {
+  return axios.request({
+    url: 'message/has_read',
+    method: 'post',
+    data: {
+      msg_id
+    }
+  })
+}
+
+export const removeReaded = msg_id => {
+  return axios.request({
+    url: 'message/remove_readed',
+    method: 'post',
+    data: {
+      msg_id
+    }
+  })
+}
+
+export const restoreTrash = msg_id => {
+  return axios.request({
+    url: 'message/restore',
+    method: 'post',
+    data: {
+      msg_id
+    }
+  })
+}

src/components/main/components/user/user.less

@@ -5,5 +5,8 @@
     // height: 64px;
     vertical-align: middle;
     // line-height: 64px;
+    .ivu-badge-dot{
+      top: 16px;
+    }
   }
 }

src/components/main/components/user/user.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="user-avator-dropdown">
     <Dropdown @on-click="handleClick">
-      <Avatar :src="userAvator"/>
+      <Badge :dot="!!messageUnreadCount">
+        <Avatar :src="userAvator"/>
+      </Badge>
       <Icon :size="18" type="md-arrow-dropdown"></Icon>
       <DropdownMenu slot="list">
+        <DropdownItem name="message">
+          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
+        </DropdownItem>
         <DropdownItem name="logout">退出登录</DropdownItem>
       </DropdownMenu>
     </Dropdown>
@@ -19,20 +24,33 @@ export default {
     userAvator: {
       type: String,
       default: ''
+    },
+    messageUnreadCount: {
+      type: Number,
+      default: 0
     }
   },
   methods: {
     ...mapActions([
       'handleLogOut'
     ]),
+    logout () {
+      this.handleLogOut().then(() => {
+        this.$router.push({
+          name: 'login'
+        })
+      })
+    },
+    message () {
+      this.$router.push({
+        name: 'message_page'
+      })
+    },
     handleClick (name) {
       switch (name) {
-        case 'logout':
-          this.handleLogOut().then(() => {
-            this.$router.push({
-              name: 'login'
-            })
-          })
+        case 'logout': this.logout()
+          break
+        case 'message': this.message()
           break
       }
     }

src/components/main/main.vue

@@ -12,7 +12,7 @@
     <Layout>
       <Header class="header-con">
         <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
-          <user :user-avator="userAvator"/>
+          <user :message-unread-count="messageUnreadCount" :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,7 +68,8 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'errorCount'
+      'errorCount',
+      'messageUnreadCount'
     ]),
     tagNavList () {
       return this.$store.state.app.tagNavList

src/locale/lang/en-US.js

@@ -35,5 +35,6 @@ export default {
   error_logger_page: 'Error Logger',
   query: 'Query',
   params: 'Params',
-  cropper_page: 'Cropper'
+  cropper_page: 'Cropper',
+  message_page: 'Message Center'
 }

src/locale/lang/zh-CN.js

@@ -35,5 +35,6 @@ export default {
   error_logger_page: '错误日志',
   query: '带参路由',
   params: '动态路由',
-  cropper_page: '图片裁剪'
+  cropper_page: '图片裁剪',
+  message_page: '消息中心'
 }

src/locale/lang/zh-TW.js

@@ -35,5 +35,6 @@ export default {
   error_logger_page: '錯誤日誌',
   query: '帶參路由',
   params: '動態路由',
-  cropper_page: '圖片裁剪'
+  cropper_page: '圖片裁剪',
+  message_page: '消息中心'
 }

src/mock/index.js

@@ -1,6 +1,12 @@
 import Mock from 'mockjs'
 import { login, logout, getUserInfo } from './login'
 import { getTableData, getDragList, uploadImage } from './data'
+import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash } from './user'
+
+// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
+Mock.setup({
+  timeout: 1000
+})
 
 // 登录相关和获取用户信息
 Mock.mock(/\/login/, login)
@@ -10,5 +16,10 @@ Mock.mock(/\/get_table_data/, getTableData)
 Mock.mock(/\/get_drag_list/, getDragList)
 Mock.mock(/\/save_error_logger/, 'success')
 Mock.mock(/\/image\/upload/, uploadImage)
+Mock.mock(/\/message\/init/, getMessageInit)
+Mock.mock(/\/message\/content/, getContentByMsgId)
+Mock.mock(/\/message\/has_read/, hasRead)
+Mock.mock(/\/message\/remove_readed/, removeReaded)
+Mock.mock(/\/message\/restore/, restoreTrash)
 
 export default Mock

src/mock/user.js

@@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+import { doCustomTimes } from '@/libs/util'
+const Random = Mock.Random
+
+export const getMessageInit = () => {
+  let unreadList = []
+  doCustomTimes(3, () => {
+    unreadList.push(Mock.mock({
+      title: Random.cword(10, 15),
+      create_time: '@date',
+      msg_id: Random.increment(100)
+    }))
+  })
+  let readedList = []
+  doCustomTimes(4, () => {
+    readedList.push(Mock.mock({
+      title: Random.cword(10, 15),
+      create_time: '@date',
+      msg_id: Random.increment(100)
+    }))
+  })
+  let trashList = []
+  doCustomTimes(2, () => {
+    trashList.push(Mock.mock({
+      title: Random.cword(10, 15),
+      create_time: '@date',
+      msg_id: Random.increment(100)
+    }))
+  })
+  return {
+    unread: unreadList,
+    readed: readedList,
+    trash: trashList
+  }
+}
+
+export const getContentByMsgId = () => {
+  return `<divcourier new',="" monospace;font-weight:="" normal;font-size:="" 12px;line-height:="" 18px;white-space:="" pre;"=""><div>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: medium;">这是消息内容，这个内容是使用<span style="color: rgb(255, 255, 255); background-color: rgb(28, 72, 127);">富文本编辑器</span>编辑的，所以你可以看到一些<span style="text-decoration-line: underline; font-style: italic; color: rgb(194, 79, 74);">格式</span></span></div><ol><li>你可以查看Mock返回的数据格式，和api请求的接口，来确定你的后端接口的开发</li><li>使用你的真实接口后，前端页面基本不需要修改即可满足基本需求</li><li>快来试试吧</li></ol><p>${Random.csentence(100, 200)}</p></divcourier>`
+}
+
+export const hasRead = () => {
+  return true
+}
+
+export const removeReaded = () => {
+  return true
+}
+
+export const restoreTrash = () => {
+  return true
+}

src/router/routers.js

@@ -78,6 +78,26 @@ export default [
       }
     ]
   },
+  {
+    path: '/message',
+    name: 'message',
+    component: Main,
+    meta: {
+      hideInBread: true,
+      hideInMenu: true
+    },
+    children: [
+      {
+        path: 'message_page',
+        name: 'message_page',
+        meta: {
+          icon: 'md-notifications',
+          title: '消息中心'
+        },
+        component: () => import('@/view/single-page/message/index.vue')
+      }
+    ]
+  },
   {
     path: '/components',
     name: 'components',