【新增】MALL: 满减送活动赠送优惠券（50%）

src/api/mall/promotion/reward/rewardActivity.ts

@@ -12,7 +12,7 @@ export interface RewardActivityVO {
   productScopeValues?: number[] // 商品范围：值为 品类编号列表 或 商品编号列表 ，用于提交
   productCategoryIds?: number[] // 仅用于表单，不提交
   productSpuIds?: number[] // 仅用于表单，不提交
-  rules?: RewardRule[]
+  rules: RewardRule[]
 }
 
 // 优惠规则

src/views/mall/promotion/coupon/components/CouponSelect.vue

@@ -153,11 +153,12 @@ import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
 
 defineOptions({ name: 'CouponSelect' })
 
-defineProps<{
+const props = defineProps<{
-  multipleSelection: CouponTemplateApi.CouponTemplateVO[]
+  multipleSelection?: CouponTemplateApi.CouponTemplateVO[]
 }>()
 const emit = defineEmits<{
-  (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
+  (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[]): void
+  (e: 'change', v: CouponTemplateApi.CouponTemplateVO[]): void
 }>()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('选择优惠卷') // 弹窗的标题
@@ -209,7 +210,11 @@ const open = async () => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
+  if (props.multipleSelection) {
     emit('update:multipleSelection', val)
+    return
+  }
+  emit('change', val)
 }
 
 const submitForm = () => {

src/views/mall/promotion/rewardActivity/RewardForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
     <el-form
       ref="formRef"
       v-loading="formLoading"

src/views/mall/promotion/rewardActivity/components/RewardRule.vue

@@ -73,6 +73,7 @@
                 inactive-text="否"
                 inline-prompt
               />
+              <RewardRuleCouponShowcase v-if="rule.giveCoupon" />
             </el-col>
           </el-form-item>
         </el-form>
@@ -85,6 +86,7 @@
 </template>
 
 <script lang="ts" setup>
+import RewardRuleCouponShowcase from './RewardRuleCouponShowcase.vue'
 import { RewardActivityVO } from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum } from '@/utils/constants'
 import { useVModel } from '@vueuse/core'
@@ -120,6 +122,8 @@ const addRule = () => {
     couponCounts: []
   })
 }
+
+// TODO puhui999: 规则校验完善
 </script>
 
 <style lang="scss" scoped></style>

src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue

@@ -0,0 +1,72 @@
+<template>
+  <ContentWrap>
+    <el-button @click="selectCoupon">添加优惠卷</el-button>
+    <el-table :data="list">
+      <el-table-column label="优惠券名称" prop="name" />
+      <el-table-column label="类型" 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="优惠" 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
+        :formatter="validityTypeFormat"
+        align="center"
+        label="使用时间"
+        prop="validityType"
+      />
+      <el-table-column
+        :formatter="remainedCountFormat"
+        align="center"
+        label="剩余数量"
+        prop="totalCount"
+      />
+      <el-table-column align="center" fixed="right" label="状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 优惠券选择 -->
+  <CouponSelect ref="couponSelectRef" @change="handleCouponChange" />
+</template>
+
+<script lang="ts" setup>
+// TODO puhui999: 先简单选择后列表展示，后续继续 fix
+import { CouponSelect } from '@/views/mall/promotion/coupon/components'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { DICT_TYPE } from '@/utils/dict'
+import {
+  discountFormat,
+  remainedCountFormat,
+  validityTypeFormat
+} from '@/views/mall/promotion/coupon/formatter'
+
+defineOptions({ name: 'RewardRuleCouponShowcase' })
+
+const list = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的优惠券列表
+
+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)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>