【代码优化】分支合并

2025-07-15 03:15:07 +08:00 · 2024-08-19 16:38:15 +08:00
parent 231bdd1dd0 fc5e37dd21
commit ffdd3325dd
48 changed files with 1316 additions and 462 deletions
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@ -1,8 +1,9 @@
 <script lang="tsx">
-import { defineComponent, PropType, ref } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
 import { DictDataType, getDictOptions } from '@/utils/dict'
+import { isArray, isBoolean, isNumber, isString } from '@/utils/is'

 export default defineComponent({
  name: 'DictTag',
@ -12,49 +13,78 @@ export default defineComponent({
      required: true
    },
    value: {
-      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      type: [String, Number, Boolean, Array],
      required: true
+    },
+    // 字符串分隔符 只有当 props.value 传入值为字符串时有效
+    separator: {
+      type: String as PropType<string>,
+      default: ','
+    },
+    // 每个 tag 之间的间隔，默认为 5px，参考的 el-row 的 gutter
+    gutter: {
+      type: String as PropType<string>,
+      default: '5px'
    }
  },
  setup(props) {
-    const dictData = ref<DictDataType>()
-    const getDictObj = (dictType: string, value: string) => {
-      const dictOptions = getDictOptions(dictType)
-      dictOptions.forEach((dict: DictDataType) => {
-        if (dict.value === value) {
-          if (dict.colorType + '' === 'default') {
-            dict.colorType = 'info'
-          }
-          dictData.value = dict
-        }
-      })
-    }
-    const rederDictTag = () => {
+    const valueArr: any = computed(() => {
+      // 1. 是 Number 类型和 Boolean 类型的情况
+      if (isNumber(props.value) || isBoolean(props.value)) {
+        return [String(props.value)]
+      }
+      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
+      else if (isString(props.value)) {
+        return props.value.split(props.separator)
+      }
+      // 3. 数组
+      else if (isArray(props.value)) {
+        return props.value.map(String)
+      }
+      return []
+    })
+    const renderDictTag = () => {
      if (!props.type) {
        return null
      }
      // 解决自定义字典标签值为零时标签不渲染的问题
-      if (props.value === undefined || props.value === null) {
+      if (props.value === undefined || props.value === null || props.value === '') {
        return null
      }
-      getDictObj(props.type, props.value.toString())
-      // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+      const dictOptions = getDictOptions(props.type)
+
      return (
-        <ElTag
-          style={dictData.value?.cssClass ? 'color: #fff' : ''}
-          type={dictData.value?.colorType}
-          color={
-            dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
-              ? dictData.value?.cssClass
-              : ''
-          }
-          disableTransitions={true}
+        <div
+          class="dict-tag"
+          style={{
+            display: 'inline-flex',
+            gap: props.gutter,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
        >
-          {dictData.value?.label}
-        </ElTag>
+          {dictOptions.map((dict: DictDataType) => {
+            if (valueArr.value.includes(dict.value)) {
+              if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+                dict.colorType = ''
+              }
+              return (
+                // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+                <ElTag
+                  style={dict?.cssClass ? 'color: #fff' : ''}
+                  type={dict?.colorType || null}
+                  color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
+                  disableTransitions={true}
+                >
+                  {dict?.label}
+                </ElTag>
+              )
+            }
+          })}
+        </div>
      )
    }
-    return () => rederDictTag()
+    return () => renderDictTag()
  }
 })
 </script>
--- a/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+++ b/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@ -1,35 +1,35 @@
 <template>
-  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+  <el-scrollbar ref="containerRef" class="z-1 min-h-30px" wrap-class="w-full">
    <!-- 商品网格 -->
    <div
-      class="grid overflow-x-auto"
      :style="{
        gridGap: `${property.space}px`,
        gridTemplateColumns,
        width: scrollbarWidth
      }"
+      class="grid overflow-x-auto"
    >
      <!-- 商品 -->
      <div
-        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        v-for="(spu, index) in spuList"
+        :key="index"
        :style="{
          borderTopLeftRadius: `${property.borderRadiusTop}px`,
          borderTopRightRadius: `${property.borderRadiusTop}px`,
          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
          borderBottomRightRadius: `${property.borderRadiusBottom}px`
        }"
-        v-for="(spu, index) in spuList"
-        :key="index"
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
      >
        <!-- 角标 -->
        <div
          v-if="property.badge.show"
          class="absolute left-0 top-0 z-1 items-center justify-center"
        >
-          <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
+          <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
        </div>
        <!-- 商品封面图 -->
-        <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
+        <el-image :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" fit="cover" />
        <div
          :class="[
            'flex flex-col gap-8px p-8px box-border',
@ -42,8 +42,8 @@
          <!-- 商品名称 -->
          <div
            v-if="property.fields.name.show"
-            class="truncate text-12px"
            :style="{ color: property.fields.name.color }"
+            class="truncate text-12px"
          >
            {{ spu.name }}
          </div>
@ -51,10 +51,10 @@
            <!-- 商品价格 -->
            <span
              v-if="property.fields.price.show"
-              class="text-12px"
              :style="{ color: property.fields.price.color }"
+              class="text-12px"
            >
-              ￥{{ spu.price }}
+              ￥{{ fenToYuan(spu.combinationPrice || spu.price || 0) }}
            </span>
          </div>
        </div>
@ -62,10 +62,13 @@
    </div>
  </el-scrollbar>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { PromotionCombinationProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
+import { Spu } from '@/api/mall/product/spu'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { CombinationProductVO } from '@/api/mall/promotion/combination/combinationActivity'
+import { fenToYuan } from '@/utils'

 /** 拼团 */
 defineOptions({ name: 'PromotionCombination' })
@ -80,6 +83,13 @@ watch(
    const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
    if (!activity?.spuId) return
    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+    // 循环活动信息，赋值拼团价格
+    activity.products.forEach((product: CombinationProductVO) => {
+      spuList.value.forEach((spu: Spu) => {
+        // 商品原售价和拼团价，哪个便宜就赋值哪个
+        spu.combinationPrice = Math.min(spu.combinationPrice || Infinity, product.combinationPrice) // 设置 SPU 的最低价格
+      })
+    })
  },
  {
    immediate: true,
@ -122,4 +132,4 @@ onMounted(() => {
 })
 </script>

-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
--- a/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
+++ b/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@ -1,35 +1,35 @@
 <template>
-  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+  <el-scrollbar ref="containerRef" class="z-1 min-h-30px" wrap-class="w-full">
    <!-- 商品网格 -->
    <div
-      class="grid overflow-x-auto"
      :style="{
        gridGap: `${property.space}px`,
        gridTemplateColumns,
        width: scrollbarWidth
      }"
+      class="grid overflow-x-auto"
    >
      <!-- 商品 -->
      <div
-        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        v-for="(spu, index) in spuList"
+        :key="index"
        :style="{
          borderTopLeftRadius: `${property.borderRadiusTop}px`,
          borderTopRightRadius: `${property.borderRadiusTop}px`,
          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
          borderBottomRightRadius: `${property.borderRadiusBottom}px`
        }"
-        v-for="(spu, index) in spuList"
-        :key="index"
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
      >
        <!-- 角标 -->
        <div
          v-if="property.badge.show"
          class="absolute left-0 top-0 z-1 items-center justify-center"
        >
-          <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
+          <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
        </div>
        <!-- 商品封面图 -->
-        <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
+        <el-image :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" fit="cover" />
        <div
          :class="[
            'flex flex-col gap-8px p-8px box-border',
@ -42,8 +42,8 @@
          <!-- 商品名称 -->
          <div
            v-if="property.fields.name.show"
-            class="truncate text-12px"
            :style="{ color: property.fields.name.color }"
+            class="truncate text-12px"
          >
            {{ spu.name }}
          </div>
@ -51,10 +51,10 @@
            <!-- 商品价格 -->
            <span
              v-if="property.fields.price.show"
-              class="text-12px"
              :style="{ color: property.fields.price.color }"
+              class="text-12px"
            >
-              ￥{{ spu.price }}
+              ￥{{ fenToYuan(spu.seckillPrice || spu.price || 0) }}
            </span>
          </div>
        </div>
@ -62,10 +62,13 @@
    </div>
  </el-scrollbar>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { PromotionSeckillProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
+import { Spu } from '@/api/mall/product/spu'
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { SeckillProductVO } from '@/api/mall/promotion/seckill/seckillActivity'
+import { fenToYuan } from '@/utils'

 /** 秒杀 */
 defineOptions({ name: 'PromotionSeckill' })
@ -80,6 +83,13 @@ watch(
    const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
    if (!activity?.spuId) return
    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+    // 循环活动信息，赋值秒杀最低价格
+    activity.products.forEach((product: SeckillProductVO) => {
+      spuList.value.forEach((spu: Spu) => {
+        spu.seckillPrice = Math.min(spu.seckillPrice || Infinity, product.seckillPrice) // 设置 SPU 的最低价格
+      })
+    })
  },
  {
    immediate: true,
@ -122,4 +132,4 @@ onMounted(() => {
 })
 </script>

-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>