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

src/api/mall/promotion/coupon/couponTemplate.ts

@@ -74,7 +74,7 @@ export function getCouponTemplatePage(params: PageParam) {
 }
 
 // 获得优惠劵模板分页
-export function getCouponTemplateList(ids: number[]) {
+export function getCouponTemplateList(ids: number[]): Promise<CouponTemplateVO[]> {
   return request.get({
     url: `/promotion/coupon-template/list?ids=${ids}`
   })

src/utils/is.ts

@@ -18,8 +18,8 @@ export const isObject = (val: any): val is Record<any, any> => {
   return val !== null && is(val, 'Object')
 }
 
-export const isEmpty = <T = unknown>(val: T): val is T => {
-  if (val === null) {
+export const isEmpty = (val: any): boolean => {
+  if (val === null || val === undefined || typeof val === 'undefined') {
     return true
   }
   if (isArray(val) || isString(val)) {

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

@@ -176,6 +176,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const selectedCouponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的数据
 
 /** 查询列表 */
 const getList = async () => {
@@ -214,11 +215,11 @@ const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
     emit('update:multipleSelection', val)
     return
   }
-  emit('change', val)
+  selectedCouponList.value = val
 }
 
 const submitForm = () => {
   dialogVisible.value = false
+  emit('change', selectedCouponList.value)
 }
-// TODO @puhui999：提前 todo，先不用改；未来单独成组件，其它模块可以服用；例如说，满减送，可以选择优惠劵；
 </script>

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

@@ -2,13 +2,11 @@
   <!-- 满减送活动规则组件 -->
   <el-row>
     <template v-if="formData.rules">
-      <div v-for="(rule, index) in formData.rules" :key="index">
-        <el-col :span="24">
-          <span class="font-bold">活动层级{{ index + 1 }}</span>
-          <el-button v-if="index !== 0" link type="danger" @click="deleteRule(index)">
-            删除
-          </el-button>
-        </el-col>
+      <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">
             满
@@ -63,8 +61,6 @@
                 积分
               </el-form-item>
             </el-col>
-            <!-- 优惠券待处理  也可以参考优惠劵的SpuShowcase-->
-            <!-- TODO 待实现！-->
             <el-col :span="24">
               <span>送优惠券：</span>
               <el-switch
@@ -73,13 +69,13 @@
                 inactive-text="否"
                 inline-prompt
               />
-              <RewardRuleCouponShowcase v-if="rule.giveCoupon" />
+              <RewardRuleCouponShowcase v-if="rule.giveCoupon" v-model="rule!" />
             </el-col>
           </el-form-item>
         </el-form>
-      </div>
+      </el-col>
     </template>
-    <el-col :span="24">
+    <el-col :span="24" class="mt-10px">
       <el-button type="primary" @click="addRule">添加优惠规则</el-button>
     </el-col>
   </el-row>

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

@@ -1,57 +1,61 @@
 <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>
+  <el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠卷</el-button>
+
+  <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" @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 { RewardRule } from '@/api/mall/promotion/reward/rewardActivity'
 import { DICT_TYPE } from '@/utils/dict'
-import {
-  discountFormat,
-  remainedCountFormat,
-  validityTypeFormat
-} from '@/views/mall/promotion/coupon/formatter'
+import { discountFormat } from '@/views/mall/promotion/coupon/formatter'
+import { isEmpty } from '@/utils/is'
+import { useVModel } from '@vueuse/core'
 
 defineOptions({ name: 'RewardRuleCouponShowcase' })
 
-const list = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的优惠券列表
+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>>() // 优惠券选择
 /** 选择优惠券 */
@@ -67,6 +71,57 @@ const handleCouponChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
     list.value.push(item)
   }
 }
+/** 删除优惠券 */
+const deleteCoupon = (index: number) => {
+  list.value.splice(index, 1)
+}
+
+/** 初始化赠送的优惠券列表-如果有的话*/
+const initGiveCouponList = async () => {
+  if (isEmpty(rewardRule.value) || isEmpty(rewardRule.value.couponIds)) {
+    return
+  }
+
+  const data = await CouponTemplateApi.getCouponTemplateList(rewardRule.value.couponIds!)
+  if (!data) {
+    return
+  }
+
+  for (let i = 0, len = data.length; i < len; i++) {
+    list.value.push({
+      ...data[i],
+      giveCount: rewardRule.value.couponCounts![i]
+    })
+  }
+}
+
+/** 设置赠送的优惠券 */
+const setGiveCouponList = () => {
+  if (isEmpty(rewardRule.value) || isEmpty(list.value)) {
+    return
+  }
+
+  const couponIds: number[] = []
+  const couponCounts: number[] = []
+  for (let i = 0, len = list.value.length; i < len; i++) {
+    couponIds.push(list.value[i].id)
+    couponCounts.push(list.value[i].giveCount!)
+  }
+  rewardRule.value.couponIds = couponIds
+  rewardRule.value.couponCounts = couponCounts
+}
+defineExpose({ setGiveCouponList })
+
+/** 组件初始化 */
+onMounted(async () => {
+  await nextTick()
+  await initGiveCouponList()
+})
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.coupon-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>