hookehuyr

feat(底部导航): 添加未读消息红点提示功能

在底部导航栏的"我的"图标上添加未读消息红点提示
通过调用用户信息接口获取未读消息数量
未登录或接口失败时默认不显示红点
......@@ -39,6 +39,7 @@ declare module 'vue' {
UserAgreement: typeof import('./components/ui/UserAgreement.vue')['default']
VanActionSheet: typeof import('vant/es')['ActionSheet']
VanBackTop: typeof import('vant/es')['BackTop']
VanBadge: typeof import('vant/es')['Badge']
VanButton: typeof import('vant/es')['Button']
VanCalendar: typeof import('vant/es')['Calendar']
VanCell: typeof import('vant/es')['Cell']
......
<!--
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-01 16:14:16
* @LastEditTime: 2025-12-08 13:49:00
* @FilePath: /mlaj/src/components/layout/BottomNav.vue
* @Description: 文件描述
-->
......@@ -18,18 +18,20 @@
'text-gray-500': !isActive(item.path)
}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mb-1"
:class="{
'text-green-500': isActive(item.path),
'text-gray-500': !isActive(item.path)
}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
v-html="item.icon"
/>
<van-badge :dot="item.path === '/profile' && unread_msg_count > 0">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mb-1"
:class="{
'text-green-500': isActive(item.path),
'text-gray-500': !isActive(item.path)
}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
v-html="item.icon"
/>
</van-badge>
<span class="text-xs">{{ item.name }}</span>
</div>
</div>
......@@ -37,15 +39,44 @@
</template>
<script setup>
import { computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuth } from '@/contexts/auth'
import { showToast } from 'vant'
import { getUserInfoAPI } from '@/api/users'
const route = useRoute()
const router = useRouter()
const { currentUser } = useAuth()
/**
* @var {import('vue').Ref<number>} unread_msg_count
* @description 未读消息数量,来源于 getUserInfoAPI() 的返回值;用于控制“我的”图标右上角红点显示
*/
const unread_msg_count = ref(0)
/**
* @function load_unread_msg_count
* @description 拉取用户信息,提取未读消息数量;未登录或接口失败时默认为 0
* @returns {Promise<void>}
*/
async function load_unread_msg_count() {
try {
const { code, data } = await getUserInfoAPI()
if (code) {
unread_msg_count.value = +data.unread_msg_count || 0
} else {
unread_msg_count.value = 0
}
} catch (e) {
unread_msg_count.value = 0
}
}
onMounted(() => {
load_unread_msg_count()
})
const navItems = [
{
name: '首页',
......