promotion:实现部分优惠劵模板的前端列表

This commit is contained in:
YunaiV
2022-11-01 22:31:07 +08:00
parent 3c10058dbd
commit dc51a93533
7 changed files with 103 additions and 102 deletions

View File

@ -236,3 +236,31 @@ export const ProductSpuStatusEnum = {
name: '上架'
},
}
/**
* 优惠类型枚举
*/
export const PromotionDiscountTypeEnum = {
PRICE: {
type: 1,
name: '满减'
},
PERCENT: {
type: 2,
name: '折扣'
}
}
/**
* 优惠劵模板的有限期类型的枚举
*/
export const CouponTemplateValidityTypeEnum = {
DATE: {
type: 1,
name: '固定日期可用'
},
TERM: {
type: 2,
name: '领取之后可用'
}
}

View File

@ -59,6 +59,9 @@ export const DICT_TYPE = {
// ========== MALL - PRODUCT 模块 ==========
PRODUCT_SPU_STATUS: 'product_spu_status', // 商品 SPU 状态
// ========== MALL - PROMOTION 模块 ==========
PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
}
/**

View File

@ -2,25 +2,19 @@
<div class="app-container">
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="优惠劵名" prop="name">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="82px">
<el-form-item label="优惠券名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入优惠劵名" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-form-item label="优惠券类型" prop="discountType">
<el-select v-model="queryParams.discountType" placeholder="请选择优惠券类型" clearable size="small">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="类型
*
* 1-优惠劵
* 2-优惠码" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型
*
* 1-优惠劵
* 2-优惠码" clearable size="small">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCT_SPU_STATUS)"
<el-form-item label="优惠券状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择优惠券状态" clearable size="small">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
@ -48,45 +42,24 @@
<el-table-column label="优惠券名称" align="center" prop="name" />
<el-table-column label="优惠券类型" align="center" prop="discountType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.type" />
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
</template>
</el-table-column>
<el-table-column label="发行总量" align="center" prop="totalCount" />
<el-table-column label="每人限领个数
*
* null - 则表示不限制" align="center" prop="takeLimitCount" />
<el-table-column label="领取方式" align="center" prop="takeType" />
<el-table-column label="是否设置满多少金额可用,单位:分" align="center" prop="usePrice" />
<el-table-column label="商品范围" align="center" prop="productScope" />
<el-table-column label="商品 SPU 编号的数组" align="center" prop="productSpuIds" />
<el-table-column label="生效日期类型" align="center" prop="validityType" />
<el-table-column label="固定日期-生效开始时间" align="center" prop="validStartTime" width="180">
<el-table-column label="优惠金额 / 折扣" align="center" prop="discount" :formatter="discountFormat" />
<el-table-column label="发放数量" align="center" prop="totalCount" />
<el-table-column label="剩余数量" align="center" prop="totalCount" :formatter="row => (row.totalCount - row.takeCount)" />
<el-table-column label="领取上限" align="center" prop="takeLimitCount" :formatter="takeLimitCountFormat" />
<el-table-column label="有效期限" align="center" prop="validityType" width="180" :formatter="validityTypeFormat" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.validStartTime) }}</span>
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="固定日期-生效结束时间" align="center" prop="validEndTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.validEndTime) }}</span>
</template>
</el-table-column>
<el-table-column label="领取日期-开始天数" align="center" prop="fixedStartTerm" />
<el-table-column label="领取日期-结束天数" align="center" prop="fixedEndTerm" />
<el-table-column label="折扣百分比" align="center" prop="discountPercent" />
<el-table-column label="优惠金额,单位:分" align="center" prop="discountPrice" />
<el-table-column label="折扣上限" />
<el-table-column label="领取优惠券的数量" align="center" prop="takeNum" />
<el-table-column label="使用优惠券的次数" align="center" prop="useCount" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="优惠券类型" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
@ -185,7 +158,8 @@
</template>
<script>
import { createCouponTemplate, updateCouponTemplate, deleteCouponTemplate, getCouponTemplate, getCouponTemplatePage, exportCouponTemplateExcel } from "@/api/promotion/couponTemplate";
import { createCouponTemplate, updateCouponTemplate, deleteCouponTemplate, getCouponTemplate, getCouponTemplatePage } from "@/api/promotion/couponTemplate";
import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/utils/constants";
export default {
name: "CouponTemplate",
@ -340,6 +314,33 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
// 格式化【优惠金额/折扣】
discountFormat(row, column) {
if (row.discountType === PromotionDiscountTypeEnum.PRICE.type) {
return `${(row.discountPrice / 100.0).toFixed(2)}`;
}
if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return `${(row.discountPrice / 100.0).toFixed(2)}`;
}
return '未知【' + row.discountType + '】';
},
// 格式化【领取上限】
takeLimitCountFormat(row, column) {
if (row.takeLimitCount === -1) {
return '无领取限制';
}
return `${row.takeLimitCount} 张/人`
},
// 格式化【有效期限】
validityTypeFormat(row, column) {
if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
return `${parseTime(row.validStartTime)}${parseTime(row.validEndTime)}`
}
if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
}
return '未知【' + row.validityType + '】';
}
}
};
</script>