46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<a-badge :count="imMessageStore.allNoReadNumber" :max-count="99" class="badge" @click="handleToMessages">
|
|
<div class="i-material-symbols:notifications-outline icon"></div>
|
|
</a-badge>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useImMessageStore } from "@/store/imMessageStore";
|
|
import { getAllNoReadNumberApi } from "@/service/message";
|
|
import { WebSocketType } from "@/types/websocket";
|
|
import { useWebSocketStore } from "@/store/webSocketStore";
|
|
|
|
const router = useRouter();
|
|
const imMessageStore = useImMessageStore();
|
|
const webSocketStore = useWebSocketStore();
|
|
|
|
const unlisten = ref<() => void>(); // 类型为 undefined | (() => void)
|
|
|
|
onMounted(() => {
|
|
getAllNoReadNumberApi({}).then((res) => {
|
|
imMessageStore.setAllNoReadNumber(res.data.noReadNumber);
|
|
});
|
|
unlisten.value = webSocketStore.onMessage((data) => {
|
|
if (data.type === WebSocketType.AcceptMessageEnums.ONE) {
|
|
imMessageStore.setAllNoReadNumber(imMessageStore.allNoReadNumber + 1);
|
|
}
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
unlisten.value?.();
|
|
});
|
|
|
|
function handleToMessages() {
|
|
router.push("/messages");
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.icon {
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|