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

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

Browse Source
This commit is contained in:
YunaiV
2025-11-02 16:36:46 +08:00
parent 82bc4e8b70
commit 0ffe7554ea
8 changed files with 161 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -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

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

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 秒杀属性 */
export interface PromotionSeckillProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionSeckillFieldProperty;
// 市场价
marketPrice: PromotionSeckillFieldProperty;
// 商品名称
name: PromotionSeckillFieldProperty;
// 商品价格
price: PromotionSeckillFieldProperty;
// 商品销量
salesCount: PromotionSeckillFieldProperty;
// 商品库存
stock: PromotionSeckillFieldProperty;
};
// 角标
introduction: PromotionSeckillFieldProperty; // 商品简介
marketPrice: PromotionSeckillFieldProperty; // 市场价
name: PromotionSeckillFieldProperty; // 商品名称
price: PromotionSeckillFieldProperty; // 商品价格
salesCount: PromotionSeckillFieldProperty; // 商品销量
stock: PromotionSeckillFieldProperty; // 商品库存
}; // 商品字段
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 PromotionSeckillFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionSeckill',
name: '秒杀',

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

@@ -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[]>([]);
@@ -28,7 +27,7 @@ watch(
try {
// 新添加的秒杀组件，是没有活动ID的
const activityIds = props.property.activityIds;
// 检查活动ID的有效性
// 检查活动 ID 的有效性
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取秒杀活动详情列表
seckillActivityList.value =
@@ -66,32 +65,25 @@ 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 = () => {
/** 计算商品的宽度 */
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>

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

@@ -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">
<el-radio-button value="threeCol">
<!--<ElTooltip class="item" content="三列" placement="bottom">
<ElRadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</el-radio-button>
</ElRadioButton>
</ElTooltip>-->
</ElRadioGroup>
</ElFormItem>
@@ -116,14 +105,14 @@ 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"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22</template>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</ElFormItem>
</ElCard>
@@ -193,5 +182,3 @@ onMounted(async () => {
</ElForm>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

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

@@ -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';
// 活动橱窗，一般用于装修时使用
// 提供功能：展示活动列表、添加活动、删除活动
defineOptions({ name: 'SeckillShowcase' });
interface SeckillShowcaseProps {
modelValue: number | number[];
limit?: number;
disabled?: boolean;
}
const props = defineProps({
modelValue: {
type: [Number, Array],
required: true,
},
// 限制数量：默认不限制
limit: {
type: Number,
default: Number.MAX_VALUE,
},
disabled: {
type: Boolean,
default: false,
},
const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
limit: Number.MAX_VALUE,
disabled: 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 Activitys.value.length < props.limit;
return seckillActivityList.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 = (
activityVOs:
function handleActivitySelected(
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) => {
Activitys.value.splice(index, 1);
function handleRemoveActivity(index: number) {
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"

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

@@ -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"