refactor(SPA): 优化消息列表

# Conflicts: # resources/spa/src/page/message/MessageHome.vue (cherry picked from commit ee361ec)
slimkit · Mar 1, 2019 · 01733c9 · 01733c9
1 parent 4dc0550
commit 01733c9
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 137 deletions.
diff --git a/resources/spa/src/components/FootGuide.vue b/resources/spa/src/components/FootGuide.vue
@@ -33,7 +33,7 @@
       class="guide-item"
       @click="to({name: 'MessageHome'})"
     >
-      <VBadge :dot="hasMsg">
+      <VBadge :dot="hasUnread">
         <svg class="m-style-svg m-svg-def">
           <use xlink:href="#icon-foot-message" />
         </svg>
@@ -67,21 +67,12 @@ export default {
   },
   computed: {
     ...mapState({
-      has_msg: state =>
-        state.MESSAGE.NEW_UNREAD_COUNT.commented +
-          state.MESSAGE.NEW_UNREAD_COUNT['feed-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['group-join-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT.liked +
-          state.MESSAGE.NEW_UNREAD_COUNT['news-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['post-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['post-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT.system > 0,
       profile: state =>
         state.MESSAGE.NEW_UNREAD_COUNT.following > 0,
     }),
-    ...mapGetters(['hasUnreadChat']),
-    hasMsg () {
-      return this.has_msg || this.hasUnreadChat > 0
+    ...mapGetters(['hasUnreadChat', 'hasUnreadMessage']),
+    hasUnread () {
+      return this.hasUnreadMessage + this.hasUnreadChat
     },
   },
   mounted () {

diff --git a/resources/spa/src/components/common/badge.vue b/resources/spa/src/components/common/badge.vue
@@ -30,7 +30,7 @@ export default {
   name: 'VBadge',
   props: {
     count: { type: [Number, String], default: 0 },
-    dot: { type: Boolean, default: false },
+    dot: { type: [Boolean, Number], default: false },
     overflowCount: { type: [Number, String], default: 99 },
     className: { type: String, default: '' },
   },

diff --git a/resources/spa/src/page/message/ChatList.vue b/resources/spa/src/page/message/ChatList.vue
@@ -2,9 +2,7 @@
   <div class="p-chat-list">
     <JoLoadMore
       ref="loadmore"
-      :auto-load="false"
       :show-bottom="false"
-      style="height: 100%"
       @onRefresh="onRefresh"
     >
       <ChatItem
@@ -39,12 +37,13 @@ export default {
   methods: {
     startSingleChat,
     ...mapActions(['initChatRooms']),
-    onRefresh (callback) {
-      this.initChatRooms().then(() => {
-        setTimeout(() => {
-          this.$refs.loadmore.afterRefresh(false)
-        }, 1000)
-      })
+    onRefresh () {
+      this.initChatRooms()
+        .then(() => {
+          setTimeout(() => {
+            this.$refs.loadmore.afterRefresh(false)
+          }, 450)
+        })
     },
   },
 }

diff --git a/resources/spa/src/page/message/MessageBase.vue b/resources/spa/src/page/message/MessageBase.vue
@@ -1,58 +1,41 @@
 <template>
   <div class="p-message-base">
-    <header class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1">
-      <ul class="m-box m-flex-grow1 m-aln-center m-justify-center m-flex-base0 m-head-nav">
-        <RouterLink
-          class="link-item"
-          tag="li"
-          :to="{name: 'MessageHome'}"
-          replace
-          active-class="active"
-        >
-          <VBadge :dot="has_msg">
-            <a>消息</a>
-          </VBadge>
-        </RouterLink>
-        <RouterLink
-          class="link-item"
-          tag="li"
-          :to="{name: 'ChatList'}"
-          replace
-          active-class="active"
-        >
-          <VBadge :dot="hasUnreadChat > 0">
-            <a>聊天</a>
-          </VBadge>
-        </RouterLink>
-      </ul>
-    </header>
-    <main style="padding-top: 0.9rem">
+    <CommonHeader :pinned="true" class="header">
+      <span slot="left" />
+      <nav class="type-switch-bar">
+        <span :class="{active: currentType === 'list'}" @click="currentType = 'list'">
+          <VBadge :dot="hasUnreadMessage">消息</VBadge>
+        </span>
+        <span :class="{active: currentType === 'chats'}" @click="currentType = 'chats'">
+          <VBadge :dot="hasUnreadChat">聊天</VBadge>
+        </span>
+      </nav>
+    </CommonHeader>
+
+    <main>
       <RouterView />
     </main>
     <FootGuide />
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'MessageBase',
   computed: {
-    ...mapState({
-      // 新消息提示
-      has_msg: state =>
-        state.MESSAGE.NEW_UNREAD_COUNT.commented +
-          state.MESSAGE.NEW_UNREAD_COUNT['feed-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['group-join-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT.liked +
-          state.MESSAGE.NEW_UNREAD_COUNT['news-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['post-comment-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT['post-pinned'] +
-          state.MESSAGE.NEW_UNREAD_COUNT.system >
-        0,
-    }),
-    ...mapGetters(['hasUnreadChat']),
+    ...mapGetters(['hasUnreadChat', 'hasUnreadMessage']),
+    currentType: {
+      get () {
+        const { path } = this.$route
+        return path.match(/^\/message\/(\S+)$/)[1]
+      },
+      set (val) {
+        const routeName = val === 'list' ? 'MessageHome' : 'ChatList'
+        this.$router.replace({ name: routeName })
+      },
+    },
   },
   created () {
     this.$store.dispatch('GET_UNREAD_COUNT')
@@ -61,17 +44,12 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .p-message-base {
-  .link-item {
-    position: relative;
-
-    a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 2.3em;
-      height: 1.5em;
+  .header {
+    .v-badge-dot {
+      right: -22px;
+      top: -6px;
     }
   }
 }

diff --git a/resources/spa/src/page/message/MessageHome.vue b/resources/spa/src/page/message/MessageHome.vue
@@ -1,39 +1,44 @@
 <template>
-  <ul class="m-box-model m-entry-group p-message-home">
-    <RouterLink
-      v-for="item in system"
-      :key="item.url"
-      :to="item.url"
-      tag="li"
-      class="m-entry"
+  <div class="p-message-home">
+    <JoLoadMore
+      ref="loadmore"
+      :show-bottom="false"
+      @onRefresh="fetchMessage"
     >
-      <svg class="m-style-svg m-svg-big m-entry-prepend m-flex-grow0 m-flex-shrink0">
-        <use :xlink:href="`#icon-message-${item.icon}`" />
-      </svg>
-      <div class="m-box-model m-justify-bet m-flex-grow1 m-flex-shrink1 m-flex-base0 m-entry-main">
-        <h2 class="m-text-cut">{{ item.title }}</h2>
-        <p class="m-text-cut">{{ computedGetter(item.placeholder) }}</p>
-      </div>
-      <div class="m-box-model m-flex-grow0 m-flex-shrink0 m-entry-end m-justify-bet">
-        <h5 v-if="computedGetter(item.time) !== '' && item.time">
-          {{ +new Date((computedGetter(item.time))) + 10 || '' | time2tips }}
-        </h5>
-        <h5 v-else />
-        <div class="m-box m-aln-center m-justify-end">
-          <span
-            v-if="computedGetter(item.count) !== 0"
-            :class="`${prefixCls}-time-count`"
-          >
-            {{ computedGetter(item.count) }}
-          </span>
-        </div>
-      </div>
-    </RouterLink>
-  </ul>
+      <ul class="message-list m-box-model">
+        <RouterLink
+          v-for="item in system"
+          :key="item.url"
+          :to="item.url"
+          tag="li"
+          class="m-entry"
+        >
+          <svg class="m-style-svg m-svg-big m-entry-prepend m-flex-grow0 m-flex-shrink0">
+            <use :xlink:href="`#icon-message-${item.icon}`" />
+          </svg>
+          <div class="m-box-model m-justify-bet m-flex-grow1 m-flex-shrink1 m-flex-base0 m-entry-main">
+            <h2 class="m-text-cut">{{ item.title }}</h2>
+            <p class="m-text-cut">{{ computedGetter(item.placeholder) }}</p>
+          </div>
+          <div class="m-box-model m-flex-grow0 m-flex-shrink0 m-entry-end m-justify-bet">
+            <h5 v-if="computedGetter(item.time) !== '' && item.time">
+              {{ +new Date((computedGetter(item.time))) + 10 || '' | time2tips }}
+            </h5>
+            <h5 v-else />
+            <div class="m-box m-aln-center m-justify-end">
+              <span v-if="computedGetter(item.count) !== 0" :class="`${prefixCls}-time-count`">
+                {{ computedGetter(item.count) }}
+              </span>
+            </div>
+          </div>
+        </RouterLink>
+      </ul>
+    </JoLoadMore>
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 const prefixCls = 'msg'
 
@@ -120,6 +125,11 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['GET_NEW_UNREAD_COUNT']),
+    async fetchMessage () {
+      await this.GET_NEW_UNREAD_COUNT()
+      this.$refs.loadmore.afterRefresh()
+    },
     computedGetter (key) {
       return this[key]
     },
@@ -129,12 +139,14 @@ export default {
 
 <style lang="less" scoped>
 .p-message-home {
-  padding: 0 20px;
+  .message-list {
+    background-color: #fff;
+  }
 
   .m-entry {
     align-items: stretch;
-    padding: 30px 0;
     height: initial;
+    padding: 30px 20px;
   }
 
   .m-entry-prepend {

diff --git a/resources/spa/src/page/topic/TopicHome.vue b/resources/spa/src/page/topic/TopicHome.vue
@@ -98,27 +98,5 @@ export default {
   .header {
     overflow: initial;
   }
-
-  .type-switch-bar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 90px;
-
-    > span {
-      display: inline-block;
-      height: 100%;
-      margin: 0 20px;
-      padding: 22px 12px;
-      color: #999;
-      transition: 0.3s;
-
-      &.active {
-        color: #333;
-        border-bottom: 2px solid @primary; /* no */
-      }
-    }
-  }
-
 }
 </style>
diff --git a/resources/spa/src/stores/module/message/actions.js b/resources/spa/src/stores/module/message/actions.js
@@ -2,15 +2,11 @@ import http from '@/api/api'
 import lstore from '@/plugins/lstore/lstore.js'
 import getMessageUnameTxt from '@/util/getMessageUnameTxt'
 export default {
-  GET_NEW_UNREAD_COUNT ({ rootState, commit }) {
+  async GET_NEW_UNREAD_COUNT ({ rootState, commit }) {
     if (!rootState.CURRENTUSER || !lstore.getData('H5_ACCESS_TOKEN')) return
-    http
-      .get('/user/counts', {
-        validateStatus: status => status === 200,
-      })
-      .then(({ data: { user = {} } = {} }) => {
-        commit('SAVE_NEW_UNREAD_COUNT', user)
-      })
+    const { data } = await http.get('/user/counts', { validateStatus: s => s === 200 })
+    const { user } = data || {}
+    commit('SAVE_NEW_UNREAD_COUNT', user || {})
   },
 
   /**

diff --git a/resources/spa/src/stores/module/message/getters.js b/resources/spa/src/stores/module/message/getters.js
@@ -0,0 +1,7 @@
+export default {
+  hasUnreadMessage (state) {
+    const unread = state.NEW_UNREAD_COUNT
+    unread.at = 0 // TODO: at 功能尚未开发
+    return Object.values(unread).reduce((sum, item) => sum + item, 0)
+  },
+}
diff --git a/resources/spa/src/style/common.less b/resources/spa/src/style/common.less
@@ -753,3 +753,37 @@
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
+
+// header switch-bar
+.type-switch-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90px;
+
+  > span {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 3em;
+    margin: 0 1em;
+    color: #999;
+    transition: 0.3s;
+
+    &.active {
+      color: #333;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        display: block;
+        height: 3px;/*no*/
+        width: 100%;
+        background-color: @primary;
+      }
+    }
+  }
+}