shuhi-ui/src/views/marketing/redBag/components/red-bag-detail.vue

<!-- 红包码详情列表 -->
<template>
    <el-dialog
        v-model="visible"
        title="红包码详情"
        width="1440px"
        :close-on-click-modal="false"
        destroy-on-close
    >
        <div class="red-bag-detail">
        <!-- 统计卡片 -->
        <div class="stats-row">
            <div class="stat-item">
                <div class="stat-label">扫码领取用户数</div>
                <div class="stat-value">{{
                    stats.scanDrawSumUserNum || 0
                }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">领取总用户数</div>
                <div class="stat-value">{{ stats.drawSumUserNum || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">扫码总次数</div>
                <div class="stat-value">{{ stats.scanSumNum || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">A 分享红包数量</div>
                <div class="stat-value">{{ stats.shareUserNum || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">B 被分享红包数量</div>
                <div class="stat-value">{{ stats.sharedUserNum || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">扫码领取小程序红包金额</div>
                <div class="stat-value">{{
                    stats.scanMiniProgramPrice || 0
                }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">扫码领取现金红包金额</div>
                <div class="stat-value">{{ stats.scanRedCashPrice || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">A 分享得金额</div>
                <div class="stat-value">{{ stats.shareUserPrice || 0 }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">B 被分享得金额</div>
                <div class="stat-value">{{ stats.sharedUserPrice || 0 }}</div>
            </div>
        </div>

        <!-- 搜索栏 -->
        <div style="display: flex; gap: 10px; align-items: center">
            <el-input v-model="searchForm.userId" placeholder="用户ID" style="width: 200px" clearable />

            <el-input v-model="searchForm.redLink" placeholder="红包链接" style="width: 200px" clearable />

            <el-select v-model="searchForm.drawStatus" placeholder="领取状态" clearable style="width: 150px">
                <el-option label="未领取" :value="0" />
                <el-option label="已领取" :value="1" />
            </el-select>
            <el-date-picker v-model="searchForm.drawTimeRange" type="datetimerange" range-separator="至"
                start-placeholder="领取开始时间" end-placeholder="领取结束时间" style="max-width: 360px" clearable  />
            <el-button type="primary" @click="reload()">查询</el-button>
            <el-button type="primary" plain @click="resetSearch">重置</el-button>
        </div>

        <!-- 表格 -->
        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
            :body-style="{ padding: '0' }">
            <template #redType="{ row }">
                <el-tag :type="row.redType === 1 ? 'success' : 'primary'" v-if="row.redType">
                    {{ redTypeMap[row.redType] }}
                </el-tag>
            </template>

            <template #drawStatus="{ row }">
                <el-tag :type="row.drawStatus === 1 ? 'success' : 'info'">
                    {{ row.drawStatus === 1 ? '已领取' : '未领取' }}
                </el-tag>
            </template>

            <template #action="{ row }">
                <el-button link type="primary" v-permission="'marketing:redBag:shareDetail'"
                    @click="handleShareDetail(row)">
                    [分享信息]
                </el-button>
            </template>
        </common-table>

        <!-- 分享信息弹窗 -->
        <el-dialog v-model="shareDialogVisible" title="分享信息" width="800px" :close-on-click-modal="false">
            <red-bag-share :red-id="currentRedId" />
        </el-dialog>
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import RedBagShare from './red-bag-share.vue';
    import request from '@/utils/request';
    const visible = ref(false);
    const activityId = ref();

    // 红包类型映射
    const redTypeMap = {
        0: '无门槛',
        1: '现金',
        2: '无门槛/现金'
    };


    // 统计数据
    const stats = ref({});

    // 搜索表单
    const searchForm = ref({
        userName: '',
        redType: undefined,
        drawStatus: undefined,
        drawTimeRange: []
    });

    const resetSearch = () => {
        searchForm.value = {
            userName: '',
            redType: undefined,
            drawStatus: undefined,
            drawTimeRange: []
        };
        reload();
    };

    // 表格列配置
    const columns = ref([
        {
            label: '红包 ID',
            prop: 'id',
            align: 'center',
            width: 120
        },
        {
            label: '红包链接',
            prop: 'redLink',
            align: 'center',
            minWidth: 200,
            showOverflowTooltip: true
        },
        {
            label: '用户名',
            prop: 'userName',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
        },
        {
            label: '红包类型',
            prop: 'redType',
            align: 'center',
            slot: 'redType',
            width: 100
        },
        {
            label: '红包金额',
            prop: 'redPrice',
            align: 'center',
            width: 100
        },
        {
            label: '生成时间',
            prop: 'createTime',
            align: 'center',
            width: 160
        },
        {
            label: '领取时间',
            prop: 'drawTime',
            align: 'center',
            width: 160
        },
        {
            label: '领取状态',
            prop: 'drawStatus',
            align: 'center',
            slot: 'drawStatus',
            width: 100
        },
        {
            label: '分享人数',
            prop: 'shareUserNum',
            align: 'center',
            minWidth: 90
        },
        {
            label: '扫码次数',
            prop: 'scanNum',
            align: 'center',
            minWidth: 110
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action',
            fixed: 'right'
        }
    ]);

    // 页面配置
    const pageRef = ref(null);
    const pageConfig = reactive({
        pageUrl: '/activity/red/bag/detail/activity/redBag/detail/pagelist',
        fileName: '红包码详情',
        cacheKey: 'redBagDetailTable'
    });

    // 刷新表格
    function reload() {
        const [drawTimeStartRaw, drawTimeEndRaw] =
            searchForm.value.drawTimeRange || [];
        pageRef.value?.reload({
            activityId: activityId.value,
            ...searchForm.value,
            drawTimeRange: undefined,
            drawTimeStart: drawTimeStartRaw
                ? new Date(drawTimeStartRaw).toISOString()
                : undefined,
            drawTimeEnd: drawTimeEndRaw
                ? new Date(drawTimeEndRaw).toISOString()
                : undefined
        });
    }

    // 加载统计数据
    const loadStats = () => {
        request
            .get('/activity/red/bag/detail/activity/redBag/detail/sum', {
                params: { activityId: activityId.value }
            })
            .then((res) => {
                if (res.data.code === 200) {
                    stats.value = res.data.data || {};
                }
            });
    };

    const open = (row) => {
        const id = row?.id ?? row?.activityId;
        if (!id) {
            ElMessage.error('活动ID缺失，无法查看数据');
            return;
        }
        activityId.value = id;
        resetSearch();
        loadStats();
        visible.value = true;
    };

    // 分享信息相关
    const shareDialogVisible = ref(false);
    const currentRedId = ref(null);

    const handleShareDetail = (row) => {
        currentRedId.value = row.id;
        shareDialogVisible.value = true;
    };

    defineExpose({
        open
    });
</script>

<style lang="scss" scoped>
    .red-bag-detail {
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;

            .stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 110px;
                flex: 0 0 auto;

                .stat-label {
                    font-size: 13px;
                    color: #666;
                    margin-bottom: 10px;
                    text-align: center;
                    line-height: 1.4;
                    min-height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .stat-value {
                    font-size: 26px;
                    font-weight: bold;
                    color: #409eff;
                    line-height: 1.2;
                }
            }
        }

        // 表格样式优化
        :deep(.ele-pro-table) {
            .el-table .cell.el-tooltip {
                width: 200px;
                white-space: nowrap;
            }
        }
    }
</style>