|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div :class="prefixCls">
|
|
|
<Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
|
|
|
- <Badge size="small" dot :count="100" :numberStyle="numberStyle">
|
|
|
+ <Badge size="small" dot :count="count" :numberStyle="numberStyle" @click="onNoticeClick">
|
|
|
<BellOutlined />
|
|
|
</Badge>
|
|
|
<!-- <template #content>
|
|
@@ -22,34 +22,38 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { computed, defineComponent, ref } from 'vue';
|
|
|
+ import { onMounted, defineComponent, ref } from 'vue';
|
|
|
// Tabs, Badge
|
|
|
import { Popover, Badge } from 'ant-design-vue';
|
|
|
import { BellOutlined } from '@ant-design/icons-vue';
|
|
|
- import { tabListData, ListItem } from './data';
|
|
|
+ import { tabListData } from './data';
|
|
|
// import NoticeList from './NoticeList.vue';
|
|
|
import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
- import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ // import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ import { unreadNoticeApi } from '/@/api/notification/list';
|
|
|
+ import { useGo } from '/@/hooks/web/usePage';
|
|
|
// Tabs, TabPane: Tabs.TabPane, Badge, NoticeList
|
|
|
export default defineComponent({
|
|
|
components: { Popover, BellOutlined, Badge },
|
|
|
setup() {
|
|
|
const { prefixCls } = useDesign('header-notify');
|
|
|
- const { createMessage } = useMessage();
|
|
|
+ // const { createMessage } = useMessage();
|
|
|
const listData = ref(tabListData);
|
|
|
+ const go = useGo();
|
|
|
|
|
|
- const count = computed(() => {
|
|
|
- let count = 0;
|
|
|
- for (let i = 0; i < tabListData.length; i++) {
|
|
|
- count += tabListData[i].list.length;
|
|
|
- }
|
|
|
- return count;
|
|
|
+ const count = ref(0);
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ const unread = await unreadNoticeApi();
|
|
|
+ console.log('unread', unread.totalCount);
|
|
|
+ count.value = unread.totalCount;
|
|
|
});
|
|
|
|
|
|
- function onNoticeClick(record: ListItem) {
|
|
|
- createMessage.success('你点击了通知,ID=' + record.id);
|
|
|
- // 可以直接将其标记为已读(为标题添加删除线),此处演示的代码会切换删除线状态
|
|
|
- record.titleDelete = !record.titleDelete;
|
|
|
+ function onNoticeClick() {
|
|
|
+ if (count.value > 0) {
|
|
|
+ go('/notification/list');
|
|
|
+ }
|
|
|
+ // createMessage.success('你点击了通知,ID=' + record.id);
|
|
|
}
|
|
|
|
|
|
return {
|