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

<template>
    <view class="notice-container">
        <cwg-dropdown ref="dropdownRef" :menu-list="[]">
            <view class="pc-header-btn cursor-pointer" :data-tooltip="t('News.Notice')" :class="{ '!has-dot': isRed }">
                <text v-if="isRed"
                    class="position-absolute top-0 left-15 p-1 mt-1 me-1 bg-danger border border-3 border-light rounded-circle" />
                <cwg-icon name="cwg-bell" color="#97A1C0" :size="20" @click="openNotice" />
                <view class="ml-5">{{ t('News.Notice') }}</view>
            </view>
            <template #btn>
                <view class="dropdown-menu dropdown-menu-lg-end p-0 w-300px mt-2 show">
                    <view class="px-3 py-3 border-bottom d-flex justify-content-between align-items-center">
                        <h6 class="mb-0" v-t="'News.Notice'"></h6>
                    </view>
                    <view class="p-2" v-if="list.length > 0">
                        <view class="list-group list-group-hover list-group-smooth list-group-unlined">
                            <view
                                class="list-group-item d-flex justify-content-between align-items-center cursor-pointer"
                                v-for="item in list" :key="item.id" @click="goPages(item)" :data-tooltip="t('vu.tooltip.t4',{pageName:t('vu.tooltip.t5')})" data-placement="top">
                                <view class="ms-2 me-auto">
                                    <h6 class="mb-2 position-relative">{{ item.subject
                                        }} <view class="item-badge" v-if="item.read == 0">
                                            <view class="dot" />
                                        </view>
                                    </h6>
                                    <small class="text-body d-block">{{ item.addTime }}</small>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="list-empty-state-compact" v-else>
                        <cwg-empty-state />
                    </view>
                    <view class="p-2">
                        <view @click="goMore" class="btn w-100 btn-danger waves-effect waves-light " v-t="'News.More'">
                        </view>
                    </view>
                </view>
            </template>
        </cwg-dropdown>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { newsApi } from '@/service/news'
import useRouter from "@/hooks/useRouter";
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import { userToken } from "@/composables/config";
const isRed = ref(false)
const dropdownRef = ref(null)
const close = () => {
    dropdownRef.value.close()
}
const router = useRouter();
const list = ref([])
const getList = async () => {
    const res = await newsApi.newsNoticeList({
        page: { current: 1, row: 4 },
        lang: locale.value,
        read: 0
    })
    if (res.data && res.code == 200) {
        list.value = res.data
    } else {
        list.value = []
    }
}
const goPages = (e) => {
    router.push({
        path: '/pages/analytics/detail',
        query: {
            id: e.id,
            type: 7
        }
    })
    close()
}
const goMore = () => {
    router.push({
        path: '/pages/common/notice'
    })
    close()
}
const openNotice = () => {
    if (!userToken.value) return
    getData()
    getList()
}
const getData = async () => {
    const res = await newsApi.newsNoticeRead({
        read: 0
    })
    if (res.data && res.code == 200) {
        isRed.value = res.data > 0
    } else {
        isRed.value = false
    }
}
onMounted(() => {
    if (!userToken.value) return
    uni.$on('open-notice', () => {
        getData()
        getList()
    })
    getData()
    getList()
    uni.$on('updateUnreadCount', (value) => {
        console.log('updateUnreadCount', value)
        isRed.value = value > 0
        if (!userToken.value) return
        getList()
    })
})
onUnmounted(() => {
    uni.$off('updateUnreadCount')
})
</script>

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

.notice-container {
    :deep(.cwg-dropdown-menu-container) {
        left: px2rpx(-200) !important;
        right: px2rpx(0) !important;

        .menu {
            border: 0;
            overflow: visible;
        }
    }

    @media screen and (max-width: 991px) {
        :deep(.cwg-dropdown-menu-container) {
            left: px2rpx(-230) !important;
            max-width: px2rpx(400);
        }
    }
    @media screen and (max-width: 700px) {
        :deep(.cwg-dropdown-menu-container) {
            left: px2rpx(-160) !important;
            max-width: px2rpx(400);
        }
    }

    .item-badge {
        position: absolute;
        top: px2rpx(1);
        right: px2rpx(-14);
        margin-left: px2rpx(12);

        .dot {
            width: px2rpx(6);
            height: px2rpx(6);
            background-color: #f56c6c;
            border-radius: 50%;
        }
    }

    .pc-header-btn {
      width: auto;
      padding: 0 px2rpx(5);
        position: relative;
      .left-15{
        left: 15px !important;
      }

      .ml-5{
        margin-left: px2rpx(5);
      }


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

    .right-drawer {
        width: px2rpx(300);
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        display: flex;
        flex-direction: column;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    .notification-list {
        width: 100%;
    }

    .notification-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: px2rpx(12) px2rpx(16);
        border-bottom: 1px solid var(--bs-border-color);
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .item-content {
            flex: 1;

            .item-title {
                font-size: px2rpx(14);
                color: var(--bs-heading-color);
                line-height: 1.4;
                margin-bottom: px2rpx(4);
            }

            .item-time {
                font-size: px2rpx(12);
                color: var(--bs-heading-color);
            }
        }


    }

    .logout-wrap {
        margin-top: auto;
        padding: 20px 16px;
        margin-bottom: 20px;
    }

    .logout-btn {
        height: 44px;
        background-color: var(--bs-btn-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
    }
}
</style>