头部的消息数目

components/header.vue

@@ -36,27 +36,34 @@
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown class="nav-dropdown">
-        <el-button type="text" style="color: #515151;">
+        <el-button type="text" class="message-box" style="color: #515151;">
           <i class="el-icon-message"></i>消息
+          <span class="message-count message-total">{{messageCount.total}}</span>
         </el-button>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle blue"></i>系统消息
+            <span v-if="messageCount.system" class="message-count">{{messageCount.system}}</span>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle orange"></i>工作通知
+            <span v-if="messageCount.work" class="message-count">{{messageCount.work}}</span>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle red"></i>评论回复
+            <span v-if="messageCount.reply" class="message-count">{{messageCount.reply}}</span>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle green"></i>@我的
+            <span v-if="messageCount.at" class="message-count">{{messageCount.at}}</span>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle pink"></i>赞及其它
+            <span v-if="messageCount.community_other" class="message-count">{{messageCount.community_other}}</span>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item class='message-box'>
             <i class="circle yellow"></i>收支信息
+            <span v-if="messageCount.balance" class="message-count">{{messageCount.balance}}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -123,7 +130,22 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      // 消息数量
+      messageCount: {},
+    }
+  },
+  mounted() {
+    this.getMessageCount()
+  },
+  methods: {
+    async getMessageCount() {
+      let res = await this.$get('/api/message/getUnreadCount')
+      console.log(res)
+      this.messageCount = res.data
+    }
+  }
 }
 </script>
 
@@ -211,7 +233,26 @@ i.pink {
 i.yellow {
   background: #f2c61f;
 }
-
+.message-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.message-count {
+  color: white;
+  margin-left: 4px;
+  display: block;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 9px;
+  background: grey;
+}
+.message-count.message-total {
+  position: absolute;
+  top: 0px;
+  right: -10px;
+  background: #d95c5c;
+}
 span.other-icon {
   display: block;
   margin-left: 30px;
@@ -283,11 +324,11 @@ span.other-icon {
   line-height: 32px;
   color: #606266;
 }
-.vip-item>i {
+.vip-item > i {
   margin: 0 10px;
 }
 .divider {
-  border-top: 1px solid rgba(0,0,0,.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
   margin-top: 10px;
   padding-top: 10px;
 }

pages/index/type/vip.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="vip">
-    <section v-if="vipList" class="vips">
+    <section class="vips">
       <section v-if="com" class="vip-box">
         <img class="vip-back" src="~@/assets/img/vip/back_com.png" alt="back_com">
         <div class="price">
@@ -84,7 +84,7 @@ export default {
   data() {
     return {
       // ssr 数据
-      vipList: !1,
+      vipList: [],
     }
   },
   computed: {