lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

promotion：优化优惠劵的界面

Browse Source
This commit is contained in:
YunaiV 2023-10-03 13:01:31 +08:00
parent 59ab6218ca
commit 40f44fc78e
3 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/mall/promotion/coupon/formatter.ts
View File

@ -9,7 +9,7 @@ export const discountFormat = (row: CouponTemplateVO) => {
return `￥${floatToFixed2(row.discountPrice)}`
}
if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return `${row.discountPrice}%`
return `${row.discountPercent}%`
}
return '未知【' + row.discountType + '】'
}

16
src/views/mall/promotion/coupon/index.vue
View File

@ -19,7 +19,7 @@
@keyup="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-form-item label="领取时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
@ -50,12 +50,17 @@
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="会员信息" align="center" prop="nickname" />
<!-- TODO 芋艿：以后支持头像，支持跳转 -->
<el-table-column label="优惠劵" align="center" prop="name" />
<el-table-column label="优惠券类型" align="center" prop="discountType">
<el-table-column label="会员昵称" align="center" min-width="100" prop="nickname" />
<el-table-column label="优惠券名称" align="center" min-width="140" prop="name" />
<el-table-column label="类型" align="center" prop="discountType">
<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">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
{{ discountFormat(scope.row) }}
</template>
</el-table-column>
<el-table-column label="领取方式" align="center" prop="takeType">
@ -109,6 +114,7 @@
import { deleteCoupon, getCouponPage } from '@/api/mall/promotion/coupon/coupon'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { discountFormat } from '@/views/mall/promotion/coupon/formatter'
defineOptions({ name: 'PromotionCoupon' })

39
src/views/mall/promotion/coupon/template/index.vue
View File

@ -19,7 +19,7 @@
@keyup="handleQuery"
/>
</el-form-item>
<el-form-item label="优惠券类型" prop="discountType">
<el-form-item label="优惠类型" prop="discountType">
<el-select
v-model="queryParams.discountType"
class="!w-240px"
@ -71,14 +71,6 @@
>
<Icon class="mr-5px" icon="ep:plus" /> 新增
</el-button>
<el-button
plain
type="success"
@click="$router.push('/promotion/coupon')"
v-hasPermi="['promotion:coupon:query']"
>
<Icon icon="ep:operation" class="mr-5px" />会员优惠劵
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
@ -86,17 +78,29 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="优惠券名称" align="center" prop="name" />
<el-table-column label="优惠券类型" align="center" prop="discountType">
<el-table-column label="优惠券名称" min-width="140" prop="name" />
<el-table-column label="类型" min-width="80" 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">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
{{ discountFormat(scope.row) }}
</template>
</el-table-column>
<el-table-column label="领取方式" min-width="100" prop="takeType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
</template>
</el-table-column>
<el-table-column
label="优惠金额 / 折扣"
label="使用时间"
align="center"
prop="discount"
:formatter="discountFormat"
prop="validityType"
width="185"
:formatter="validityTypeFormat"
/>
<el-table-column label="发放数量" align="center" prop="totalCount" />
<el-table-column
@ -111,13 +115,6 @@
prop="takeLimitCount"
:formatter="takeLimitCountFormat"
/>
<el-table-column
label="有效期限"
align="center"
prop="validityType"
width="190"
:formatter="validityTypeFormat"
/>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-switch