消息通知调试

src/App.vue

@@ -10,7 +10,7 @@ import bdMenu from "./components/menu";
 export default {
   data: () => ({}),
   components: {
-    bdMenu
+    bdMenu,
   },
   methods: {
     getCurrentUser() {
@@ -24,11 +24,26 @@ export default {
           console.log(data.errMsg);
         }
       });
+    },
+    getMessage() {
+      this.$http
+        .get("/apaas/service/v3/mymsg/unread", {
+          params: {
+            size: 10,
+            page: 1,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.setUnreadMessageCount(data.data.total || 0);
           }
+        });
+    },
   },
   created() {
     this.getCurrentUser();
-  }
+    this.getMessage();
+  },
 };
 </script>
 

src/components/menu.vue

@@ -12,10 +12,8 @@
         class="user"
       >{{ userInfo.user_name }}</span>
       <span v-else @click="gotopage('login')" class="user">请登录</span>
-      <img
-        :class="userInfo.picture_path&&false ? 'user_pic' : 'user_default'"
-        src="../assets/imgs/home_ic_user.png"
-      />
+      <img :class="userInfo.picture_path && false ? 'user_pic' : 'user_default'" src="../assets/imgs/home_ic_user.png" />
+      <span class="has_msg" v-if="unreadMessageCount > 0"></span>
       <!-- 菜单图片不需要动态渲染，只用ui给的图标 -->
       <div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu">
         <div
@@ -24,7 +22,10 @@
           @mouseleave.stop="change_now_hover(-1)"
           @mouseenter.stop="change_now_hover(index)"
           @click="gotopage(item.visit_url)"
-        >{{ item.menu_name }}</div>
+        >
+          {{ item.menu_name }}
+          <span v-if="unreadMessageCount > 0 && item.visit_url === '/user/notice'" class="width_num" v-text="unreadMessageCount"></span>
+        </div>
         <div @click="gotopage('logout')">退出登录</div>
       </div>
       <div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj" :style="now_hover==0?{backgroundColor:'#e56600'}:{}"></div>
@@ -89,7 +90,9 @@
             @mouseleave.stop="change_now_hover(-1)"
             @mouseenter.stop="change_now_hover(indexs)"
             @click.stop="gotoChildPage(v, item.visit_url)"
-          >{{ v.menu_name }}</div>
+          >
+            {{ v.menu_name }}
+          </div>
         </div>
         <div class="sj" v-if="item.Child && item.Child.length" :style="now_hover==0?{backgroundColor:'#e56600',left: '60px'}:{left: '60px'}"></div>
         <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
@@ -127,7 +130,10 @@ export default {
     },
     userInfo() {
       return this.$store.state.userInfo || {};
-    }
+    },
+    unreadMessageCount() {
+      return this.$store.state.unreadMessageCount;
+    },
   },
   watch: {
     getMenuCartState(newVal) {
@@ -308,7 +314,7 @@ export default {
   left: calc(50% - 12px);
 }
 .user_menu {
-  width: 135px;
+  /* width: 135px; */
   background-color: #ffffff;
   box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
   border-radius: 8px;
@@ -350,10 +356,11 @@ export default {
   display: block;
 }
 .user_menu div {
-  width: 135px;
+  /* width: 135px; */
   height: 44px;
   line-height: 44px;
-  text-align: center;
+  padding: 0 30px;
+  text-align: left;
   color: #0d1847;
 }
 .user_menu div:hover {
@@ -435,6 +442,34 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.width_num {
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 30px;
+  background-color: #e56600;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  padding: 0 8px;
+  margin-left: 5px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  text-align: center;
+  overflow: hidden;
+}
+.user_menu div:hover .width_num {
+  background-color: #fcefd6;
+  color: #e56600;
+}
+.has_msg {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #e56600;
+  position: absolute;
+  top: 23px;
+  left: 15px;
+}
 </style>
 <style>
 .number .el-badge__content {

src/pages/user/notice/notice.vue

@@ -13,7 +13,11 @@
         <div class="notcie_filter">
           <a :class="{ current: unread }" @click.prevent="filterAction(true)">
             <span class="btn_text">未读消息</span>
-            <span class="width_num" v-text="unreadMessageCount"></span>
+            <span
+              class="width_num"
+              v-if="unreadMessageCount > 0"
+              v-text="unreadMessageCount"
+            ></span>
           </a>
           <a :class="{ current: !unread }" @click.prevent="filterAction(false)">
             <span class="btn_text">全部消息</span>
@@ -316,7 +320,7 @@ export default {
   display: none;
 }
 .notcie_filter a .width_num {
-  min-width: 40px;
+  min-width: 30px;
   background-color: #8890a7;
   font-size: 10px;
   line-height: 16px;