mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-06-19 06:42:00 +08:00
137 lines
3.9 KiB
Vue
137 lines
3.9 KiB
Vue
<template>
|
||
<el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠卷</el-button>
|
||
<el-col :span="24">
|
||
<el-tag type="warning"> 当没有选择优惠券时，表示不赠送优惠券</el-tag>
|
||
</el-col>
|
||
<div
|
||
v-for="(item, index) in list"
|
||
:key="item.id"
|
||
class="coupon-list-item p-x-10px mb-10px flex justify-between"
|
||
>
|
||
<div class="coupon-list-item-left flex items-center flex-wrap">
|
||
<div class="mr-10px"> 优惠券名称：{{ item.name }}</div>
|
||
<div class="mr-10px">
|
||
范围：
|
||
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" />
|
||
</div>
|
||
<div class="flex items-center">
|
||
优惠：
|
||
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" />
|
||
{{ discountFormat(item) }}
|
||
</div>
|
||
</div>
|
||
<div class="coupon-list-item-right">
|
||
送
|
||
<el-input v-model="item.giveCount" class="w-150px! p-x-20px!" placeholder="" type="number" />
|
||
张
|
||
<el-button class="ml-20px" link type="danger" @click="deleteCoupon(index)">删除</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优惠券选择 -->
|
||
<CouponSelect
|
||
ref="couponSelectRef"
|
||
:take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
|
||
@change="handleCouponChange"
|
||
/>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { CouponSelect } from '@/views/mall/promotion/coupon/components'
|
||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||
import { RewardRule } from '@/api/mall/promotion/reward/rewardActivity'
|
||
import { DICT_TYPE } from '@/utils/dict'
|
||
import { CouponTemplateTakeTypeEnum } from '@/utils/constants'
|
||
import { discountFormat } from '@/views/mall/promotion/coupon/formatter'
|
||
import { isEmpty } from '@/utils/is'
|
||
import { useVModel } from '@vueuse/core'
|
||
|
||
defineOptions({ name: 'RewardRuleCouponSelect' })
|
||
|
||
const props = defineProps<{
|
||
modelValue: RewardRule
|
||
}>()
|
||
|
||
const emits = defineEmits<{
|
||
(e: 'update:modelValue', v: any): void
|
||
}>()
|
||
|
||
const rewardRule = useVModel(props, 'modelValue', emits) // 赠送规则
|
||
const list = ref<GiveCouponVO[]>([]) // 选择的优惠券列表
|
||
|
||
/** 选择赠送的优惠卷类型拓展 */
|
||
interface GiveCouponVO extends CouponTemplateApi.CouponTemplateVO {
|
||
giveCount?: number
|
||
}
|
||
|
||
/** 选择优惠券 */
|
||
const couponSelectRef = ref<InstanceType<typeof CouponSelect>>() // 优惠券选择
|
||
const selectCoupon = () => {
|
||
couponSelectRef.value?.open()
|
||
}
|
||
|
||
/** 选择优惠券后的回调 */
|
||
const handleCouponChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
|
||
for (const item of val) {
|
||
if (list.value.some((v) => v.id === item.id)) {
|
||
continue
|
||
}
|
||
list.value.push(item)
|
||
}
|
||
}
|
||
|
||
/** 删除优惠券 */
|
||
const deleteCoupon = (index: number) => {
|
||
list.value.splice(index, 1)
|
||
}
|
||
|
||
/** 初始化赠送的优惠券列表 */
|
||
const initGiveCouponList = async () => {
|
||
// 校验优惠券存在
|
||
if (isEmpty(rewardRule.value) || isEmpty(rewardRule.value.giveCoupons)) {
|
||
return
|
||
}
|
||
const tempLateIds = Object.keys(rewardRule.value.giveCoupons!).map((item) => parseInt(item))
|
||
const data = await CouponTemplateApi.getCouponTemplateList(tempLateIds)
|
||
if (!data) {
|
||
return
|
||
}
|
||
// 回显
|
||
data.forEach((coupon) => {
|
||
list.value.push({
|
||
...coupon,
|
||
giveCount: rewardRule.value.giveCoupons![coupon.id]
|
||
})
|
||
})
|
||
}
|
||
|
||
/** 设置赠送的优惠券 */
|
||
const setGiveCouponList = () => {
|
||
if (isEmpty(rewardRule.value) || isEmpty(list.value)) {
|
||
return
|
||
}
|
||
|
||
// 设置优惠券和其数量的对应
|
||
list.value.forEach((rule) => {
|
||
if (!rewardRule.value.giveCoupons) {
|
||
rewardRule.value.giveCoupons = {}
|
||
}
|
||
rewardRule.value.giveCoupons[rule.id] = rule.giveCount!
|
||
})
|
||
}
|
||
defineExpose({ setGiveCouponList })
|
||
|
||
/** 组件初始化 */
|
||
onMounted(async () => {
|
||
await nextTick()
|
||
await initGiveCouponList()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.coupon-list-item {
|
||
border: 1px dashed var(--el-border-color-darker);
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|