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

<!-- 红包码详情列表 -->
<template>
    <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.userName" placeholder="用户名" style="width: 200px" clearable />
            <el-select v-model="searchForm.redType" placeholder="红包类型" clearable style="width: 150px">
                <el-option label="无门槛" :value="0" />
                <el-option label="现金" :value="1" />
            </el-select>
            <el-select v-model="searchForm.drawStatus" placeholder="领取状态" clearable style="width: 150px">
                <el-option label="未领取" :value="0" />
                <el-option label="已领取" :value="1" />
            </el-select>
            <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'">
                    {{ row.redType === 1 ? '现金' : '无门槛' }}
                </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>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import RedBagShare from './red-bag-share.vue';
import request from '@/utils/request';

const props = defineProps({
    activityId: {
        type: Number,
        required: true
    }
});

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

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

const resetSearch = () => {
    searchForm.value = {
        userName: '',
        redType: undefined,
        drawStatus: undefined
    };
    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() {
    pageRef.value?.reload({
        activityId: props.activityId,
        ...searchForm.value
    });
}

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

// 监听 activityId 变化
watch(
    () => props.activityId,
    (newVal) => {
        if (newVal) {
            loadStats();
            reload();
        }
    },
    { immediate: true }
);

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

const handleShareDetail = (row) => {
    currentRedId.value = row.id;
    shareDialogVisible.value = true;
};
</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>