shuhi-ui/src/views/data/arrivalStats/components/subscribe-detail.vue

<template>
    <ele-modal v-model="visible" :width="920" :title="title">
        <el-table v-loading="loading" :data="rows" border max-height="480">
            <el-table-column
                prop="userId"
                label="用户ID"
                min-width="140"
                align="center"
            />
            <el-table-column
                prop="nickName"
                label="昵称"
                min-width="140"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="bookName"
                label="书名"
                min-width="200"
                show-overflow-tooltip
            />
            <el-table-column
                prop="isbn"
                label="ISBN"
                min-width="150"
                align="center"
            />
            <el-table-column
                prop="subscribeTime"
                label="订阅时间"
                min-width="180"
                align="center"
                :formatter="(row) => formatTime(row.subscribeTime)"
            />
        </el-table>
        <div class="detail-total">共 {{ total }} 条</div>
        <template #footer>
            <el-button @click="visible = false">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { computed, ref } from 'vue';
    import { dayjs } from 'element-plus';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';

    const visible = ref(false);
    const loading = ref(false);
    const rows = ref([]);
    const total = ref(0);
    const bookName = ref('');

    const title = computed(() =>
        bookName.value ? `订阅明细 - ${bookName.value}` : '订阅明细'
    );

    function formatTime(value) {
        if (!value) {
            return '-';
        }
        const date = dayjs(value);
        return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : value;
    }

    async function handleOpen(row) {
        if (!row?.isbn) {
            EleMessage.warning('缺少 ISBN，无法查看订阅明细');
            return;
        }
        visible.value = true;
        bookName.value = row.bookName || '';
        rows.value = [];
        total.value = 0;
        loading.value = true;
        try {
            const res = await request.get(
                '/shop/shopNoticeArrival/detailPage',
                {
                    params: { isbn: row.isbn }
                }
            );
            if (res.data.code !== 200) {
                EleMessage.error(res.data.msg || '订阅明细加载失败');
                return;
            }
            rows.value = res.data.rows || [];
            total.value = res.data.total || 0;
        } catch (error) {
            EleMessage.error(error.message || '订阅明细加载失败');
        } finally {
            loading.value = false;
        }
    }

    defineExpose({ handleOpen });
</script>

<style scoped>
    .detail-total {
        margin-top: 12px;
        color: var(--el-text-color-secondary);
        text-align: right;
    }
</style>