feat: GlobalHeader message icon

src/components/GlobalHeader.vue

@@ -16,7 +16,13 @@
       <el-menu-item index="6">问题[?]</el-menu-item>
     </el-menu>
     <div id="global-header-icon">
-      <div class="global-header-icon-content" @click="this.$router.push('/message')">
+      <div class="global-header-icon-content" @click="this.$router.push('/message')" style="position: relative">
+        <div style="position: absolute;top: -16px;left: 6px;z-index: 100">
+          <svg class="icon" height="48" viewBox="0 0 1024 1024" width="48" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 322c-104.92 0-190 85.08-190 190s85.08 190 190 190 190-85.06 190-190-85.08-190-190-190z" fill="#d81e06"></path>
+          </svg>
+          <div style="position:absolute;top: 16px;right: 20px;font-size: xx-small;color: white">{{myUnReadAnnouncement.length}}</div>
+        </div>
         <svg height="32" viewBox="0 0 1024 1024" width="32" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M849.6 713.4c8.4-0.4 16.7 1.8 23.8 6.4-28.9-18.5-46.4-50.4-46.3-84.8V436c0-145.9-105.7-267.6-246.9-297.5v-7.2c0-37.1-30.1-67.1-67.2-67.1h-0.1c-37.1 0-67.3 30.1-67.3 67.2v7C304.3 168.4 198.7 290 198.7 436v199.1c0 35.7-18.6 66.9-46.4 84.8 7-4.6 15.4-6.9 23.8-6.4-24.7-0.9-45.5 18.4-46.4 43.1-0.9 24.7 18.4 45.5 43.1 46.4h676.6c24.7 0.1 44.8-20 44.9-44.7 0.1-24.8-19.9-44.9-44.7-44.9zM513 959.8c62 0 112.2-50.2 112.2-111.9H400.7c0 61.7 50.2 111.9 112.3 111.9z"
@@ -53,10 +59,11 @@ import InfoCard from "@/components/InfoCard";
 
 export default {
   name: "GlobalHeader",
-  components: {InfoCard},
+  components: { InfoCard },
   data() {
     return {
       quickAccessTitle: "快速访问",
+      myUnReadAnnouncement: [],
       menuIndex: [
         ["1", "/portal"],
         ["2", "/task"],
@@ -89,6 +96,13 @@ export default {
     },
   },
 
+  created() {
+    this.$apis.getUnreadAnnouncements(this.$store.state.user.id)
+      .then(res => {
+        this.myUnReadAnnouncement = res.data.data;
+      });
+  },
+
   methods: {
     handleMenuSelect(key) {
       let target = "/portal";

src/views/MessagePage/MessagePage.vue

@@ -1,12 +1,24 @@
 <template>
   <p style="text-align: center; font-weight: bolder; font-size: xxx-large">消息中心</p>
+  {{ myUnReadAnnouncement }}
   <img alt="err" src="@/assets/messagePage.png" style="width: 100%;">
 </template>
 
 <script>
 export default {
   name: "MessagePage",
-  components: {  }
+  data() {
+    return {
+      myUnReadAnnouncement: [],
+    };
+  },
+
+  created() {
+    this.$apis.getUnreadAnnouncements(this.$store.state.user.id)
+      .then(res => {
+        this.myUnReadAnnouncement = res.data.data;
+      });
+  },
 };
 </script>
 

src/views/PortalPage/PortalPage.vue

@@ -229,11 +229,6 @@ export default {
         this.myTestLoading = false;
         that.handleResize();
       });
-      this.$apis.getUnreadAnnouncements(this.$store.state.user.id)
-        .then(res => {
-          console.log(res);
-        })
-        .catch();
     }
 
     await this.$nextTick(() => {