feat[navbar]: change event bus

packages/components/Navbar/index.vue

@@ -54,10 +54,10 @@
             >
             </navbar-item>
           </div>
-          <div class="info-item">
+          <div class="info-item" @click="onClickCustomer('在线咨询')">
             <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
           </div>
-          <div class="info-item">
+          <div class="info-item" @click="onClickCustomer('客服热线')">
             <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
           </div>
         </div>
@@ -74,7 +74,7 @@
             <div class="title">
               消息中心 <span>（<span class="highlight-text">{{messageCount}}</span> 条未读）</span>
             </div>
-            <JyIcon @click="closeMessagePopver" name="close"></JyIcon>
+            <JyIcon @click="closeMessagePopover" name="close"></JyIcon>
           </div>
           <div class="message-group" v-if="messageList.length">
             <div
@@ -113,7 +113,6 @@
 import NavbarItem from './components/item'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import EmptyTip from '../Empty'
-import { completeURLPrefix } from '../../micro-frame'
 
 export default {
   name: 'header-navbar',
@@ -122,16 +121,17 @@ export default {
     [EmptyTip.name]: EmptyTip
   },
   created () {
+    /**
+     *
+     * TODO 获取用户数据、消息数据 待优化至应用层处理
+     */
     this.getPower()
     this.getUserSimpleInfo().then(() => {
       const userInfo = this.navs.find(v => v.plugin === 'navInfo')
       userInfo.label = this.userInfo.name || this.userInfo.phone
       userInfo.icon = this.userInfo.avatar
     })
-    this.getMessageCount().then(() => {
-      this.navs.find(v => v.label === '消息中心').badge = this.messageCount
-    })
-    this.getMessages()
+    this.getMessageInfo()
   },
   data () {
     return {
@@ -186,20 +186,32 @@ export default {
       'setClickMessage',
       'setReadMessage'
     ]),
+    /**
+     * 获取消息数据
+     */
+    getMessageInfo () {
+      this.getMessageCount().then(() => {
+        this.navs.find(v => v.label === '消息中心').badge = this.messageCount
+        /**
+         * 对外提供未读消息条数更新事件
+         */
+        this.$BRACE.$emit('update-message-count', this.messageCount)
+      })
+      this.getMessages()
+    },
+    /**
+     * 点击退出登录
+     */
     onClickOut () {
       this.setSignOut()
-      document.cookie = 'userid_secure=;expires=-1;path=/'
-      this.goSiteHome()
     },
+    /**
+     * 点击选中导航 Item
+     */
     onSelectNav (nav) {
       switch (nav.label) {
         case '消息中心': {
-          this.$router.push({
-            name: 'page',
-            query: {
-              link: completeURLPrefix('/swordfish/frontPage/messageCenter/sess/index')
-            }
-          })
+          this.goSiteMessage()
           break
         }
         case '前往官网': {
@@ -208,12 +220,38 @@ export default {
         }
       }
     },
+    /**
+     * 前往消息中心页面
+     */
+    goSiteMessage () {
+      this.$BRACE.$emit({
+        fKey: 'goSiteMessage',
+        spareFn: (link) => this.$BRACE.methods.open({
+          route: { link }
+        })
+      }, '/swordfish/frontPage/messageCenter/sess/index')
+    },
+    /**
+     * 前往官网首页
+     */
     goSiteHome () {
-      location.href = completeURLPrefix(this.home)
+      this.$BRACE.$emit({
+        fKey: 'goSiteHome',
+        spareFn: (link) => this.$BRACE.methods.open({
+          route: { link }
+        })
+      }, this.home)
     },
-    closeMessagePopver () {
+    /**
+     * 关闭消息中心 popover
+     */
+    closeMessagePopover () {
       this.$refs.navMessage.doClose()
     },
+    /**
+     * 点击消息 Item, 设置已读、打开消息详情
+     * @param message
+     */
     onClickMessage (message) {
       this.setClickMessage({
         id: message.origin.msgLogId
@@ -223,26 +261,50 @@ export default {
           location.href = message.link
         }
       } else {
-        this.setReadMessage({
+        /**
+         * 对外提供消息更新事件
+         */
+        const params = {
           id: message.origin.id,
           type: message.origin.msg_type
-        }).then(() => {
+        }
+        this.$BRACE.$emit('read-message', {
+          type: 'start',
+          params
+        })
+        this.setReadMessage(params).then(() => {
+          this.$BRACE.$emit('read-message', {
+            type: 'success',
+            params
+          })
           if (message.link) {
             location.href = message.link
           } else {
-            this.getMessageCount().then(() => {
-              this.navs.find(v => v.label === '消息中心').badge = this.messageCount
-            })
-            this.getMessages()
+            this.getMessageInfo()
           }
+        }).catch(e => {
+          this.$BRACE.$emit('read-message', {
+            type: 'error',
+            params
+          })
         })
       }
     },
+    /**
+     * 关闭消息中心
+     */
     onClickMessageAll () {
-      this.closeMessagePopver()
+      this.closeMessagePopover()
       this.onSelectNav({
         label: '消息中心'
       })
+    },
+    /**
+     *  点击客服 Item
+     * @param type - 类型
+     */
+    onClickCustomer (type) {
+      this.$BRACE.$emit('click-nav-customer', type)
     }
   }
 }