up

src/api/login.js

@@ -30,6 +30,14 @@ export function logout() {
   })
 }
 
+// 获取总的未读条数
+export function getNoReadCount(params) {
+  return request({
+    url: '/chat/getNoReadCount',
+    params: params
+  });
+}
+
 export function fetchList(params) {
   return request({
     url: '/admin/list',

src/layout/components/Navbar.vue

@@ -10,17 +10,23 @@
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <!-- <search id="header-search" class="right-menu-item" /> -->
         <router-link to="/service">
           <span>
             <span class="news">
-              <i class="red"></i>
+              <el-badge
-              <i class="el-icon-bell"></i>
+                :value="redNum"
+                :max="10"
+                class="item"
+                v-if="redNum != 0"
+              >
+                <i class="el-icon-bell"></i>
+              </el-badge>
             </span>
           </span>
         </router-link>
-    <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
@@ -28,17 +34,19 @@
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-    <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
+        <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
 
         <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip> -->
-
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -56,7 +64,7 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-    </div> 
+    </div>
   </div>
 </template>
 
@@ -78,10 +86,10 @@ export default {
     SizeSelect,
     Search,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
   },
   computed: {
-    ...mapGetters(['sidebar', 'avatar', 'device']),
+    ...mapGetters(['sidebar', 'avatar', 'device', 'redNum']),
     setting: {
       get() {
         return this.$store.state.settings.showSettings;
@@ -89,10 +97,10 @@ export default {
       set(val) {
         this.$store.dispatch('settings/changeSetting', {
           key: 'showSettings',
-          value: val
+          value: val,
         });
-      }
+      },
-    }
+    },
   },
   methods: {
     toggleSideBar() {
@@ -102,14 +110,14 @@ export default {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
           location.href = '/index';
         });
       });
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -153,17 +161,17 @@ export default {
     &:focus {
       outline: none;
     }
-    .news{
+    .news {
       position: relative;
       font-size: 25px;
-      margin-right: 10px;
+      margin-right: 15px;
-      .red{
+      .red {
         position: absolute;
         top: 0;
         right: 0;
-        width: 5px;
+        width: 20px;
-        height: 5px;
+        height: 20px;
-        border-radius: 50%;
+        // border-radius: 50%;
         background-color: red;
       }
     }
@@ -211,4 +219,8 @@ export default {
     }
   }
 }
+/deep/.el-badge__content.is-fixed {
+  top: 10px;
+  right: 15px;
+}
 </style>

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  redNum: state => state.user.redNum,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/login';
+import { login, logout, getInfo, getNoReadCount } from '@/api/login';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 
 const user = {
@@ -7,6 +7,7 @@ const user = {
     name: '',
     userId: '',
     avatar: '',
+    redNum: 0,
     roles: [],
     permissions: []
   },
@@ -25,6 +26,9 @@ const user = {
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar;
     },
+    SET_REDNUM: (state, redNum) => {
+      state.redNum = redNum;
+    },
     SET_ROLES: (state, roles) => {
       state.roles = roles;
     },
@@ -76,6 +80,9 @@ const user = {
           .catch(error => {
             reject(error);
           });
+        getNoReadCount().then(({data})=>{
+          commit('SET_REDNUM', data);
+        })
       });
     },
 

src/views/service/index.vue

@@ -176,7 +176,7 @@ export default {
           this.queryParams.pageNum * this.queryParams.pageSize >=
           this.msgTotal
         )
-          return this.msgInfo('已经加载完成');
+          return this.msgInfo('已经到顶了');
         this.queryParams.pageNum++;
         this.getMsgList();
       }
@@ -213,6 +213,9 @@ export default {
         this.userList = data.list;
         this.userTotal = data.total;
       });
+      setTimeout(() => {
+        this.getUserList();
+      }, 600000);
     },
     // 用户发送消息
     sentMsg() {
@@ -305,7 +308,11 @@ export default {
           });
           info.msgNoReadCount = 0;
         });
-      } else {
+      }
+      // else if(){
+
+      // }
+      else {
         const userInfo = this.userList.find((item) => {
           return item.id == data.sendUserId;
         });