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

<template>
    <view class="notice-container">
        <cwg-dropdown ref="dropdownRef" :menu-list="[]">
            <view class="pc-header-btn" :class="{ 'has-dot': isRed }">
                <cwg-icon name="xxtz" color="#141d22" @click="openNotice" />
            </view>
            <template #btn>
                <view class="right-drawer">
                    <view class="notification-list" v-if="list.length">
                        <view v-for="item in list" :key="item.id" class="notification-item" @click="goPages(item)">
                            <view class="item-content">
                                <view class="item-title">{{ item.subject }}</view>
                                <view class="item-time">{{ item.addTime }}</view>
                            </view>
                            <view class="item-badge" v-if="item.read == 0">
                                <view class="dot"></view>
                            </view>
                        </view>
                    </view>
                    <view class="notification-list" v-if="list.length == 0">
                        <cwg-empty-state />
                    </view>

                    <view class="logout-wrap">
                        <view class="logout-btn" @click="goMore">
                            <cwg-icon name="crm-mb" :size="16" color="#ff9800" />
                            <text v-t="'News.More'" />
                        </view>
                    </view>
                </view>
            </template>
        </cwg-dropdown>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } 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: 6 },
        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 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()
    getList()
})
</script>

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

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

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

    .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;
        }
    }

    .right-drawer {
        width: px2rpx(300);
        background-color: var(--color-white);
        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 #f0f0f0;
        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: #333;
                line-height: 1.4;
                margin-bottom: px2rpx(4);
            }

            .item-time {
                font-size: px2rpx(12);
                color: #999;
            }
        }

        .item-badge {
            margin-left: px2rpx(12);

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

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

    .logout-btn {
        height: 44px;
        background: #f4eadf;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #ff9800;
        font-weight: 600;
        cursor: pointer;
    }
}
</style>