gypsy-crm-frontend-vu/components/cwg-notice.vue

<template>
    <view class="pc-header-btn" :class="{ 'has-dot': isRed }">
        <cwg-icon name="xxtz" color="#141d22" @click="openNotice" />
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import { newsApi } from '@/service/news'
import { userToken } from "@/composables/config";
const isRed = ref(false)
function openNotice() {
    uni.$emit('open-notice-drawer')
}
const getData = async () => {
    const res = await newsApi.newsNoticeRead({
        read: 0
    })
    if (res.data && res.code == 200) {
        isRed.value = true
    } else {
        isRed.value = false
    }
}
onMounted(() => {
    if (!userToken.value) return
    getData()
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.pc-header-btn {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: px2rpx(4);
        right: px2rpx(4);
        width: px2rpx(8);
        height: px2rpx(8);
        background-color: #f56c6c;
        border-radius: 50%;
    }

    &.has-dot::after {
        display: block;
    }
}
</style>