|
@@ -1,6 +1,13 @@
|
|
|
<!-- 红包码详情列表 -->
|
|
<!-- 红包码详情列表 -->
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="red-bag-detail">
|
|
|
|
|
|
|
+ <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="stats-row">
|
|
|
<div class="stat-item">
|
|
<div class="stat-item">
|
|
@@ -47,47 +54,26 @@
|
|
|
|
|
|
|
|
<!-- 搜索栏 -->
|
|
<!-- 搜索栏 -->
|
|
|
<div style="display: flex; gap: 10px; align-items: center">
|
|
<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-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="0" />
|
|
|
<el-option label="已领取" :value="1" />
|
|
<el-option label="已领取" :value="1" />
|
|
|
</el-select>
|
|
</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" @click="reload()">查询</el-button>
|
|
|
- <el-button type="primary" plain @click="resetSearch"
|
|
|
|
|
- >重置</el-button
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-button type="primary" plain @click="resetSearch">重置</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 表格 -->
|
|
<!-- 表格 -->
|
|
|
- <common-table
|
|
|
|
|
- ref="pageRef"
|
|
|
|
|
- :pageConfig="pageConfig"
|
|
|
|
|
- :columns="columns"
|
|
|
|
|
- :tools="false"
|
|
|
|
|
- :body-style="{ padding: '0' }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
|
|
|
|
|
+ :body-style="{ padding: '0' }">
|
|
|
<template #redType="{ row }">
|
|
<template #redType="{ row }">
|
|
|
- <el-tag :type="row.redType === 1 ? 'success' : 'primary'">
|
|
|
|
|
- {{ row.redType === 1 ? '现金' : '无门槛' }}
|
|
|
|
|
|
|
+ <el-tag :type="row.redType === 1 ? 'success' : 'primary'" v-if="row.redType">
|
|
|
|
|
+ {{ redTypeMap[row.redType] }}
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -98,41 +84,37 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
|
- <el-button
|
|
|
|
|
- link
|
|
|
|
|
- type="primary"
|
|
|
|
|
- v-permission="'marketing:redBag:shareDetail'"
|
|
|
|
|
- @click="handleShareDetail(row)"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-button link type="primary" v-permission="'marketing:redBag:shareDetail'"
|
|
|
|
|
+ @click="handleShareDetail(row)">
|
|
|
[分享信息]
|
|
[分享信息]
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</template>
|
|
</template>
|
|
|
</common-table>
|
|
</common-table>
|
|
|
|
|
|
|
|
<!-- 分享信息弹窗 -->
|
|
<!-- 分享信息弹窗 -->
|
|
|
- <el-dialog
|
|
|
|
|
- v-model="shareDialogVisible"
|
|
|
|
|
- title="分享信息"
|
|
|
|
|
- width="800px"
|
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-dialog v-model="shareDialogVisible" title="分享信息" width="800px" :close-on-click-modal="false">
|
|
|
<red-bag-share :red-id="currentRedId" />
|
|
<red-bag-share :red-id="currentRedId" />
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
- import { ref, reactive, watch } from 'vue';
|
|
|
|
|
|
|
+ import { ref, reactive } from 'vue';
|
|
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
import CommonTable from '@/components/CommonPage/CommonTable.vue';
|
|
import CommonTable from '@/components/CommonPage/CommonTable.vue';
|
|
|
import RedBagShare from './red-bag-share.vue';
|
|
import RedBagShare from './red-bag-share.vue';
|
|
|
import request from '@/utils/request';
|
|
import request from '@/utils/request';
|
|
|
|
|
+ const visible = ref(false);
|
|
|
|
|
+ const activityId = ref();
|
|
|
|
|
+
|
|
|
|
|
+ // 红包类型映射
|
|
|
|
|
+ const redTypeMap = {
|
|
|
|
|
+ 0: '无门槛',
|
|
|
|
|
+ 1: '现金',
|
|
|
|
|
+ 2: '无门槛/现金'
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
- const props = defineProps({
|
|
|
|
|
- activityId: {
|
|
|
|
|
- type: Number,
|
|
|
|
|
- required: true
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
|
|
|
// 统计数据
|
|
// 统计数据
|
|
|
const stats = ref({});
|
|
const stats = ref({});
|
|
@@ -141,14 +123,16 @@
|
|
|
const searchForm = ref({
|
|
const searchForm = ref({
|
|
|
userName: '',
|
|
userName: '',
|
|
|
redType: undefined,
|
|
redType: undefined,
|
|
|
- drawStatus: undefined
|
|
|
|
|
|
|
+ drawStatus: undefined,
|
|
|
|
|
+ drawTimeRange: []
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const resetSearch = () => {
|
|
const resetSearch = () => {
|
|
|
searchForm.value = {
|
|
searchForm.value = {
|
|
|
userName: '',
|
|
userName: '',
|
|
|
redType: undefined,
|
|
redType: undefined,
|
|
|
- drawStatus: undefined
|
|
|
|
|
|
|
+ drawStatus: undefined,
|
|
|
|
|
+ drawTimeRange: []
|
|
|
};
|
|
};
|
|
|
reload();
|
|
reload();
|
|
|
};
|
|
};
|
|
@@ -239,9 +223,18 @@
|
|
|
|
|
|
|
|
// 刷新表格
|
|
// 刷新表格
|
|
|
function reload() {
|
|
function reload() {
|
|
|
|
|
+ const [drawTimeStartRaw, drawTimeEndRaw] =
|
|
|
|
|
+ searchForm.value.drawTimeRange || [];
|
|
|
pageRef.value?.reload({
|
|
pageRef.value?.reload({
|
|
|
- activityId: props.activityId,
|
|
|
|
|
- ...searchForm.value
|
|
|
|
|
|
|
+ activityId: activityId.value,
|
|
|
|
|
+ ...searchForm.value,
|
|
|
|
|
+ drawTimeRange: undefined,
|
|
|
|
|
+ drawTimeStart: drawTimeStartRaw
|
|
|
|
|
+ ? new Date(drawTimeStartRaw).toISOString()
|
|
|
|
|
+ : undefined,
|
|
|
|
|
+ drawTimeEnd: drawTimeEndRaw
|
|
|
|
|
+ ? new Date(drawTimeEndRaw).toISOString()
|
|
|
|
|
+ : undefined
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -249,7 +242,7 @@
|
|
|
const loadStats = () => {
|
|
const loadStats = () => {
|
|
|
request
|
|
request
|
|
|
.get('/activity/red/bag/detail/activity/redBag/detail/sum', {
|
|
.get('/activity/red/bag/detail/activity/redBag/detail/sum', {
|
|
|
- params: { activityId: props.activityId }
|
|
|
|
|
|
|
+ params: { activityId: activityId.value }
|
|
|
})
|
|
})
|
|
|
.then((res) => {
|
|
.then((res) => {
|
|
|
if (res.data.code === 200) {
|
|
if (res.data.code === 200) {
|
|
@@ -258,17 +251,17 @@
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // 监听 activityId 变化
|
|
|
|
|
- watch(
|
|
|
|
|
- () => props.activityId,
|
|
|
|
|
- (newVal) => {
|
|
|
|
|
- if (newVal) {
|
|
|
|
|
- loadStats();
|
|
|
|
|
- reload();
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- { immediate: true }
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ 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 shareDialogVisible = ref(false);
|
|
@@ -278,6 +271,10 @@
|
|
|
currentRedId.value = row.id;
|
|
currentRedId.value = row.id;
|
|
|
shareDialogVisible.value = true;
|
|
shareDialogVisible.value = true;
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+ defineExpose({
|
|
|
|
|
+ open
|
|
|
|
|
+ });
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|