【代码优化】MALL: 满减送活动范围重构

25b23881 · puhui999 · 45fc9957 · 25b23881 · 25b23881
Commit 25b23881 authored Aug 22, 2024 by puhui999
Show whitespace changes
Inline Side-by-side

Showing with 57 additions and 25 deletions

src/api/mall/promotion/reward/rewardActivity.ts
+3 -1

src/views/mall/promotion/rewardActivity/RewardForm.vue
+54 -24

No files found.
--- a/src/api/mall/promotion/reward/rewardActivity.ts
+++ b/src/api/mall/promotion/reward/rewardActivity.ts
@@ -9,7 +9,9 @@ export interface RewardActivityVO {
  remark?: string
  conditionType?: number
  productScope?: number
-  productSpuIds?: number[]
+  productScopeValues?: number[] // 商品范围：值为 品类编号列表 或 商品编号列表 ，用于提交
+  productCategoryIds?: number[] // 仅用于表单，不提交
+  productSpuIds?: number[] // 仅用于表单，不提交
  rules?: RewardRule[]
 }

--- a/src/views/mall/promotion/rewardActivity/RewardForm.vue
+++ b/src/views/mall/promotion/rewardActivity/RewardForm.vue
@@ -33,7 +33,7 @@
      <el-form-item label="优惠设置">
        <RewardRule v-model="formData" />
      </el-form-item>
-      <el-form-item label="活动商品" prop="productScope">
+      <el-form-item label="活动范围" prop="productScope">
        <el-radio-group v-model="formData.productScope">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
@@ -44,26 +44,18 @@
          </el-radio>
        </el-radio-group>
      </el-form-item>
-      <!-- TODO：活动商品的开发，可以参考优惠劵的，已经搞好啦； -->
      <el-form-item
        v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
        prop="productSpuIds"
      >
-        <el-select
+        <SpuShowcase v-model="formData.productSpuIds" />
-          v-model="formData.productSpuIds"
+      </el-form-item>
-          clearable
+      <el-form-item
-          filterable
+        v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
-          multiple
+        label="分类"
-          placeholder="请选择活动商品"
+        prop="productCategoryIds"
-          size="small"
      >
-          <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
+        <ProductCategorySelect v-model="formData.productCategoryIds" />
-            <span style="float: left">{{ item.name }}</span>
-            <span style="float: right; font-size: 13px; color: #8492a6">
-              ￥{{ fenToYuan(item.price) }}
-            </span>
-          </el-option>
-        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
@@ -77,11 +69,11 @@
 </template>
 <script lang="ts" setup>
 import RewardRule from './components/RewardRule.vue'
-import { getSpuSimpleList } from '@/api/mall/product/spu'
+import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
-import { fenToYuan } from '@/utils'
+import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
 defineOptions({ name: 'ProductBrandForm' })
@@ -102,7 +94,8 @@ const formRules = reactive({
  startAndEndTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
  conditionType: [{ required: true, message: '条件类型不能为空', trigger: 'change' }],
  productScope: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
-  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
+  productSpuIds: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
+  productCategoryIds: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }]
 })
 const formRef = ref([]) // 表单 Ref
@@ -119,6 +112,8 @@ const open = async (type: string, id?: number) => {
      const data = await RewardActivityApi.getReward(id)
      data.startAndEndTime = [data.startTime, data.endTime]
      formData.value = data
+      // 获得商品范围
+      await getProductScope()
    } finally {
      formLoading.value = false
    }
@@ -140,6 +135,8 @@ const submitForm = async () => {
  formLoading.value = true
  try {
    const data = formData.value
+    // 设置商品范围
+    setProductScopeValues(data)
    if (formType.value === 'create') {
      await RewardActivityApi.createRewardActivity(data)
      message.success(t('common.createSuccess'))
@@ -164,9 +161,42 @@ const resetForm = () => {
  } as RewardActivityApi.RewardActivityVO
 }
-/** 初始化 **/
+/** 获得商品范围 */
-const productSpus = ref<any[]>([]) // 商品数据
+const getProductScope = async () => {
-onMounted(async () => {
+  switch (formData.value.productScope) {
-  productSpus.value = await getSpuSimpleList()
+    case PromotionProductScopeEnum.SPU.scope:
-})
+      // 设置商品编号
+      formData.value.productSpuIds = formData.value.productScopeValues
+      break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      await nextTick(() => {
+        let productCategoryIds = formData.value.productScopeValues as any
+        if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
+          // 单选时使用数组不能反显
+          productCategoryIds = productCategoryIds[0]
+        }
+        // 设置品类编号
+        formData.value.productCategoryIds = productCategoryIds
+      })
+      break
+    default:
+      break
+  }
+}
+/** 设置商品范围 */
+function setProductScopeValues(data: any) {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.SPU.scope:
+      data.productScopeValues = formData.value.productSpuIds
+      break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
+        ? formData.value.productCategoryIds
+        : [formData.value.productCategoryIds]
+      break
+    default:
+      break
+  }
+}
 </script>