From 10cb91ad594607b5ac30be9ef63ca1ca66bd3a72 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 22 Aug 2024 18:19:54 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91MALL:=20?=
 =?UTF-8?q?=E6=BB=A1=E5=87=8F=E9=80=81=E6=B4=BB=E5=8A=A8=E8=B5=A0=E9=80=81?=
 =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=EF=BC=8850%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/reward/rewardActivity.ts   |  2 +-
 .../coupon/components/CouponSelect.vue        | 13 ++--
 .../promotion/rewardActivity/RewardForm.vue   |  2 +-
 .../rewardActivity/components/RewardRule.vue  |  4 ++
 .../components/RewardRuleCouponShowcase.vue   | 72 +++++++++++++++++++
 5 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue

diff --git a/src/api/mall/promotion/reward/rewardActivity.ts b/src/api/mall/promotion/reward/rewardActivity.ts
index 0e7630ae..af7390dc 100644
--- a/src/api/mall/promotion/reward/rewardActivity.ts
+++ b/src/api/mall/promotion/reward/rewardActivity.ts
@@ -12,7 +12,7 @@ export interface RewardActivityVO {
   productScopeValues?: number[] // 商品范围：值为 品类编号列表 或 商品编号列表 ，用于提交
   productCategoryIds?: number[] // 仅用于表单，不提交
   productSpuIds?: number[] // 仅用于表单，不提交
-  rules?: RewardRule[]
+  rules: RewardRule[]
 }
 
 // 优惠规则
diff --git a/src/views/mall/promotion/coupon/components/CouponSelect.vue b/src/views/mall/promotion/coupon/components/CouponSelect.vue
index 715dcb7d..c232095e 100644
--- a/src/views/mall/promotion/coupon/components/CouponSelect.vue
+++ b/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<{
-  multipleSelection: CouponTemplateApi.CouponTemplateVO[]
+const props = defineProps<{
+  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[]) => {
-  emit('update:multipleSelection', val)
+  if (props.multipleSelection) {
+    emit('update:multipleSelection', val)
+    return
+  }
+  emit('change', val)
 }
 
 const submitForm = () => {
diff --git a/src/views/mall/promotion/rewardActivity/RewardForm.vue b/src/views/mall/promotion/rewardActivity/RewardForm.vue
index d1dfa9df..46ad2ff1 100644
--- a/src/views/mall/promotion/rewardActivity/RewardForm.vue
+++ b/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"
diff --git a/src/views/mall/promotion/rewardActivity/components/RewardRule.vue b/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
index c119c0db..2d3f37e9 100644
--- a/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
+++ b/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>
diff --git a/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue b/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue
new file mode 100644
index 00000000..79e3a832
--- /dev/null
+++ b/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>