diff --git a/src/App.vue b/src/App.vue index fd0a6058e0c37592ada243bd055bc6de763fa764..0238e892d05a083cf686935aff017fbba1db5da2 100644 --- a/src/App.vue +++ b/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(); + }, }; diff --git a/src/components/menu.vue b/src/components/menu.vue index cce92cb2540a8d9590dfb20917c15315dc08e3f6..85536b56adb51596739e366ab460350c7bddf02e 100644 --- a/src/components/menu.vue +++ b/src/components/menu.vue @@ -12,10 +12,8 @@ class="user" >{{ userInfo.user_name }} 请登录 - + +
{{ item.menu_name }}
+ > + {{ item.menu_name }} + +
退出登录
@@ -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 }} + > + {{ v.menu_name }} +
@@ -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; +}