gypsy-crm-frontend-vu/pages/common/notice.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('News.Notice')" />
        <view class="info-card">
            <view class="search-bar">
                <cwg-combox v-model:value="search.read" :options="readOptions"
                    :placeholder="t('Custom.PaymentHistory.StatusPlaceholder')" />
            </view>
            <cwg-tabel ref="tableRef" :columns="columns" :mobilePrimaryFields="mobilePrimaryFields"
                :queryParams="search" :api="listApi" @go-pages="goPages" :isPages="true">
                <template #status="{ row }">
                    <text class="status-tag" :class="getStatusColor(row.read)">{{readOptions.find(item => item.value === row.read)?.text}}</text>
                </template>
            </cwg-tabel>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { newsApi } from '@/service/news';
import useRouter from "@/hooks/useRouter";
const router = useRouter();
const search = ref({
    read: null,
    lang: locale.value
})
const readOptions = computed(() => [
    { value: null, text: t('State.All') },
    { value: 0, text: t('News.Unread') },
    { value: 1, text: t('News.Read') }
]);
const tableRef = ref(null)

watch(locale, () => {
    search.value.lang = locale.value
    tableRef.value?.reload()
})
watch(search, (newVal) => {
    tableRef.value?.reload()
}, { immediate: true, deep: true })
// 表格列配置（支持插槽和格式化）
const columns = computed(() => [
    {
        prop: 'subject',
        label: t('News.Title'),
        align: 'left',
        slot: 'subject'          // 使用插槽自定义标题点击
    },
    {
        prop: 'addTime',
        label: t('Drawer.Label.Date'),
        align: 'center',
        formatter: ({ row }) => row.addTime || '--'
    },
    {
        prop: 'read',
        label: t('Custom.Recording.Status'),
        align: 'right',
        slot: 'status'           // 使用插槽显示未读/已读状态
    },
    {
        prop: 'more',
        type: 'more',
        width: 20,
        align: 'right'
    },
])

const mobilePrimaryFields = ref([
    {
        prop: 'subject',
        label: t('News.Title'),
        align: 'left',
        slot: 'subject'          // 使用插槽自定义标题点击
    },
    {
        prop: 'addTime',
        label: t('Drawer.Label.Date'),
        align: 'center',
        formatter: ({ row }) => row.addTime || '--'
    },
    {
        prop: 'read',
        label: t('Custom.Recording.Status'),
        align: 'right',
        slot: 'status'           // 使用插槽显示未读/已读状态
    },
    {
        prop: 'more',
        type: 'more',
        width: 20,
        align: 'right'
    },
])

const getStatusColor = (value) => {
  const classMap=  {
    0: 'status-pending',
    1: 'status-cancelled',
  }
  return classMap[value] || ''
}
const goPages = (e) => {
    router.push({
        path: '/pages/analytics/detail',
        query: {
            id: e.id,
            type: 7
        }
    })
    tableRef.value?.reload()
}
const listApi = ref(null)
listApi.value = newsApi.newsNoticeList
</script>

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

.avatar {
    width: px2rpx(60);
    height: px2rpx(60);
    border-radius: 4px;
}

.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(20);
    font-weight: 500;

    .content-title-btns {
        margin: px2rpx(8) 0;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);

        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: white;
            padding: 0 px2rpx(12);
            border: none;
            font-size: px2rpx(14);
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(8);
        }

        .btn-primary:active {
            background-color: #cf1322;
            ;
        }
    }
}

.operation-btn {
    :deep(span) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(4);
        cursor: pointer;
        background-color: var(--color-slate-150);
        padding: px2rpx(8) 0;
    }
}

.operation-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.search-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: px2rpx(16);
    margin: px2rpx(16) 0;

    .cwg-combox,
    .uni-easyinput,
    .uni-date {
        width: px2rpx(240) !important;
        flex: none;
    }
}
</style>