hookehuyr

feat(message): 修复 TabBar 未读红点显示问题

- 添加 unreadMsgCount 状态单独存储未读消息数
- 修复从 res.data 读取 unread_msg_count 字段(该字段不在 user 对象中)
- 优化 TabBarBadges 计算逻辑,直接从 unreadMsgCount 读取
- 消息列表页面添加自动刷新已读状态功能

影响文件:
- src/stores/user.js
- src/pages/message/index.vue

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -61,7 +61,7 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref } from 'vue'
import { useLoad } from '@tarojs/taro'
import { useLoad, useDidShow } from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import LoadMoreList from '@/components/list/LoadMoreList'
import NavHeader from '@/components/navigation/NavHeader.vue'
......@@ -83,6 +83,9 @@ const hasMore = ref(true)
const loading = ref(false)
const loadingMore = ref(false)
// 标记:是否首次加载(用于区分 useLoad 和 useDidShow)
const isFirstLoad = ref(true)
/**
* 提取消息标题(第一行或截取)
*
......@@ -205,6 +208,43 @@ useLoad(async (options) => {
// 获取消息列表
await fetchMessageList({ page: 0, limit: pageSize })
// 首次加载完成
isFirstLoad.value = false
})
/**
* 页面显示时刷新列表(用于从详情页返回时更新已读状态)
*/
useDidShow(async () => {
// 跳过首次加载(useLoad 已经处理过)
if (isFirstLoad.value) {
return
}
console.log('[Message] 页面显示,更新已读状态')
try {
// 重新获取当前页数据(用于更新已读状态)
const res = USE_MOCK_DATA
? await mockMessageListAPI({ page: currentPage.value, limit: pageSize })
: await myListAPI({ page: currentPage.value, limit: pageSize })
if (res.code === 1 && res.data?.list) {
const newList = res.data.list
// 只更新现有列表项的状态,不改变列表顺序
currentList.value = currentList.value.map(oldItem => {
const newItem = newList.find(item => item.id === oldItem.id)
// 如果找到了对应的消息,更新其状态;否则保持原样
return newItem ? { ...oldItem, status: newItem.status } : oldItem
})
console.log('[Message] 已读状态已更新')
}
} catch (error) {
console.error('[Message] 更新已读状态失败:', error)
}
})
/**
......
......@@ -17,6 +17,9 @@ export const useUserStore = defineStore('user', () => {
/** 用户信息 */
const userInfo = ref(null)
/** 未读消息数 */
const unreadMsgCount = ref(0)
/** 是否已授权(openid) */
const isOpenid = ref(false)
......@@ -109,6 +112,14 @@ export const useUserStore = defineStore('user', () => {
if (res.code === 1) {
userInfo.value = res.data.user
// 从 res.data 中读取 unread_msg_count(不在 user 对象里)
unreadMsgCount.value = res.data?.unread_msg_count ?? 0
console.log('[UserStore] 用户信息已更新:', {
unreadMsgCount: unreadMsgCount.value
})
// 更新最后请求时间
lastFetchTime = Date.now()
} else {
......@@ -204,32 +215,16 @@ export const useUserStore = defineStore('user', () => {
return []
}
// 2. 检查用户信息是否存在
if (!userInfo.value) {
return []
}
// 3. 获取配置的字段名和阈值
const fieldName = getFeatureConfig('tabbarBadgeField') // 'unread_count'
// 2. 获取阈值
const threshold = getFeatureConfig('tabbarBadgeThreshold') // 1
// 4. 读取字段值
const fieldValue = userInfo.value[fieldName]
// 3. 从 unreadMsgCount 读取值(而不是从 userInfo 中)
const count = unreadMsgCount.value
// 5. 判断是否显示红点
// 4. 判断是否显示红点
const badges = []
// 处理数字类型(如 unread_count: 5)
if (typeof fieldValue === 'number') {
if (fieldValue >= threshold) {
badges.push('me')
}
}
// 处理布尔类型(如 has_notification: true)
else if (typeof fieldValue === 'boolean') {
if (fieldValue) {
badges.push('me')
}
if (count >= threshold) {
badges.push('me')
}
return badges
......@@ -239,6 +234,7 @@ export const useUserStore = defineStore('user', () => {
return {
// 状态
userInfo,
unreadMsgCount,
isOpenid,
isLoggedIn,
loading,
......