Feat：如果有新消息，则做红点数字提示

components/xdd-tabbar/index.vue

@@ -30,7 +30,6 @@
           @click="gotoPage(item.url, item.type, item.index)"
         >
           <view class="img-wrap">
-            <!-- 预加载两张图片，可以在点击切换的时候不闪屏 -->
             <image
               :src="item.onIcon"
               class="img on"
@@ -41,6 +40,12 @@
             />
           </view>
           <view class="name">{{ item.name }}</view>
+          <view
+            v-if="item.name === '消息' && showUnreadBadge"
+            class="badge"
+          >
+            {{ unreadCountText }}
+          </view>
         </view>
       </view>
     </view>
@@ -48,6 +53,8 @@
 </template>
 
 <script>
+import store from '@/store'
+import { getUnreadMessageCount } from '@/api/rooms'
 export default {
   name: 'XddTabbar',
   props: {
@@ -93,12 +100,39 @@ export default {
           type: 1,
           index: 3
         }
-      ]]
+      ]],
+      unreadCount: 0
+    }
+  },
+  computed: {
+    isLogin() {
+      return store.getters.isLogin
+    },
+    showUnreadBadge() {
+      return this.isLogin && this.unreadCount > 0
+    },
+    unreadCountText() {
+      if (this.unreadCount > 99) {
+        return '99+'
+      }
+      return this.unreadCount
+    }
+  },
+  watch: {
+    isLogin(val) {
+      if (val) {
+        this.fetchUnreadCount()
+      } else {
+        this.unreadCount = 0
+      }
     }
   },
   mounted() {
     this.getElementData('#quweiIcon')
     this.getIconData('#icon1')
+    if (this.isLogin) {
+      this.fetchUnreadCount()
+    }
   },
   methods: {
     getElementData(el) {
@@ -117,10 +151,18 @@ export default {
         }
       })
     },
-    /**
-     * 跳转至目标页面
-     * type: 1-tabbar页面，2-非tabbar页面
-    */
+    fetchUnreadCount() {
+      getUnreadMessageCount().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.unreadCount = data || 0
+        } else {
+          this.unreadCount = 0
+        }
+      }).catch(() => {
+        this.unreadCount = 0
+      })
+    },
     gotoPage(url, type = 1, index) {
       if (this.currIndex === index) return
       if (type === 1) {
@@ -199,6 +241,7 @@ export default {
       }
       .item {
         width: 140rpx;
+        position: relative;
         &.curr {
           .name {
             color: #C52733;
@@ -211,6 +254,21 @@ export default {
           }
         }
       }
+      .badge {
+        position: absolute;
+        top: -4rpx;
+        right: 32rpx;
+        min-width: 28rpx;
+        padding: 0 6rpx;
+        height: 28rpx;
+        line-height: 28rpx;
+        border-radius: 14rpx;
+        background-color: #FF564A;
+        color: #ffffff;
+        font-size: 20rpx;
+        text-align: center;
+        box-sizing: border-box;
+      }
     }
   }
 }