36 lines
982 B
Vue
36 lines
982 B
Vue
<template>
|
|
<div>
|
|
<Tooltip :title="tips">
|
|
<Badge :count="unreadCount" :offset="[0, 15]" size="small" @click="go({ path: PageEnum.MESSAGE_PAGE })">
|
|
<BellOutlined />
|
|
</Badge>
|
|
</Tooltip>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, computed } from 'vue'
|
|
import { Badge, Tooltip } from 'ant-design-vue'
|
|
import { BellOutlined } from '@ant-design/icons-vue'
|
|
import { useGo } from '@/hooks/web/usePage'
|
|
import { PageEnum } from '@/enums/pageEnum'
|
|
import { useUserMessageStore } from '@/store/modules/userMessage'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const go = useGo()
|
|
|
|
const store = useUserMessageStore()
|
|
const { unreadCount } = storeToRefs(store)
|
|
const tips = computed<string>(() => {
|
|
if (unreadCount.value === 0) {
|
|
return '查看站内信'
|
|
}
|
|
return `查看站内信: 未读 ${unreadCount.value} 条`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
// 通过store进行更新
|
|
store.updateUnreadCount()
|
|
})
|
|
</script>
|
|
<style lang="less"></style>
|