【代码优化】】商城: 完善代码评审提到的问题

e1ccf523 · puhui999 · 5bf1de54 · e1ccf523 · e1ccf523 · e1ccf523
Commit e1ccf523 authored Aug 26, 2024 by puhui999
4 changed files
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -32,7 +32,6 @@
          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
        </div>
      </template>
-      <!-- TODO @puhui999：1）表单展示的时候，位置会偏掉，已发微信-->
      <template #file="row">
        <div class="flex items-center">
          <span>{{ row.file.name }}</span>

--- a/src/views/mall/promotion/rewardActivity/RewardForm.vue
+++ b/src/views/mall/promotion/rewardActivity/RewardForm.vue
@@ -74,6 +74,8 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
 import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+import { cloneDeep } from 'lodash-es'
+import { fenToYuan, yuanToFen } from '@/utils'
 defineOptions({ name: 'ProductBrandForm' })
@@ -111,7 +113,12 @@ const open = async (type: string, id?: number) => {
    formLoading.value = true
    try {
      const data = await RewardActivityApi.getReward(id)
+      // 转区段时间
      data.startAndEndTime = [data.startTime, data.endTime]
+      // 规则分转元
+      data.rules.forEach((item: any) => {
+        item.discountPrice = fenToYuan(item.discountPrice || 0)
+      })
      formData.value = data
      // 获得商品范围
      await getProductScope()
@@ -126,7 +133,7 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
  // 校验表单
-  if (!formRef) return
+  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
@@ -135,7 +142,14 @@ const submitForm = async () => {
  try {
    // 设置活动规则优惠券
    rewardRuleRef.value?.setRuleCoupon()
-    const data = formData.value
+    const data = cloneDeep(formData.value)
+    // 时间段转换
+    data.startTime = data.startAndEndTime![0]
+    data.endTime = data.startAndEndTime![1]
+    // 规则元转分
+    data.rules.forEach((item) => {
+      item.discountPrice = yuanToFen(item.discountPrice || 0)
+    })
    // 设置商品范围
    setProductScopeValues(data)
    if (formType.value === 'create') {
@@ -170,8 +184,7 @@ const getProductScope = async () => {
      formData.value.productSpuIds = formData.value.productScopeValues
      break
    case PromotionProductScopeEnum.CATEGORY.scope:
-      // TODO @puhui999：可以直接 await nextTick() 呀。
+      await nextTick()
-      await nextTick(() => {
      let productCategoryIds = formData.value.productScopeValues as any
      if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
        // 单选时使用数组不能反显
@@ -179,7 +192,6 @@ const getProductScope = async () => {
      }
      // 设置品类编号
      formData.value.productCategoryIds = productCategoryIds
-      })
      break
    default:
      break

--- a/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
+++ b/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
@@ -25,12 +25,13 @@
              订单金额优惠
              <el-form-item>
                减
-                <!-- TODO @puhui999：需要考虑 100 换算哈 -->
+                <el-input-number
-                <el-input
                  v-model="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
                  class="w-150px! p-x-20px!"
-                  placeholder=""
+                  controls-position="right"
-                  type="number"
                />
                元
              </el-form-item>
@@ -71,9 +72,9 @@
                inactive-text="否"
                inline-prompt
              />
-              <RewardRuleCouponShowcase
+              <RewardRuleCouponSelect
                v-if="rule.giveCoupon"
-                ref="rewardRuleCouponShowcaseRef"
+                ref="rewardRuleCouponSelectRef"
                v-model="rule!"
              />
            </el-col>
@@ -88,12 +89,14 @@
 </template>
 <script lang="ts" setup>
-import RewardRuleCouponShowcase from './RewardRuleCouponShowcase.vue'
+import RewardRuleCouponSelect from './RewardRuleCouponSelect.vue'
 import { RewardActivityVO } from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum } from '@/utils/constants'
 import { useVModel } from '@vueuse/core'
 import { isEmpty } from '@/utils/is'
+defineOptions({ name: 'RewardRule' })
 const props = defineProps<{
  modelValue: RewardActivityVO
 }>()
@@ -104,7 +107,7 @@ const emits = defineEmits<{
 }>()
 const formData = useVModel(props, 'modelValue', emits) // 活动数据
-const rewardRuleCouponShowcaseRef = ref<InstanceType<typeof RewardRuleCouponShowcase>[]>() // 活动规则优惠券 Ref
+const rewardRuleCouponSelectRef = ref<InstanceType<typeof RewardRuleCouponSelect>[]>() // 活动规则优惠券 Ref
 /** 删除优惠规则 */
 const deleteRule = (ruleIndex: number) => {
@@ -127,14 +130,20 @@ const addRule = () => {
 /** 设置规则优惠券-提交时 */
 const setRuleCoupon = () => {
-  if (isEmpty(rewardRuleCouponShowcaseRef.value)) {
+  if (isEmpty(rewardRuleCouponSelectRef.value)) {
    return
  }
-  rewardRuleCouponShowcaseRef.value?.forEach((item) => item.setGiveCouponList())
+  // 情况一：不赠送优惠券
+  formData.value.rules.forEach((rule) => {
+    if (!rule.giveCoupon) {
+      rule.couponIds = []
+      rule.couponCounts = []
+    }
+  })
+  // 情况二：赠送优惠券
+  rewardRuleCouponSelectRef.value?.forEach((item) => item.setGiveCouponList())
 }
 defineExpose({ setRuleCoupon })
 </script>
-<style lang="scss" scoped></style>
--- a/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue
+++ b/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponShowcase.vue
@@ -40,7 +40,7 @@ import { isEmpty } from '@/utils/is'
 import { useVModel } from '@vueuse/core'
 import { findIndex } from '@/utils'
-// TODO @puhui999：要不就叫 RewardRuleCouponSelect
+defineOptions({ name: 'RewardRuleCouponSelect' })
 const props = defineProps<{
  modelValue: RewardRule
@@ -89,15 +89,13 @@ const initGiveCouponList = async () => {
  if (!data) {
    return
  }
+  data.forEach((coupon) => {
-  for (let i = 0; i < data.length; i++) {
+    const index = findIndex(rewardRule.value.couponIds!, (couponId) => couponId === coupon.id)
-    const coupon = data[i]
-    const index = findIndex(rewardRule.value.couponIds!, (item) => item.id === coupon.id)
    list.value.push({
      ...coupon,
      giveCount: rewardRule.value.couponCounts![index]
    })
-  }
+  })
 }
 /** 设置赠送的优惠券 */
@@ -106,15 +104,8 @@ const setGiveCouponList = () => {
    return
  }
-  const couponIds: number[] = []
+  rewardRule.value.couponIds = list.value.map((rule) => rule.id)
-  const couponCounts: number[] = []
+  rewardRule.value.couponCounts = list.value.map((rule) => rule.giveCount || 0)
-  for (let i = 0, len = list.value.length; i < len; i++) {
-    couponIds.push(list.value[i].id)
-    couponCounts.push(list.value[i].giveCount!)
-  }
-  // TODO @puhui999：可以考虑，直接使用 list 的 map 操作，简单一些。性能没啥差别的
-  rewardRule.value.couponIds = couponIds
-  rewardRule.value.couponCounts = couponCounts
 }
 defineExpose({ setGiveCouponList })