150 lines
4.4 KiB
Vue
150 lines
4.4 KiB
Vue
<template>
|
||
<!-- 满减送活动规则组件 -->
|
||
<el-row>
|
||
<template v-if="formData.rules">
|
||
<el-col v-for="(rule, index) in formData.rules" :key="index" :span="24">
|
||
<span class="font-bold">活动层级{{ index + 1 }}</span>
|
||
<el-button v-if="index !== 0" link type="danger" @click="deleteRule(index)">
|
||
删除
|
||
</el-button>
|
||
<el-form ref="formRef" :model="rule">
|
||
<el-form-item label="优惠门槛:" label-width="100px" prop="limit">
|
||
满
|
||
<el-input
|
||
v-model="rule.limit"
|
||
:min="0"
|
||
class="w-150px! p-x-20px!"
|
||
placeholder=""
|
||
type="number"
|
||
/>
|
||
<!-- TODO @puhui999：走字典数据？ -->
|
||
{{ PromotionConditionTypeEnum.PRICE.type === formData.conditionType ? '元' : '件' }}
|
||
</el-form-item>
|
||
<el-form-item label="优惠内容:" label-width="100px">
|
||
<el-col :span="24">
|
||
订单金额优惠
|
||
<el-form-item>
|
||
减
|
||
<el-input-number
|
||
v-model="rule.discountPrice"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="0.1"
|
||
class="w-150px! p-x-20px!"
|
||
controls-position="right"
|
||
/>
|
||
元
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<span>包邮：</span>
|
||
<el-switch
|
||
v-model="rule.freeDelivery"
|
||
active-text="是"
|
||
inactive-text="否"
|
||
inline-prompt
|
||
/>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<span>送积分：</span>
|
||
<el-switch
|
||
v-model="rule.givePoint"
|
||
active-text="是"
|
||
inactive-text="否"
|
||
inline-prompt
|
||
/>
|
||
<el-form-item v-if="rule.givePoint">
|
||
送
|
||
<el-input
|
||
v-model="rule.point"
|
||
class="w-150px! p-x-20px!"
|
||
placeholder=""
|
||
type="number"
|
||
/>
|
||
积分
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<span>送优惠券：</span>
|
||
<el-switch
|
||
v-model="rule.giveCoupon"
|
||
active-text="是"
|
||
inactive-text="否"
|
||
inline-prompt
|
||
/>
|
||
<RewardRuleCouponSelect
|
||
v-if="rule.giveCoupon"
|
||
ref="rewardRuleCouponSelectRef"
|
||
v-model="rule!"
|
||
/>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
</template>
|
||
<el-col :span="24" class="mt-10px">
|
||
<el-button type="primary" @click="addRule">添加优惠规则</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import RewardRuleCouponSelect from './RewardRuleCouponSelect.vue'
|
||
import { RewardActivityVO } from '@/api/mall/promotion/reward/rewardActivity'
|
||
import { PromotionConditionTypeEnum } from '@/utils/constants'
|
||
import { useVModel } from '@vueuse/core'
|
||
import { isEmpty } from '@/utils/is'
|
||
|
||
defineOptions({ name: 'RewardRule' })
|
||
|
||
const props = defineProps<{
|
||
modelValue: RewardActivityVO
|
||
}>()
|
||
|
||
const emits = defineEmits<{
|
||
(e: 'update:modelValue', v: any): void
|
||
(e: 'deleteRule', v: number): void
|
||
}>()
|
||
|
||
const formData = useVModel(props, 'modelValue', emits) // 活动数据
|
||
const rewardRuleCouponSelectRef = ref<InstanceType<typeof RewardRuleCouponSelect>[]>() // 活动规则优惠券 Ref
|
||
|
||
/** 删除优惠规则 */
|
||
const deleteRule = (ruleIndex: number) => {
|
||
formData.value.rules.splice(ruleIndex, 1)
|
||
}
|
||
|
||
/** 添加优惠规则 */
|
||
const addRule = () => {
|
||
formData.value.rules.push({
|
||
limit: 0,
|
||
discountPrice: 0,
|
||
freeDelivery: false,
|
||
givePoint: false,
|
||
point: 0,
|
||
giveCoupon: false,
|
||
couponIds: [],
|
||
couponCounts: []
|
||
})
|
||
}
|
||
|
||
/** 设置规则优惠券-提交时 */
|
||
const setRuleCoupon = () => {
|
||
if (isEmpty(rewardRuleCouponSelectRef.value)) {
|
||
return
|
||
}
|
||
|
||
// 情况一：不赠送优惠券
|
||
formData.value.rules.forEach((rule) => {
|
||
if (!rule.giveCoupon) {
|
||
rule.couponIds = []
|
||
rule.couponCounts = []
|
||
}
|
||
})
|
||
// 情况二：赠送优惠券
|
||
rewardRuleCouponSelectRef.value?.forEach((item) => item.setGiveCouponList())
|
||
}
|
||
|
||
defineExpose({ setRuleCoupon })
|
||
</script>
|