fix(SPA): 修复未读消息小红点提示

issue #529

(cherry picked from commit 74dd0c1)

# Conflicts:
#	resources/spa/src/page/feed/FeedList.vue

resources/spa/src/components.js

@@ -1,6 +1,6 @@
 /** common components */
 import btnSwitch from './components/common/btnSwitch' /* btnSwitch 按钮 */
-import badge from './components/common/badge' /* Badge 徽标 */
+import Badge from './components/common/Badge' /* Badge 徽标 */
 import CommonHeader from './components/common/CommonHeader.vue' /* 通用头部 */
 import fullSpin from './components/FullSpin' /* 全屏加载动画 */
 import loadMore from './components/loadMore'
@@ -18,7 +18,7 @@ import FormItems from '@/components/form/formItem.js'
 export default [
   Avatar,
   btnSwitch,
-  badge,
+  Badge,
   loadMore,
   fullSpin,
   HeadTop,

resources/spa/src/components/DiySelect.vue

@@ -16,7 +16,7 @@
         @click="setCurVal(option)"
       >
         <template v-if="option.hasMsg">
-          <VBadge :dot="option.hasMsg">{{ option.label }}</VBadge>
+          <Badge :dot="option.hasMsg">{{ option.label }}</Badge>
         </template>
         <span v-else>{{ option.label }}</span>
       </div>

resources/spa/src/components/FootGuide.vue

@@ -33,23 +33,23 @@
       class="guide-item"
       @click="to({name: 'MessageHome'})"
     >
-      <VBadge :dot="hasUnread">
+      <Badge :dot="hasUnread">
         <svg class="m-style-svg m-svg-def">
           <use xlink:href="#icon-foot-message" />
         </svg>
-      </VBadge>
+      </Badge>
       <span>消息</span>
     </section>
     <section
       :class="{active: isCurPath('profile')}"
       class="guide-item"
       @click="to('/profile')"
     >
-      <VBadge :dot="profile">
+      <Badge :dot="profile">
         <svg class="m-style-svg m-svg-def">
           <use xlink:href="#icon-foot-profile" />
         </svg>
-      </VBadge>
+      </Badge>
       <span>我</span>
     </section>
   </footer>
@@ -77,6 +77,7 @@ export default {
   },
   mounted () {
     this.$el.parentNode.style.paddingBottom = '1rem'
+    this.fetchUnread()
   },
   methods: {
     to (path) {
@@ -88,6 +89,10 @@ export default {
     showPostMenu () {
       this.$bus.$emit('post-menu')
     },
+    fetchUnread () {
+      if (this.$route.path.match(/^\/message/)) return
+      this.$store.dispatch('GET_NEW_UNREAD_COUNT')
+    },
   },
 }
 </script>

resources/spa/src/components/common/badge.vue → resources/spa/src/components/common/Badge.vue

@@ -7,6 +7,7 @@
     <slot />
     <sup :class="dotClasses" />
   </span>
+
   <span
     v-else
     ref="badge"
@@ -27,7 +28,7 @@
 const prefixCls = 'v-badge'
 
 export default {
-  name: 'VBadge',
+  name: 'Badge',
   props: {
     count: { type: [Number, String], default: 0 },
     dot: { type: [Boolean, Number], default: false },
@@ -90,18 +91,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    transform: translateX(100%);
-    top: -10px;
     right: 0;
-    height: 24px;
-    width: 24px;
-    border-radius: 24px;
+    height: 32px;
+    width: 32px;
+    border-radius: 32px;
     background: @error;
     border: 1px solid transparent; /*no*/
     color: #fff;
     font-size: 20px;
     white-space: nowrap;
-    transform-origin: -10% center;
+    // transform-origin: -10% center;
     z-index: 10;
     box-shadow: 0 0 0 1px @error; /*no*/
 
@@ -112,9 +111,8 @@ export default {
 
     &-alone {
       top: auto;
-      display: block;
       position: relative;
-      transform: translateX(0);
+      transform: scale(0.9);
     }
   }
 

resources/spa/src/page/Discover.vue

@@ -22,12 +22,9 @@
             <use :xlink:href="`#icon-discover-${icon}`" />
           </svg>
           <span class="m-flex-grow1">{{ title }}</span>
-          <VBadge
-            :dot="new_tips"
-            class="m-entry-extra"
-          >
+          <Badge :dot="new_tips" class="m-entry-extra">
             {{ tips }}
-          </VBadge>
+          </Badge>
           <svg class="m-style-svg m-svg-def entry__item--append">
             <use xlink:href="#icon-arrow-right" />
           </svg>

resources/spa/src/page/UserFans.vue

@@ -1,37 +1,20 @@
 <template>
   <div class="p-user-fans">
-    <nav class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1" style="padding: 0 10px;">
-      <div class="m-box m-aln-center m-flex-shrink0 ">
-        <svg class="m-style-svg m-svg-def" @click="goBack">
-          <use xlink:href="#icon-back" />
-        </svg>
-      </div>
-      <ul class="m-box m-flex-grow1 m-aln-center m-justify-center m-flex-base0 m-head-nav">
-        <RouterLink
-          :to="`/users/${userId}/followers`"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>粉丝</a>
-        </RouterLink>
-        <RouterLink
-          :to="`/users/${userId}/followings`"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>关注</a>
-        </RouterLink>
-      </ul>
-      <div class="m-box m-justify-end" />
-    </nav>
+    <CommonHeader :pinned="true" class="header">
+      <nav class="type-switch-bar">
+        <span :class="{active: type === 'followers'}" @click="type = 'followers'">
+          粉丝
+        </span>
+        <span :class="{active: type === 'followings'}" @click="type = 'followings'">
+          关注
+        </span>
+      </nav>
+    </CommonHeader>
 
-    <main style="padding-top: 0.9rem">
+    <main>
       <JoLoadMore
         ref="loadmore"
+        :auto-load="false"
         @onRefresh="onRefresh"
         @onLoadMore="onLoadMore"
       >
@@ -67,10 +50,16 @@ export default {
   },
   computed: {
     userId () {
-      return ~~this.$route.params.userId
+      return Number(this.$route.params.userId)
     },
-    type () {
-      return this.$route.params.type
+    type: {
+      get () {
+        const { path } = this.$route
+        return path.match(/\/(\w+)$/)[1]
+      },
+      set (val) {
+        this.$router.replace({ path: `/users/${this.userId}/${val}` })
+      },
     },
     param () {
       return {

resources/spa/src/page/feed/FeedList.vue

@@ -1,103 +1,63 @@
 <template>
   <div class="p-feed">
-    <nav 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
-          :to="{ name:'feeds', query: { type: 'new' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>最新</a>
-        </RouterLink>
-        <RouterLink
-          :to="{ name:'feeds', query: { type: 'hot' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>热门</a>
-        </RouterLink>
-        <RouterLink
-          :to="{ name:'feeds', query: { type: 'follow' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>关注</a>
-        </RouterLink>
-      </ul>
-    </nav>
+    <CommonHeader :pinned="true" class="header">
+      <span slot="left" />
+      <nav class="type-switch-bar">
+        <span :class="{active: feedType === 'new'}" @click="feedType = 'new'"> 最新 </span>
+        <span :class="{active: feedType === 'hot'}" @click="feedType = 'hot'"> 热门 </span>
+        <span :class="{active: feedType === 'follow'}" @click="feedType = 'follow'"> 关注 </span>
+      </nav>
+    </CommonHeader>
+
+    <main class="p-feed-main">
+      <JoLoadMore
+        ref="loadmore"
+        @onRefresh="onRefresh"
+        @onLoadMore="onLoadMore"
+      >
+        <ul class="feed-list">
+          <li
+            v-for="(feed, index) in pinned"
+            v-if="feed.id"
+            :key="`pinned-feed-${feedType}-${feed.id}-${index}`"
+          >
+            <FeedCard :feed="feed" :pinned="true" />
+          </li>
+          <li v-for="(card, index) in feeds" :key="`feed-${feedType}-${card.id}-${index}`">
+            <FeedCard v-if="card.user_id" :feed="card" />
+            <FeedAdCard v-if="card.space_id" :ad="card" />
+          </li>
+        </ul>
+      </JoLoadMore>
+    </main>
 
-    <JoLoadMore
-      ref="loadmore"
-      :auto-load="true"
-      class="p-feed-main"
-      @onRefresh="onRefresh"
-      @onLoadMore="onLoadMore"
-    >
-      <ul v-gif-play class="p-feed-list">
-        <li
-          v-for="(feed, index) in pinned"
-          v-if="feed.id"
-          :key="`pinned-feed-${feedType}-${feed.id}-${index}`"
-          :data-feed-id="feed.id"
-        >
-          <FeedCard
-            :feed="feed"
-            :pinned="true"
-          />
-        </li>
-        <li
-          v-for="(card, index) in feeds"
-          :key="`feed-${feedType}-${card.id}-${index}`"
-          :data-feed-id="card.id"
-        >
-          <FeedCard
-            v-if="card.user_id"
-            :feed="card"
-          />
-          <FeedAdCard
-            v-if="card.space_id"
-            :ad="card"
-          />
-        </li>
-      </ul>
-    </JoLoadMore>
     <FootGuide />
   </div>
 </template>
 
 <script>
-/**
- * 动态列表
- * @typedef {{id: number, user, ...others}} FeedDetail
- */
-
+import { mapGetters } from 'vuex'
 import { limit } from '@/api'
-import { noop } from '@/util'
 import FeedCard from '@/components/FeedCard/FeedCard.vue'
 
 const feedTypesMap = ['new', 'hot', 'follow']
 
 export default {
   name: 'FeedList',
   components: { FeedCard },
-  data () {
-    return {}
-  },
   computed: {
-    feedType () {
-      return this.$route.query.type || 'hot'
-    },
+    ...mapGetters('feed', ['hot', 'new', 'follow', 'pinned']),
     feeds () {
-      return this.$store.getters[`feed/${this.feedType}`]
+      return this[this.feedType]
     },
-    pinned () {
-      return this.$store.getters['feed/pinned']
+    feedType: {
+      get () {
+        return this.$route.query.type || 'hot'
+      },
+      set (val) {
+        const { query } = this.$route
+        this.$router.replace({ query: { ...query, type: val } })
+      },
     },
     after () {
       const len = this.feeds.length
@@ -107,15 +67,12 @@ export default {
     },
   },
   watch: {
-    feedType (val, oldVal) {
-      feedTypesMap.includes(val) &&
-        oldVal &&
+    feedType (val) {
+      if (feedTypesMap.includes(val)) {
         this.$refs.loadmore.beforeRefresh()
+      }
     },
   },
-  created () {
-    this.onRefresh(noop)
-  },
   activated () {
     if (this.$route.query.refresh) {
       this.$refs.loadmore.beforeRefresh()
@@ -140,11 +97,7 @@ export default {
 
 <style lang="less" scoped>
 .p-feed {
-  .p-feed-main {
-    padding-top: 90px;
-  }
-
-  .p-feed-list > li + li {
+  .feed-list > li + li {
     margin-top: 20px;
   }
 }