BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 2aaeb7af885770326c46e0f417db42d4731de061

Authored by YunaiV
1 parent dc51a935

promotion：实现部分优惠劵模板的前端表单 80%

Inline Side-by-side
Showing 4 changed files with 116 additions and 92 deletions
yudao-module-mall/yudao-module-promotion-api/src/main/java/cn/iocoder/yudao/module/promotion/enums/coupon/CouponTemplateValidityTypeEnum.java
  View file @2aaeb7a
... ... @@ -15,8 +15,8 @@ import java.util.Arrays;
15 15 @Getter
16 16 public enum CouponTemplateValidityTypeEnum implements IntArrayValuable {
17 17  
18   - DATE(1, "固定日期可用"),
19   - TERM(2, "领取之后可用"),
  18 + DATE(1, "固定日期"),
  19 + TERM(2, "领取之后"),
20 20 ;
21 21  
22 22 public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(CouponTemplateValidityTypeEnum::getType).toArray();
... ...
yudao-ui-admin/src/utils/constants.js
  View file @2aaeb7a
... ... @@ -264,3 +264,17 @@ export const CouponTemplateValidityTypeEnum = {
264 264 name: '领取之后可用'
265 265 }
266 266 }
  267 +
  268 +/**
  269 + * 营销的商品范围枚举
  270 + */
  271 +export const PromotionProductScopeEnum = {
  272 + ALL: {
  273 + scope: 1,
  274 + name: '全部商品参与'
  275 + },
  276 + SPU: {
  277 + scope: 2,
  278 + name: '指定商品参与'
  279 + }
  280 +}
... ...
yudao-ui-admin/src/utils/dict.js
  View file @2aaeb7a
... ... @@ -62,6 +62,8 @@ export const DICT_TYPE = {
62 62  
63 63 // ========== MALL - PROMOTION 模块 ==========
64 64 PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
  65 + PROMOTION_PRODUCT_SCOPE: 'promotion_product_scope', // 营销的商品范围
  66 + COUPON_TEMPLATE_VALIDITY_TYPE: 'coupon_template_validity_type', // 优惠劵模板的有限期类型
65 67 }
66 68  
67 69 /**
... ...
yudao-ui-admin/src/views/promotion/couponTemplate/index.vue
  View file @2aaeb7a
... ... @@ -74,79 +74,71 @@
74 74 @pagination="getList"/>
75 75  
76 76 <!-- 对话框(添加 / 修改) -->
77   - <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
78   - <el-form ref="form" :model="form" :rules="rules" label-width="80px">
79   - <el-form-item label="优惠劵名" prop="name">
80   - <el-input v-model="form.name" placeholder="请输入优惠劵名" />
  77 + <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
  78 + <el-form ref="form" :model="form" :rules="rules" label-width="140px">
  79 + <el-form-item label="优惠券名称" prop="name">
  80 + <el-input v-model="form.name" placeholder="请输入优惠券名称" />
81 81 </el-form-item>
82   - <el-form-item label="状态" prop="status">
83   - <el-radio-group v-model="form.status">
84   - <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
  82 + <el-form-item label="优惠券类型" prop="discountType">
  83 + <el-radio-group v-model="form.discountType">
  84 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
85 85 :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
86 86 </el-radio-group>
87 87 </el-form-item>
88   - <el-form-item label="类型" prop="type">
89   - <el-select v-model="form.type" placeholder="请选择类型">
90   - <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCT_SPU_STATUS)"
91   - :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
92   - </el-select>
  88 + <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PRICE.type" label="优惠券面额" prop="discountPrice">
  89 + <el-input-number v-model="form.discountPrice" placeholder="请输入优惠金额，单位：元"
  90 + style="width: 400px" :precision="2" :min="0" /> 元
93 91 </el-form-item>
94   - <el-form-item label="发行总量" prop="totalCount">
95   - <el-input v-model="form.totalCount" placeholder="请输入发行总量" />
  92 + <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="优惠券折扣" prop="discountPercent">
  93 + <el-input-number v-model="form.discountPercent" placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
  94 + style="width: 400px" :precision="1" :min="1" :max="9.9" /> 折
96 95 </el-form-item>
97   - <el-form-item label="每人限领个数" prop="takeLimitCount">
98   - <el-input v-model="form.takeLimitCount" placeholder="请输入每人限领个数" />
  96 + <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="最多优惠" prop="discountLimitPrice">
  97 + <el-input-number v-model="form.discountLimitPrice" placeholder="请输入最多优惠"
  98 + style="width: 400px" :precision="2" :min="0" /> 元
99 99 </el-form-item>
100   - <el-form-item label="领取方式" prop="takeType">
101   - <el-select v-model="form.takeType" placeholder="请选择领取方式">
102   - <el-option label="请选择字典生成" value="" />
103   - </el-select>
104   - </el-form-item>
105   - <el-form-item label="是否设置满多少金额可用，单位：分" prop="usePrice">
106   - <el-input v-model="form.usePrice" placeholder="请输入是否设置满多少金额可用，单位：分" />
107   - </el-form-item>
108   - <el-form-item label="商品范围" prop="productScope">
109   - <el-input v-model="form.productScope" placeholder="请输入商品范围" />
110   - </el-form-item>
111   - <el-form-item label="商品 SPU 编号的数组" prop="productSpuIds">
112   - <el-input v-model="form.productSpuIds" placeholder="请输入商品 SPU 编号的数组" />
113   - </el-form-item>
114   - <el-form-item label="生效日期类型" prop="validityType">
115   - <el-select v-model="form.validityType" placeholder="请选择生效日期类型">
116   - <el-option label="请选择字典生成" value="" />
117   - </el-select>
118   - </el-form-item>
119   - <el-form-item label="固定日期-生效开始时间" prop="validStartTime">
120   - <el-date-picker clearable v-model="form.validStartTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效开始时间" />
  100 + <el-form-item label="满多少元可以使用" prop="usePrice">
  101 + <el-input-number v-model="form.usePrice" placeholder="无门槛请设为 0"
  102 + style="width: 400px" :precision="2" :min="0" /> 元
121 103 </el-form-item>
122   - <el-form-item label="固定日期-生效结束时间" prop="validEndTime">
123   - <el-date-picker clearable v-model="form.validEndTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效结束时间" />
124   - </el-form-item>
125   - <el-form-item label="领取日期-开始天数" prop="fixedStartTerm">
126   - <el-input v-model="form.fixedStartTerm" placeholder="请输入领取日期-开始天数" />
  104 + <el-form-item label="领取方式" prop="takeType">
  105 + <el-radio-group v-model="form.takeType">
  106 + <el-radio :key="1" :label="1">直接领取</el-radio>
  107 + <el-radio :key="2" :label="2">指定发放</el-radio>
  108 + </el-radio-group>
127 109 </el-form-item>
128   - <el-form-item label="领取日期-结束天数" prop="fixedEndTerm">
129   - <el-input v-model="form.fixedEndTerm" placeholder="请输入领取日期-结束天数" />
  110 + <el-form-item v-if="form.takeType === 1" label="发放数量" prop="totalCount">
  111 + <el-input-number v-model="form.usePrice" placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
  112 + style="width: 400px" :precision="0" :min="-1" /> 张
130 113 </el-form-item>
131   - <el-form-item label="优惠类型" prop="discountType">
132   - <el-select v-model="form.discountType" placeholder="请选择优惠类型">
133   - <el-option label="请选择字典生成" value="" />
134   - </el-select>
  114 + <el-form-item v-if="form.takeType === 1" label="每人限领个数" prop="takeLimitCount">
  115 + <el-input-number v-model="form.takeLimitCount" placeholder="设置为 -1 时，可无限领取"
  116 + style="width: 400px" :precision="0" :min="-1" /> 张
135 117 </el-form-item>
136   - <el-form-item label="折扣百分比" prop="discountPercent">
137   - <el-input v-model="form.discountPercent" placeholder="请输入折扣百分比" />
  118 + <el-form-item label="有效期类型" prop="validityType">
  119 + <el-radio-group v-model="form.validityType">
  120 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COUPON_TEMPLATE_VALIDITY_TYPE)"
  121 + :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
  122 + </el-radio-group>
138 123 </el-form-item>
139   - <el-form-item label="优惠金额，单位：分" prop="discountPrice">
140   - <el-input v-model="form.discountPrice" placeholder="请输入优惠金额，单位：分" />
  124 + <el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.DATE.type" label="固定日期" prop="validTimes">
  125 + <el-date-picker v-model="queryParams.validTimes" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
  126 + range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
141 127 </el-form-item>
142   - <el-form-item label="折扣上限" prop="discountPriceLimit">
143   - <el-input v-model="form.discountPriceLimit" placeholder="请输入折扣上限，仅在 {@link #preferentialType} 等于 2 时生效" />
  128 + <el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.TERM.type" label="领取日期" prop="fixedStartTerm">
  129 + 第 <el-input-number v-model="form.fixedStartTerm" placeholder="0 为今天生效"
  130 + style="width: 165px" :precision="0" :min="0"/> 至
  131 + <el-input-number v-model="form.fixedEndTerm" placeholder="请输入结束天数"
  132 + style="width: 165px" :precision="0" :min="0"/> 天有效
144 133 </el-form-item>
145   - <el-form-item label="领取优惠券的数量" prop="takeNum">
146   - <el-input v-model="form.takeNum" placeholder="请输入领取优惠券的数量" />
  134 + <el-form-item label="活动商品" prop="productScope">
  135 + <el-radio-group v-model="form.productScope">
  136 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
  137 + :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
  138 + </el-radio-group>
147 139 </el-form-item>
148   - <el-form-item label="使用优惠券的次数" prop="useCount">
149   - <el-input v-model="form.useCount" placeholder="请输入使用优惠券的次数" />
  140 + <el-form-item v-if="form.productScope === PromotionProductScopeEnum.SPU.scope" prop="productSpuIds">
  141 + <el-input v-model="form.productSpuIds" placeholder="请输入商品 SPU 编号的数组" />
150 142 </el-form-item>
151 143 </el-form>
152 144 <div slot="footer" class="dialog-footer">
... ... @@ -159,7 +151,7 @@
159 151  
160 152 <script>
161 153 import { createCouponTemplate, updateCouponTemplate, deleteCouponTemplate, getCouponTemplate, getCouponTemplatePage } from "@/api/promotion/couponTemplate";
162   -import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/utils/constants";
  154 +import { CommonStatusEnum, CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum, PromotionProductScopeEnum} from "@/utils/constants";
163 155  
164 156 export default {
165 157 name: "CouponTemplate",
... ... @@ -175,7 +167,7 @@ export default {
175 167 showSearch: true,
176 168 // 总条数
177 169 total: 0,
178   - // 优惠劵模板列表
  170 + // 优惠劵列表
179 171 list: [],
180 172 // 弹出层标题
181 173 title: "",
... ... @@ -194,19 +186,26 @@ export default {
194 186 form: {},
195 187 // 表单校验
196 188 rules: {
197   - name: [{ required: true, message: "优惠劵名不能为空", trigger: "blur" }],
198   - status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
199   - type: [{ required: true, message: "类型", trigger: "change" }],
200   - totalCount: [{ required: true, message: "发行总量不能为空", trigger: "blur" }],
201   - takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
  189 + name: [{ required: true, message: "优惠券名称不能为空", trigger: "blur" }],
  190 + discountType: [{ required: true, message: "优惠券类型不能为空", trigger: "change" }],
  191 + discountPrice: [{ required: true, message: "优惠券面额不能为空", trigger: "blur" }],
  192 + discountPercent: [{ required: true, message: "优惠券折扣不能为空", trigger: "blur" }],
  193 + discountLimitPrice: [{ required: true, message: "最多优惠不能为空", trigger: "blur" }],
  194 + usePrice: [{ required: true, message: "满多少元可以使用不能为空", trigger: "blur" }],
202 195 takeType: [{ required: true, message: "领取方式不能为空", trigger: "change" }],
203   - usePrice: [{ required: true, message: "是否设置满多少金额可用，单位：分不能为空", trigger: "blur" }],
  196 + totalCount: [{ required: true, message: "发放数量不能为空", trigger: "blur" }],
  197 + takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
  198 + validityType: [{ required: true, message: "有效期类型不能为空", trigger: "change" }],
  199 + validTimes: [{ required: true, message: "固定日期不能为空", trigger: "change" }],
  200 + fixedStartTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
  201 + fixedEndTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
204 202 productScope: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
205   - validityType: [{ required: true, message: "生效日期类型不能为空", trigger: "change" }],
206   - discountType: [{ required: true, message: "优惠类型不能为空", trigger: "change" }],
207   - takeNum: [{ required: true, message: "领取优惠券的数量不能为空", trigger: "blur" }],
208   - useCount: [{ required: true, message: "使用优惠券的次数不能为空", trigger: "blur" }],
209   - }
  203 + productSpuIds: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
  204 + },
  205 + // 如下的变量，主要为了 v-if 判断可以使用到
  206 + PromotionProductScopeEnum: PromotionProductScopeEnum,
  207 + CouponTemplateValidityTypeEnum: CouponTemplateValidityTypeEnum,
  208 + PromotionDiscountTypeEnum: PromotionDiscountTypeEnum,
210 209 };
211 210 },
212 211 created() {
... ... @@ -233,25 +232,22 @@ export default {
233 232 this.form = {
234 233 id: undefined,
235 234 name: undefined,
236   - status: undefined,
237   - type: undefined,
  235 + discountType: PromotionDiscountTypeEnum.PRICE.type,
  236 + discountPrice: 0,
  237 + discountPercent: undefined,
  238 + discountLimitPrice: undefined,
  239 + usePrice: undefined,
  240 + takeType: 1,
238 241 totalCount: undefined,
239 242 takeLimitCount: undefined,
240   - takeType: undefined,
241   - usePrice: undefined,
242   - productScope: undefined,
243   - productSpuIds: undefined,
244   - validityType: undefined,
  243 + validityType: CouponTemplateValidityTypeEnum.DATE.type,
  244 + validTimes: [],
245 245 validStartTime: undefined,
246 246 validEndTime: undefined,
247 247 fixedStartTerm: undefined,
248 248 fixedEndTerm: undefined,
249   - discountType: undefined,
250   - discountPercent: undefined,
251   - discountPrice: undefined,
252   - discountPriceLimit: undefined,
253   - takeNum: undefined,
254   - useCount: undefined,
  249 + productScope: PromotionProductScopeEnum.ALL.scope,
  250 + productSpuIds: [],
255 251 };
256 252 this.resetForm("form");
257 253 },
... ... @@ -269,16 +265,21 @@ export default {
269 265 handleAdd() {
270 266 this.reset();
271 267 this.open = true;
272   - this.title = "添加优惠劵模板";
  268 + this.title = "添加优惠劵";
273 269 },
274 270 /** 修改按钮操作 */
275 271 handleUpdate(row) {
276 272 this.reset();
277 273 const id = row.id;
278 274 getCouponTemplate(id).then(response => {
279   - this.form = response.data;
  275 + this.form = {
  276 + ...response.data,
  277 + discountPrice: response.data.discountPrice ? response.data.discountPrice / 100.0 : undefined,
  278 + discountPercent: response.data.discountPercent ? response.data.discountPercent / 10.0 : undefined,
  279 + usePrice: response.data.usePrice ? response.data.usePrice / 100.0 : undefined,
  280 + }
280 281 this.open = true;
281   - this.title = "修改优惠劵模板";
  282 + this.title = "修改优惠劵";
282 283 });
283 284 },
284 285 /** 提交按钮 */
... ... @@ -287,9 +288,16 @@ export default {
287 288 if (!valid) {
288 289 return;
289 290 }
  291 + // 金额相关字段的缩放
  292 + let data = {
  293 + ...this.form,
  294 + discountPrice: this.form.discountPrice ? this.form.discountPrice * 100 : undefined,
  295 + discountPercent: this.form.discountPercent ? this.form.discountPercent * 10 : undefined,
  296 + usePrice: this.form.usePrice ? this.form.usePrice * 100 : undefined,
  297 + }
290 298 // 修改的提交
291 299 if (this.form.id != null) {
292   - updateCouponTemplate(this.form).then(response => {
  300 + updateCouponTemplate(data).then(response => {
293 301 this.$modal.msgSuccess("修改成功");
294 302 this.open = false;
295 303 this.getList();
... ... @@ -297,7 +305,7 @@ export default {
297 305 return;
298 306 }
299 307 // 添加的提交
300   - createCouponTemplate(this.form).then(response => {
  308 + createCouponTemplate(data).then(response => {
301 309 this.$modal.msgSuccess("新增成功");
302 310 this.open = false;
303 311 this.getList();
... ... @@ -307,7 +315,7 @@ export default {
307 315 /** 删除按钮操作 */
308 316 handleDelete(row) {
309 317 const id = row.id;
310   - this.$modal.confirm('是否确认删除优惠劵模板编号为"' + id + '"的数据项?').then(function() {
  318 + this.$modal.confirm('是否确认删除优惠劵编号为"' + id + '"的数据项?').then(function() {
311 319 return deleteCouponTemplate(id);
312 320 }).then(() => {
313 321 this.getList();
... ...