qingdao-employment-service/stores/useReadMsg.js

// store/useReadMsg.js
import {
    defineStore
} from 'pinia'
import {
    ref,
    computed,
    watch
} from 'vue'
import {
    msg,
    $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
    }])

    // 计算总未读数量
    const unreadCount = computed(() =>
        msgList.value.reduce((sum, msg) => sum + (msg.notReadCount || 0), 0)
    )

    // 未读消息列表
    const unreadMsgList = computed(() =>
        msgList.value.filter(msg => msg.notReadCount > 0)
    )

    function updateBadgeEffect() {
        const count = unreadCount.value
        // 处理显示文本：超过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
                })
            }
        } catch (e) {
            console.warn('TabBar Badge 更新失败(可能当前非TabBar页面):', e)
        }
    }

    watch(unreadCount, () => {
        updateBadgeEffect()
        console.log('value', unreadCount.value)
    }, {
        immediate: true
    })


    // 拉取消息列表
    async function fetchMessages() {
        try {
            const res = await $api.createRequest('/app/notice/info', {
                isRead: 1
            }, "GET")
            msgList.value = res.data || []
        } catch (err) {
            console.error('获取消息失败:', err)
        }
    }

    // 设置为已读
    async function markAsRead(item, index) {
        const targetMsg = msgList.value[index]
        if (!targetMsg) return

        // 如果已经是已读，直接返回，避免无效请求
        // 假设服务端逻辑是：isRead=1 表示已读 (注意检查你的字段定义)
        // 你的原代码判断是 if (msg.isRead === 1) return，如果是这样，下面请求成功应该设为 1
        // 但通常未读是0，已读是1。这里维持你原有的逻辑，假设服务端把 notReadCount 清零

        try {
            let params = {
                id: targetMsg.noticeId
            }
            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)
        }
    }

    return {
        badges,
        msgList,
        unreadMsgList,
        unreadCount,
        fetchMessages,
        markAsRead,
        updateTabBarBadge: updateBadgeEffect
    }
}, {
    unistorage: true, // 开启持久化
})