📖 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://api-dashboard.yudao.iocoder.cn'
-VITE_BASE_URL='http://dofast.demo.huizhizao.vip:20001'
+# 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,7 +1,7 @@
 import request from '@/config/axios'
 
 export interface DiscountActivityVO {
-  id?:number,
+  id?: number
   name?: string
   startTime?: Date
   endTime?: Date
@@ -11,6 +11,7 @@ export interface DiscountActivityVO {
   productSpuIds?: number[]
   rules?: DiscountProductVO[]
 }
+
 // 优惠规则
 export interface DiscountProductVO {
   limit: 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,  })
+  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)"
+            :label="dict.value"
-            >{{ dict.label }}</el-radio
           >
+            {{ 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>
+            <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
+                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-form-item label="优惠内容:" label-width="100px" style="padding-left: 50px">
-                <el-checkbox-group  v-model="rules[index]" style="width:100%">
+                <el-checkbox-group v-model="activityRules[index]" style="width: 100%">
                   <el-col :span="24">
                     <el-checkbox label="订单金额优惠" name="type" />
-                      <el-form-item v-if="rules[index].includes('订单金额优惠')">
+                    <el-form-item v-if="activityRules[index].includes('订单金额优惠')">
-                        减<el-input style="width: 150px;padding:0 20px;" v-model="item.discountPrice" type='number' placeholder="" />元
+                      减
+                      <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 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-form-item v-if="activityRules[index].includes('送积分')">
-                        送<el-input style="width: 150px;padding:0 20px;" v-model="item.point" type='number' placeholder="" />积分
+                      送
+                      <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-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>
+        <!-- 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)"
+            :label="dict.value"
-            >{{ dict.label }}</el-radio
           >
+            {{ 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"
+            <span style="float: right; font-size: 13px; color: #8492a6">
-              >￥{{ (item.price / 100.0).toFixed(2) }}</span
+              ￥{{ (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 {
+import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
-  PromotionConditionTypeEnum,
-  PromotionProductScopeEnum,
-  PromotionActivityStatusEnum
-} from '@/utils/constants'
-// 商品数据
-const productSpus = ref<any[]>([])
 
 /** 初始化 **/
 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: [{
+  rules: [
+    {
       limit: undefined,
       discountPrice: undefined,
       freeDelivery: undefined,
       point: undefined,
       couponIds: [],
       couponCounts: []
-  }],
+    }
+  ]
 })
-// 优惠设置
+const activityRules = reactive([]) // 优惠设置。每个元素都是一个 []，放“包邮”、“送积分”、“订单金额优惠”
-let rules=reactive([]);
-// 优惠券列表
-
 const formRules = reactive({
   name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
   startAndEndTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
@@ -173,21 +211,22 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-    let data= await RewardActivityApi.getReward(id);
+      let data = await RewardActivityApi.getReward(id)
-    data.startAndEndTime=[new Date(data.startTime), new Date(data.endTime)];
+      data.startAndEndTime = [new Date(data.startTime), new Date(data.endTime)]
-    rules.splice(0,rules.length);
+      activityRules.splice(0, activityRules.length)
       data.rules.forEach((item) => {
-      let ars:string[]=reactive([]);
+        // TODO 是不是不用 reactive，直接 [] 就可以了？
+        let array: string[] = reactive([])
         if (item.freeDelivery) {
-        ars.push('包邮')
+          array.push('包邮')
         }
         if (item.point) {
-        ars.push('送积分')
+          array.push('送积分')
         }
         if (item.discountPrice) {
-        ars.push('订单金额优惠')
+          array.push('订单金额优惠')
         }
-      rules.push(ars)
+        activityRules.push(array)
       })
       formData.value = data
     } finally {
@@ -207,18 +246,13 @@ const submitForm = async () => {
   // 处理下数据兼容接口
   formData.value.startTime = +new Date(formData.value.startAndEndTime[0])
   formData.value.endTime = +new Date(formData.value.startAndEndTime[1])
-  console.log(rules)
+  activityRules.forEach((item, index) => {
-  rules.forEach((item,index)=>{
+    formData.value.rules[index].freeDelivery = !!item.includes('包邮')
-      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;
+      formData.value.rules[index].point = undefined
     }
     if (!item.includes('订单金额优惠')) {
-        formData.value.rules[index].discountPrice=undefined;
+      formData.value.rules[index].discountPrice = undefined
     }
   })
 
@@ -241,7 +275,7 @@ const submitForm = async () => {
   }
 }
 
-const addStratum =()=>{
+const addActivityStratum = () => {
   formData.value.rules.push({
     limit: undefined,
     discountPrice: undefined,
@@ -250,13 +284,12 @@ const addStratum =()=>{
     couponIds: [],
     couponCounts: []
   })
-    rules.push([]);
+  activityRules.push([])
-    console.log(rules)
 }
 
-const deleteStratum=(index)=>{
+const deleteActivityRule = (index) => {
   formData.value.rules.splice(index, 1)
-  rules.splice(index,1)
+  activityRules.splice(index, 1)
 }
 
 /** 重置表单 */
@@ -271,17 +304,19 @@ const resetForm = () => {
     remark: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
     productSpuIds: undefined,
-    rules: [{
+    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()

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

@@ -122,7 +122,6 @@
 <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 RewardForm from './RewardForm.vue'
 
@@ -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'))