右上角我的消息

src/assets/styles/yxk-admin.scss

@@ -1103,7 +1103,7 @@ input[type='number'] {
     line-height: 40px; 
   }
   p{
-    width: 230px;
+    width: 220px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;

src/layout/components/Navbar.vue

@@ -29,19 +29,22 @@
       <el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
         <div class="message-icon">
           <span class="iconfont icon-xiaoxi" />
-          <i class="message-num">6</i>
+          <i class="message-num">{{ msgList.length }}</i>
         </div>
         <el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px;">
           <div style="display: flex; justify-content: flex-end; padding: 0 20px; height: 40px; line-height: 40px; color: #339CFF; font-size: 14px; border-bottom: 1px solid #339CFF;">
-            <span style="cursor: pointer;">全部标记为已读</span>
+            <span style="cursor: pointer;" @click="handleAllRead">全部标记为已读</span>
             <!-- 消息中心router -->
             <span style="color:#fff; margin-left: 10px; cursor: pointer;" @click="toAllMessage()">去查看</span>
           </div>
           <div style="max-height: 450px; overflow: hidden; overflow-y: scroll;">
-            <el-dropdown-item v-for="(item,index) in 12" :key="index" class="message-list-item">
-              <router-link to="/system/messageCenter">
-                <p>这是一条系统通知系统通知这是一条系统通知系统通知</p>
-                <span>2022-5-23 13:30</span>
+            <el-dropdown-item v-if="msgList.length===0" class="message-list-item">
+              <div style="text-align:center">暂无最新消息</div>
+            </el-dropdown-item>
+            <el-dropdown-item v-for="(item,index) in msgList" :key="index" class="message-list-item">
+              <router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
+                <p>{{ item.noticeContent }}</p>
+                <span>{{ item.create_time | parseTime }}</span>
                 <i class="el-icon-arrow-right" />
               </router-link>
             </el-dropdown-item>
@@ -104,6 +107,7 @@ import Logo from '@/layout/components/Sidebar/Logo'
 // import SizeSelect from '@/components/SizeSelect'
 // import Search from '@/components/HeaderSearch'
 import Avatar from '@/assets/images/avatar.png'
+import { getUserNotice, isread } from '@/api/system/logs'
 
 export default {
   components: {
@@ -120,9 +124,10 @@ export default {
       Avatar: Avatar,
       defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
       logoutVisible: false,
-      readMsg: null
+      msgList: []
     }
   },
+
   computed: {
     ...mapGetters([
       'sidebar',
@@ -148,10 +153,67 @@ export default {
       return !this.sidebar.opened
     }
   },
+  created() {
+    this.getMsgList()
+  },
   methods: {
-    // 未读消息
-    getReadMsg() {
-
+    // 获取未读消息
+    async getMsgList() {
+      const params = {
+        page: 0,
+        size: 10,
+        // createTime: [],
+        sort: 'createTime,desc'
+      }
+      const list = []
+      const allList = await this.getAllNoRead(params, list)
+      console.log(allList, 'allList')
+      allList.forEach(item => {
+        item.pushUserName = item.noticeUsers[0].pushUserName
+        item.isRead = item.noticeUsers[0].isRead
+      })
+      const arr = allList.filter(item => { return !item.isRead })
+      console.log(arr, 'msg')
+      if (arr.length > 20) {
+        this.msgList = arr.slice(0, 20)
+      } else {
+        this.msgList = arr
+      }
+    },
+    // 全部已读
+    async handleAllRead() {
+      const params = {
+        page: 0,
+        size: 10,
+        // createTime: [],
+        sort: 'createTime,desc'
+      }
+      const list = []
+      const ids = []
+      const allList = await this.getAllNoRead(params, list)
+      allList.forEach(item => {
+        item.noticeUsers.forEach(i => {
+          ids.push(i.id)
+        })
+      })
+      isread(ids).then(res => {
+        if (res) {
+          this.msgList = []
+        }
+      })
+    },
+    // 递归获取所有消息列表
+    async getAllNoRead(params, list) {
+      const allList = await getUserNotice(params).then(res => {
+        list = list.concat(res.content)
+        if ((list.length) < res.totalElements) {
+          params.page++
+          return this.getAllNoRead(params, list)
+        } else {
+          return list
+        }
+      })
+      return allList
     },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')

src/views/system/user/center.vue

@@ -164,6 +164,13 @@ export default {
       'baseApi'
     ])
   },
+  watch: {
+    '$route'(val, from) { // 监听到路由（参数）改变
+      if (this.$route.query) {
+        this.activeIndex = this.$route.query.activeIndex
+      }
+    }
+  },
   created() {
     this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
     store.dispatch('GetInfo').then(() => {})