pms-iot-vue/src/views/mall/promotion/rewardActivity/components/RewardRule.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-number
              v-if="PromotionConditionTypeEnum.PRICE.type === formData.conditionType"
              v-model="rule.limit"
              :min="0"
              :precision="2"
              :step="0.1"
              class="w-150px! p-x-20px!"
              placeholder=""
              type="number"
              controls-position="right"
            />
            <el-input
              v-else
              v-model="rule.limit"
              :min="0"
              class="w-150px! p-x-20px!"
              placeholder=""
              type="number"
            />
            {{ 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-form-item>
                送
                <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>
              <RewardRuleCouponSelect 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-col :span="24">
      <el-tag type="warning"> 赠送积分为 0 时不赠送。未选优惠券时不赠送。</el-tag>
    </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 = () => {
  if (isEmpty(formData.value.rules)) {
    formData.value.rules = []
  }
  formData.value.rules.push({
    limit: 0,
    discountPrice: 0,
    freeDelivery: false,
    point: 0
  })
}

/** 设置规则优惠券-提交时 */
const setRuleCoupon = () => {
  if (isEmpty(rewardRuleCouponSelectRef.value)) {
    return
  }

  rewardRuleCouponSelectRef.value?.forEach((item) => item.setGiveCouponList())
}

defineExpose({ setRuleCoupon })
</script>