flat: 优化

stores/useReadMsg.js

@@ -12,27 +12,25 @@ import {
     $api,
 } from '../common/globalFunction';
 
-// 控制消息
+// 常量定义：消息在 TabBar 的索引位置
+const TABBAR_INDEX = 3;
+
 export const useReadMsg = defineStore('readMsg', () => {
     const msgList = ref([])
+    // 用于自定义 Tabbar 组件的渲染
     const badges = ref([{
-            count: 0
-        },
-        {
-            count: 0
-        },
-        {
-            count: 0
-        },
-        {
-            count: 0
-        },
-        {
-            count: 0
-        },
-    ])
+        count: 0
+    }, {
+        count: 0
+    }, {
+        count: 0
+    }, {
+        count: 0
+    }, {
+        count: 0
+    }])
 
-    // 计算总未读数量，基于 notReadCount 字段
+    // 计算总未读数量
     const unreadCount = computed(() =>
         msgList.value.reduce((sum, msg) => sum + (msg.notReadCount || 0), 0)
     )
@@ -42,40 +40,49 @@ export const useReadMsg = defineStore('readMsg', () => {
         msgList.value.filter(msg => msg.notReadCount > 0)
     )
 
-
-    // 设置 TabBar 角标
-    function updateTabBarBadge() {
+    function updateBadgeEffect() {
         const count = unreadCount.value
-        const index = 3
-        const countVal = count > 99 ? '99+' : String(count)
-        if (count === 0) {
-            uni.removeTabBarBadge({
-                index
-            }) // 替换为你消息页面的 TabBar index
-            badges.value[index] = {
-                count: 0
+        // 处理显示文本：超过99显示99+
+        const countStr = count > 99 ? '99+' : String(count)
+
+        // 1. 更新内部状态 (用于自定义 UI)
+        if (badges.value[TABBAR_INDEX]) {
+            badges.value[TABBAR_INDEX].count = count === 0 ? 0 : countStr
+        }
+
+        // 2. 更新系统原生 TabBar
+        // 加 try-catch 防止在非 Tabbar 页面或加栽未完成时报错
+        try {
+            if (count > 0) {
+                uni.setTabBarBadge({
+                    index: TABBAR_INDEX,
+                    text: countStr
+                })
+            } else {
+                uni.removeTabBarBadge({
+                    index: TABBAR_INDEX
+                })
             }
-        } else {
-            badges.value[index] = {
-                count: countVal
-            }
-            uni.setTabBarBadge({
-                index,
-                text: countVal
-            })
+        } catch (e) {
+            console.warn('TabBar Badge 更新失败(可能当前非TabBar页面):', e)
         }
     }
 
+    watch(unreadCount, () => {
+        updateBadgeEffect()
+        console.log('value', unreadCount.value)
+    }, {
+        immediate: true
+    })
+
 
     // 拉取消息列表
     async function fetchMessages() {
         try {
-            $api.createRequest('/app/notice/info', {
+            const res = await $api.createRequest('/app/notice/info', {
                 isRead: 1
-            }, "GET").then((res) => {
-                msgList.value = res.data || []
-                updateTabBarBadge()
-            })
+            }, "GET")
+            msgList.value = res.data || []
         } catch (err) {
             console.error('获取消息失败:', err)
         }
@@ -83,17 +90,23 @@ export const useReadMsg = defineStore('readMsg', () => {
 
     // 设置为已读
     async function markAsRead(item, index) {
-        const msg = msgList.value[index]
-        if (!msg || msg.isRead === 1) return
+        const targetMsg = msgList.value[index]
+        if (!targetMsg) return
+
+        // 如果已经是已读，直接返回，避免无效请求
+        // 假设服务端逻辑是：isRead=1 表示已读 (注意检查你的字段定义)
+        // 你的原代码判断是 if (msg.isRead === 1) return，如果是这样，下面请求成功应该设为 1
+        // 但通常未读是0，已读是1。这里维持你原有的逻辑，假设服务端把 notReadCount 清零
 
         try {
             let params = {
-                id: msg.noticeId
+                id: targetMsg.noticeId
             }
-            $api.createRequest('/app/notice/read?id=' + msg.noticeId, params, "POST").then((res) => {
-                msgList.value[index].isRead = 1
-                updateTabBarBadge()
-            })
+            await $api.createRequest('/app/notice/read?id=' + targetMsg.noticeId, params, "POST")
+
+            // 更新本地数据
+            msgList.value[index].notReadCount = 0
+            msgList.value[index].isRead = 1 // 标记已读状态
         } catch (err) {
             console.error('设置消息已读失败:', err)
         }
@@ -106,8 +119,8 @@ export const useReadMsg = defineStore('readMsg', () => {
         unreadCount,
         fetchMessages,
         markAsRead,
-        updateTabBarBadge
+        updateTabBarBadge: updateBadgeEffect
     }
 }, {
-    unistorage: true,
+    unistorage: true, // 开启持久化
 })