📖 MALL：code review 满减送活动

.env.dev

@@ -4,8 +4,8 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-# VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
-VITE_BASE_URL='http://dofast.demo.huizhizao.vip:20001'
+VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
+# VITE_BASE_URL='http://dofast.demo.huizhizao.vip:20001'
 
 # 上传路径
 VITE_UPLOAD_URL='http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload'
@@ -35,4 +35,4 @@ VITE_OUT_DIR=dist
 VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
 
 # 验证码的开关
-VITE_APP_CAPTCHA_ENABLE=true
+VITE_APP_CAPTCHA_ENABLE=false

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

@@ -1,17 +1,18 @@
 import request from '@/config/axios'
 
 export interface DiscountActivityVO {
-  id?:number,
+  id?: number
   name?: string
-  startTime?:Date
-  endTime?:Date
-  remark?:string
-  conditionType?:number
-  productScope?:number
-  productSpuIds?:number[]
-  rules?:DiscountProductVO[]
+  startTime?: Date
+  endTime?: Date
+  remark?: string
+  conditionType?: number
+  productScope?: number
+  productSpuIds?: number[]
+  rules?: DiscountProductVO[]
 }
-//优惠规则
+
+// 优惠规则
 export interface DiscountProductVO {
   limit: number
   discountPrice: number
@@ -21,23 +22,26 @@ export interface DiscountProductVO {
   couponCounts: number[]
 }
 
-
 // 新增满减送活动
 export const createRewardActivity = async (data: DiscountActivityVO) => {
   return await request.post({ url: '/promotion/reward-activity/create', data })
 }
+
 // 更新满减送活动
 export const updateRewardActivity = async (data: DiscountActivityVO) => {
   return await request.put({ url: '/promotion/reward-activity/update', data })
 }
+
 // 查询满减送活动列表
 export const getRewardActivityPage = async (params) => {
   return await request.get({ url: '/promotion/reward-activity/page', params })
 }
+
 // 查询满减送活动详情
-export const getReward = async (id:number) => {
-  return await request.get({ url: '/promotion/reward-activity/get?id='+id,  })
+export const getReward = async (id: number) => {
+  return await request.get({ url: '/promotion/reward-activity/get?id=' + id })
 }
+
 // 删除限时折扣活动
 export const deleteRewardActivity = async (id: number) => {
   return await request.delete({ url: '/promotion/reward-activity/delete?id=' + id })

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

@@ -24,51 +24,96 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE)"
             :key="dict.value"
-            :label="parseInt(dict.value)"
-            >{{ dict.label }}</el-radio
+            :label="dict.value"
           >
+            {{ dict.label }}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="优惠设置">
-        <template v-for="(item,index) in formData.rules" :key="index">
-        <el-row type="flex">
-          <el-col :span="24" style="font-weight: bold;display: flex;">活动层级{{ index+1 }}<el-button link type="danger" style="margin-left: auto;" v-if="index!=0" @click="deleteStratum(index)">删除</el-button></el-col>
-            <e-form :ref="'formRef'+index" :model="item"  >
-               <el-form-item  label="优惠门槛:" prop="limit" label-width="100px" style="padding-left: 50px;">满<el-input style="width: 150px;padding:0 10px;" v-model="item.limit" type='number' placeholder="" /> 元
-               </el-form-item>
-               <el-form-item label="优惠内容:"  label-width="100px"  style="padding-left: 50px;">
-                <el-checkbox-group  v-model="rules[index]" style="width:100%">
-                    <el-col :span="24">
-                      <el-checkbox  label="订单金额优惠" name="type" />
-                      <el-form-item v-if="rules[index].includes('订单金额优惠')">
-                        减<el-input style="width: 150px;padding:0 20px;" v-model="item.discountPrice" type='number' placeholder="" />元
-                     </el-form-item>
-                    </el-col>
-                    <el-col :span="24"><el-checkbox v-model="item.freeDelivery" label="包邮" name="type" /></el-col>
-                    <el-col :span="24">
-                      <el-checkbox label="送积分" name="type" />
-                      <el-form-item v-if="rules[index].includes('送积分')">
-                        送<el-input style="width: 150px;padding:0 20px;" v-model="item.point" type='number' placeholder="" />积分
-                     </el-form-item>
-                    </el-col>
-                    <!-- 优惠券待处理  也可以参考优惠劵的SpuShowcase-->
-                    <!-- TODO 待实现！-->
-                    <el-col :span="24"><el-checkbox label="送优惠券" name="type" /></el-col>
+        <template v-for="(item, index) in formData.rules" :key="index">
+          <el-row type="flex">
+            <el-col :span="24" style="font-weight: bold; display: flex">
+              活动层级{{ index + 1 }}
+              <el-button
+                link
+                type="danger"
+                style="margin-left: auto"
+                v-if="index != 0"
+                @click="deleteActivityRule(index)"
+              >
+                删除
+              </el-button>
+            </el-col>
+            <e-form :ref="'formRef' + index" :model="item">
+              <el-form-item
+                label="优惠门槛:"
+                prop="limit"
+                label-width="100px"
+                style="padding-left: 50px"
+              >
+                满
+                <el-input
+                  style="width: 150px; padding: 0 10px"
+                  v-model="item.limit"
+                  type="number"
+                  placeholder=""
+                />
+                元
+              </el-form-item>
+              <el-form-item label="优惠内容:" label-width="100px" style="padding-left: 50px">
+                <el-checkbox-group v-model="activityRules[index]" style="width: 100%">
+                  <el-col :span="24">
+                    <el-checkbox label="订单金额优惠" name="type" />
+                    <el-form-item v-if="activityRules[index].includes('订单金额优惠')">
+                      减
+                      <el-input
+                        style="width: 150px; padding: 0 20px"
+                        v-model="item.discountPrice"
+                        type="number"
+                        placeholder=""
+                      />
+                      元
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-checkbox v-model="item.freeDelivery" label="包邮" name="type" />
+                  </el-col>
+                  <el-col :span="24">
+                    <el-checkbox label="送积分" name="type" />
+                    <el-form-item v-if="activityRules[index].includes('送积分')">
+                      送
+                      <el-input
+                        style="width: 150px; padding: 0 20px"
+                        v-model="item.point"
+                        type="number"
+                        placeholder=""
+                      />
+                      积分
+                    </el-form-item>
+                  </el-col>
+                  <!-- 优惠券待处理  也可以参考优惠劵的SpuShowcase-->
+                  <!-- TODO 待实现！-->
+                  <el-col :span="24">
+                    <el-checkbox label="送优惠券" name="type" />
+                  </el-col>
                 </el-checkbox-group>
               </el-form-item>
             </e-form>
-        </el-row>
-      </template>
-        <el-button  type="primary" @click="addStratum">添加活动层级</el-button>
+          </el-row>
+        </template>
+        <!-- TODO 实现：建议改成放在每一个【活动层级】的下面，有点类似主子表 -->
+        <el-button type="primary" @click="addActivityStratum">添加活动层级</el-button>
       </el-form-item>
       <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)"
             :key="dict.value"
-            :label="parseInt(dict.value)"
-            >{{ dict.label }}</el-radio
+            :label="dict.value"
           >
+            {{ dict.label }}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
       <!-- TODO：活动商品的开发，可以参考优惠劵的，已经搞好啦； -->
@@ -87,9 +132,9 @@
         >
           <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
             <span style="float: left">{{ item.name }}</span>
-            <span style="float: right; font-size: 13px; color: #8492a6"
-              >￥{{ (item.price / 100.0).toFixed(2) }}</span
-            >
+            <span style="float: right; font-size: 13px; color: #8492a6">
+              ￥{{ (item.price / 100.0).toFixed(2) }}
+            </span>
           </el-option>
         </el-select>
       </el-form-item>
@@ -106,15 +151,8 @@
 <script lang="ts" setup>
 import { getSpuSimpleList } from '@/api/mall/product/spu'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { CommonStatusEnum } from '@/utils/constants'
-import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'  
-import {
-  PromotionConditionTypeEnum,
-  PromotionProductScopeEnum,
-  PromotionActivityStatusEnum
-} from '@/utils/constants'
-// 商品数据
-const productSpus = ref<any[]>([])
+import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
+import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
 
 /** 初始化 **/
 onMounted(() => {
@@ -127,6 +165,7 @@ defineOptions({ name: 'ProductBrandForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const productSpus = ref<any[]>([]) // 商品数据
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -141,19 +180,18 @@ const formData = ref({
   remark: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
   productSpuIds: undefined,
-  rules: [{
-    limit: undefined,
-    discountPrice:  undefined,
-    freeDelivery: undefined,
-    point:  undefined,
-    couponIds: [],
-    couponCounts: []
-  }],
+  rules: [
+    {
+      limit: undefined,
+      discountPrice: undefined,
+      freeDelivery: undefined,
+      point: undefined,
+      couponIds: [],
+      couponCounts: []
+    }
+  ]
 })
-// 优惠设置
-let rules=reactive([]);
-// 优惠券列表
-
+const activityRules = reactive([]) // 优惠设置。每个元素都是一个 []，放“包邮”、“送积分”、“订单金额优惠”
 const formRules = reactive({
   name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
   startAndEndTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
@@ -173,23 +211,24 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-    let data= await RewardActivityApi.getReward(id);
-    data.startAndEndTime=[new Date(data.startTime), new Date(data.endTime)];
-    rules.splice(0,rules.length);
-    data.rules.forEach((item)=>{
-      let ars:string[]=reactive([]);
-      if(item.freeDelivery){
-        ars.push('包邮')
-      }
-      if(item.point){
-        ars.push('送积分')
-      }
-      if(item.discountPrice){
-        ars.push('订单金额优惠')
-      }
-      rules.push(ars)
-    })
-    formData.value=data
+      let data = await RewardActivityApi.getReward(id)
+      data.startAndEndTime = [new Date(data.startTime), new Date(data.endTime)]
+      activityRules.splice(0, activityRules.length)
+      data.rules.forEach((item) => {
+        // TODO 是不是不用 reactive，直接 [] 就可以了？
+        let array: string[] = reactive([])
+        if (item.freeDelivery) {
+          array.push('包邮')
+        }
+        if (item.point) {
+          array.push('送积分')
+        }
+        if (item.discountPrice) {
+          array.push('订单金额优惠')
+        }
+        activityRules.push(array)
+      })
+      formData.value = data
     } finally {
       formLoading.value = false
     }
@@ -205,21 +244,16 @@ const submitForm = async () => {
   const valid = await formRef.value.validate()
   if (!valid) return
   // 处理下数据兼容接口
-  formData.value.startTime= +new Date(formData.value.startAndEndTime[0])
-  formData.value.endTime=+new Date(formData.value.startAndEndTime[1])
-  console.log(rules)
-  rules.forEach((item,index)=>{
-      if(item.includes('包邮')){
-        formData.value.rules[index].freeDelivery=true;
-      }else{
-        formData.value.rules[index].freeDelivery=false;
-      }
-      if(!item.includes('送积分')){
-        formData.value.rules[index].point=undefined;
-      }
-      if(!item.includes('订单金额优惠')){
-        formData.value.rules[index].discountPrice=undefined;
-      }
+  formData.value.startTime = +new Date(formData.value.startAndEndTime[0])
+  formData.value.endTime = +new Date(formData.value.startAndEndTime[1])
+  activityRules.forEach((item, index) => {
+    formData.value.rules[index].freeDelivery = !!item.includes('包邮')
+    if (!item.includes('送积分')) {
+      formData.value.rules[index].point = undefined
+    }
+    if (!item.includes('订单金额优惠')) {
+      formData.value.rules[index].discountPrice = undefined
+    }
   })
 
   // 提交请求
@@ -241,22 +275,21 @@ const submitForm = async () => {
   }
 }
 
-const addStratum =()=>{
+const addActivityStratum = () => {
   formData.value.rules.push({
-      limit: undefined,
-      discountPrice:  undefined,
-      freeDelivery: undefined,
-      point:  undefined,
-      couponIds: [],
-      couponCounts: []
-    })
-    rules.push([]);
-    console.log(rules)
+    limit: undefined,
+    discountPrice: undefined,
+    freeDelivery: undefined,
+    point: undefined,
+    couponIds: [],
+    couponCounts: []
+  })
+  activityRules.push([])
 }
 
-const deleteStratum=(index)=>{
-  formData.value.rules.splice(index,1)
-  rules.splice(index,1)
+const deleteActivityRule = (index) => {
+  formData.value.rules.splice(index, 1)
+  activityRules.splice(index, 1)
 }
 
 /** 重置表单 */
@@ -271,20 +304,22 @@ const resetForm = () => {
     remark: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
     productSpuIds: undefined,
-    rules: [{
-      limit: undefined,
-      discountPrice:  undefined,
-      freeDelivery: undefined,
-      point:  undefined,
-      couponIds: [],
-      couponCounts: []
-    }],
+    rules: [
+      {
+        limit: undefined,
+        discountPrice: undefined,
+        freeDelivery: undefined,
+        point: undefined,
+        couponIds: [],
+        couponCounts: []
+      }
+    ]
   }
-  rules.splice(0,rules.length);
-  rules.push(reactive([]));
+  activityRules.splice(0, activityRules.length)
+  activityRules.push(reactive([]))
   // 解决下有时刷新页面第一次点编辑报错
- nextTick(()=>{
-  formRef.value?.resetFields()
- })
+  nextTick(() => {
+    formRef.value?.resetFields()
+  })
 }
 </script>

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

@@ -122,8 +122,7 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import * as ProductBrandApi from '@/api/mall/product/brand'
-import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'  
+import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
 import RewardForm from './RewardForm.vue'
 
 defineOptions({ name: 'PromotionRewardActivity' })
@@ -157,16 +156,11 @@ const getList = async () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  // console.log(queryParams)
-  // message.success('已打印搜索参数')
-  // return
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  // message.success('重置查询表单获取数据')
-  // return
   queryFormRef.value.resetFields()
   handleQuery()
 }
@@ -182,8 +176,6 @@ const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
-    // message.success('您以确认删除')
-    // return
     // 发起删除
     await RewardActivityApi.deleteRewardActivity(id)
     message.success(t('common.delSuccess'))