<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="DISABLED">禁用</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="DISABLED"
|
@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="generalCoupon(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="showCouponStore"
|
width="1200"
|
:mask-closable="false"
|
@on-cancel="handleCancelCouponStore"
|
>
|
<Table
|
:loading="couponStoreLoading"
|
border
|
:columns="couponStoreColumns"
|
:data="couponStoreData"
|
ref="table"
|
>
|
<template slot-scope="{ row }" slot="action">
|
<Button
|
@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="storeCouponSingleQuery.pageNumber"
|
:total="couponStoreTotal"
|
:page-size="storeCouponSingleQuery.pageSize"
|
@on-change="couponStoreChangePage"
|
@on-page-size-change="couponStoreChangePageSize"
|
: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="showCoupon" placeholder="请点击选择表格内优惠劵"></Input>
|
|
</FormItem>
|
<Table
|
:loading="couponLoading"
|
border
|
:columns="couponColumns"
|
:data="couponData"
|
ref="table"
|
@on-current-change="handleRowClick"
|
highlight-row
|
></Table>
|
<Row type="flex" justify="center" class="mt_10">
|
<Page
|
:current="couponSearchForm.pageNumber"
|
:total="couponTotal"
|
:page-size="couponSearchForm.pageSize"
|
@on-change="couponChangePage"
|
@on-page-size-change="couponChangePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
<FormItem label="生成数量" prop="couponNum">
|
<InputNumber
|
v-model="temp.couponNum"
|
: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>
|
</div>
|
</template>
|
|
<script>
|
import vueQr from "vue-qr";
|
import {addStoreCoupon, getPage, getPageByStoreCoupon,changeStatus} from "../../../api/coupon-store";
|
import * as API_Order from "@/api/order";
|
import {promotionsScopeTypeRender, promotionsStatusRender} from "../../../utils/promotions";
|
import {getPlatformCouponList,generateStoreCoupon} from "../../../api/promotion";
|
export default {
|
components:{
|
"vue-qr": vueQr,
|
},
|
name: 'CouponManagement',
|
data() {
|
return {
|
QRCodeUrl:"",
|
showGeneralQrCode:false,
|
codeLoading:false,
|
|
codeUrl: this.QRcodeBaseUrl+ '/scanpage/couponStore',
|
|
showCouponStore:false,
|
couponStoreTotal:0,
|
couponStoreData:[],
|
couponStoreLoading:false,
|
couponStoreColumns: [
|
{
|
title: "优惠券名称",
|
key: "couponName",
|
width: 200,
|
align: "center",
|
tooltip: true
|
},
|
{
|
title: "优惠券编号",
|
key: "couponNo",
|
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: 200,
|
fixed: "right"
|
}
|
],
|
|
|
couponSearchForm: {
|
// 搜索框初始化对象
|
pageNumber: 1, // 当前页数
|
pageSize: 10, // 页面大小
|
sort: "create_time", // 默认排序字段
|
order: "desc", // 默认排序方式
|
getType: "", // 默认排序方式
|
promotionStatus:"START",
|
},
|
storeSelectList:[],
|
showCoupon:'',
|
selectedRowId:'',
|
couponTotal:0,
|
couponData:[],
|
couponLoading:false,
|
couponColumns: [
|
// 表头
|
{
|
title: "优惠券名称",
|
key: "couponName",
|
width: 180,
|
tooltip: true,
|
},
|
{
|
title: "面额/折扣",
|
key: "price",
|
width: 150,
|
render: (h, params) => {
|
if (params.row.price) {
|
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
|
|
} else {
|
return h("div", params.row.couponDiscount + "折");
|
}
|
},
|
},
|
|
{
|
title: "获取方式",
|
width: 120,
|
key: "getType",
|
render: (h, params) => {
|
if (params.row.getType === "FREE") {
|
return h("Tag", { props: { color: "red" } }, "免费获取");
|
} else if (params.row.getType === "ACTIVITY") {
|
return h("Tag", { props: { color: "volcano" } }, "活动获取");
|
} else if (params.row.getType === "INSIDE") {
|
return h("Tag", { props: { color: "lime" } }, "内购");
|
} else if (params.row.getType === "IGAME") {
|
return h("Tag", { props: { color: "lime" } }, "游戏人生");
|
} else {
|
return h("Tag", { props: { color: "purple" } }, "未知");
|
}
|
},
|
},
|
{
|
title: "优惠券类型",
|
key: "couponType",
|
width: 150,
|
render: (h, params) => {
|
let text = "";
|
if (params.row.couponType === "DISCOUNT") {
|
return h("Tag", { props: { color: "blue" } }, "打折");
|
} else if (params.row.couponType === "PRICE") {
|
return h("Tag", { props: { color: "geekblue" } }, "减免现金");
|
} else {
|
return h("Tag", { props: { color: "purple" } }, "未知");
|
}
|
},
|
},
|
{
|
title: "品类描述",
|
key: "scopeType",
|
width: 120,
|
render: (h, params) => {
|
return promotionsScopeTypeRender(h, params);
|
},
|
},
|
{
|
title: "活动时间",
|
render: (h, params) => {
|
if (
|
params?.row?.getType === "ACTIVITY" &&
|
params?.row?.rangeDayType === "DYNAMICTIME"
|
) {
|
return h("div", "长期有效");
|
} else if (params?.row?.startTime && params?.row?.endTime) {
|
return h("div", {
|
domProps: {
|
innerHTML:
|
params.row.startTime + "<br/>" + params.row.endTime,
|
},
|
});
|
}
|
},
|
},
|
{
|
title: "状态",
|
width: 100,
|
key: "promotionStatus",
|
align: "center",
|
fixed: "right",
|
render: (h, params) => {
|
return promotionsStatusRender(h, params);
|
},
|
},
|
],
|
|
list: [],
|
total: 0,
|
listLoading: false,
|
submitLoading: false,
|
storeCouponSingleQuery:{
|
pageNumber: 1,
|
pageSize: 10,
|
refId:""
|
},
|
|
listQuery: {
|
pageNumber: 1,
|
pageSize: 10,
|
storeId: "",
|
generateStatus: "",
|
status: ""
|
},
|
temp: {
|
storeId: '',
|
storeName: '',
|
couponId: '',
|
couponNum: 1,
|
couponName: '',
|
},
|
dialogVisible: false,
|
dialogStatus: '',
|
dialogTitle: '',
|
|
// 表单验证规则
|
formRules: {
|
storeId: [
|
{ required: true, message: '店铺ID不能为空', trigger: 'blur' }
|
],
|
storeName: [
|
{ required: true, message: '店铺名称不能为空', trigger: 'blur' }
|
],
|
couponId: [
|
{ required: true, message: '优惠券ID不能为空', trigger: 'blur' }
|
],
|
couponName: [
|
{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }
|
],
|
couponNum: [
|
{ 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: 'couponName',
|
align: 'center',
|
ellipsis: true,
|
tooltip: true
|
},
|
{
|
title: '生成数量',
|
key: 'couponNum',
|
width: 100,
|
align: 'center'
|
},
|
{
|
title: '已领取数量',
|
key: 'couponClaimNum',
|
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: {
|
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){
|
console.log(row)
|
this.showCouponStore = true;
|
this.storeCouponSingleQuery.refId = row.id
|
this.storeCouponSingleQuery.pageSize = 10
|
this.storeCouponSingleQuery.pageNumber = 1
|
this.getCouponStoreDataList();
|
},
|
generalCoupon(row){
|
generateStoreCoupon(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);
|
},
|
couponChangePage(v) {
|
// 改变页码
|
this.couponSearchForm.pageNumber = v;
|
this.getCouponDataList();
|
},
|
couponChangePageSize(v) {
|
// 改变页数
|
this.couponSearchForm.pageNumber = 1;
|
this.couponSearchForm.pageSize = v;
|
this.getCouponDataList();
|
},
|
|
couponStoreChangePage(v) {
|
// 改变页码
|
this.storeCouponSingleQuery.pageNumber = v;
|
this.getCouponStoreDataList();
|
},
|
couponStoreChangePageSize(v) {
|
// 改变页数
|
this.storeCouponSingleQuery.pageNumber = 1;
|
this.storeCouponSingleQuery.pageSize = v;
|
this.getCouponStoreDataList();
|
},
|
handleRowClick(currentRow ,oldCurrentRow){
|
this.temp.couponId = currentRow.id;
|
this.temp.couponName = currentRow.couponName;
|
this.showCoupon = currentRow.couponName;
|
|
console.log(this.temp.couponId)
|
},
|
|
getCouponStoreDataList(){
|
this.couponStoreLoading = true;
|
getPageByStoreCoupon(this.storeCouponSingleQuery).then((res) =>{
|
this.couponStoreLoading =false;
|
if (res.code === 200){
|
this.couponStoreData = res.data;
|
this.couponStoreTotal = res.total;
|
}
|
})
|
|
},
|
getCouponDataList() {
|
// 获取数据
|
this.couponLoading = true;
|
getPlatformCouponList(this.couponSearchForm).then((res) => {
|
this.couponLoading = false;
|
if (res.success) {
|
this.couponData = res.result.records;
|
this.couponTotal = res.result.total;
|
}
|
});
|
this.couponTotal = this.couponData.length;
|
this.couponLoading = false;
|
},
|
|
getStoreSelect(){
|
API_Order.getStoreSelect().then(res =>{
|
if (res.result){
|
this.storeSelectList = res.result;
|
}
|
})
|
},
|
// 获取列表数据
|
getList() {
|
this.listLoading = true;
|
// 模拟API调用
|
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.showCoupon="";
|
this.temp = {
|
storeId: '',
|
storeName: '',
|
couponId: '',
|
couponNum: 1,
|
couponName: '',
|
};
|
this.getCouponDataList();
|
|
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.couponName}"`);
|
})
|
// 这里可以添加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.showCouponStore = false;
|
},
|
// 弹窗取消
|
handleCancel() {
|
this.dialogVisible = false;
|
},
|
|
// 提交表单
|
handleSubmit() {
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
let form = {...this.temp};
|
addStoreCoupon(form).then(res=>{
|
if (res.code === 200 ){
|
this.$Message.success(res.msg)
|
}
|
this.dialogVisible = false;
|
this.getList();
|
})
|
|
}
|
});
|
}
|
},
|
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>
|
