feat：【antd】【mall】优化满减送的界面
This commit is contained in:
YunaiV
@@ -102,46 +102,53 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full">
|
<div>
|
||||||
<Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>
|
<!-- 已选优惠券列表 -->
|
||||||
|
<div v-if="list.length > 0" class="mb-2 flex flex-col gap-2">
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in list"
|
v-for="(item, index) in list"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="coupon-list-item mb-2 flex justify-between rounded-lg border border-dashed border-gray-300 p-2"
|
class="flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-2 transition-all hover:border-blue-400 hover:shadow-sm"
|
||||||
>
|
>
|
||||||
<div class="coupon-list-item-left flex flex-wrap items-center gap-2">
|
<div class="flex flex-wrap items-center gap-3">
|
||||||
<div>优惠券名称：{{ item.name }}</div>
|
<span class="font-medium text-gray-800">{{ item.name }}</span>
|
||||||
<div>
|
<span class="flex items-center gap-1 text-sm text-gray-500">
|
||||||
范围：
|
<DictTag
|
||||||
<DictTag
|
:type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
|
||||||
:type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
|
:value="item.productScope"
|
||||||
:value="item.productScope"
|
/>
|
||||||
/>
|
</span>
|
||||||
|
<span class="flex items-center gap-1 text-sm text-gray-500">
|
||||||
|
<DictTag
|
||||||
|
:type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
|
||||||
|
:value="item.discountType"
|
||||||
|
/>
|
||||||
|
{{ discountFormat(item) }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex shrink-0 items-center gap-2">
|
||||||
优惠：
|
<span class="text-gray-500">送</span>
|
||||||
<DictTag
|
<Input
|
||||||
:type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
|
v-model:value="item.giveCount"
|
||||||
:value="item.discountType"
|
class="!w-20"
|
||||||
|
placeholder=""
|
||||||
|
type="number"
|
||||||
|
size="small"
|
||||||
/>
|
/>
|
||||||
{{ discountFormat(item) }}
|
<span class="text-gray-500">张</span>
|
||||||
|
<Button type="link" danger size="small" @click="handleDelete(index)">
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="coupon-list-item-right flex items-center gap-2">
|
|
||||||
<span>送</span>
|
|
||||||
<Input
|
|
||||||
v-model:value="item.giveCount"
|
|
||||||
class="!w-150px"
|
|
||||||
placeholder=""
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<span>张</span>
|
|
||||||
<Button type="link" danger @click="handleDelete(index)">删除</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 优惠券选择 -->
|
<!-- 添加按钮 -->
|
||||||
|
<Button type="link" class="!pl-0" @click="handleSelect">
|
||||||
|
+ 添加优惠券
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<!-- 优惠券选择弹窗 -->
|
||||||
<CouponSelect
|
<CouponSelect
|
||||||
ref="selectRef"
|
ref="selectRef"
|
||||||
:take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
|
:take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import { PromotionConditionTypeEnum } from '@vben/constants';
|
|||||||
import { useVModel } from '@vueuse/core';
|
import { useVModel } from '@vueuse/core';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Card,
|
||||||
Col,
|
Col,
|
||||||
Form,
|
Form,
|
||||||
FormItem,
|
FormItem,
|
||||||
@@ -61,76 +62,92 @@ function handleDelete(ruleIndex: number) {
|
|||||||
<Row :gutter="[16, 16]">
|
<Row :gutter="[16, 16]">
|
||||||
<template v-if="formData.rules">
|
<template v-if="formData.rules">
|
||||||
<Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
|
<Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
|
||||||
<!-- 规则标题 -->
|
<Card size="small" class="rounded-lg">
|
||||||
<div class="mb-4 flex items-center">
|
<!-- 规则标题 -->
|
||||||
<span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
|
<template #title>
|
||||||
<Button
|
<div class="flex items-center">
|
||||||
v-if="index !== 0"
|
<span class="text-base font-medium">
|
||||||
type="link"
|
活动层级 {{ index + 1 }}
|
||||||
danger
|
</span>
|
||||||
class="ml-2"
|
|
||||||
@click="handleDelete(index)"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Form :model="rule" layout="horizontal">
|
|
||||||
<!-- 优惠门槛 -->
|
|
||||||
<FormItem label="优惠门槛" :label-col="{ span: 4 }">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span>满</span>
|
|
||||||
<InputNumber
|
|
||||||
v-if="isPriceCondition"
|
|
||||||
v-model:value="rule.limit"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="!w-40"
|
|
||||||
placeholder="请输入金额"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
v-else
|
|
||||||
v-model:value="rule.limit"
|
|
||||||
:min="0"
|
|
||||||
class="!w-40"
|
|
||||||
placeholder="请输入数量"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<span>{{ isPriceCondition ? '元' : '件' }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</template>
|
||||||
<!-- 优惠内容 -->
|
<template v-if="index !== 0" #extra>
|
||||||
<FormItem
|
<Button
|
||||||
label="优惠内容"
|
type="link"
|
||||||
:label-col="{ span: 4 }"
|
danger
|
||||||
:wrapper-col="{ span: 20 }"
|
size="small"
|
||||||
>
|
@click="handleDelete(index)"
|
||||||
<div class="flex flex-col gap-2">
|
>
|
||||||
<span>订单金额优惠</span>
|
删除
|
||||||
<div class="flex items-center gap-2">
|
</Button>
|
||||||
<span>减</span>
|
</template>
|
||||||
|
|
||||||
|
<Form :model="rule" layout="horizontal">
|
||||||
|
<!-- 优惠门槛 -->
|
||||||
|
<FormItem label="优惠门槛:" :colon="false" class="mb-3">
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span>满</span>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
v-model:value="rule.discountPrice"
|
v-if="isPriceCondition"
|
||||||
|
v-model:value="rule.limit"
|
||||||
:min="0"
|
:min="0"
|
||||||
:precision="2"
|
:precision="2"
|
||||||
:step="0.1"
|
:step="0.1"
|
||||||
class="!w-32"
|
class="!w-40"
|
||||||
placeholder="请输入金额"
|
placeholder="请输入金额"
|
||||||
/>
|
/>
|
||||||
<span>元</span>
|
<Input
|
||||||
</div>
|
v-else
|
||||||
<div class="flex items-center gap-2">
|
v-model:value="rule.limit"
|
||||||
<span>包邮:</span>
|
:min="0"
|
||||||
<Switch
|
class="!w-40"
|
||||||
v-model:checked="rule.freeDelivery"
|
placeholder="请输入数量"
|
||||||
checked-children="是"
|
type="number"
|
||||||
un-checked-children="否"
|
|
||||||
/>
|
/>
|
||||||
|
<span>{{ isPriceCondition ? '元' : '件' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</FormItem>
|
||||||
<div>送积分:</div>
|
<!-- 优惠内容 -->
|
||||||
<div class="mt-2 flex items-center gap-2">
|
<FormItem label="优惠内容:" :colon="false" class="!mb-0">
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- 订单金额优惠 -->
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span class="!w-21 shrink-0 text-sm text-gray-500">
|
||||||
|
订单金额优惠
|
||||||
|
</span>
|
||||||
|
<span>减</span>
|
||||||
|
<InputNumber
|
||||||
|
v-model:value="rule.discountPrice"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
:step="0.1"
|
||||||
|
class="!w-32"
|
||||||
|
placeholder="请输入金额"
|
||||||
|
/>
|
||||||
|
<span>元</span>
|
||||||
|
</div>
|
||||||
|
<!-- 包邮 -->
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span class="w-20 shrink-0 text-sm text-gray-500">包邮</span>
|
||||||
|
<Switch
|
||||||
|
v-model:checked="rule.freeDelivery"
|
||||||
|
checked-children="是"
|
||||||
|
un-checked-children="否"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 送积分 -->
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span class="w-20 shrink-0 text-sm text-gray-500">
|
||||||
|
送积分
|
||||||
|
</span>
|
||||||
<span>送</span>
|
<span>送</span>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
v-model:value="rule.point"
|
v-model:value="rule.point"
|
||||||
@@ -140,17 +157,24 @@ function handleDelete(ruleIndex: number) {
|
|||||||
/>
|
/>
|
||||||
<span>积分</span>
|
<span>积分</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 送优惠券 -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-start gap-2 rounded-md bg-gray-50 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span class="w-20 shrink-0 text-sm text-gray-500">
|
||||||
|
送优惠券
|
||||||
|
</span>
|
||||||
|
<RewardRuleCouponSelect
|
||||||
|
:model-value="rule"
|
||||||
|
@update:model-value="
|
||||||
|
(val) => (formData.rules![index] = val)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2">
|
</FormItem>
|
||||||
<span class="w-20">送优惠券:</span>
|
</Form>
|
||||||
<RewardRuleCouponSelect
|
</Card>
|
||||||
:model-value="rule"
|
|
||||||
@update:model-value="(val) => (formData.rules![index] = val)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</FormItem>
|
|
||||||
</Form>
|
|
||||||
</Col>
|
</Col>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user