Skip to content

Commit 95d7d1e

Browse files
author
puhui999
committed
优惠卷模版样式调整
1 parent 75135e1 commit 95d7d1e

File tree

2 files changed

+77
-67
lines changed

2 files changed

+77
-67
lines changed

‎src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

Lines changed: 40 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,23 @@
2222
</el-radio-group>
2323
</el-form-item>
2424
<el-form-item
25-
label="商品"
2625
v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
26+
label="商品"
2727
prop="productSpuIds"
2828
>
2929
<div class="flex flex-wrap items-center gap-1">
30-
<div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
30+
<div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
3131
<el-image :src="spu.picUrl" />
32-
<Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
32+
<Icon class="del-icon" icon="ep:circle-close-filled" @click="handleRemoveSpu(index)" />
3333
</div>
3434
<div class="select-box" @click="openSpuTableSelect">
3535
<Icon icon="ep:plus" />
3636
</div>
3737
</div>
3838
</el-form-item>
3939
<el-form-item
40-
label="分类"
4140
v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
41+
label="分类"
4242
prop="productCategoryIds"
4343
>
4444
<ProductCategorySelect v-model="formData.productCategoryIds" />
@@ -61,10 +61,10 @@
6161
>
6262
<el-input-number
6363
v-model="formData.discountPrice"
64-
placeholder="请输入优惠金额，单位：元"
65-
class="mr-2 !w-400px"
66-
:precision="2"
6764
:min="0"
65+
:precision="2"
66+
class="mr-2 !w-400px"
67+
placeholder="请输入优惠金额，单位：元"
6868
/>
6969
元
7070
</el-form-item>
@@ -75,11 +75,11 @@
7575
>
7676
<el-input-number
7777
v-model="formData.discountPercent"
78-
placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
79-
class="mr-2 !w-400px"
80-
:precision="1"
81-
:min="1"
8278
:max="9.9"
79+
:min="1"
80+
:precision="1"
81+
class="mr-2 !w-400px"
82+
placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
8383
/>
8484
折
8585
</el-form-item>
@@ -90,20 +90,20 @@
9090
>
9191
<el-input-number
9292
v-model="formData.discountLimitPrice"
93-
placeholder="请输入最多优惠"
94-
class="mr-2 !w-400px"
95-
:precision="2"
9693
:min="0"
94+
:precision="2"
95+
class="mr-2 !w-400px"
96+
placeholder="请输入最多优惠"
9797
/>
9898
元
9999
</el-form-item>
100100
<el-form-item label="满多少元可以使用" prop="usePrice">
101101
<el-input-number
102102
v-model="formData.usePrice"
103-
placeholder="无门槛请设为 0"
104-
class="mr-2 !w-400px"
105-
:precision="2"
106103
:min="0"
104+
:precision="2"
105+
class="mr-2 !w-400px"
106+
placeholder="无门槛请设为 0"
107107
/>
108108
元
109109
</el-form-item>
@@ -116,20 +116,20 @@
116116
<el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
117117
<el-input-number
118118
v-model="formData.totalCount"
119-
placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
120-
class="mr-2 !w-400px"
121-
:precision="0"
122119
:min="-1"
120+
:precision="0"
121+
class="mr-2 !w-400px"
122+
placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
123123
/>
124124
张
125125
</el-form-item>
126126
<el-form-item v-if="formData.takeType === 1" label="每人限领个数" prop="takeLimitCount">
127127
<el-input-number
128128
v-model="formData.takeLimitCount"
129-
placeholder="设置为 -1 时，可无限领取"
130-
class="mr-2 !w-400px"
131-
:precision="0"
132129
:min="-1"
130+
:precision="0"
131+
class="mr-2 !w-400px"
132+
placeholder="设置为 -1 时，可无限领取"
133133
/>
134134
张
135135
</el-form-item>
@@ -151,10 +151,10 @@
151151
>
152152
<el-date-picker
153153
v-model="formData.validTimes"
154+
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
154155
style="width: 240px"
155-
value-format="x"
156156
type="datetimerange"
157-
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
157+
value-format="x"
158158
/>
159159
</el-form-item>
160160
<el-form-item
@@ -165,18 +165,18 @@
165165
第
166166
<el-input-number
167167
v-model="formData.fixedStartTerm"
168-
placeholder="0 为今天生效"
169-
class="mx-2"
170-
:precision="0"
171168
:min="0"
169+
:precision="0"
170+
class="mx-2"
171+
placeholder="0 为今天生效"
172172
/>
173173
至
174174
<el-input-number
175175
v-model="formData.fixedEndTerm"
176-
placeholder="请输入结束天数"
177-
class="mx-2"
178-
:precision="0"
179176
:min="0"
177+
:precision="0"
178+
class="mx-2"
179+
placeholder="请输入结束天数"
180180
/>
181181
天有效
182182
</el-form-item>
@@ -199,6 +199,7 @@ import {
199199
} from '@/utils/constants'
200200
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
201201
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
202+
import { convertToInteger, formatToFraction } from '@/utils'
202203
203204
defineOptions({ name: 'CouponTemplateForm' })
204205
@@ -265,12 +266,11 @@ const open = async (type: string, id?: number) => {
265266
const data = await CouponTemplateApi.getCouponTemplate(id)
266267
formData.value = {
267268
...data,
268-
discountPrice: data.discountPrice !== undefined ? data.discountPrice / 100.0 : undefined,
269+
discountPrice: formatToFraction(data.discountPrice),
269270
discountPercent:
270271
data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
271-
discountLimitPrice:
272-
data.discountLimitPrice !== undefined ? data.discountLimitPrice / 100.0 : undefined,
273-
usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
272+
discountLimitPrice: formatToFraction(data.discountLimitPrice),
273+
usePrice: formatToFraction(data.usePrice),
274274
validTimes: [data.validStartTime, data.validEndTime]
275275
}
276276
// 获得商品范围
@@ -294,17 +294,13 @@ const submitForm = async () => {
294294
try {
295295
const data = {
296296
...formData.value,
297-
discountPrice:
298-
formData.value.discountPrice !== undefined ? formData.value.discountPrice * 100 : undefined,
297+
discountPrice: convertToInteger(formData.value.discountPrice),
299298
discountPercent:
300299
formData.value.discountPercent !== undefined
301300
? formData.value.discountPercent * 10
302301
: undefined,
303-
discountLimitPrice:
304-
formData.value.discountLimitPrice !== undefined
305-
? formData.value.discountLimitPrice * 100
306-
: undefined,
307-
usePrice: formData.value.usePrice !== undefined ? formData.value.usePrice * 100 : undefined,
302+
discountLimitPrice: convertToInteger(formData.value.discountLimitPrice),
303+
usePrice: convertToInteger(formData.value.usePrice),
308304
validStartTime:
309305
formData.value.validTimes && formData.value.validTimes.length === 2
310306
? formData.value.validTimes[0]
@@ -385,6 +381,7 @@ const getProductScope = async () => {
385381
break
386382
}
387383
}
384+
388385
/** 设置商品范围 */
389386
function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
390387
switch (formData.value.productScope) {
@@ -420,7 +417,7 @@ const handleRemoveSpu = (index: number) => {
420417
}
421418
</script>
422419

423-
<style scoped lang="scss">
420+
<style lang="scss" scoped>
424421
.select-box {
425422
display: flex;
426423
width: 60px;

‎src/views/mall/promotion/coupon/template/index.vue

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@
1414
<el-input
1515
v-model="queryParams.name"
1616
class="!w-240px"
17-
placeholder="请输入优惠劵名"
1817
clearable
18+
placeholder="请输入优惠劵名"
1919
@keyup="handleQuery"
2020
/>
2121
</el-form-item>
2222
<el-form-item label="优惠类型" prop="discountType">
2323
<el-select
2424
v-model="queryParams.discountType"
2525
class="!w-240px"
26-
placeholder="请选择优惠券类型"
2726
clearable
27+
placeholder="请选择优惠券类型"
2828
>
2929
<el-option
3030
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
@@ -38,8 +38,8 @@
3838
<el-select
3939
v-model="queryParams.status"
4040
class="!w-240px"
41-
placeholder="请选择优惠券状态"
4241
clearable
42+
placeholder="请选择优惠券状态"
4343
>
4444
<el-option
4545
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -52,24 +52,31 @@
5252
<el-form-item label="创建时间" prop="createTime">
5353
<el-date-picker
5454
v-model="queryParams.createTime"
55-
value-format="YYYY-MM-DD HH:mm:ss"
56-
type="daterange"
57-
start-placeholder="开始日期"
58-
end-placeholder="结束日期"
5955
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
6056
class="!w-240px"
57+
end-placeholder="结束日期"
58+
start-placeholder="开始日期"
59+
type="daterange"
60+
value-format="YYYY-MM-DD HH:mm:ss"
6161
/>
6262
</el-form-item>
6363
<el-form-item>
64-
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
65-
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
64+
<el-button @click="handleQuery">
65+
<Icon class="mr-5px" icon="ep:search" />
66+
搜索
67+
</el-button>
68+
<el-button @click="resetQuery">
69+
<Icon class="mr-5px" icon="ep:refresh" />
70+
重置
71+
</el-button>
6672
<el-button
6773
v-hasPermi="['promotion:coupon-template:create']"
6874
plain
6975
type="primary"
7076
@click="openForm('create')"
7177
>
72-
<Icon class="mr-5px" icon="ep:plus" /> 新增
78+
<Icon class="mr-5px" icon="ep:plus" />
79+
新增
7380
</el-button>
7481
</el-form-item>
7582
</el-form>
@@ -79,15 +86,15 @@
7986
<ContentWrap>
8087
<el-table v-loading="loading" :data="list">
8188
<el-table-column label="优惠券名称" min-width="140" prop="name" />
82-
<el-table-column label="类型" min-width="80" prop="productScope">
89+
<el-table-column label="类型" min-width="130" prop="productScope">
8390
<template #default="scope">
8491
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
8592
</template>
8693
</el-table-column>
87-
<el-table-column label="优惠" min-width="100" prop="discount">
94+
<el-table-column label="优惠" min-width="110" prop="discount">
8895
<template #default="scope">
8996
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
90-
{{ discountFormat(scope.row) }}
97+
<div>{{ discountFormat(scope.row) }}</div>
9198
</template>
9299
</el-table-column>
93100
<el-table-column label="领取方式" min-width="100" prop="takeType">
@@ -96,26 +103,26 @@
96103
</template>
97104
</el-table-column>
98105
<el-table-column
99-
label="使用时间"
106+
:formatter="validityTypeFormat"
100107
align="center"
108+
label="使用时间"
101109
prop="validityType"
102110
width="185"
103-
:formatter="validityTypeFormat"
104111
/>
105-
<el-table-column label="发放数量" align="center" prop="totalCount" />
112+
<el-table-column align="center" label="发放数量" prop="totalCount" />
106113
<el-table-column
107-
label="剩余数量"
114+
:formatter="remainedCountFormat"
108115
align="center"
116+
label="剩余数量"
109117
prop="totalCount"
110-
:formatter="remainedCountFormat"
111118
/>
112119
<el-table-column
113-
label="领取上限"
120+
:formatter="takeLimitCountFormat"
114121
align="center"
122+
label="领取上限"
115123
prop="takeLimitCount"
116-
:formatter="takeLimitCountFormat"
117124
/>
118-
<el-table-column label="状态" align="center" prop="status">
125+
<el-table-column align="center" label="状态" prop="status">
119126
<template #default="scope">
120127
<el-switch
121128
v-model="scope.row.status"
@@ -126,13 +133,19 @@
126133
</template>
127134
</el-table-column>
128135
<el-table-column
129-
label="创建时间"
136+
:formatter="dateFormatter"
130137
align="center"
138+
label="创建时间"
131139
prop="createTime"
132-
:formatter="dateFormatter"
133140
width="180"
134141
/>
135-
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
142+
<el-table-column
143+
align="center"
144+
class-name="small-padding fixed-width"
145+
fixed="right"
146+
label="操作"
147+
width="120"
148+
>
136149
<template #default="scope">
137150
<el-button
138151
v-hasPermi="['promotion:coupon-template:update']"

0 commit comments

Comments
 (0)