feat：【mall】diy editor 的 product-card 优化 50%

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

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

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

@@ -13,10 +13,11 @@ import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  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`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  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 = () => {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -136,14 +130,14 @@ const calculateWidth = () => {
             class="text-[16px]"
             :style="{ color: property.fields.price.color }"
           >
-            ￥{{ fenToYuan(spu.price as any) }}
+            ￥{{ fenToYuan(spu.price!) }}
           </span>
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
             class="ml-[4px] text-[10px] line-through"
             :style="{ color: property.fields.marketPrice.color }"
-            >￥{{ fenToYuan(spu.marketPrice) }}
+            >￥{{ fenToYuan(spu.marketPrice!) }}
           </span>
         </div>
         <div class="text-[12px]">
@@ -186,5 +180,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -22,11 +22,15 @@ import { ColorInput } from '#/views/mall/promotion/components';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品卡片属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 商品卡片属性面板 */
 defineOptions({ name: 'ProductCardProperty' });
 
 const props = defineProps<{ modelValue: ProductCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -174,5 +178,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>