From 4bb631fb24fd755b380002e564f95270e81654a6 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sat, 1 Nov 2025 19:58:34 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?= =?UTF-8?q?=20=E7=9A=84=20promotion-combination=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/promotion-combination/config.ts | 76 +++++++------------ .../mobile/promotion-combination/index.vue | 39 ++++------ .../mobile/promotion-combination/property.vue | 42 +++++----- 3 files changed, 59 insertions(+), 98 deletions(-) diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts index f0497dc19..f9db86b73 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts @@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util'; /** 拼团属性 */ export interface PromotionCombinationProperty { - // 布局类型：单列 | 三列 - layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; - // 商品字段 + layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列 fields: { - // 商品简介 - introduction: PromotionCombinationFieldProperty; - // 市场价 - marketPrice: PromotionCombinationFieldProperty; - // 商品名称 - name: PromotionCombinationFieldProperty; - // 商品价格 - price: PromotionCombinationFieldProperty; - // 商品销量 - salesCount: PromotionCombinationFieldProperty; - // 商品库存 - stock: PromotionCombinationFieldProperty; - }; - // 角标 + introduction: PromotionCombinationFieldProperty; // 商品简介 + marketPrice: PromotionCombinationFieldProperty; // 市场价 + name: PromotionCombinationFieldProperty; // 商品名称 + price: PromotionCombinationFieldProperty; // 商品价格 + salesCount: PromotionCombinationFieldProperty; // 商品销量 + stock: PromotionCombinationFieldProperty; // 商品库存 + }; // 商品字段 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; - // 拼团活动编号 - activityIds: number[]; - // 组件样式 - style: ComponentStyle; + bgBeginColor: string; // 文字按钮：背景渐变起始颜色 + bgEndColor: string; // 文字按钮：背景渐变结束颜色 + imgUrl: string; // 图片按钮：图片地址 + text: string; // 文字 + type: 'img' | 'text'; // 类型：文字 | 图片 + }; // 按钮 + borderRadiusTop: number; // 上圆角 + borderRadiusBottom: number; // 下圆角 + space: number; // 间距 + activityIds: number[]; // 拼团活动编号 + style: ComponentStyle; // 组件样式 } -// 商品字段 +/** 商品字段属性 */ export interface PromotionCombinationFieldProperty { - // 是否显示 - show: boolean; - // 颜色 - color: string; + show: boolean; // 是否显示 + color: string; // 颜色 } -// 定义组件 +/** 定义组件 */ export const component = { id: 'PromotionCombination', name: '拼团', diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue index 82f1f5bd7..4be26abf4 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue @@ -15,9 +15,9 @@ import * as CombinationActivityApi from '#/api/mall/promotion/combination/combin /** 拼团卡片 */ defineOptions({ name: 'PromotionCombination' }); -// 定义属性 + const props = defineProps<{ property: PromotionCombinationProperty }>(); -// 商品列表 + const spuList = ref([]); const spuIdList = ref([]); const combinationActivityList = ref< @@ -30,7 +30,7 @@ watch( try { // 新添加的拼团组件，是没有活动ID的 const activityIds = props.property.activityIds; - // 检查活动ID的有效性 + // 检查活动 ID 的有效性 if (Array.isArray(activityIds) && activityIds.length > 0) { // 获取拼团活动详情列表 combinationActivityList.value = @@ -70,28 +70,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 }; @@ -117,7 +110,7 @@ const calculateWidth = () => { >
{
- ￥{{ fenToYuan(spu.marketPrice) }} + ￥{{ fenToYuan(spu.marketPrice!) }}
@@ -229,5 +222,3 @@ const calculateWidth = () => {
- - diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue index 273580f44..fe222be0b 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue @@ -1,17 +1,15 @@ @@ -186,5 +182,3 @@ onMounted(async () => { - -