<template>
|
<div class="coupon-management">
|
<!-- 搜索区域 -->
|
<Card class="filter-container">
|
<div class="filter-header">
|
<Icon type="ios-search" size="18" />
|
<span class="filter-title">筛选搜索</span>
|
<div class="filter-actions">
|
<Button type="primary" @click="getList" size="small">查询搜索</Button>
|
<Button @click="handleResetSearch" size="small" style="margin-left: 10px;">重置</Button>
|
</div>
|
</div>
|
<div class="filter-content">
|
<Form
|
:model="listQuery"
|
:label-width="90"
|
class="search-form"
|
inline
|
>
|
<FormItem label="店铺">
|
<Select
|
v-model="listQuery.storeId"
|
placeholder="请选择"
|
clearable
|
style="width: 160px"
|
filterable
|
>
|
<Option
|
v-for="store in storeSelectList"
|
:key="store.id"
|
:label="store.label"
|
:value="store.id"
|
>
|
{{ store.label }}
|
</Option>
|
</Select>
|
</FormItem>
|
<FormItem label="生成状态:">
|
<Select
|
v-model="listQuery.generateStatus"
|
placeholder="全部状态"
|
clearable
|
style="width: 180px"
|
>
|
<Option value="NOT_GENERATE">没有生成</Option>
|
<Option value="GENERATE">生成</Option>
|
</Select>
|
</FormItem>
|
<FormItem label="启用状态:">
|
<Select
|
v-model="listQuery.status"
|
placeholder="全部状态"
|
clearable
|
style="width: 180px"
|
>
|
<Option value="ENABLE">启用</Option>
|
<Option value="DISABLE">禁用</Option>
|
</Select>
|
</FormItem>
|
</Form>
|
</div>
|
</Card>
|
|
<!-- 操作按钮区域 -->
|
<div class="operation-container">
|
<Button
|
@click="handleAdd"
|
type="primary"
|
icon="md-add"
|
class="add-btn"
|
>新增</Button>
|
</div>
|
|
<!-- 表格区域 -->
|
<Card class="table-container">
|
<Table
|
:loading="listLoading"
|
border
|
:columns="tableColumns"
|
:data="list"
|
ref="table"
|
class="coupon-table"
|
>
|
<!-- 生成状态列 -->
|
<template slot-scope="{ row }" slot="generateStatus">
|
<Tag :color="getStatusColor(row.generateStatus)">
|
{{ formatGenerateStatus(row.generateStatus) }}
|
</Tag>
|
</template>
|
|
<!-- 启用状态列 -->
|
<template slot-scope="{ row }" slot="status">
|
<i-switch
|
v-model="row.status"
|
true-value="ENABLE"
|
false-value="DISABLE"
|
@on-change="(status) => handleStatusChange(row, status)"
|
>
|
<span slot="open">启用</span>
|
<span slot="close">禁用</span>
|
</i-switch>
|
</template>
|
|
<template slot-scope="{ row }" slot="action">
|
<Button
|
@click="generalStorePrize(row)"
|
type="primary"
|
class="add-btn"
|
v-if="row.generateStatus ==='NOT_GENERATE'"
|
>生成优惠卷</Button>
|
|
<Button
|
@click="detail(row)"
|
style="margin-left: 10px;"
|
type="primary"
|
class="add-btn"
|
:disabled="row.generateStatus === 'NOT_GENERATE'"
|
>查看</Button>
|
</template>
|
</Table>
|
</Card>
|
|
<!-- 分页区域 -->
|
<div class="pagination-container">
|
<Page
|
:current="listQuery.pageNumber"
|
:page-size="listQuery.pageSize"
|
:total="total"
|
:page-size-opts="[10, 20, 30, 50]"
|
show-elevator
|
show-sizer
|
show-total
|
@on-change="handleCurrentChange"
|
@on-page-size-change="handleSizeChange"
|
/>
|
</div>
|
<Modal
|
v-model="showGeneralQrCode"
|
title="二维码"
|
width="800"
|
:mask-closable="false"
|
:loading="codeLoading"
|
>
|
<vue-qr
|
:text="QRCodeUrl"
|
:margin="0"
|
colorDark="#000"
|
colorLight="#fff"
|
:size="150"
|
></vue-qr>
|
<div slot="footer">
|
<Button type="text" @click="closeGeneralQrCode">关闭</Button>
|
<!-- <Button type="primary" @click="generalQrCode">确认</Button>-->
|
</div>
|
</Modal>
|
|
<Modal
|
v-model="showPrizeClaim"
|
width="1200"
|
:mask-closable="false"
|
@on-cancel="handleCancelCouponStore"
|
>
|
<Table
|
:loading="showPrizeClaimLoading"
|
border
|
:columns="prizeClaimColumns"
|
:data="prizeClaimData"
|
ref="table"
|
>
|
<template slot-scope="{ row }" slot="action">
|
<Button
|
@click="lookSupplementaryMaterials(row)"
|
type="primary"
|
class="add-btn"
|
:disabled="row.material === 'NOT_GENERATE'"
|
>查看材料</Button>
|
<Button
|
style="margin-left: 20px"
|
@click="generalQrCode(row)"
|
type="primary"
|
class="add-btn"
|
v-if="row.claimStatus === 'NOT_CLAIM'"
|
>查看二维码</Button>
|
</template>
|
</Table>
|
<Row type="flex" justify="center" class="mt_10">
|
<Page
|
:current="prizeClaimQuery.pageNumber"
|
:total="prizeClaimTotal"
|
:page-size="prizeClaimQuery.pageSize"
|
@on-change="prizeCliamChangePage"
|
@on-page-size-change="prizeCliamChangePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
</Modal>
|
|
|
|
<!-- 添加/编辑弹窗 -->
|
<Modal
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
width="1200"
|
:mask-closable="false"
|
@on-cancel="handleCancel"
|
>
|
<Form
|
ref="dataForm"
|
:model="temp"
|
:label-width="100"
|
:rules="formRules"
|
>
|
<Form-item label="店铺" prop="storeId">
|
<Select
|
v-model="temp.storeId"
|
placeholder="请选择"
|
clearable
|
style="width: 160px"
|
filterable
|
@on-change="handleStoreChange"
|
>
|
<Option
|
v-for="store in storeSelectList"
|
:key="store.id"
|
:label="store.label"
|
:value="store.id"
|
>
|
{{ store.label }}
|
</Option>
|
</Select>
|
</Form-item>
|
<FormItem label="已选抽奖活动" prop="couponId" style="margin-bottom: 20px">
|
<Input :disabled="true" style="width: 30%;margin-bottom: 20px" v-model="showActivityPrize" placeholder="请点击选择表格内抽奖活动"></Input>
|
|
</FormItem>
|
<Table
|
:loading="activityPrizeLoading"
|
border
|
:columns="activityPrizeColumns"
|
:data="activityPrizeData"
|
ref="table"
|
@on-current-change="handleRowClick"
|
highlight-row
|
></Table>
|
<Row type="flex" justify="center" class="mt_10">
|
<Page
|
:current="activityPrizeSearchForm.pageNumber"
|
:total="activityPrizeTotal"
|
:page-size="activityPrizeSearchForm.pageSize"
|
@on-change="activityPrizeChangePage"
|
@on-page-size-change="activityPrizeChangePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
<FormItem label="生成数量" prop="couponNum">
|
<InputNumber
|
v-model="temp.generateNum"
|
:min="1"
|
:max="99999"
|
placeholder="请输入生成数量"
|
style="width: 100%"
|
></InputNumber>
|
</FormItem>
|
|
</Form>
|
<div slot="footer">
|
<Button @click="dialogVisible = false">取消</Button>
|
<Button type="primary" @click="handleSubmit" :loading="submitLoading">确定</Button>
|
</div>
|
</Modal>
|
<Modal
|
v-model="dialogVisible2"
|
title="材料详情"
|
width="1200"
|
:mask-closable="false"
|
@on-cancel="handleCancel2">
|
<Row :gutter="16">
|
<Col span="12">
|
<div class="detail-item">
|
<label>文本内容：</label>
|
<span>{{ detailData.content }}</span>
|
</div>
|
</Col>
|
<Col span="24">
|
<div class="detail-item">
|
<label>文件：</label>
|
<div v-if="detailData.urlPath" class="detail-image">
|
<img
|
:src="detailData.urlPath" alt="奖品封面"
|
class="preview-image-limit"
|
>
|
</div>
|
</div>
|
</Col>
|
|
</Row>
|
</Modal>
|
|
|
</div>
|
</template>
|
|
<script>
|
import vueQr from "vue-qr";
|
import { getPage,add,changeStatus,generateStorePrize,getClaimPage ,getDetailData} from "@/api/prize-store.js"
|
import * as API_Activity_Prize from "@/api/activity-prize.js"
|
|
import * as API_Order from "@/api/order";
|
import {promotionsScopeTypeRender, promotionsStatusRender} from "../../utils/promotions";
|
export default {
|
components:{
|
"vue-qr": vueQr,
|
},
|
name: 'CouponManagement',
|
data() {
|
return {
|
detailData:{},
|
QRCodeUrl:"",
|
showGeneralQrCode:false,
|
codeLoading:false,
|
|
codeUrl: this.QRcodeBaseUrl+ '/scanpage/prize',
|
|
showPrizeClaim:false,
|
prizeClaimTotal:0,
|
prizeClaimData:[],
|
showPrizeClaimLoading:false,
|
prizeClaimColumns: [
|
{
|
title: "活动名",
|
key: "prizeActivityName",
|
width: 200,
|
align: "center",
|
tooltip: true
|
},
|
{
|
title: "编号",
|
key: "no",
|
width: 200,
|
align: "center",
|
tooltip: true
|
},
|
{
|
title: "领取状态",
|
key: "claimStatus",
|
width: 200,
|
align: "center",
|
tooltip: true,
|
render: (h, params) => {
|
const status = params.row.claimStatus;
|
const color = status === 'CLAIM' ? 'success' : status === 'NOT_CLAIM' ? 'default' : 'warning';
|
const text = status === 'CLAIM' ? '已领取' : status === 'NOT_CLAIM' ? '未领取' : '未知';
|
|
return h('Tag', {
|
props: {
|
color: color
|
}
|
}, text);
|
}
|
},
|
{
|
title: "操作",
|
slot: "action",
|
align: "center",
|
width: 400,
|
fixed: "right"
|
}
|
],
|
activityPrizeSearchForm:{
|
pageSize:10,
|
pageNumber:1,
|
activityName:'',
|
endTime:'',
|
beginTime:'',
|
enableStatus:'ON',
|
popup:true
|
},
|
storeSelectList:[],
|
showActivityPrize:'',
|
selectedRowId:'',
|
activityPrizeTotal:0,
|
activityPrizeData:[],
|
activityPrizeLoading:false,
|
activityPrizeColumns:[
|
{
|
title: '活动名称',
|
key: 'activityName',
|
minWidth: 100,
|
},
|
{
|
title: '活动描述',
|
key: 'activityDes',
|
minWidth: 100,
|
},
|
{
|
title: '开始时间',
|
key: 'beginTime',
|
minWidth: 100,
|
render: (h, params) => {
|
return h('div', [
|
h('div', this.formatDate(params.row.beginTime)),
|
])
|
}
|
},
|
{
|
title: '结束时间',
|
key: 'endTime',
|
minWidth: 100,
|
render: (h, params) => {
|
return h('div', [
|
h('div', this.formatDate(params.row.endTime)),
|
])
|
}
|
},
|
{
|
title: '每日最大抽奖上限',
|
key: 'maxPrize',
|
minWidth: 100,
|
},
|
{
|
title: '初始化抽奖次数',
|
key: 'prizeNum',
|
minWidth: 100,
|
},
|
{
|
title: '是否开启活动',
|
key: 'enableStatus',
|
minWidth: 100,
|
render: (h, params) => {
|
return h('Tag', {
|
props: {
|
color: params.row.enableStatus === 'ON' ? 'green' : 'default'
|
}
|
}, params.row.enableStatus === 'ON' ? '开启' : '关闭')
|
}
|
},
|
],
|
list: [],
|
total: 0,
|
listLoading: false,
|
submitLoading: false,
|
prizeClaimQuery:{
|
pageNumber: 1,
|
pageSize: 10,
|
storePrizeId:""
|
},
|
|
listQuery: {
|
pageNumber: 1,
|
pageSize: 10,
|
storeId: "",
|
generateStatus: "",
|
status: ""
|
},
|
temp: {
|
storeId: '',
|
storeName: '',
|
prizeActivityId: '',
|
generateNum: 1,
|
prizeActivityName: '',
|
},
|
dialogVisible: false,
|
dialogStatus: '',
|
dialogTitle: '',
|
dialogVisible2: false,
|
|
|
// 表单验证规则
|
formRules: {
|
storeId: [
|
{ required: true, message: '店铺不能为空', trigger: 'blur' }
|
],
|
storeName: [
|
{ required: true, message: '店铺名称不能为空', trigger: 'blur' }
|
],
|
prizeActivityId: [
|
{ required: true, message: '抽奖活动Id不能为空', trigger: 'blur' }
|
],
|
prizeActivityName: [
|
{ required: true, message: '抽奖活动名称不能为空', trigger: 'blur' }
|
],
|
generateNum: [
|
{ required: true, type: 'number', message: '生成数量不能为空', trigger: 'blur' }
|
],
|
},
|
|
// 表头配置
|
tableColumns: [
|
{
|
type: 'selection',
|
width: 60,
|
align: 'center'
|
},
|
{
|
title: '店铺名称',
|
key: 'storeName',
|
align: 'center',
|
ellipsis: true,
|
tooltip: true
|
},
|
{
|
title: '抽奖活动名称名称',
|
key: 'prizeActivityName',
|
align: 'center',
|
ellipsis: true,
|
tooltip: true
|
},
|
{
|
title: '生成数量',
|
key: 'generateNum',
|
width: 100,
|
align: 'center'
|
},
|
{
|
title: '已领取数量',
|
key: 'claimNum',
|
width: 120,
|
align: 'center'
|
},
|
{
|
title: '生成状态',
|
slot: 'generateStatus',
|
width: 120,
|
align: 'center'
|
},
|
{
|
title: '启用状态',
|
slot: 'status',
|
width: 120,
|
align: 'center'
|
},
|
{
|
title: '操作',
|
slot: 'action',
|
width: 200,
|
align: 'center'
|
},
|
]
|
}
|
},
|
methods: {
|
lookSupplementaryMaterials(row){
|
this.dialogVisible2 = true;
|
getDetailData(row.id).then(res =>{
|
if (res.code === 200){
|
this.detailData = res.data;
|
}
|
})
|
|
|
|
},
|
closeGeneralQrCode(){
|
this.showGeneralQrCode = false;
|
this.QRCodeUrl = '';
|
},
|
generalQrCode(row){
|
this.QRCodeUrl = '';
|
this.showGeneralQrCode = true
|
this.codeLoading = true;
|
|
this.QRCodeUrl = this.codeUrl + "?id="+ row.id;
|
|
},
|
detail(row){
|
this.showPrizeClaim = true;
|
this.prizeClaimQuery.storePrizeId = row.id
|
this.prizeClaimQuery.pageSize = 10
|
this.prizeClaimQuery.pageNumber = 1
|
this.getClaimPage();
|
},
|
generalStorePrize(row){
|
generateStorePrize(row.id).then(response => {
|
this.getList();
|
})
|
},
|
handleStoreChange(storeId) {
|
if (storeId) {
|
const selectedStore = this.storeSelectList.find(store => store.id === storeId);
|
if (selectedStore) {
|
this.temp.storeName = selectedStore.label;
|
}
|
} else {
|
this.temp.storeName = '';
|
}
|
console.log('当前选择:', this.temp.storeId, this.temp.storeName);
|
},
|
activityPrizeChangePage(v) {
|
// 改变页码
|
this.activityPrizeSearchForm.pageNumber = v;
|
this.getActivityPrizeDataList();
|
},
|
activityPrizeChangePageSize(v) {
|
// 改变页数
|
this.activityPrizeSearchForm.pageNumber = 1;
|
this.activityPrizeSearchForm.pageSize = v;
|
this.getActivityPrizeDataList();
|
},
|
|
prizeCliamChangePage(v) {
|
// 改变页码
|
this.prizeClaimQuery.pageNumber = v;
|
this.getClaimPage();
|
},
|
prizeCliamChangePageSize(v) {
|
// 改变页数
|
this.prizeClaimQuery.pageNumber = 1;
|
this.prizeClaimQuery.pageSize = v;
|
this.getClaimPage();
|
},
|
handleRowClick(currentRow ,oldCurrentRow){
|
console.log(currentRow)
|
this.temp.prizeActivityId = currentRow.id;
|
this.temp.prizeActivityName = currentRow.activityName;
|
this.showActivityPrize = currentRow.activityName;
|
|
console.log(this.temp.couponId)
|
},
|
|
getClaimPage(){
|
this.showPrizeClaimLoading = true;
|
getClaimPage(this.prizeClaimQuery).then((res) =>{
|
this.showPrizeClaimLoading =false;
|
if (res.code === 200){
|
this.prizeClaimData = res.data;
|
this.prizeClaimTotal = res.total;
|
}
|
})
|
|
},
|
getActivityPrizeDataList() {
|
// 获取数据
|
this.activityPrizeLoading = true;
|
API_Activity_Prize.getPage(this.activityPrizeSearchForm).then((res) => {
|
this.activityPrizeLoading = false;
|
if (res.code === 200) {
|
this.activityPrizeData = res.data;
|
this.activityPrizeTotal = res.total;
|
}
|
});
|
this.activityPrizeTotal = this.activityPrizeData.length;
|
this.activityPrizeLoading = false;
|
},
|
|
getStoreSelect(){
|
API_Order.getStoreSelect().then(res =>{
|
if (res.result){
|
this.storeSelectList = res.result;
|
}
|
})
|
},
|
// 获取列表数据
|
getList() {
|
this.listLoading = true;
|
getPage(this.listQuery).then(res =>{
|
this.listLoading = false;
|
this.list = res.data;
|
this.total = res.total;
|
})
|
},
|
|
// 重置搜索条件
|
handleResetSearch() {
|
this.listQuery = {
|
pageNumber: 1,
|
pageSize: 10,
|
storeName: "",
|
couponName: "",
|
generateStatus: "",
|
status: ""
|
};
|
this.getList();
|
},
|
|
// 分页大小改变
|
handleSizeChange(size) {
|
this.listQuery.pageSize = size;
|
this.listQuery.pageNumber = 1;
|
this.getList();
|
},
|
|
// 当前页码改变
|
handleCurrentChange(pageNumber) {
|
this.listQuery.pageNumber = pageNumber;
|
this.getList();
|
},
|
|
// 添加优惠券
|
handleAdd() {
|
this.dialogStatus = 'create';
|
this.dialogTitle = '添加商店赠送活动';
|
this.dialogVisible = true;
|
this.showActivityPrize="";
|
this.temp = {
|
storeId: '',
|
storeName: '',
|
couponId: '',
|
couponNum: 1,
|
couponName: '',
|
};
|
this.getActivityPrizeDataList();
|
|
this.$nextTick(() => {
|
this.$refs.dataForm.resetFields();
|
});
|
},
|
|
// 状态改变
|
handleStatusChange(row, status) {
|
const action = status === 'ENABLE' ? '启用' : '禁用';
|
changeStatus(row.id).then(response => {
|
this.getList();
|
this.$Message.success(`已${action}店铺活动赠送"${row.prizeActivityName}"`);
|
})
|
// 这里可以添加API调用
|
},
|
|
// 格式化生成状态
|
formatGenerateStatus(status) {
|
const statusMap = {
|
'NOT_GENERATE': '没有生成',
|
'GENERATE': '生成',
|
};
|
return statusMap[status] || '未知状态';
|
},
|
|
// 获取状态颜色
|
getStatusColor(status) {
|
const colorMap = {
|
'GENERATE': 'success',
|
'NOT_GENERATE': 'warning'
|
};
|
return colorMap[status] || 'default';
|
},
|
handleCancelCouponStore(){
|
this.showPrizeClaim = false;
|
},
|
// 弹窗取消
|
handleCancel() {
|
this.dialogVisible = false;
|
},
|
handleCancel2() {
|
this.dialogVisible2 = false;
|
},
|
|
// 提交表单
|
handleSubmit() {
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
let form = {...this.temp};
|
add(form).then(res=>{
|
if (res.code === 200 ){
|
this.$Message.success(res.msg)
|
}
|
this.dialogVisible = false;
|
this.getList();
|
})
|
|
}
|
});
|
},
|
formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
|
if (!date) return '';
|
|
const d = new Date(date);
|
if (isNaN(d.getTime())) return '';
|
|
const padZero = (num) => String(num).padStart(2, '0'); // 更可靠的补零方法
|
|
const year = d.getFullYear();
|
const month = padZero(d.getMonth() + 1); // 月份 0-11 → +1
|
const day = padZero(d.getDate());
|
const hours = padZero(d.getHours());
|
const minutes = padZero(d.getMinutes());
|
const seconds = padZero(d.getSeconds());
|
return format
|
.replace('YYYY', year)
|
.replace('MM', month)
|
.replace('DD', day)
|
.replace('HH', hours)
|
.replace('mm', minutes)
|
.replace('ss', seconds);
|
},
|
},
|
mounted() {
|
this.getStoreSelect();
|
this.getList();
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.coupon-management {
|
padding: 16px;
|
background: #f5f7f9;
|
min-height: 100vh;
|
}
|
|
.filter-container {
|
margin-bottom: 16px;
|
|
.filter-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16px;
|
|
.filter-title {
|
margin-left: 8px;
|
font-weight: 600;
|
font-size: 16px;
|
}
|
|
.filter-actions {
|
margin-left: auto;
|
}
|
}
|
|
.filter-content {
|
.search-form {
|
/deep/ .ivu-form-item {
|
margin-bottom: 16px;
|
margin-right: 16px;
|
}
|
}
|
}
|
}
|
|
.operation-container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
padding: 12px 16px;
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
.operation-info {
|
color: #999;
|
font-size: 14px;
|
}
|
}
|
|
.table-container {
|
margin-bottom: 16px;
|
|
.coupon-table {
|
/deep/ .ivu-table-cell {
|
padding: 8px 12px;
|
}
|
|
.action-btns {
|
display: flex;
|
justify-content: center;
|
|
button {
|
margin: 0 2px;
|
}
|
}
|
}
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
background: #fff;
|
padding: 12px 16px;
|
border-radius: 4px;
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
}
|
|
// 响应式调整
|
@media (max-width: 768px) {
|
.coupon-management {
|
padding: 8px;
|
}
|
|
.filter-content .search-form {
|
/deep/ .ivu-form-item {
|
width: 100%;
|
margin-right: 0;
|
|
.ivu-form-item-content {
|
width: 100%;
|
|
.ivu-input, .ivu-select {
|
width: 100% !important;
|
}
|
}
|
}
|
}
|
|
.operation-container {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.add-btn {
|
margin-bottom: 8px;
|
}
|
}
|
|
.action-btns {
|
flex-direction: column;
|
|
button {
|
margin: 2px 0 !important;
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
