feat：【antd】【mall】diy-editor 的 promotion-seckill 初始化 50%

apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts

@@ -50,6 +50,10 @@ export namespace MallCombinationActivityApi {
     products: CombinationProduct[];
     /** 图片 */
     picUrl?: string;
+    /** 商品名称 */
+    spuName?: string;
+    /** 市场价 */
+    marketPrice?: number;
   }
 
   /** 扩展 SKU 配置 */

apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts

@@ -57,6 +57,10 @@ export namespace MallSeckillActivityApi {
     products?: SeckillProduct[];
     /** 图片 */
     picUrl?: string;
+    /** 商品名称 */
+    spuName?: string;
+    /** 市场价 */
+    marketPrice?: number;
   }
 
   /** 扩展 SKU 配置 */

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue

@@ -18,7 +18,7 @@ defineOptions({ name: 'PromotionCombination' });
 
 const props = defineProps<{ property: PromotionCombinationProperty }>();
 
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
   MallCombinationActivityApi.CombinationActivity[]
@@ -81,14 +81,14 @@ function calculateSpace(index: number) {
 const containerRef = ref();
 
 /** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
   if (props.property.layoutType === 'twoCol') {
     // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
-  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品简介
+    introduction: PromotionSeckillFieldProperty; // 商品简介
-    introduction: PromotionSeckillFieldProperty;
+    marketPrice: PromotionSeckillFieldProperty; // 市场价
-    // 市场价
+    name: PromotionSeckillFieldProperty; // 商品名称
-    marketPrice: PromotionSeckillFieldProperty;
+    price: PromotionSeckillFieldProperty; // 商品价格
-    // 商品名称
+    salesCount: PromotionSeckillFieldProperty; // 商品销量
-    name: PromotionSeckillFieldProperty;
+    stock: PromotionSeckillFieldProperty; // 商品库存
-    // 商品价格
+  }; // 商品字段
-    price: PromotionSeckillFieldProperty;
-    // 商品销量
-    salesCount: PromotionSeckillFieldProperty;
-    // 商品库存
-    stock: PromotionSeckillFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
-  };
-  // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
-    // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
-    bgEndColor: string;
+    text: string; // 文字
-    // 图片按钮：图片地址
+    type: 'img' | 'text'; // 类型：文字 | 图片
-    imgUrl: string;
+  }; // 按钮
-    // 文字
+  borderRadiusTop: number; // 上圆角
-    text: string;
+  borderRadiusBottom: number; // 下圆角
-    // 类型：文字 | 图片
+  space: number; // 间距
-    type: 'img' | 'text';
+  activityIds: number[]; // 秒杀活动编号
-  };
+  style: ComponentStyle; // 组件样式
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 秒杀活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionSeckillFieldProperty {
-  // 是否显示
+  show: boolean; // 是否显示
-  show: boolean;
+  color: string; // 颜色
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue

@@ -15,10 +15,9 @@ import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivit
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
-// 定义属性
 const props = defineProps<{ property: PromotionSeckillProperty }>();
-// 商品列表
+
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
@@ -66,32 +65,25 @@ watch(
   },
 );
 
-/**
+/** 计算商品的间距 */
- * 计算商品的间距
+function calculateSpace(index: number) {
- * @param index 商品索引
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
- */
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
-const calculateSpace = (index: number) => {
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
 const containerRef = ref();
-// 计算商品的宽度
+
-const calculateWidth = () => {
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
@@ -113,7 +105,7 @@ const calculateWidth = () => {
     >
       <!-- 角标 -->
       <div
-        v-if="property.badge.show"
+        v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
         <ElImage
@@ -135,7 +127,7 @@ const calculateWidth = () => {
         <ElImage fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-2 p-2"
+        class="box-border flex flex-col gap-[8px] p-[8px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
@@ -147,7 +139,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-sm"
+          class="text-[14px]"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +154,7 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-xs"
+          class="truncate text-[12px]"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -171,7 +163,7 @@ const calculateWidth = () => {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-base"
+            class="text-[16px]"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price || Infinity) }}
@@ -179,13 +171,13 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-1 text-[10px] line-through"
+            class="ml-[4px] text-[10px] line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
-            ￥{{ fenToYuan(spu.marketPrice) }}
+            ￥{{ fenToYuan(spu.marketPrice!) }}
           </span>
         </div>
-        <div class="text-xs">
+        <div class="text-[12px]">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -203,11 +195,11 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-2 right-2">
+      <div class="absolute bottom-[8px] right-[8px]">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-3 py-1 text-xs text-white"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -217,7 +209,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <ElImage
           v-else
-          class="h-7 w-7 rounded-full"
+          class="h-[28px] w-[28px] rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -225,5 +217,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { PromotionSeckillProperty } from './config';
 
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -19,29 +14,23 @@ import {
   ElRadioGroup,
   ElSlider,
   ElSwitch,
+  ElTooltip,
 } from 'element-plus';
 
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
 
-// 秒杀属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 秒杀属性面板 */
 defineOptions({ name: 'PromotionSeckillProperty' });
 
 const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-onMounted(async () => {
-  const { list } = await SeckillActivityApi.getSeckillActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -68,10 +57,10 @@ onMounted(async () => {
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
               </ElRadioButton>
             </ElTooltip>
-            <!--<el-tooltip class="item" content="三列" placement="bottom">
+            <!--<ElTooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
+              <ElRadioButton value="threeCol">
                 <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </el-radio-button>
+              </ElRadioButton>
             </ElTooltip>-->
           </ElRadioGroup>
         </ElFormItem>
@@ -116,7 +105,7 @@ onMounted(async () => {
         <ElFormItem label="角标" prop="badge.show">
           <ElSwitch v-model="formData.badge.show" />
         </ElFormItem>
-        <ElFormItem v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
@@ -193,5 +182,3 @@ onMounted(async () => {
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue

@@ -1,3 +1,4 @@
+<!-- 秒杀活动橱窗组件 - 用于装修时展示和选择秒杀活动 -->
 <script lang="ts" setup>
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
 
@@ -10,117 +11,120 @@ import { ElImage, ElTooltip } from 'element-plus';
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 import SeckillTableSelect from '#/views/mall/promotion/seckill/components/seckill-table-select.vue';
 
-// 活动橱窗，一般用于装修时使用
+interface SeckillShowcaseProps {
-// 提供功能：展示活动列表、添加活动、删除活动
+  modelValue: number | number[];
-defineOptions({ name: 'SeckillShowcase' });
+  limit?: number;
+  disabled?: boolean;
+}
 
-const props = defineProps({
+const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
-  modelValue: {
+  limit: Number.MAX_VALUE,
-    type: [Number, Array],
+  disabled: false,
-    required: true,
-  },
-  // 限制数量：默认不限制
-  limit: {
-    type: Number,
-    default: Number.MAX_VALUE,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['update:modelValue', 'change']);
+const emit = defineEmits<{
+  change: [value: any];
+  'update:modelValue': [value: number | number[]];
+}>();
+
+// 秒杀活动列表
+const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
 // 计算是否可以添加
 const canAdd = computed(() => {
-  // 情况一：禁用时不可以添加
   if (props.disabled) return false;
-  // 情况二：未指定限制数量时，可以添加
   if (!props.limit) return true;
-  // 情况三：检查已添加数量是否小于限制数量
+  return seckillActivityList.value.length < props.limit;
-  return Activitys.value.length < props.limit;
 });
 
-// 拼团活动列表
+// 秒杀活动选择器引用
-const Activitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-
-watch(
-  () => props.modelValue,
-  async () => {
-    let ids;
-    if (Array.isArray(props.modelValue)) {
-      ids = props.modelValue;
-    } else {
-      ids = props.modelValue ? [props.modelValue] : [];
-    }
-    // 不需要返显
-    if (ids.length === 0) {
-      Activitys.value = [];
-      return;
-    }
-    // 只有活动发生变化之后，才会查询活动
-    if (
-      Activitys.value.length === 0 ||
-      Activitys.value.some(
-        (seckillActivity) => !ids.includes(seckillActivity.id!),
-      )
-    ) {
-      Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(
-        ids as number[],
-      );
-    }
-  },
-  { immediate: true },
-);
-
-/** 活动表格选择对话框 */
 const seckillActivityTableSelectRef = ref();
-// 打开对话框
+
-const openSeckillActivityTableSelect = () => {
+/**
-  seckillActivityTableSelectRef.value.open(Activitys.value);
+ * 打开秒杀活动选择器
-};
+ */
+function openSeckillActivityTableSelect() {
+  seckillActivityTableSelectRef.value.open(seckillActivityList.value);
+}
 
 /**
  * 选择活动后触发
- * @param activityVOs 选中的活动列表
  */
-const handleActivitySelected = (
+function handleActivitySelected(
-  activityVOs:
+  activityList:
     | MallSeckillActivityApi.SeckillActivity
     | MallSeckillActivityApi.SeckillActivity[],
-) => {
+) {
-  Activitys.value = Array.isArray(activityVOs) ? activityVOs : [activityVOs];
+  seckillActivityList.value = Array.isArray(activityList)
+    ? activityList
+    : [activityList];
   emitActivityChange();
-};
+}
 
 /**
  * 删除活动
- * @param index 活动索引
  */
-const handleRemoveActivity = (index: number) => {
+function handleRemoveActivity(index: number) {
-  Activitys.value.splice(index, 1);
+  seckillActivityList.value.splice(index, 1);
   emitActivityChange();
-};
+}
-const emitActivityChange = () => {
+
+/**
+ * 发送变更事件
+ */
+function emitActivityChange() {
   if (props.limit === 1) {
     const seckillActivity =
-      Activitys.value.length > 0 ? Activitys.value[0] : null;
+      seckillActivityList.value.length > 0
+        ? seckillActivityList.value[0]
+        : null;
     emit('update:modelValue', seckillActivity?.id || 0);
     emit('change', seckillActivity);
   } else {
     emit(
       'update:modelValue',
-      Activitys.value.map((seckillActivity) => seckillActivity.id),
+      seckillActivityList.value.map((seckillActivity) => seckillActivity.id),
     );
-    emit('change', Activitys.value);
+    emit('change', seckillActivityList.value);
   }
-};
+}
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = Array.isArray(props.modelValue)
+      ? props.modelValue
+      : props.modelValue
+        ? [props.modelValue]
+        : [];
+
+    // 不需要返显
+    if (ids.length === 0) {
+      seckillActivityList.value = [];
+      return;
+    }
+
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      seckillActivityList.value.length === 0 ||
+      seckillActivityList.value.some(
+        (seckillActivity) => !ids.includes(seckillActivity.id!),
+      )
+    ) {
+      seckillActivityList.value =
+        await SeckillActivityApi.getSeckillActivityListByIds(ids as number[]);
+    }
+  },
+  { immediate: true },
+);
 </script>
+
 <template>
-  <div class="gap-8px flex flex-wrap items-center">
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 活动图片列表 -->
     <div
-      v-for="(seckillActivity, index) in Activitys"
+      v-for="(seckillActivity, index) in seckillActivityList"
       :key="seckillActivity.id"
       class="select-box spu-pic"
     >
@@ -136,13 +140,16 @@ const emitActivityChange = () => {
         </div>
       </ElTooltip>
     </div>
-    <ElTooltip content="选择活动" v-if="canAdd">
+
+    <!-- 添加按钮 -->
+    <ElTooltip v-if="canAdd" content="选择活动">
       <div class="select-box" @click="openSeckillActivityTableSelect">
         <IconifyIcon icon="ep:plus" />
       </div>
     </ElTooltip>
   </div>
-  <!-- 拼团活动选择对话框（表格形式） -->
+
+  <!-- 秒杀活动选择对话框 -->
   <SeckillTableSelect
     ref="seckillActivityTableSelectRef"
     :multiple="limit !== 1"

apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue

@@ -50,6 +50,7 @@ const emits = defineEmits<{
       | MallSeckillActivityApi.SeckillActivity[],
   ];
 }>();
+
 // 列表的总页数
 const total = ref(0);
 // 列表的数据
@@ -128,7 +129,7 @@ const resetQuery = () => {
 };
 
 /**
- * 格式化拼团价格
+ * 格式化秒杀价格
  * @param products
  */
 const formatSeckillPrice = (
@@ -339,18 +340,11 @@ onMounted(async () => {
           min-width="100"
           :formatter="fenToYuanFormat"
         />
-        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+        <el-table-column label="秒杀价" prop="seckillPrice" min-width="100">
           <template #default="scope">
             {{ formatSeckillPrice(scope.row.products) }}
           </template>
         </el-table-column>
-        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
-        <el-table-column
-          label="成团组数"
-          prop="groupSuccessCount"
-          min-width="100"
-        />
-        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
         <el-table-column
           label="活动状态"
           align="center"