feat：【mall】diy editor 的 product-list 优化

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

@@ -18,9 +18,8 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 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';
 
@@ -38,7 +37,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">

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

@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
-  // 布局类型：双列 | 三列 | 水平滑动
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
-  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品名称
+    name: ProductListFieldProperty; // 商品名称
-    name: ProductListFieldProperty;
+    price: ProductListFieldProperty; // 商品价格
-    // 商品价格
+  }; // 商品字段
-    price: ProductListFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
+  borderRadiusTop: number; // 上圆角
-  };
+  borderRadiusBottom: number; // 下圆角
-  // 上圆角
+  space: number; // 间距
-  borderRadiusTop: number;
+  spuIds: number[]; // 商品编号列表
-  // 下圆角
+  style: ComponentStyle; // 组件样式
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductListFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductListFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductList',
   name: '商品栏',

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

@@ -13,10 +13,11 @@ import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
-// 定义属性
+
 const props = defineProps<{ property: ProductListProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -27,19 +28,15 @@ watch(
     deep: true,
   },
 );
-// 手机宽度
+
-const phoneWidth = ref(375);
+const phoneWidth = ref(375); // 手机宽度
-// 容器
+const containerRef = ref(); // 容器
-const containerRef = ref();
+const columns = ref(2); // 商品的列数
-// 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
-const columns = ref(2);
+const imageSize = ref('0'); // 商品图大小
-// 滚动条宽度
+const gridTemplateColumns = ref(''); // 商品网络列数
-const scrollbarWidth = ref('100%');
+
-// 商品图大小
+/** 计算布局参数 */
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,8 +66,9 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
   phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
 });
 </script>
@@ -146,5 +144,3 @@ onMounted(() => {
     </div>
   </ElScrollbar>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -6,6 +6,7 @@ import { IconifyIcon } from '@vben/icons';
 import { useVModel } from '@vueuse/core';
 import {
   ElCard,
+  ElCheckbox,
   ElForm,
   ElFormItem,
   ElRadioButton,
@@ -16,17 +17,18 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品栏属性面板
+/** 商品栏属性面板 */
 defineOptions({ name: 'ProductListProperty' });
 
 const props = defineProps<{ modelValue: ProductListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -34,7 +36,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
@@ -119,5 +121,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>