smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：【antd】【mall】diy-editor 里的 mobile 各种修复，不限于 Image 的 preview、Form 的 label-col 的宽度、FormItem 的 prop 属性

Browse Source
This commit is contained in:
YunaiV
2025-11-12 22:55:02 +08:00
parent 0263508912
commit d15ff4bc80
41 changed files with 252 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
View File

@@ -34,41 +34,44 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<Form label-width="80px" :model="formData">
<Form
:model="formData"
:label-col="{ style: { width: '80px' } }"
label-align="right"
>
<p class="text-base font-bold">样式设置：</p>
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<FormItem label="样式" prop="type">
<FormItem label="样式">
<RadioGroup v-model:value="formData.type">
<Tooltip class="item" content="默认" placement="bottom">
<Tooltip class="item" title="默认" placement="bottom">
<RadioButton value="default">
<IconifyIcon icon="system-uicons:carousel" class="size-6" />
</RadioButton>
</Tooltip>
<Tooltip class="item" content="卡片" placement="bottom">
<Tooltip class="item" title="卡片" placement="bottom">
<RadioButton value="card">
<IconifyIcon icon="ic:round-view-carousel" class="size-6" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="高度" prop="height">
<FormItem label="高度">
<InputNumber
v-model:value="formData.height"
class="mr-[10px] !w-1/2"
controls-position="right"
/>
px
</FormItem>
<FormItem label="指示器" prop="indicator">
<FormItem label="指示器">
<RadioGroup v-model:value="formData.indicator">
<Radio value="dot">小圆点</Radio>
<Radio value="number">数字</Radio>
</RadioGroup>
</FormItem>
<FormItem label="是否轮播" prop="autoplay">
<FormItem label="是否轮播">
<Switch v-model:checked="formData.autoplay" />
</FormItem>
<FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<FormItem label="播放间隔" v-if="formData.autoplay">
<Slider
v-model:value="formData.interval"
:max="10"
@@ -82,18 +85,13 @@ const formData = useVModel(props, 'modelValue', emit);
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
<template #default="{ element }">
<FormItem label="类型" prop="type" class="mb-2" label-width="40px">
<FormItem label="类型" name="type">
<RadioGroup v-model:value="element.type">
<Radio value="img">图片</Radio>
<Radio value="video">视频</Radio>
</RadioGroup>
</FormItem>
<FormItem
label="图片"
class="mb-2"
label-width="40px"
v-if="element.type === 'img'"
>
<FormItem label="图片" v-if="element.type === 'img'">
<UploadImg
v-model="element.imgUrl"
draggable="false"
@@ -104,7 +102,7 @@ const formData = useVModel(props, 'modelValue', emit);
/>
</FormItem>
<template v-else>
<FormItem label="封面" class="mb-2" label-width="40px">
<FormItem label="封面">
<UploadImg
v-model="element.imgUrl"
draggable="false"
@@ -114,7 +112,7 @@ const formData = useVModel(props, 'modelValue', emit);
class="min-w-20"
/>
</FormItem>
<FormItem label="视频" class="mb-2" label-width="40px">
<FormItem label="视频">
<UploadFile
v-model="element.videoUrl"
:file-type="['mp4']"
@@ -124,7 +122,7 @@ const formData = useVModel(props, 'modelValue', emit);
/>
</FormItem>
</template>
<FormItem label="链接" class="mb-2" label-width="40px">
<FormItem label="链接">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
View File

@@ -58,11 +58,11 @@ watch(
/** 初始化 */
onMounted(() => {
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.offsetWidth || 375;
});
</script>
<template>
<div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
<div class="z-10 min-h-8 overflow-x-auto" ref="containerRef">
<div
class="flex flex-row text-xs"
:style="{

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
View File

@@ -103,7 +103,7 @@ watch(
>
减{{ floatToFixed2(coupon.discountPrice) }}元
</span>
<span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
<span v-else> 打{{ coupon.discountPercent }}折 </span>
</Typography.Text>
</Typography>
</div>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
View File

@@ -36,7 +36,7 @@ function handleToggleFab() {
:key="index"
class="flex flex-col items-center"
>
<Image :src="item.imgUrl" fit="contain" class="!h-7 !w-7">
<Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon
@@ -57,7 +57,7 @@ function handleToggleFab() {
</div>
</template>
<!-- todo: @owen 使用APP主题色 -->
<Button type="primary" size="large" circle @click="handleToggleFab">
<Button type="primary" size="large" shape="circle" @click="handleToggleFab">
<IconifyIcon
icon="lucide:plus"
class="transition-transform duration-300"
@@ -68,7 +68,7 @@ function handleToggleFab() {
<!-- 模态背景：展开时显示，点击后折叠 -->
<div
v-if="expanded"
class="absolute left-[calc(50%-384px/2)] top-0 z-[11] h-full w-[384px] bg-black/40"
class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
@click="handleToggleFab"
></div>
</template>

16
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
View File

@@ -31,20 +31,26 @@ function handleOpenEditDialog() {
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<Form label-width="80px" :model="formData" class="mt-2">
<FormItem label="上传图片" prop="imgUrl">
<Form
:label-col="{ style: { width: '80px' } }"
:model="formData"
class="mt-2"
>
<FormItem label="上传图片" name="imgUrl">
<UploadImg
v-model="formData.imgUrl"
height="50px"
width="auto"
class="min-w-[80px]"
:show-description="false"
/>
<p class="text-xs text-gray-500">推荐宽度 750</p>
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 推荐宽度 750 </template>
</UploadImg>
</FormItem>
</Form>
<Button type="primary" plain class="w-full" @click="handleOpenEditDialog">
<Button type="primary" ghost class="w-full" @click="handleOpenEditDialog">
设置热区
</Button>
</ComponentContainerProperty>

9
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
View File

@@ -26,7 +26,7 @@ const formData = useVModel(props, 'modelValue', emit);
:wrapper-col="{ span: 18 }"
:model="formData"
>
<FormItem label="上传图片" prop="imgUrl">
<FormItem label="上传图片" name="imgUrl">
<UploadImg
v-model="formData.imgUrl"
draggable="false"
@@ -34,9 +34,12 @@ const formData = useVModel(props, 'modelValue', emit);
width="100%"
class="min-w-20"
:show-description="false"
/>
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议宽度750 </template>
</UploadImg>
</FormItem>
<FormItem label="链接" prop="url">
<FormItem label="链接" name="url">
<AppLinkInput v-model="formData.url" />
</FormItem>
</Form>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
View File

@@ -55,9 +55,9 @@ const rowCount = computed(() => {
}"
>
<Image
class="h-full w-full"
fit="cover"
class="h-full w-full object-cover"
:src="item.imgUrl"
:preview="false"
:style="{
borderTopLeftRadius: `${property.borderRadiusTop}px`,
borderTopRightRadius: `${property.borderRadiusTop}px`,

51
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
View File

@@ -33,31 +33,36 @@ const handleHotAreaSelected = (_: any, index: number) => {
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2">
<Form
:model="formData"
:label-col="{ style: { width: '80px' } }"
label-align="right"
>
<p class="text-base font-bold">魔方设置：</p>
<MagicCubeEditor
class="my-4"
v-model="formData.list"
:rows="4"
:cols="4"
@hot-area-selected="handleHotAreaSelected"
/>
<template v-for="(hotArea, index) in formData.list" :key="index">
<template v-if="selectedHotAreaIndex === index">
<FormItem label="上传图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="hotArea.imgUrl"
height="80px"
width="80px"
:show-description="false"
/>
</FormItem>
<FormItem label="链接" :name="`list[${index}].url`">
<AppLinkInput v-model="hotArea.url" />
</FormItem>
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<p class="text-xs text-gray-500">每格尺寸 187 * 187</p>
<MagicCubeEditor
v-model="formData.list"
:rows="4"
:cols="4"
@hot-area-selected="handleHotAreaSelected"
/>
<template v-for="(hotArea, index) in formData.list" :key="index">
<template v-if="selectedHotAreaIndex === index">
<FormItem label="上传图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="hotArea.imgUrl"
height="80px"
width="80px"
:show-description="false"
/>
</FormItem>
<FormItem label="链接" :name="`list[${index}].url`">
<AppLinkInput v-model="hotArea.url" />
</FormItem>
</template>
</template>
</template>
<!-- TODO @芋艿：距离不一致，需要看看怎么统一； -->
</div>
<FormItem label="上圆角" name="borderRadiusTop">
<Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
</FormItem>

25
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
View File

@@ -28,8 +28,12 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<Form label-width="80px" :model="formData" class="mt-2">
<FormItem label="每行数量" prop="column">
<Form
:label-col="{ style: { width: '80px' } }"
:model="formData"
class="mt-2"
>
<FormItem label="每行数量" name="column">
<RadioGroup v-model:value="formData.column">
<Radio :value="3">3个</Radio>
<Radio :value="4">4个</Radio>
@@ -42,42 +46,43 @@ const formData = useVModel(props, 'modelValue', emit);
:empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
>
<template #default="{ element }">
<FormItem label="图标" prop="iconUrl">
<FormItem label="图标" name="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
width="80px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：44 * 44</template>
</UploadImg>
</FormItem>
<FormItem label="标题" prop="title">
<FormItem label="标题" name="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="副标题" prop="subtitle">
<FormItem label="副标题" name="subtitle">
<InputWithColor
v-model="element.subtitle"
v-model:color="element.subtitleColor"
/>
</FormItem>
<FormItem label="链接" prop="url">
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
<FormItem label="显示角标" prop="badge.show">
<Switch v-model="element.badge.show" />
<FormItem label="显示角标" name="badge.show">
<Switch v-model:checked="element.badge.show" />
</FormItem>
<template v-if="element.badge.show">
<FormItem label="角标内容" prop="badge.text">
<FormItem label="角标内容" name="badge.text">
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>
</FormItem>
<FormItem label="背景颜色" prop="badge.bgColor">
<FormItem label="背景颜色" name="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" />
</FormItem>
</template>

9
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
View File

@@ -19,7 +19,12 @@ defineProps<{ property: MenuListProperty }>();
class="flex h-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
>
<div class="flex flex-1 flex-row items-center gap-2">
<Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
<Image
v-if="item.iconUrl"
class="h-4 w-4"
:src="item.iconUrl"
:preview="false"
/>
<span class="text-base" :style="{ color: item.titleColor }">
{{ item.title }}
</span>
@@ -28,7 +33,7 @@ defineProps<{ property: MenuListProperty }>();
<span class="text-xs" :style="{ color: item.subtitleColor }">
{{ item.subtitle }}
</span>
<IconifyIcon icon="lucide:arrow-right" class="size-4" />
<IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
</div>
</div>
</div>

13
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
View File

@@ -27,7 +27,12 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<p class="text-base font-bold">菜单设置</p>
<Form :model="formData" class="mt-2">
<p class="text-xs text-gray-500">拖动左侧的小圆点可以调整顺序</p>
<Form
:label-col="{ style: { width: '60px' } }"
:model="formData"
class="mt-2"
>
<Draggable
v-model="formData.list"
:empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
@@ -39,8 +44,10 @@ const formData = useVModel(props, 'modelValue', emit);
height="80px"
width="80px"
:show-description="false"
/>
<p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：44 * 44 </template>
</UploadImg>
</FormItem>
<FormItem label="标题" name="title">
<InputWithColor

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
View File

@@ -3,7 +3,7 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
import { ref, watch } from 'vue';
import { Image } from 'ant-design-vue';
import { Carousel, Image } from 'ant-design-vue';
/** 菜单导航 */
defineOptions({ name: 'MenuSwiper' });

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

@@ -69,6 +69,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="80px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：98 * 98 </template>
</UploadImg>
</FormItem>

28
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
View File

@@ -91,7 +91,7 @@ function handleHotAreaSelected(
</div>
<template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
<template v-if="selectedHotAreaIndex === Number(cellIndex)">
<FormItem :prop="`cell[${cellIndex}].type`" label="类型">
<FormItem :name="`cell[${cellIndex}].type`" label="类型">
<RadioGroup
v-model:value="cell.type"
@change="handleHotAreaSelected(cell, cellIndex)"
@@ -103,19 +103,19 @@ function handleHotAreaSelected(
</FormItem>
<!-- 1. 文字 -->
<template v-if="cell.type === 'text'">
<FormItem :prop="`cell[${cellIndex}].text`" label="内容">
<FormItem :name="`cell[${cellIndex}].text`" label="内容">
<Input v-model:value="cell!.text" :maxlength="10" show-count />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].text`" label="颜色">
<FormItem :name="`cell[${cellIndex}].text`" label="颜色">
<ColorInput v-model="cell!.textColor" />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].url`" label="链接">
<FormItem :name="`cell[${cellIndex}].url`" label="链接">
<AppLinkInput v-model="cell.url" />
</FormItem>
</template>
<!-- 2. 图片 -->
<template v-else-if="cell.type === 'image'">
<FormItem :prop="`cell[${cellIndex}].imgUrl`" label="图片">
<FormItem :name="`cell[${cellIndex}].imgUrl`" label="图片">
<UploadImg
v-model="cell.imgUrl"
:limit="1"
@@ -125,39 +125,39 @@ function handleHotAreaSelected(
/>
<span class="text-xs text-gray-500">建议尺寸 56*56</span>
</FormItem>
<FormItem :prop="`cell[${cellIndex}].url`" label="链接">
<FormItem :name="`cell[${cellIndex}].url`" label="链接">
<AppLinkInput v-model="cell.url" />
</FormItem>
</template>
<!-- 3. 搜索框 -->
<template v-else>
<FormItem label="框体颜色" prop="backgroundColor">
<FormItem label="框体颜色" name="backgroundColor">
<ColorInput v-model="cell.backgroundColor" />
</FormItem>
<FormItem class="lef" label="文本颜色" prop="textColor">
<FormItem class="lef" label="文本颜色" name="textColor">
<ColorInput v-model="cell.textColor" />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
<FormItem :name="`cell[${cellIndex}].placeholder`" label="提示文字">
<Input v-model:value="cell.placeholder" :maxlength="10" show-count />
</FormItem>
<FormItem label="文本位置" prop="placeholderPosition">
<FormItem label="文本位置" name="placeholderPosition">
<RadioGroup v-model:value="cell!.placeholderPosition">
<Tooltip content="居左" placement="top">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip content="居中" placement="top">
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="扫一扫" prop="showScan">
<FormItem label="扫一扫" name="showScan">
<Switch v-model:checked="cell!.showScan" />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
<FormItem :name="`cell[${cellIndex}].borderRadius`" label="圆角">
<Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
</FormItem>
</template>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
View File

@@ -35,6 +35,7 @@ const rules = {
height="48px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip>建议尺寸：24 * 24</template>
</UploadImg>
</FormItem>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
View File

@@ -35,6 +35,7 @@ const formData = useVModel(props, 'modelValue', emit);
:limit="1"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip>建议宽度 750px</template>
</UploadImg>
</FormItem>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
View File

@@ -31,7 +31,11 @@ function handleActive(index: number) {
}"
@click="handleActive(index)"
>
<Image :src="item.imgUrl" fit="contain" class="h-full w-full">
<Image
:src="item.imgUrl"
:preview="false"
class="h-full w-full object-contain"
>
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="lucide:image" />

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
View File

@@ -18,7 +18,7 @@ const formData = useVModel(props, 'modelValue', emit);
</script>
<template>
<Form :model="formData">
<Form :label-col="{ style: { width: '80px' } }" :model="formData">
<Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
<template #default="{ element, index }">
<FormItem label="图片" :name="`list[${index}].imgUrl`">

16
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
View File

@@ -72,7 +72,11 @@ function calculateWidth() {
v-if="property.badge.show && property.badge.imgUrl"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
<Image
:src="property.badge.imgUrl"
:preview="false"
class="h-6 w-8 object-cover"
/>
</div>
<!-- 商品封面图 -->
<div
@@ -84,7 +88,11 @@ function calculateWidth() {
},
]"
>
<Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
<Image
class="h-full w-full object-cover"
:src="spu.picUrl"
:preview="false"
/>
</div>
<div
class="box-border flex flex-col gap-2 p-2"
@@ -168,9 +176,9 @@ function calculateWidth() {
<!-- 图片按钮 -->
<Image
v-else
class="size-7 rounded-full"
fit="cover"
class="size-7 rounded-full object-cover"
:src="property.btnBuy.imgUrl"
:preview="false"
/>
</div>
</div>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
View File

@@ -116,6 +116,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="72px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
@@ -146,6 +147,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="56px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
View File

@@ -69,11 +69,11 @@ watch(
/** 初始化 */
onMounted(() => {
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.offsetWidth || 375;
});
</script>
<template>
<div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
<div class="z-10 min-h-[30px] w-full" ref="containerRef">
<!-- 商品网格 -->
<div
class="grid overflow-x-auto"
@@ -101,16 +101,16 @@ onMounted(() => {
class="absolute left-0 top-0 z-10 items-center justify-center"
>
<Image
fit="cover"
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
:preview="false"
class="h-[26px] w-[38px] object-cover"
/>
</div>
<!-- 商品封面图 -->
<Image
fit="cover"
:src="spu.picUrl"
:style="{ width: imageSize, height: imageSize }"
:style="{ width: imageSize, height: imageSize, objectFit: 'cover' }"
:preview="false"
/>
<div
class="box-border flex flex-col gap-2 p-2"

17
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
View File

@@ -43,7 +43,7 @@ const formData = useVModel(props, 'modelValue', emit);
<SpuShowcase v-model="formData.spuIds" />
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="布局" prop="type">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
@@ -68,13 +68,13 @@ const formData = useVModel(props, 'modelValue', emit);
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" prop="fields.name.show">
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品价格" prop="fields.price.show">
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
@@ -82,36 +82,37 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem>
</Card>
<Card title="角标" class="property-group" :bordered="false">
<FormItem label="角标" prop="badge.show">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="上圆角" prop="borderRadiusTop">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" prop="borderRadiusBottom">
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" prop="space">
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
View File

@@ -27,5 +27,5 @@ watch(
);
</script>
<template>
<div class="min-h-8" v-dompurify-html="article?.content"></div>
<div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
</template>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -48,12 +48,12 @@ onMounted(() => {
:wrapper-col="{ span: 18 }"
:model="formData"
>
<FormItem label="文章" prop="id">
<FormItem label="文章" name="id">
<Select
v-model:value="formData.id"
placeholder="请选择文章"
class="w-full"
filterable
:show-search="true"
:loading="loading"
:options="
articles.map((item: any) => ({ label: item.title, value: item.id }))

22
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
View File

@@ -111,26 +111,34 @@ function calculateWidth() {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
<Image
:src="property.badge.imgUrl"
class="h-6 w-8 object-cover"
:preview="false"
/>
</div>
<!-- 商品封面图 -->
<div
class="h-36"
class="h-[140px]"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
},
]"
>
<Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
<Image
class="h-full w-full object-cover"
:src="spu.picUrl"
:preview="false"
/>
</div>
<div
class="box-border flex flex-col gap-2 p-2"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100vw-36px-16px)]':
'w-[calc(100%-140px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"
@@ -208,9 +216,9 @@ function calculateWidth() {
<!-- 图片按钮 -->
<Image
v-else
class="size-7 rounded-full"
fit="cover"
class="size-7 rounded-full object-cover"
:src="property.btnBuy.imgUrl"
:preview="false"
/>
</div>
</div>

36
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

@@ -44,7 +44,7 @@ const formData = useVModel(props, 'modelValue', emit);
<CombinationShowcase v-model="formData.activityIds" />
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="布局" prop="type">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
@@ -72,37 +72,37 @@ const formData = useVModel(props, 'modelValue', emit);
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" prop="fields.name.show">
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" prop="fields.introduction.show">
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" prop="fields.price.show">
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" prop="fields.marketPrice.show">
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" prop="fields.salesCount.show">
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" prop="fields.stock.show">
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
@@ -110,62 +110,64 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem>
</Card>
<Card title="角标" class="property-group" :bordered="false">
<FormItem label="角标" prop="badge.show">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：36 * 22</template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group" :bordered="false">
<FormItem label="按钮类型" prop="btnBuy.type">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" prop="btnBuy.text">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" prop="btnBuy.bgEndColor">
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" prop="btnBuy.imgUrl">
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：56 * 56</template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="上圆角" prop="borderRadiusTop">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" prop="borderRadiusBottom">
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" prop="space">
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>

22
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
View File

@@ -88,7 +88,7 @@ function calculateWidth() {
<template>
<div
ref="containerRef"
class="box-content flex min-h-9 w-full flex-row flex-wrap"
class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
>
<div
v-for="(spu, index) in spuList"
@@ -108,19 +108,27 @@ function calculateWidth() {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
<Image
:src="property.badge.imgUrl"
class="h-6 w-10 object-cover"
:preview="false"
/>
</div>
<!-- 商品封面图 -->
<div
class="h-36"
class="h-[140px]"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
},
]"
>
<Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
<Image
:src="spu.picUrl"
class="h-full w-full object-cover"
:preview="false"
/>
</div>
<div
class="box-border flex flex-col gap-2 p-2"
@@ -211,8 +219,8 @@ function calculateWidth() {
<Image
v-else
:src="property.btnBuy.imgUrl"
class="size-7 rounded-full"
fit="cover"
class="size-7 rounded-full object-cover"
:preview="false"
/>
</div>
</div>

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -33,7 +33,11 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Form
:model="formData"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<Card title="积分商城活动" class="property-group">
<PointShowcase v-model="formData.activityIds" />
</Card>
@@ -114,6 +118,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="72px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
@@ -144,6 +149,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="56px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>

24
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
View File

@@ -87,7 +87,7 @@ function calculateWidth() {
</script>
<template>
<div
class="box-content flex min-h-9 w-full flex-row flex-wrap"
class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
ref="containerRef"
>
<div
@@ -108,26 +108,34 @@ function calculateWidth() {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
<Image
:src="property.badge.imgUrl"
class="h-6 w-8 object-cover"
:preview="false"
/>
</div>
<!-- 商品封面图 -->
<div
class="h-36"
class="h-[140px]"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
},
]"
>
<Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
<Image
class="h-full w-full object-cover"
:src="spu.picUrl"
:preview="false"
/>
</div>
<div
class="box-border flex flex-col gap-2 p-2"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100vw-140px-16px)]':
'w-[calc(100%-140px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"
@@ -205,9 +213,9 @@ function calculateWidth() {
<!-- 图片按钮 -->
<Image
v-else
class="size-7 rounded-full"
fit="cover"
class="size-7 rounded-full object-cover"
:src="property.btnBuy.imgUrl"
:preview="false"
/>
</div>
</div>

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

@@ -35,7 +35,11 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Form
:model="formData"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<Card title="秒杀活动" class="property-group">
<SeckillShowcase v-model="formData.activityIds" />
</Card>
@@ -116,6 +120,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="72px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
@@ -146,6 +151,7 @@ const formData = useVModel(props, 'modelValue', emit);
width="56px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸：56 * 56</template>
</UploadImg>
</FormItem>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
View File

@@ -48,7 +48,7 @@ watch(
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Form :model="formData" :label-col="{ style: { width: '80px' } }">
<Card title="搜索热词" class="property-group">
<Draggable
v-model="formData.hotKeywords"

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
View File

@@ -31,6 +31,7 @@ defineProps<{ property: TabBarProperty }>();
<Image
:src="index === 0 ? item.activeIconUrl : item.iconUrl"
class="!h-[26px] w-[26px] rounded"
:preview="false"
>
<template #error>
<div class="flex h-full w-full items-center justify-center">

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
View File

@@ -88,6 +88,7 @@ const handleThemeChange = () => {
class="min-w-[200px]"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议尺寸 375 * 50 </template>
</UploadImg>
</FormItem>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
View File

@@ -18,8 +18,8 @@ defineProps<{ property: TitleBarProperty }>();
<Image
v-if="property.bgImgUrl"
:src="property.bgImgUrl"
fit="cover"
class="w-full"
:preview="false"
class="w-full object-cover"
/>
<div
class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -47,6 +47,7 @@ const rules = {}; // 表单校验
height="40px"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip>建议尺寸 750*80</template>
</UploadImg>
</FormItem>

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
View File

@@ -14,12 +14,12 @@ defineProps<{ property: UserCardProperty }>();
<div class="flex flex-col">
<div class="flex items-center justify-between px-4 py-6">
<div class="flex flex-1 items-center gap-4">
<Avatar class="size-14">
<IconifyIcon icon="lucide:user" class="size-14" />
<Avatar :size="60">
<IconifyIcon icon="ep:avatar" :size="60" />
</Avatar>
<span class="text-lg font-bold">芋道源码</span>
<span class="text-[18px] font-bold">芋道源码</span>
</div>
<IconifyIcon icon="lucide:qr-code" class="size-5" />
<IconifyIcon icon="tdesign:qrcode" :size="20" />
</div>
<div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
<span class="text-orange-500">点击绑定手机号</span>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
View File

@@ -11,5 +11,6 @@ defineProps<{ property: UserCouponProperty }>();
<template>
<Image
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
:preview="false"
/>
</template>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
View File

@@ -12,5 +12,6 @@ defineProps<{ property: UserOrderProperty }>();
<template>
<Image
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
:preview="false"
/>
</template>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
View File

@@ -12,5 +12,6 @@ defineProps<{ property: UserWalletProperty }>();
<template>
<Image
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
:preview="false"
/>
</template>

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
View File

@@ -14,6 +14,7 @@ defineProps<{ property: VideoPlayerProperty }>();
class="h-full w-full"
:src="property.posterUrl"
v-if="property.posterUrl"
:preview="false"
/>
<video
v-else

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
View File

@@ -49,6 +49,7 @@ const formData = useVModel(props, 'modelValue', emit);
class="min-w-[80px]"
:show-description="false"
>
<!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
<template #tip> 建议宽度750 </template>
</UploadImg>
</FormItem>