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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="info-card">
            <view class="content-title">
                <view v-t="'News.Notice'"></view>
            </view>
            <view class="search-bar">
                <cwg-combox v-model:value="search.read" :options="typeMap" :placeholder="t('placeholder.choose')" />
            </view>
            <cwg-tabel ref="tableRef" :columns="columns" :queryParams="search" :api="listApi" :show-operation="false"
                :showPagination="false">
                <template #subject="{ row }">
                    <view class="subject underline" @click="toView(row, 7)">
                        {{ row.subject }}
                    </view>
                </template>
            </cwg-tabel>
        </view>
    </cwg-page-wrapper>
</template>

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

const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));
// 表格列配置
const columns = ref([
    {
        prop: 'subject',
        label: t('News.Title'),
        align: 'left',
        slot: 'subject'
    },
    {
        prop: 'addTime',
        label: t('Drawer.Label.Date'),
        type: 'date',
        dateFormat: 'YYYY-MM-DD HH:mm',
        align: 'left'
    },
    {
        prop: 'status',
        label: t('Custom.Recording.Status'),
        formatter: ({ row }) => row.read ? t('News.Read') : t('News.Unread'),
        align: 'left'
    }
])


//查看详情
const toView = (data, title) => {
    router.push({ path: "/pages/mine/new", query: { title, id: data.id } }).catch(err => err);
    if (title == 7) {
        data.read = 1;
    }
}
const addFileDialog = ref(null);
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: var(--color-navy-700);
        }
    }
}

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