系统消息加已读

src/layout/components/Message/src/Message.vue

@@ -12,8 +12,9 @@ const list = ref<any[]>([]) // 消息列表
 // 获得消息列表
 const getList = async () => {
   list.value = await NotifyMessageApi.getUnreadNotifyMessageList()
+  
   // 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
-  unreadCount.value = 0
+  // unreadCount.value = 0
 }
 
 // 获得未读消息数
@@ -23,6 +24,14 @@ const getUnreadCount = async () => {
   })
 }
 
+// 标记为已读
+const handleRead = async (item) => {
+  if (item.readStatus) return
+  await NotifyMessageApi.updateNotifyMessageRead(item.id)
+  await getUnreadCount()
+  await getList()
+}
+
 // 跳转我的站内信
 const goMyList = () => {
   push({
@@ -39,7 +48,7 @@ onMounted(() => {
     () => {
       getUnreadCount()
     },
-    1000 * 60 * 2
+    1000 * 60 * 2 // 2 分钟
   )
 })
 </script>
@@ -47,36 +56,39 @@ onMounted(() => {
   <div class="message">
     <ElPopover :width="400" placement="bottom" trigger="click">
       <template #reference>
-        <ElBadge :is-dot="unreadCount > 0" class="item">
+        <ElBadge :value="unreadCount" :show-zero="false" :max="99" class="item">
           <Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" />
         </ElBadge>
       </template>
       <ElTabs v-model="activeName">
-        <ElTabPane label="我的站内信" name="notice">
-          <el-scrollbar class="message-list">
+        <ElTabPane label="通知" name="notice">
+          <el-scrollbar v-if="list.length > 0" class="message-list">
             <template v-for="item in list" :key="item.id">
               <div class="message-item">
-                <img alt="" class="message-icon" src="@/assets/imgs/avatar.gif" />
+                <img alt="" class="message-icon" src="https://minio.menduner.com/dev/1e6893918ef378ca280360078dfe74ade10b27101c89865261824b46de7d34a6.png" />
                 <div class="message-content">
-                  <span class="message-title">
+                  <div class="message-title">
                     {{ item.templateNickname }}：{{ item.templateContent }}
-                  </span>
-                  <span class="message-date">
-                    {{ formatDate(item.createTime) }}
-                  </span>
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="message-date">{{ formatDate(item.createTime) }}</span>
+                    <el-button link type="primary" @click="handleRead(item)"><Icon icon="ep:check" class="mr-5px" /> 标记为已读</el-button>
+                  </div>
                 </div>
               </div>
             </template>
           </el-scrollbar>
+          <el-empty v-else description="暂无消息" />
         </ElTabPane>
       </ElTabs>
       <!-- 更多 -->
-      <div style="margin-top: 10px; text-align: right">
+      <div class="text-right m-t-10px">
         <XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
       </div>
     </ElPopover>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .message-empty {
   display: flex;
@@ -95,7 +107,7 @@ onMounted(() => {
   .message-item {
     display: flex;
     align-items: center;
-    padding: 20px 0;
+    padding: 15px 0;
     border-bottom: 1px solid var(--el-border-color-light);
 
     &:last-child {
@@ -103,14 +115,14 @@ onMounted(() => {
     }
 
     .message-icon {
-      width: 40px;
-      height: 40px;
+      width: 50px;
+      height: 50px;
       margin: 0 20px 0 5px;
     }
 
     .message-content {
-      display: flex;
-      flex-direction: column;
+      // display: flex;
+      // flex-direction: column;
 
       .message-title {
         margin-bottom: 5px;