优惠卷模版样式调整
This commit is contained in:
parent
75135e1e4f
commit
95d7d1eb42
@ -22,14 +22,14 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="商品"
|
||||
v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
|
||||
label="商品"
|
||||
prop="productSpuIds"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-1">
|
||||
<div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
|
||||
<div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
|
||||
<el-image :src="spu.picUrl" />
|
||||
<Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
|
||||
<Icon class="del-icon" icon="ep:circle-close-filled" @click="handleRemoveSpu(index)" />
|
||||
</div>
|
||||
<div class="select-box" @click="openSpuTableSelect">
|
||||
<Icon icon="ep:plus" />
|
||||
@ -37,8 +37,8 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="分类"
|
||||
v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
|
||||
label="分类"
|
||||
prop="productCategoryIds"
|
||||
>
|
||||
<ProductCategorySelect v-model="formData.productCategoryIds" />
|
||||
@ -61,10 +61,10 @@
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.discountPrice"
|
||||
placeholder="请输入优惠金额,单位:元"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="请输入优惠金额,单位:元"
|
||||
/>
|
||||
元
|
||||
</el-form-item>
|
||||
@ -75,11 +75,11 @@
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.discountPercent"
|
||||
placeholder="优惠券折扣不能小于 1 折,且不可大于 9.9 折"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="1"
|
||||
:min="1"
|
||||
:max="9.9"
|
||||
:min="1"
|
||||
:precision="1"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="优惠券折扣不能小于 1 折,且不可大于 9.9 折"
|
||||
/>
|
||||
折
|
||||
</el-form-item>
|
||||
@ -90,20 +90,20 @@
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.discountLimitPrice"
|
||||
placeholder="请输入最多优惠"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="请输入最多优惠"
|
||||
/>
|
||||
元
|
||||
</el-form-item>
|
||||
<el-form-item label="满多少元可以使用" prop="usePrice">
|
||||
<el-input-number
|
||||
v-model="formData.usePrice"
|
||||
placeholder="无门槛请设为 0"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="无门槛请设为 0"
|
||||
/>
|
||||
元
|
||||
</el-form-item>
|
||||
@ -116,20 +116,20 @@
|
||||
<el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
|
||||
<el-input-number
|
||||
v-model="formData.totalCount"
|
||||
placeholder="发放数量,没有之后不能领取或发放,-1 为不限制"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="0"
|
||||
:min="-1"
|
||||
:precision="0"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="发放数量,没有之后不能领取或发放,-1 为不限制"
|
||||
/>
|
||||
张
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.takeType === 1" label="每人限领个数" prop="takeLimitCount">
|
||||
<el-input-number
|
||||
v-model="formData.takeLimitCount"
|
||||
placeholder="设置为 -1 时,可无限领取"
|
||||
class="mr-2 !w-400px"
|
||||
:precision="0"
|
||||
:min="-1"
|
||||
:precision="0"
|
||||
class="mr-2 !w-400px"
|
||||
placeholder="设置为 -1 时,可无限领取"
|
||||
/>
|
||||
张
|
||||
</el-form-item>
|
||||
@ -151,10 +151,10 @@
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formData.validTimes"
|
||||
style="width: 240px"
|
||||
value-format="x"
|
||||
type="datetimerange"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
|
||||
style="width: 240px"
|
||||
type="datetimerange"
|
||||
value-format="x"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -165,18 +165,18 @@
|
||||
第
|
||||
<el-input-number
|
||||
v-model="formData.fixedStartTerm"
|
||||
placeholder="0 为今天生效"
|
||||
class="mx-2"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
class="mx-2"
|
||||
placeholder="0 为今天生效"
|
||||
/>
|
||||
至
|
||||
<el-input-number
|
||||
v-model="formData.fixedEndTerm"
|
||||
placeholder="请输入结束天数"
|
||||
class="mx-2"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
class="mx-2"
|
||||
placeholder="请输入结束天数"
|
||||
/>
|
||||
天有效
|
||||
</el-form-item>
|
||||
@ -199,6 +199,7 @@ import {
|
||||
} from '@/utils/constants'
|
||||
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
|
||||
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
|
||||
import { convertToInteger, formatToFraction } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'CouponTemplateForm' })
|
||||
|
||||
@ -265,12 +266,11 @@ const open = async (type: string, id?: number) => {
|
||||
const data = await CouponTemplateApi.getCouponTemplate(id)
|
||||
formData.value = {
|
||||
...data,
|
||||
discountPrice: data.discountPrice !== undefined ? data.discountPrice / 100.0 : undefined,
|
||||
discountPrice: formatToFraction(data.discountPrice),
|
||||
discountPercent:
|
||||
data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
|
||||
discountLimitPrice:
|
||||
data.discountLimitPrice !== undefined ? data.discountLimitPrice / 100.0 : undefined,
|
||||
usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
|
||||
discountLimitPrice: formatToFraction(data.discountLimitPrice),
|
||||
usePrice: formatToFraction(data.usePrice),
|
||||
validTimes: [data.validStartTime, data.validEndTime]
|
||||
}
|
||||
// 获得商品范围
|
||||
@ -294,17 +294,13 @@ const submitForm = async () => {
|
||||
try {
|
||||
const data = {
|
||||
...formData.value,
|
||||
discountPrice:
|
||||
formData.value.discountPrice !== undefined ? formData.value.discountPrice * 100 : undefined,
|
||||
discountPrice: convertToInteger(formData.value.discountPrice),
|
||||
discountPercent:
|
||||
formData.value.discountPercent !== undefined
|
||||
? formData.value.discountPercent * 10
|
||||
: undefined,
|
||||
discountLimitPrice:
|
||||
formData.value.discountLimitPrice !== undefined
|
||||
? formData.value.discountLimitPrice * 100
|
||||
: undefined,
|
||||
usePrice: formData.value.usePrice !== undefined ? formData.value.usePrice * 100 : undefined,
|
||||
discountLimitPrice: convertToInteger(formData.value.discountLimitPrice),
|
||||
usePrice: convertToInteger(formData.value.usePrice),
|
||||
validStartTime:
|
||||
formData.value.validTimes && formData.value.validTimes.length === 2
|
||||
? formData.value.validTimes[0]
|
||||
@ -385,6 +381,7 @@ const getProductScope = async () => {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/** 设置商品范围 */
|
||||
function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
|
||||
switch (formData.value.productScope) {
|
||||
@ -420,7 +417,7 @@ const handleRemoveSpu = (index: number) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.select-box {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
|
@ -14,8 +14,8 @@
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
class="!w-240px"
|
||||
placeholder="请输入优惠劵名"
|
||||
clearable
|
||||
placeholder="请输入优惠劵名"
|
||||
@keyup="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -23,8 +23,8 @@
|
||||
<el-select
|
||||
v-model="queryParams.discountType"
|
||||
class="!w-240px"
|
||||
placeholder="请选择优惠券类型"
|
||||
clearable
|
||||
placeholder="请选择优惠券类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
|
||||
@ -38,8 +38,8 @@
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
class="!w-240px"
|
||||
placeholder="请选择优惠券状态"
|
||||
clearable
|
||||
placeholder="请选择优惠券状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
@ -52,24 +52,31 @@
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
|
||||
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:coupon-template:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" /> 新增
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -79,15 +86,15 @@
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="优惠券名称" min-width="140" prop="name" />
|
||||
<el-table-column label="类型" min-width="80" prop="productScope">
|
||||
<el-table-column label="类型" min-width="130" prop="productScope">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠" min-width="100" prop="discount">
|
||||
<el-table-column label="优惠" min-width="110" prop="discount">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
|
||||
{{ discountFormat(scope.row) }}
|
||||
<div>{{ discountFormat(scope.row) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取方式" min-width="100" prop="takeType">
|
||||
@ -96,26 +103,26 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="使用时间"
|
||||
:formatter="validityTypeFormat"
|
||||
align="center"
|
||||
label="使用时间"
|
||||
prop="validityType"
|
||||
width="185"
|
||||
:formatter="validityTypeFormat"
|
||||
/>
|
||||
<el-table-column label="发放数量" align="center" prop="totalCount" />
|
||||
<el-table-column align="center" label="发放数量" prop="totalCount" />
|
||||
<el-table-column
|
||||
label="剩余数量"
|
||||
align="center"
|
||||
prop="totalCount"
|
||||
:formatter="remainedCountFormat"
|
||||
align="center"
|
||||
label="剩余数量"
|
||||
prop="totalCount"
|
||||
/>
|
||||
<el-table-column
|
||||
label="领取上限"
|
||||
align="center"
|
||||
prop="takeLimitCount"
|
||||
:formatter="takeLimitCountFormat"
|
||||
align="center"
|
||||
label="领取上限"
|
||||
prop="takeLimitCount"
|
||||
/>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
@ -126,13 +133,19 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['promotion:coupon-template:update']"
|
||||
|
Loading…
Reference in New Issue
Block a user