mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 09:11:52 +08:00
promotion：实现部分优惠劵模板的前端表单 80%
This commit is contained in:
YunaiV
parent
dc51a93533
commit
2aaeb7af88
@ -15,8 +15,8 @@ import java.util.Arrays;
|
||||
@Getter
|
||||
public enum CouponTemplateValidityTypeEnum implements IntArrayValuable {
|
||||
|
||||
DATE(1, "固定日期可用"),
|
||||
TERM(2, "领取之后可用"),
|
||||
DATE(1, "固定日期"),
|
||||
TERM(2, "领取之后"),
|
||||
;
|
||||
|
||||
public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(CouponTemplateValidityTypeEnum::getType).toArray();
|
||||
|
||||
@ -264,3 +264,17 @@ export const CouponTemplateValidityTypeEnum = {
|
||||
name: '领取之后可用'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 营销的商品范围枚举
|
||||
*/
|
||||
export const PromotionProductScopeEnum = {
|
||||
ALL: {
|
||||
scope: 1,
|
||||
name: '全部商品参与'
|
||||
},
|
||||
SPU: {
|
||||
scope: 2,
|
||||
name: '指定商品参与'
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,6 +62,8 @@ export const DICT_TYPE = {
|
||||
|
||||
// ========== MALL - PROMOTION 模块 ==========
|
||||
PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
|
||||
PROMOTION_PRODUCT_SCOPE: 'promotion_product_scope', // 营销的商品范围
|
||||
COUPON_TEMPLATE_VALIDITY_TYPE: 'coupon_template_validity_type', // 优惠劵模板的有限期类型
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -74,80 +74,72 @@
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="优惠劵名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入优惠劵名" />
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
||||
<el-form-item label="优惠券名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入优惠券名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
<el-form-item label="优惠券类型" prop="discountType">
|
||||
<el-radio-group v-model="form.discountType">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择类型">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCT_SPU_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
|
||||
</el-select>
|
||||
<el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PRICE.type" label="优惠券面额" prop="discountPrice">
|
||||
<el-input-number v-model="form.discountPrice" placeholder="请输入优惠金额，单位：元"
|
||||
style="width: 400px" :precision="2" :min="0" /> 元
|
||||
</el-form-item>
|
||||
<el-form-item label="发行总量" prop="totalCount">
|
||||
<el-input v-model="form.totalCount" placeholder="请输入发行总量" />
|
||||
<el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="优惠券折扣" prop="discountPercent">
|
||||
<el-input-number v-model="form.discountPercent" placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
|
||||
style="width: 400px" :precision="1" :min="1" :max="9.9" /> 折
|
||||
</el-form-item>
|
||||
<el-form-item label="每人限领个数" prop="takeLimitCount">
|
||||
<el-input v-model="form.takeLimitCount" placeholder="请输入每人限领个数" />
|
||||
<el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="最多优惠" prop="discountLimitPrice">
|
||||
<el-input-number v-model="form.discountLimitPrice" placeholder="请输入最多优惠"
|
||||
style="width: 400px" :precision="2" :min="0" /> 元
|
||||
</el-form-item>
|
||||
<el-form-item label="满多少元可以使用" prop="usePrice">
|
||||
<el-input-number v-model="form.usePrice" placeholder="无门槛请设为 0"
|
||||
style="width: 400px" :precision="2" :min="0" /> 元
|
||||
</el-form-item>
|
||||
<el-form-item label="领取方式" prop="takeType">
|
||||
<el-select v-model="form.takeType" placeholder="请选择领取方式">
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
<el-radio-group v-model="form.takeType">
|
||||
<el-radio :key="1" :label="1">直接领取</el-radio>
|
||||
<el-radio :key="2" :label="2">指定发放</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否设置满多少金额可用，单位：分" prop="usePrice">
|
||||
<el-input v-model="form.usePrice" placeholder="请输入是否设置满多少金额可用，单位：分" />
|
||||
<el-form-item v-if="form.takeType === 1" label="发放数量" prop="totalCount">
|
||||
<el-input-number v-model="form.usePrice" placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
|
||||
style="width: 400px" :precision="0" :min="-1" /> 张
|
||||
</el-form-item>
|
||||
<el-form-item label="商品范围" prop="productScope">
|
||||
<el-input v-model="form.productScope" placeholder="请输入商品范围" />
|
||||
<el-form-item v-if="form.takeType === 1" label="每人限领个数" prop="takeLimitCount">
|
||||
<el-input-number v-model="form.takeLimitCount" placeholder="设置为 -1 时，可无限领取"
|
||||
style="width: 400px" :precision="0" :min="-1" /> 张
|
||||
</el-form-item>
|
||||
<el-form-item label="商品 SPU 编号的数组" prop="productSpuIds">
|
||||
<el-form-item label="有效期类型" prop="validityType">
|
||||
<el-radio-group v-model="form.validityType">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COUPON_TEMPLATE_VALIDITY_TYPE)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.DATE.type" label="固定日期" prop="validTimes">
|
||||
<el-date-picker v-model="queryParams.validTimes" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.TERM.type" label="领取日期" prop="fixedStartTerm">
|
||||
第 <el-input-number v-model="form.fixedStartTerm" placeholder="0 为今天生效"
|
||||
style="width: 165px" :precision="0" :min="0"/> 至
|
||||
<el-input-number v-model="form.fixedEndTerm" placeholder="请输入结束天数"
|
||||
style="width: 165px" :precision="0" :min="0"/> 天有效
|
||||
</el-form-item>
|
||||
<el-form-item label="活动商品" prop="productScope">
|
||||
<el-radio-group v-model="form.productScope">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.productScope === PromotionProductScopeEnum.SPU.scope" prop="productSpuIds">
|
||||
<el-input v-model="form.productSpuIds" placeholder="请输入商品 SPU 编号的数组" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生效日期类型" prop="validityType">
|
||||
<el-select v-model="form.validityType" placeholder="请选择生效日期类型">
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="固定日期-生效开始时间" prop="validStartTime">
|
||||
<el-date-picker clearable v-model="form.validStartTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效开始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="固定日期-生效结束时间" prop="validEndTime">
|
||||
<el-date-picker clearable v-model="form.validEndTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领取日期-开始天数" prop="fixedStartTerm">
|
||||
<el-input v-model="form.fixedStartTerm" placeholder="请输入领取日期-开始天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领取日期-结束天数" prop="fixedEndTerm">
|
||||
<el-input v-model="form.fixedEndTerm" placeholder="请输入领取日期-结束天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠类型" prop="discountType">
|
||||
<el-select v-model="form.discountType" placeholder="请选择优惠类型">
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="折扣百分比" prop="discountPercent">
|
||||
<el-input v-model="form.discountPercent" placeholder="请输入折扣百分比" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠金额，单位：分" prop="discountPrice">
|
||||
<el-input v-model="form.discountPrice" placeholder="请输入优惠金额，单位：分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="折扣上限" prop="discountPriceLimit">
|
||||
<el-input v-model="form.discountPriceLimit" placeholder="请输入折扣上限，仅在 {@link #preferentialType} 等于 2 时生效" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领取优惠券的数量" prop="takeNum">
|
||||
<el-input v-model="form.takeNum" placeholder="请输入领取优惠券的数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用优惠券的次数" prop="useCount">
|
||||
<el-input v-model="form.useCount" placeholder="请输入使用优惠券的次数" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
@ -159,7 +151,7 @@
|
||||
|
||||
<script>
|
||||
import { createCouponTemplate, updateCouponTemplate, deleteCouponTemplate, getCouponTemplate, getCouponTemplatePage } from "@/api/promotion/couponTemplate";
|
||||
import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/utils/constants";
|
||||
import { CommonStatusEnum, CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum, PromotionProductScopeEnum} from "@/utils/constants";
|
||||
|
||||
export default {
|
||||
name: "CouponTemplate",
|
||||
@ -175,7 +167,7 @@ export default {
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 优惠劵模板列表
|
||||
// 优惠劵列表
|
||||
list: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
@ -194,19 +186,26 @@ export default {
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "优惠劵名不能为空", trigger: "blur" }],
|
||||
status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
|
||||
type: [{ required: true, message: "类型", trigger: "change" }],
|
||||
totalCount: [{ required: true, message: "发行总量不能为空", trigger: "blur" }],
|
||||
takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "优惠券名称不能为空", trigger: "blur" }],
|
||||
discountType: [{ required: true, message: "优惠券类型不能为空", trigger: "change" }],
|
||||
discountPrice: [{ required: true, message: "优惠券面额不能为空", trigger: "blur" }],
|
||||
discountPercent: [{ required: true, message: "优惠券折扣不能为空", trigger: "blur" }],
|
||||
discountLimitPrice: [{ required: true, message: "最多优惠不能为空", trigger: "blur" }],
|
||||
usePrice: [{ required: true, message: "满多少元可以使用不能为空", trigger: "blur" }],
|
||||
takeType: [{ required: true, message: "领取方式不能为空", trigger: "change" }],
|
||||
usePrice: [{ required: true, message: "是否设置满多少金额可用，单位：分不能为空", trigger: "blur" }],
|
||||
totalCount: [{ required: true, message: "发放数量不能为空", trigger: "blur" }],
|
||||
takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
|
||||
validityType: [{ required: true, message: "有效期类型不能为空", trigger: "change" }],
|
||||
validTimes: [{ required: true, message: "固定日期不能为空", trigger: "change" }],
|
||||
fixedStartTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
|
||||
fixedEndTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
|
||||
productScope: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
|
||||
validityType: [{ required: true, message: "生效日期类型不能为空", trigger: "change" }],
|
||||
discountType: [{ required: true, message: "优惠类型不能为空", trigger: "change" }],
|
||||
takeNum: [{ required: true, message: "领取优惠券的数量不能为空", trigger: "blur" }],
|
||||
useCount: [{ required: true, message: "使用优惠券的次数不能为空", trigger: "blur" }],
|
||||
}
|
||||
productSpuIds: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
|
||||
},
|
||||
// 如下的变量，主要为了 v-if 判断可以使用到
|
||||
PromotionProductScopeEnum: PromotionProductScopeEnum,
|
||||
CouponTemplateValidityTypeEnum: CouponTemplateValidityTypeEnum,
|
||||
PromotionDiscountTypeEnum: PromotionDiscountTypeEnum,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -233,25 +232,22 @@ export default {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
type: undefined,
|
||||
discountType: PromotionDiscountTypeEnum.PRICE.type,
|
||||
discountPrice: 0,
|
||||
discountPercent: undefined,
|
||||
discountLimitPrice: undefined,
|
||||
usePrice: undefined,
|
||||
takeType: 1,
|
||||
totalCount: undefined,
|
||||
takeLimitCount: undefined,
|
||||
takeType: undefined,
|
||||
usePrice: undefined,
|
||||
productScope: undefined,
|
||||
productSpuIds: undefined,
|
||||
validityType: undefined,
|
||||
validityType: CouponTemplateValidityTypeEnum.DATE.type,
|
||||
validTimes: [],
|
||||
validStartTime: undefined,
|
||||
validEndTime: undefined,
|
||||
fixedStartTerm: undefined,
|
||||
fixedEndTerm: undefined,
|
||||
discountType: undefined,
|
||||
discountPercent: undefined,
|
||||
discountPrice: undefined,
|
||||
discountPriceLimit: undefined,
|
||||
takeNum: undefined,
|
||||
useCount: undefined,
|
||||
productScope: PromotionProductScopeEnum.ALL.scope,
|
||||
productSpuIds: [],
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -269,16 +265,21 @@ export default {
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加优惠劵模板";
|
||||
this.title = "添加优惠劵";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id;
|
||||
getCouponTemplate(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.form = {
|
||||
...response.data,
|
||||
discountPrice: response.data.discountPrice ? response.data.discountPrice / 100.0 : undefined,
|
||||
discountPercent: response.data.discountPercent ? response.data.discountPercent / 10.0 : undefined,
|
||||
usePrice: response.data.usePrice ? response.data.usePrice / 100.0 : undefined,
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "修改优惠劵模板";
|
||||
this.title = "修改优惠劵";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
@ -287,9 +288,16 @@ export default {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 金额相关字段的缩放
|
||||
let data = {
|
||||
...this.form,
|
||||
discountPrice: this.form.discountPrice ? this.form.discountPrice * 100 : undefined,
|
||||
discountPercent: this.form.discountPercent ? this.form.discountPercent * 10 : undefined,
|
||||
usePrice: this.form.usePrice ? this.form.usePrice * 100 : undefined,
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateCouponTemplate(this.form).then(response => {
|
||||
updateCouponTemplate(data).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -297,7 +305,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createCouponTemplate(this.form).then(response => {
|
||||
createCouponTemplate(data).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -307,7 +315,7 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除优惠劵模板编号为"' + id + '"的数据项?').then(function() {
|
||||
this.$modal.confirm('是否确认删除优惠劵编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteCouponTemplate(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user