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

<template>
    <uni-popup ref="popupRef" type="right" background-color="#fff">
        <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="list-empty-state drawer-empty-state" v-else>
                <cwg-empty-state />
            </view>
            <view class="logout-wrap">
                <view class="logout-btn" @click="goMore">
                    <cwg-icon name="logout" :size="16" color="#97A1C0" />
                    <text v-t="'News.More'" />
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { newsApi } from '@/service/news'
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
import useRouter from "@/hooks/useRouter";
const router = useRouter();
const popupRef = ref<any>(null)
const list = ref([])
const getList = async () => {
    const res = await newsApi.newsNoticeList({
        page: { current: 1, row: 10 },
        lang: locale.value
    })
    if (res.data && res.code == 200) {
        list.value = res.data
    } else {
        list.value = []
    }
}
function open() {
    popupRef.value?.open()
    getList()
}
function close() {
    popupRef.value?.close()
}
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()
}
function handleLogout() {
    close()
}

defineExpose({
    open,
    close
})
</script>

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

.right-drawer {
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
}

.notification-list {
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

.drawer-empty-state {
    flex: 1;
    min-height: px2rpx(240);
}

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

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

    .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: #fff;
    font-weight: 600;
    cursor: pointer;
}
</style>