oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

Browse Source
This commit is contained in:
xingyu4j
2025-11-12 09:58:23 +08:00
parent 16b42afc93 d4f9bb20dd
commit dad002163b
47 changed files with 1016 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/mall/product/category/components/select.vue
View File

@@ -59,7 +59,7 @@ onMounted(async () => {
}"
:multiple="multiple"
:tree-checkable="multiple"
class="w-1/1"
class="w-full"
placeholder="请选择商品分类"
allow-clear
tree-default-expand-all

2
apps/web-antd/src/views/mall/promotion/combination/components/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as CombinationShowcase } from './showcase.vue';

146
apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue Normal file
View File

@@ -0,0 +1,146 @@
<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
<script lang="ts" setup>
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { computed, ref, watch } from 'vue';
import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
import { Image, Tooltip } from 'ant-design-vue';
import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
import CombinationTableSelect from './table-select.vue';
interface CombinationShowcaseProps {
modelValue?: number | number[];
limit?: number;
disabled?: boolean;
}
const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
modelValue: undefined,
limit: Number.MAX_VALUE,
disabled: false,
});
const emit = defineEmits(['update:modelValue', 'change']);
const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
const combinationTableSelectRef =
ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
const canAdd = computed(() => {
if (props.disabled) {
return false;
}
if (!props.limit) {
return true;
}
return activityList.value.length < props.limit;
});
/** 监听 modelValue 变化，加载活动详情 */
watch(
() => props.modelValue,
async (newValue) => {
// eslint-disable-next-line unicorn/no-nested-ternary
const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
if (ids.length === 0) {
activityList.value = [];
return;
}
// 只有活动发生变化时才重新查询
if (
activityList.value.length === 0 ||
activityList.value.some((activity) => !ids.includes(activity.id!))
) {
activityList.value = await getCombinationActivityListByIds(ids);
}
},
{ immediate: true },
);
/** 打开活动选择对话框 */
function handleOpenActivitySelect() {
combinationTableSelectRef.value?.open(activityList.value);
}
/** 选择活动后触发 */
function handleActivitySelected(
activities:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
) {
activityList.value = Array.isArray(activities) ? activities : [activities];
emitActivityChange();
}
/** 删除活动 */
function handleRemoveActivity(index: number) {
activityList.value.splice(index, 1);
emitActivityChange();
}
/** 触发变更事件 */
function emitActivityChange() {
if (props.limit === 1) {
const activity =
activityList.value.length > 0 ? activityList.value[0] : null;
emit('update:modelValue', activity?.id || 0);
emit('change', activity);
} else {
emit(
'update:modelValue',
activityList.value.map((activity) => activity.id!),
);
emit('change', activityList.value);
}
}
</script>
<template>
<div class="flex flex-wrap items-center gap-2">
<!-- 已选活动列表 -->
<div
v-for="(activity, index) in activityList"
:key="activity.id"
class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
>
<Tooltip :title="activity.name">
<div class="relative h-full w-full">
<Image
:src="activity.picUrl"
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<CloseCircleFilled
v-if="!disabled"
class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
@click="handleRemoveActivity(index)"
/>
</div>
</Tooltip>
</div>
<!-- 添加活动按钮 -->
<Tooltip v-if="canAdd" title="选择活动">
<div
class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
@click="handleOpenActivitySelect"
>
<PlusOutlined class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>
<!-- 活动选择对话框 -->
<CombinationTableSelect
ref="combinationTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"
/>
</template>

285
apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue Normal file
View File

@@ -0,0 +1,285 @@
<!-- 拼团活动选择弹窗组件 -->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallCategoryApi } from '#/api/mall/product/category';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { computed, onMounted, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { fenToYuan, formatDate, handleTree } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCategoryList } from '#/api/mall/product/category';
import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
interface CombinationTableSelectProps {
multiple?: boolean; // 是否多选：true - checkbox；false - radio
}
const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
multiple: false,
});
const emit = defineEmits<{
change: [
activity:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
];
}>();
const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
const categoryTreeList = ref<any[]>([]); // 分类树
/** 单选：处理选中变化 */
function handleRadioChange() {
const selectedRow =
gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
/**
* 格式化拼团价格
* @param products
*/
const formatCombinationPrice = (
products: MallCombinationActivityApi.CombinationProduct[],
) => {
if (!products || products.length === 0) return '-';
const combinationPrice = Math.min(
...products.map((item) => item.combinationPrice || 0),
);
return `￥${fenToYuan(combinationPrice)}`;
};
/** 搜索表单 Schema */
const formSchema = computed<VbenFormSchema[]>(() => [
{
fieldName: 'name',
label: '活动名称',
component: 'Input',
componentProps: {
placeholder: '请输入活动名称',
clearable: true,
},
},
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
placeholder: '请选择活动状态',
clearable: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
]);
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
if (props.multiple) {
columns.push({ type: 'checkbox', width: 55 });
} else {
columns.push({ type: 'radio', width: 55 });
}
columns.push(
{
field: 'id',
title: '活动编号',
minWidth: 80,
},
{
field: 'name',
title: '活动名称',
minWidth: 140,
},
{
field: 'activityTime',
title: '活动时间',
minWidth: 210,
formatter: ({ row }) => {
return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
},
},
{
field: 'picUrl',
title: '商品图片',
width: 100,
cellRender: {
name: 'CellImage',
},
},
{
field: 'spuName',
title: '商品标题',
minWidth: 300,
},
{
field: 'marketPrice',
title: '原价',
minWidth: 100,
formatter: ({ cellValue }) => {
return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
},
},
{
field: 'products',
title: '拼团价',
minWidth: 100,
formatter: ({ cellValue }) => {
return formatCombinationPrice(cellValue);
},
},
{
field: 'groupCount',
title: '开团组数',
minWidth: 100,
},
{
field: 'groupSuccessCount',
title: '成团组数',
minWidth: 100,
},
{
field: 'recordCount',
title: '购买次数',
minWidth: 100,
},
{
field: 'status',
title: '活动状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
width: 180,
formatter: 'formatDateTime',
},
);
return columns;
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
checkboxConfig: {
reserve: true,
},
radioConfig: {
reserve: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
return await getCombinationActivityPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
onConfirm: () => {
const selectedRows =
gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
emit('change', selectedRows);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
gridApi.grid.clearCheckboxRow();
gridApi.grid.clearRadioRow();
return;
}
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
const data = modalApi.getData<
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[]
>();
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((activity) => {
const row = tableData.find(
(item: MallCombinationActivityApi.CombinationActivity) =>
item.id === activity.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallCombinationActivityApi.CombinationActivity) =>
item.id === data.id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}
},
});
/** 对外暴露的方法 */
defineExpose({
open: (
data?:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
) => {
modalApi.setData(data).open();
},
});
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script>
<template>
<Modal title="选择活动" class="w-[950px]">
<Grid />
</Modal>
</template>

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

@@ -22,10 +22,13 @@ const handleIndexChange = (index: number) => {
<template>
<!-- 无图片 -->
<div
class="bg-card flex h-64 items-center justify-center"
class="flex items-center justify-center bg-gray-300"
:style="{
height: property.items.length === 0 ? '250px' : `${property.height}px`,
}"
v-if="property.items.length === 0"
>
<IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
<IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
</div>
<div v-else class="relative">
<Carousel
@@ -33,7 +36,7 @@ const handleIndexChange = (index: number) => {
:autoplay-speed="property.interval * 1000"
:dots="property.indicator !== 'number'"
@change="handleIndexChange"
class="h-44"
:style="{ height: `${property.height}px` }"
>
<div v-for="(item, index) in property.items" :key="index">
<Image
@@ -45,7 +48,7 @@ const handleIndexChange = (index: number) => {
</Carousel>
<div
v-if="property.indicator === 'number'"
class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
>
{{ currentIndex }} / {{ property.items.length }}
</div>

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

@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
import {
Form,
FormItem,
InputNumber,
Radio,
RadioButton,
RadioGroup,
@@ -37,7 +38,7 @@ const formData = useVModel(props, 'modelValue', emit);
<p class="text-base font-bold">样式设置：</p>
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<FormItem label="样式" prop="type">
<RadioGroup v-model="formData.type">
<RadioGroup v-model:value="formData.type">
<Tooltip class="item" content="默认" placement="bottom">
<RadioButton value="default">
<IconifyIcon icon="system-uicons:carousel" class="size-6" />
@@ -50,18 +51,26 @@ const formData = useVModel(props, 'modelValue', emit);
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="高度" prop="height">
<InputNumber
v-model:value="formData.height"
class="mr-[10px] !w-1/2"
controls-position="right"
/>
px
</FormItem>
<FormItem label="指示器" prop="indicator">
<RadioGroup v-model="formData.indicator">
<RadioGroup v-model:value="formData.indicator">
<Radio value="dot">小圆点</Radio>
<Radio value="number">数字</Radio>
</RadioGroup>
</FormItem>
<FormItem label="是否轮播" prop="autoplay">
<Switch v-model="formData.autoplay" />
<Switch v-model:checked="formData.autoplay" />
</FormItem>
<FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<Slider
v-model="formData.interval"
v-model:value="formData.interval"
:max="10"
:min="0.5"
:step="0.5"
@@ -77,7 +86,7 @@ const formData = useVModel(props, 'modelValue', emit);
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
<template #default="{ element }">
<FormItem label="类型" prop="type" class="mb-2" label-width="40px">
<RadioGroup v-model="element.type">
<RadioGroup v-model:value="element.type">
<Radio value="img">图片</Radio>
<Radio value="video">视频</Radio>
</RadioGroup>

91
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
View File

@@ -1,4 +1,87 @@
// 导出所有优惠券相关组件
export { CouponDiscount } from './coupon-discount';
export { CouponDiscountDesc } from './coupon-discount-desc';
export { CouponValidTerm } from './coupon-validTerm';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { defineComponent } from 'vue';
import {
CouponTemplateValidityTypeEnum,
PromotionDiscountTypeEnum,
} from '@vben/constants';
import { floatToFixed2, formatDate } from '@vben/utils';
/** 有效期 */
export const CouponValidTerm = defineComponent({
name: 'CouponValidTerm',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
const text =
coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
coupon.validEndTime,
'YYYY-MM-DD',
)}`
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
return () => <div>{text}</div>;
},
});
/** 优惠值 */
export const CouponDiscount = defineComponent({
name: 'CouponDiscount',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 折扣
let value = `${(coupon.discountPercent ?? 0) / 10}`;
let suffix = ' 折';
// 满减
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
value = floatToFixed2(coupon.discountPrice);
suffix = ' 元';
}
return () => (
<div>
<span class={'text-20px font-bold'}>{value}</span>
<span>{suffix}</span>
</div>
);
},
});
/** 优惠描述 */
export const CouponDiscountDesc = defineComponent({
name: 'CouponDiscountDesc',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 使用条件
const useCondition =
coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
// 优惠描述
const discountDesc =
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
? `减${floatToFixed2(coupon.discountPrice)}元`
: `打${(coupon.discountPercent ?? 0) / 10}折`;
return () => (
<div>
<span>{useCondition}</span>
<span>{discountDesc}</span>
</div>
);
},
});

34
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
View File

@@ -1,34 +0,0 @@
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { defineComponent } from 'vue';
import { PromotionDiscountTypeEnum } from '@vben/constants';
import { floatToFixed2 } from '@vben/utils';
// 优惠描述
export const CouponDiscountDesc = defineComponent({
name: 'CouponDiscountDesc',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 使用条件
const useCondition =
coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
// 优惠描述
const discountDesc =
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
? `减${floatToFixed2(coupon.discountPrice)}元`
: `打${(coupon.discountPercent ?? 0) / 10}折`;
return () => (
<div>
<span>{useCondition}</span>
<span>{discountDesc}</span>
</div>
);
},
});

34
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
View File

@@ -1,34 +0,0 @@
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { defineComponent } from 'vue';
import { PromotionDiscountTypeEnum } from '@vben/constants';
import { floatToFixed2 } from '@vben/utils';
// 优惠值
export const CouponDiscount = defineComponent({
name: 'CouponDiscount',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 折扣
let value = `${(coupon.discountPercent ?? 0) / 10}`;
let suffix = ' 折';
// 满减
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
value = floatToFixed2(coupon.discountPrice);
suffix = ' 元';
}
return () => (
<div>
<span class={'text-20px font-bold'}>{value}</span>
<span>{suffix}</span>
</div>
);
},
});

28
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
View File

@@ -1,28 +0,0 @@
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { defineComponent } from 'vue';
import { CouponTemplateValidityTypeEnum } from '@vben/constants';
import { formatDate } from '@vben/utils';
// 有效期
export const CouponValidTerm = defineComponent({
name: 'CouponValidTerm',
props: {
coupon: {
type: Object as () => MallCouponTemplateApi.CouponTemplate,
required: true,
},
},
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
const text =
coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
coupon.validEndTime,
'YYYY-MM-DD',
)}`
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
return () => <div>{text}</div>;
},
});

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

@@ -13,12 +13,19 @@ import {
CouponValidTerm,
} from './component';
/** 商品卡片 */
/** 优惠劵卡片 */
defineOptions({ name: 'CouponCard' });
// 定义属性
/** 定义属性 */
const props = defineProps<{ property: CouponCardProperty }>();
// 商品列表
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 优惠劵列表
const phoneWidth = ref(375); // 手机宽度
const containerRef = ref(); // 容器引用
const scrollbarWidth = ref('100%'); // 滚动条宽度
const couponWidth = ref(375); // 优惠券宽度
/** 监听优惠券 ID 变化，加载优惠券列表 */
watch(
() => props.property.couponIds,
async () => {
@@ -32,15 +39,7 @@ watch(
},
);
// 手机宽度
const phoneWidth = ref(384);
// 容器
const containerRef = ref();
// 滚动条宽度
const scrollbarWidth = ref('100%');
// 优惠券的宽度
const couponWidth = ref(384);
// 计算布局参数
/** 计算布局参数 */
watch(
() => [props.property, phoneWidth, couponList.value.length],
() => {
@@ -56,9 +55,10 @@ watch(
},
{ immediate: true, deep: true },
);
/** 初始化 */
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
});
</script>
<template>
@@ -82,17 +82,14 @@ onMounted(() => {
v-for="(coupon, index) in couponList"
:key="index"
>
<!-- 布局1：1列-->
<!-- 布局 1：1 列-->
<div
v-if="property.columns === 1"
class="ml-4 flex flex-row justify-between p-2"
>
<div class="flex flex-col justify-evenly gap-1">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<!-- 优惠描述 -->
<CouponDiscountDesc :coupon="coupon" />
<!-- 有效期 -->
<CouponValidTerm :coupon="coupon" />
</div>
<div class="flex flex-col justify-evenly">
@@ -107,17 +104,14 @@ onMounted(() => {
</div>
</div>
</div>
<!-- 布局2：2列-->
<!-- 布局 2：2 列-->
<div
v-else-if="property.columns === 2"
class="ml-4 flex flex-row justify-between p-2"
>
<div class="flex flex-col justify-evenly gap-1">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<!-- 优惠描述 -->
<CouponDiscountDesc :coupon="coupon" />
<!-- 领取说明 -->
<div v-if="coupon.totalCount >= 0">
仅剩：{{ coupon.totalCount - coupon.takeCount }}张
</div>
@@ -135,11 +129,9 @@ onMounted(() => {
</div>
</div>
</div>
<!-- 布局3：3列-->
<!-- 布局 3：3 列-->
<div v-else class="flex flex-col items-center justify-around gap-1 p-1">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<!-- 优惠描述 -->
<CouponDiscountDesc :coupon="coupon" />
<div
class="rounded-full px-2 py-0.5"

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

@@ -5,23 +5,20 @@ import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Button, Image, message } from 'ant-design-vue';
import { Button, Image } from 'ant-design-vue';
/** 悬浮按钮 */
defineOptions({ name: 'FloatingActionButton' });
// 定义属性
/** 定义属性 */
defineProps<{ property: FloatingActionButtonProperty }>();
// 是否展开
const expanded = ref(false);
// 处理展开/折叠
const handleToggleFab = () => {
expanded.value = !expanded.value;
};
const expanded = ref(false); // 是否展开
const handleActive = (index: number) => {
message.success(`点击了${index}`);
};
/** 处理展开/折叠 */
function handleToggleFab() {
expanded.value = !expanded.value;
}
</script>
<template>
<div
@@ -38,9 +35,8 @@ const handleActive = (index: number) => {
v-for="(item, index) in property.list"
:key="index"
class="flex flex-col items-center"
@click="handleActive(index)"
>
<Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
<Image :src="item.imgUrl" fit="contain" class="!h-7 !w-7">
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon
@@ -64,33 +60,15 @@ const handleActive = (index: number) => {
<Button type="primary" size="large" circle @click="handleToggleFab">
<IconifyIcon
icon="lucide:plus"
class="fab-icon"
:class="[{ active: expanded }]"
class="transition-transform duration-300"
:class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
/>
</Button>
</div>
<!-- 模态背景：展开时显示，点击后折叠 -->
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
<div
v-if="expanded"
class="absolute left-[calc(50%-384px/2)] top-0 z-[11] h-full w-[384px] bg-black/40"
@click="handleToggleFab"
></div>
</template>
<style scoped lang="scss">
/* 模态背景 */
.modal-bg {
position: absolute;
top: 0;
left: calc(50% - 384px / 2);
z-index: 11;
width: 384px;
height: 100%;
background-color: rgb(0 0 0 / 40%);
}
.fab-icon {
transform: rotate(0deg);
transition: transform 0.3s;
&.active {
transform: rotate(135deg);
}
}
</style>

27
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
View File

@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';
import type { HotZoneItemProperty } from '../../config';
// 热区的最小宽高
export const HOT_ZONE_MIN_SIZE = 100;
export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高
// 控制的类型
/** 控制的类型 */
export enum CONTROL_TYPE_ENUM {
LEFT,
TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
HEIGHT,
}
// 定义热区的控制点
/** 定义热区的控制点 */
export interface ControlDot {
position: string;
types: CONTROL_TYPE_ENUM[];
style: StyleValue;
}
// 热区的8个控制点
/** 热区的 8 个控制点 */
export const CONTROL_DOT_LIST = [
{
position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
] as ControlDot[];
// region 热区的缩放
// 热区的缩放比例
export const HOT_ZONE_SCALE_RATE = 2;
// 缩小：缩回适合手机屏幕的大小
export const zoomOut = (list?: HotZoneItemProperty[]) => {
export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
/** 缩小：缩回适合手机屏幕的大小 */
export function zoomOut(list?: HotZoneItemProperty[]) {
return (
list?.map((hotZone) => ({
...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
})) || []
);
};
// 放大：作用是为了方便在电脑屏幕上编辑
export const zoomIn = (list?: HotZoneItemProperty[]) => {
}
/** 放大：作用是为了方便在电脑屏幕上编辑 */
export function zoomIn(list?: HotZoneItemProperty[]) {
return (
list?.map((hotZone) => ({
...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
})) || []
);
};
}
// endregion
/**

9
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';
import { Button, Image } from 'ant-design-vue';
import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
import {
CONTROL_DOT_LIST,
@@ -213,8 +213,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
</span>
<IconifyIcon
icon="lucide:x"
class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
:style="{ backgroundColor: 'hsl(var(--primary))' }"
:size="14"
@click="handleRemove(item)"
/>
@@ -230,9 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
</div>
<template #prepend-footer>
<Button @click="handleAdd" type="primary" ghost>
<template #icon>
<IconifyIcon icon="lucide:plus" />
</template>
<IconifyIcon icon="lucide:plus" class="mr-5px" />
添加热区
</Button>
</template>

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

@@ -2,8 +2,10 @@
import type { HotZoneProperty } from './config';
import { Image } from 'ant-design-vue';
/** 热区 */
defineOptions({ name: 'HotZone' });
const props = defineProps<{ property: HotZoneProperty }>();
</script>
@@ -12,21 +14,23 @@ const props = defineProps<{ property: HotZoneProperty }>();
<Image
:src="props.property.imgUrl"
class="pointer-events-none h-full w-full select-none"
:preview="false"
/>
<div
v-for="(item, index) in props.property.list"
:key="index"
class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
:style="{
width: `${item.width}px`,
height: `${item.height}px`,
top: `${item.top}px`,
left: `${item.left}px`,
color: 'hsl(var(--primary))',
background: 'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
borderColor: 'hsl(var(--primary))',
}"
>
<p class="text-primary">
{{ item.name }}
</p>
{{ item.name }}
</div>
</div>
</template>

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

@@ -15,42 +15,40 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
defineOptions({ name: 'HotZoneProperty' });
const props = defineProps<{ modelValue: HotZoneProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
// 热区编辑对话框
const editDialogRef = ref();
// 打开热区编辑对话框
const handleOpenEditDialog = () => {
const editDialogRef = ref(); // 热区编辑对话框
/** 打开热区编辑对话框 */
function handleOpenEditDialog() {
editDialogRef.value.open();
};
}
</script>
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<Form
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
:model="formData"
class="mt-2"
>
<Form label-width="80px" :model="formData" class="mt-2">
<FormItem label="上传图片" prop="imgUrl">
<UploadImg
v-model="formData.imgUrl"
height="50px"
width="auto"
class="min-w-20"
class="min-w-[80px]"
:show-description="false"
/>
<p class="text-xs text-gray-500">推荐宽度 750</p>
</FormItem>
<p class="text-center text-sm text-gray-500">推荐宽度 750</p>
</Form>
<Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
<Button type="primary" plain class="w-full" @click="handleOpenEditDialog">
设置热区
</Button>
</ComponentContainerProperty>
<!-- 热区编辑对话框 -->
<HotZoneEditDialog
ref="editDialogRef"
@@ -58,26 +56,3 @@ const handleOpenEditDialog = () => {
:img-url="formData.imgUrl"
/>
</template>
<style scoped lang="scss">
.hot-zone {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: hsl(var(--text-color));
cursor: move;
background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
border: 1px solid hsl(var(--primary));
/* 控制点 */
.ctrl-dot {
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 50%;
}
}
</style>

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

@@ -9,9 +9,11 @@ import { Image } from 'ant-design-vue';
/** 广告魔方 */
defineOptions({ name: 'MagicCube' });
const props = defineProps<{ property: MagicCubeProperty }>();
// 一个方块的大小
const CUBE_SIZE = 93.75;
const CUBE_SIZE = 93.75; // 一个方块的大小
/**
* 计算方块的行数
* 行数用于计算魔方的总体高度，存在以下情况：

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

@@ -57,6 +57,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
</FormItem>
</template>
</template>
<!-- TODO @芋艿：距离不一致，需要看看怎么统一； -->
<FormItem label="上圆角" name="borderRadiusTop">
<Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
</FormItem>

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

@@ -5,6 +5,7 @@ import { Image } from 'ant-design-vue';
/** 宫格导航 */
defineOptions({ name: 'MenuGrid' });
defineProps<{ property: MenuGridProperty }>();
</script>

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

@@ -9,6 +9,7 @@ import {
AppLinkInput,
ColorInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
@@ -18,7 +19,9 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
defineOptions({ name: 'MenuGridProperty' });
const props = defineProps<{ modelValue: MenuGridProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
@@ -27,12 +30,11 @@ const formData = useVModel(props, 'modelValue', emit);
<!-- 表单 -->
<Form label-width="80px" :model="formData" class="mt-2">
<FormItem label="每行数量" prop="column">
<RadioGroup v-model="formData.column">
<RadioGroup v-model:value="formData.column">
<Radio :value="3">3个</Radio>
<Radio :value="4">4个</Radio>
</RadioGroup>
</FormItem>
<p class="text-base font-bold">菜单设置</p>
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<Draggable
@@ -47,17 +49,17 @@ const formData = useVModel(props, 'modelValue', emit);
width="80px"
:show-description="false"
>
<template #tip> 建议尺寸：44 * 44 </template>
<template #tip> 建议尺寸：44 * 44</template>
</UploadImg>
</FormItem>
<FormItem label="标题" prop="title">
<ColorInput
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="副标题" prop="subtitle">
<ColorInput
<InputWithColor
v-model="element.subtitle"
v-model:color="element.subtitleColor"
/>
@@ -70,7 +72,7 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem>
<template v-if="element.badge.show">
<FormItem label="角标内容" prop="badge.text">
<ColorInput
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>

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

@@ -7,6 +7,7 @@ import { Image } from 'ant-design-vue';
/** 列表导航 */
defineOptions({ name: 'MenuList' });
defineProps<{ property: MenuListProperty }>();
</script>

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

@@ -7,6 +7,7 @@ import { Image } from 'ant-design-vue';
/** 菜单导航 */
defineOptions({ name: 'MenuSwiper' });
const props = defineProps<{ property: MenuSwiperProperty }>();
const TITLE_HEIGHT = 20; // 标题的高度
@@ -71,9 +72,7 @@ watch(
class="relative flex flex-col items-center justify-center"
:style="{ width: columnWidth, height: `${rowHeight}px` }"
>
<!-- 图标 + 角标 -->
<div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
<!-- 右上角角标 -->
<span
v-if="item.badge?.show"
class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
@@ -91,7 +90,6 @@ watch(
:preview="false"
/>
</div>
<!-- 标题 -->
<span
v-if="property.layout === 'iconText'"
class="text-xs"

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

@@ -1,18 +1,18 @@
<script lang="ts" setup>
import type { NavigationBarCellProperty } from '../config';
import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
import { computed, ref } from 'vue';
import { useVModel } from '@vueuse/core';
import {
FormItem,
Image,
Input,
Radio,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -23,7 +23,7 @@ import {
MagicCubeEditor,
} from '#/views/mall/promotion/components';
// 导航栏属性面板
/** 导航栏单元格属性面板 */
defineOptions({ name: 'NavigationBarCellProperty' });
const props = defineProps({
@@ -36,54 +36,64 @@ const props = defineProps({
default: () => [],
},
});
const emit = defineEmits(['update:modelValue']);
const cellList = useVModel(props, 'modelValue', emit);
// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
/**
* 计算单元格数量
* 1. 小程序：6 个（因为右侧有胶囊按钮占据 2 个格子的空间）
* 2. 其它平台：8 个（全部空间可用）
*/
const cellCount = computed(() => (props.isMp ? 6 : 8));
// 转换为Rect格式的数据
const rectList = computed<Rect[]>(() => {
return cellList.value.map((cell) => ({
left: cell.left,
top: cell.top,
width: cell.width,
height: cell.height,
right: cell.left + cell.width,
bottom: cell.top + cell.height,
}));
});
const selectedHotAreaIndex = ref(0); // 选中的热区
// 选中的热区
const selectedHotAreaIndex = ref(0);
const handleHotAreaSelected = (
/** 处理热区被选中事件 */
function handleHotAreaSelected(
cellValue: NavigationBarCellProperty,
index: number,
) => {
) {
selectedHotAreaIndex.value = index;
// 默认设置为选中文字，并设置属性
if (!cellValue.type) {
cellValue.type = 'text';
cellValue.textColor = '#111111';
}
};
// 如果点击的是搜索框，则初始化搜索框的属性
if (cellValue.type === 'search') {
cellValue.placeholderPosition = 'left';
cellValue.backgroundColor = '#EEEEEE';
cellValue.textColor = '#969799';
}
}
</script>
<template>
<div class="h-40px flex items-center justify-center">
<MagicCubeEditor
v-model="rectList"
v-model="cellList as any"
:cols="cellCount"
:cube-size="38"
:rows="1"
class="m-b-16px"
@hot-area-selected="handleHotAreaSelected"
/>
<Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
<img
v-if="isMp"
alt=""
style="width: 76px; height: 30px"
:src="appNavBarMp"
/>
</div>
<template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
<template v-if="selectedHotAreaIndex === Number(cellIndex)">
<FormItem label="类型">
<RadioGroup v-model:value="cell.type">
<FormItem :prop="`cell[${cellIndex}].type`" label="类型">
<RadioGroup
v-model:value="cell.type"
@change="handleHotAreaSelected(cell, cellIndex)"
>
<Radio value="text">文字</Radio>
<Radio value="image">图片</Radio>
<Radio value="search">搜索框</Radio>
@@ -91,38 +101,69 @@ const handleHotAreaSelected = (
</FormItem>
<!-- 1. 文字 -->
<template v-if="cell.type === 'text'">
<FormItem label="内容">
<FormItem :prop="`cell[${cellIndex}].text`" label="内容">
<Input v-model:value="cell!.text" :maxlength="10" show-count />
</FormItem>
<FormItem label="颜色">
<FormItem :prop="`cell[${cellIndex}].text`" label="颜色">
<ColorInput v-model="cell!.textColor" />
</FormItem>
<FormItem label="链接">
<FormItem :prop="`cell[${cellIndex}].url`" label="链接">
<AppLinkInput v-model="cell.url" />
</FormItem>
</template>
<!-- 2. 图片 -->
<template v-else-if="cell.type === 'image'">
<FormItem label="图片">
<FormItem :prop="`cell[${cellIndex}].imgUrl`" label="图片">
<UploadImg
v-model="cell.imgUrl"
:limit="1"
height="56px"
width="56px"
:show-description="false"
class="size-14"
/>
<span class="text-xs text-gray-500">建议尺寸 56*56</span>
</FormItem>
<FormItem label="链接">
<FormItem :prop="`cell[${cellIndex}].url`" label="链接">
<AppLinkInput v-model="cell.url" />
</FormItem>
</template>
<!-- 3. 搜索框 -->
<template v-else>
<FormItem label="提示文字">
<FormItem label="框体颜色" prop="backgroundColor">
<ColorInput v-model="cell.backgroundColor" />
</FormItem>
<FormItem class="lef" label="文本颜色" prop="textColor">
<ColorInput v-model="cell.textColor" />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
<Input v-model:value="cell.placeholder" :maxlength="10" show-count />
</FormItem>
<FormItem label="圆角">
<Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
<FormItem label="文本位置" prop="placeholderPosition">
<RadioGroup v-model:value="cell!.placeholderPosition">
<Tooltip content="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip content="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="扫一扫" prop="showScan">
<Switch v-model:checked="cell!.showScan" />
</FormItem>
<FormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
<Slider
v-model:value="cell.borderRadius"
:max="100"
:min="0"
:show-input-controls="false"
input-size="small"
show-input
/>
</FormItem>
</template>
</template>

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

@@ -18,7 +18,7 @@ defineOptions({ name: 'NavigationBar' });
const props = defineProps<{ property: NavigationBarProperty }>();
// 背景
/** 计算背景样式 */
const bgStyle = computed(() => {
const background =
props.property.bgType === 'img' && props.property.bgImg
@@ -26,27 +26,31 @@ const bgStyle = computed(() => {
: props.property.bgColor;
return { background };
});
// 单元格列表
/** 获取当前预览的单元格列表 */
const cellList = computed(() =>
props.property._local?.previewMp
? props.property.mpCells
: props.property.otherCells,
);
// 单元格宽度
/** 计算单元格宽度 */
const cellWidth = computed(() => {
return props.property._local?.previewMp
? (384 - 80 - 86) / 6
: (384 - 90) / 8;
? (375 - 80 - 86) / 6
: (375 - 90) / 8;
});
// 获得单元格样式
const getCellStyle = (cell: NavigationBarCellProperty) => {
/** 获取单元格样式 */
function getCellStyle(cell: NavigationBarCellProperty) {
return {
width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
position: 'absolute',
} as StyleValue;
};
// 获得搜索框属性
}
/** 获取搜索框属性配置 */
const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
return {
height: 30,
@@ -57,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
});
</script>
<template>
<div class="navigation-bar" :style="bgStyle">
<div
class="flex h-[50px] items-center justify-between bg-white px-[6px]"
:style="bgStyle"
>
<div class="flex h-full w-full items-center">
<div
v-for="(cell, cellIndex) in cellList"
@@ -78,35 +85,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
v-if="property._local?.previewMp"
:src="appNavbarMp"
alt=""
class="w-22 h-8"
style="width: 86px; height: 30px"
/>
</div>
</template>
<style lang="scss" scoped>
.navigation-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 6px;
background: #fff;
/* 左边 */
.left {
margin-left: 8px;
}
.center {
flex: 1;
font-size: 14px;
line-height: 35px;
color: #333;
text-align: center;
}
/* 右边 */
.right {
margin-right: 8px;
}
}
</style>

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

@@ -17,16 +17,16 @@ import { ColorInput } from '#/views/mall/promotion/components';
import NavigationBarCellProperty from './components/cell-property.vue';
// 导航栏属性面板
/** 导航栏属性面板 */
defineOptions({ name: 'NavigationBarProperty' });
const props = defineProps<{ modelValue: NavigationBarProperty }>();
const emit = defineEmits(['update:modelValue']);
// 表单校验
const rules: Record<string, any> = {
name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
};
}; // 表单校验
const formData = useVModel(props, 'modelValue', emit);
if (!formData.value._local) {

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

@@ -1,23 +1,14 @@
<script setup lang="ts">
import type { NoticeBarProperty } from './config';
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Divider, Image } from 'ant-design-vue';
import { Carousel, Divider, Image } from 'ant-design-vue';
/** 公告栏 */
defineOptions({ name: 'NoticeBar' });
const props = defineProps<{ property: NoticeBarProperty }>();
// 自动轮播
const activeIndex = ref(0);
setInterval(() => {
const contents = props.property.contents || [];
activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
}, 3000);
defineProps<{ property: NoticeBarProperty }>();
</script>
<template>
@@ -30,11 +21,17 @@ setInterval(() => {
>
<Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
<Divider type="vertical" />
<div class="h-6 flex-1 truncate pr-2 leading-6">
{{ property.contents?.[activeIndex]?.text }}
</div>
<Carousel
:autoplay="true"
:dots="false"
vertical
class="flex-1 pr-2"
style="height: 24px"
>
<div v-for="(item, index) in property.contents" :key="index">
<div class="h-6 truncate leading-6">{{ item.text }}</div>
</div>
</Carousel>
<IconifyIcon icon="lucide:arrow-right" />
</div>
</template>
<style scoped lang="scss"></style>

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

@@ -7,25 +7,18 @@ import { Form, FormItem, Textarea } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
// 导航栏属性面板
/** 导航栏属性面板 */
defineOptions({ name: 'PageConfigProperty' });
const props = defineProps<{ modelValue: PageConfigProperty }>();
const emit = defineEmits(['update:modelValue']);
// 表单校验
const rules = {};
const formData = useVModel(props, 'modelValue', emit);
</script>
<template>
<Form
:model="formData"
:rules="rules"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<FormItem label="页面描述" name="description">
<Textarea
v-model:value="formData!.description"
@@ -47,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem>
</Form>
</template>
<style scoped lang="scss"></style>

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

@@ -9,18 +9,19 @@ import { Image } from 'ant-design-vue';
/** 弹窗广告 */
defineOptions({ name: 'Popover' });
// 定义属性
defineProps<{ property: PopoverProperty }>();
// 处理选中
const activeIndex = ref(0);
const handleActive = (index: number) => {
const props = defineProps<{ property: PopoverProperty }>();
const activeIndex = ref(0); // 选中 index
/** 处理选中 */
function handleActive(index: number) {
activeIndex.value = index;
};
}
</script>
<template>
<div
v-for="(item, index) in property.list"
v-for="(item, index) in props.property.list"
:key="index"
class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
:style="{
@@ -40,5 +41,3 @@ const handleActive = (index: number) => {
<div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
</div>
</template>
<style scoped lang="scss"></style>

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

@@ -9,10 +9,10 @@ import { getArticle } from '#/api/mall/promotion/article';
/** 营销文章 */
defineOptions({ name: 'PromotionArticle' });
// 定义属性
const props = defineProps<{ property: PromotionArticleProperty }>();
// 商品列表
const article = ref<MallArticleApi.Article>();
const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
const article = ref<MallArticleApi.Article>(); // 商品列表
watch(
() => props.property.id,

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

@@ -12,18 +12,18 @@ import { getArticlePage } from '#/api/mall/promotion/article';
import ComponentContainerProperty from '../../component-container-property.vue';
// 营销文章属性面板
/** 营销文章属性面板 */
defineOptions({ name: 'PromotionArticleProperty' });
const props = defineProps<{ modelValue: PromotionArticleProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
// 文章列表
const articles = ref<MallArticleApi.Article[]>([]);
// 加载中
const loading = ref(false);
// 查询文章列表
const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
const loading = ref(false); // 加载中
/** 查询文章列表 */
const queryArticleList = async (title?: string) => {
loading.value = true;
const { list } = await getArticlePage({
@@ -35,7 +35,7 @@ const queryArticleList = async (title?: string) => {
loading.value = false;
};
// 初始化
/** 初始化 */
onMounted(() => {
queryArticleList();
});

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

@@ -15,10 +15,10 @@ import { getCombinationActivityListByIds } from '#/api/mall/promotion/combinatio
/** 拼团卡片 */
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[]
@@ -30,7 +30,7 @@ watch(
try {
// 新添加的拼团组件，是没有活动ID的
const activityIds = props.property.activityIds;
// 检查活动ID的有效性
// 检查活动 ID 的有效性
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取拼团活动详情列表
combinationActivityList.value =
@@ -68,32 +68,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 = () => {
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
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

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

@@ -1,11 +1,6 @@
<script setup lang="ts">
import type { PromotionCombinationProperty } from './config';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { onMounted, ref } from 'vue';
import { CommonStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
@@ -22,27 +17,20 @@ import {
Tooltip,
} from 'ant-design-vue';
import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
import UploadImg from '#/components/upload/image-upload.vue';
// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
import { ColorInput } from '#/views/mall/promotion/components';
// 拼团属性面板
import ComponentContainerProperty from '../../component-container-property.vue';
/** 拼团属性面板 */
defineOptions({ name: 'PromotionCombinationProperty' });
const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
// 活动列表
const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
onMounted(async () => {
const { list } = await getCombinationActivityPage({
pageNo: 1,
pageSize: 10,
status: CommonStatusEnum.ENABLE,
});
activityList.value = list;
});
</script>
<template>
@@ -184,5 +172,3 @@ onMounted(async () => {
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

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

@@ -14,10 +14,10 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
/** 积分商城卡片 */
defineOptions({ name: 'PromotionPoint' });
// 定义属性
const props = defineProps<{ property: PromotionPointProperty }>();
// 商品列表
const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
const spuIdList = ref<number[]>([]);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
@@ -27,7 +27,7 @@ watch(
try {
// 新添加的积分商城组件，是没有活动ID的
const activityIds = props.property.activityIds;
// 检查活动ID的有效性
// 检查活动 ID 的有效性
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取积分商城活动详情列表
pointActivityList.value = await getPointActivityListByIds(activityIds);
@@ -65,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 = () => {
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
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

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

@@ -315,17 +315,17 @@ onMounted(() => {
>
<Tooltip title="重置">
<Button @click="handleReset">
<IconifyIcon class="size-6" icon="lucide:refresh-cw" />
<IconifyIcon class="size-5" icon="lucide:refresh-cw" />
</Button>
</Tooltip>
<Tooltip v-if="previewUrl" title="预览">
<Button @click="handlePreview">
<IconifyIcon class="size-6" icon="lucide:eye" />
<IconifyIcon class="size-5" icon="lucide:eye" />
</Button>
</Tooltip>
<Tooltip title="保存">
<Button @click="handleSave">
<IconifyIcon class="size-6" icon="lucide:check" />
<IconifyIcon class="size-5" icon="lucide:check" />
</Button>
</Tooltip>
</Button.Group>

1
apps/web-antd/src/views/mall/promotion/components/index.ts
View File

@@ -1,4 +1,5 @@
export { default as AppLinkInput } from './app-link-input/index.vue';
export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
export { default as ColorInput } from './color-input/index.vue';
export { default as DiyEditor } from './diy-editor/index.vue';
export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';

22
apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
View File

@@ -26,35 +26,28 @@ defineOptions({ name: 'DiyTemplateDecorate' });
const route = useRoute();
const { refreshTab } = useTabs();
/** 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 */
const DIY_PAGE_INDEX_KEY = 'diy_page_index';
const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
const selectedTemplateItem = ref(0);
/** 左上角工具栏操作按钮 */
const templateItems = ref([
{ name: '基础设置', icon: 'lucide:settings' },
{ name: '首页', icon: 'lucide:home' },
{ name: '我的', icon: 'lucide:user' },
]);
]); // 左上角工具栏操作按钮
const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
/** 当前编辑的属性 */
const currentFormData = ref<
MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
>({
property: '',
} as MallDiyPageApi.DiyPage);
/** templateItem 对应的缓存 */
} as MallDiyPageApi.DiyPage); // 当前编辑的属性
const currentFormDataMap = ref<
Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
>(new Map());
>(new Map()); // templateItem 对应的缓存
/** 商城 H5 预览地址 */
const previewUrl = ref('');
const previewUrl = ref(''); // 商城 H5 预览地址
/** 模板组件库 */
const templateLibs = [] as DiyComponentLibrary[];
/** 当前组件库 */
const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
/** 获取详情 */
@@ -76,6 +69,7 @@ async function getPageDetail(id: any) {
}
/** 模板选项切换 */
// TODO @xingyu：貌似切换不对；“个人中心”切换不过去；
function handleTemplateItemChange(event: any) {
// 从事件对象中获取值
const val = event.target?.value ?? event;
@@ -227,7 +221,7 @@ onMounted(async () => {
>
<IconifyIcon
:icon="item.icon"
class="mt-2 flex size-6 items-center"
class="mt-2 flex size-5 items-center"
/>
</Radio.Button>
</template>

165
apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
View File

@@ -1,7 +1,5 @@
<!-- eslint-disable unicorn/no-nested-ternary -->
<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
<script lang="ts" setup>
// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed, ref, watch } from 'vue';
@@ -15,128 +13,113 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
import PointTableSelect from './point-table-select.vue';
interface PointShowcaseProps {
modelValue: number | number[];
modelValue?: number | number[];
limit?: number;
disabled?: boolean;
}
const props = withDefaults(defineProps<PointShowcaseProps>(), {
modelValue: undefined,
limit: Number.MAX_VALUE,
disabled: false,
});
const emit = defineEmits<{
change: [value: any];
'update:modelValue': [value: number | number[]];
}>();
const emit = defineEmits(['update:modelValue', 'change']);
// 积分活动列表
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
// 计算是否可以添加
/** 计算是否可以添加 */
const canAdd = computed(() => {
if (props.disabled) return false;
if (!props.limit) return true;
if (props.disabled) {
return false;
}
if (!props.limit) {
return true;
}
return pointActivityList.value.length < props.limit;
});
// 积分活动选择器引用
const pointActivityTableSelectRef = ref();
/**
* 打开积分活动选择器
*/
function openPointActivityTableSelect() {
pointActivityTableSelectRef.value.open(pointActivityList.value);
}
/**
* 选择活动后触发
*/
function handleActivitySelected(
activityList:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) {
pointActivityList.value = Array.isArray(activityList)
? activityList
: [activityList];
emitActivityChange();
}
/**
* 删除活动
*/
function handleRemoveActivity(index: number) {
pointActivityList.value.splice(index, 1);
emitActivityChange();
}
/**
* 发送变更事件
*/
function emitActivityChange() {
if (props.limit === 1) {
const pointActivity =
pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
emit('update:modelValue', pointActivity?.id || 0);
emit('change', pointActivity);
} else {
emit(
'update:modelValue',
pointActivityList.value.map((pointActivity) => pointActivity.id),
);
emit('change', pointActivityList.value);
}
}
// 监听 modelValue 变化
/** 监听 modelValue 变化，加载活动详情 */
watch(
() => props.modelValue,
async () => {
const ids = Array.isArray(props.modelValue)
? props.modelValue
: props.modelValue
? [props.modelValue]
: [];
// 不需要返显
async (newValue) => {
// eslint-disable-next-line unicorn/no-nested-ternary
const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
if (ids.length === 0) {
pointActivityList.value = [];
return;
}
// 只有活动发生变化之后，才会查询活动
// 只有活动发生变化时才重新查询
if (
pointActivityList.value.length === 0 ||
pointActivityList.value.some(
(pointActivity) => !ids.includes(pointActivity.id!),
)
pointActivityList.value.some((activity) => !ids.includes(activity.id!))
) {
pointActivityList.value = await getPointActivityListByIds(ids);
}
},
{ immediate: true },
);
/** 打开活动选择对话框 */
function handleOpenActivitySelect() {
pointTableSelectRef.value?.open(pointActivityList.value);
}
/** 选择活动后触发 */
function handleActivitySelected(
activities:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) {
pointActivityList.value = Array.isArray(activities)
? activities
: [activities];
emitActivityChange();
}
/** 删除活动 */
function handleRemoveActivity(index: number) {
pointActivityList.value.splice(index, 1);
emitActivityChange();
}
/** 触发变更事件 */
function emitActivityChange() {
if (props.limit === 1) {
const activity =
pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
emit('update:modelValue', activity?.id || 0);
emit('change', activity);
} else {
emit(
'update:modelValue',
pointActivityList.value.map((activity) => activity.id!),
);
emit('change', pointActivityList.value);
}
}
</script>
<template>
<div class="flex flex-wrap items-center gap-2">
<!-- 活动图片列表 -->
<!-- 已选活动列表 -->
<div
v-for="(pointActivity, index) in pointActivityList"
:key="pointActivity.id"
class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
v-for="(activity, index) in pointActivityList"
:key="activity.id"
class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
>
<Tooltip :title="pointActivity.spuName">
<Tooltip :title="activity.spuName">
<div class="relative h-full w-full">
<Image
:preview="true"
:src="pointActivity.picUrl"
:src="activity.picUrl"
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<IconifyIcon
v-show="!disabled"
v-if="!disabled"
icon="lucide:x"
class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
@click="handleRemoveActivity(index)"
@@ -145,21 +128,21 @@ watch(
</Tooltip>
</div>
<!-- 添加按钮 -->
<!-- 添加活动按钮 -->
<Tooltip v-if="canAdd" title="选择活动">
<div
class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
@click="openPointActivityTableSelect"
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
@click="handleOpenActivitySelect"
>
<IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>
<!-- 积分活动选择对话框 -->
<!-- 活动选择对话框 -->
<PointTableSelect
ref="pointActivityTableSelectRef"
:multiple="limit !== 1"
ref="pointTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"
/>
</template>

346
apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
View File

@@ -1,23 +1,21 @@
<!-- 积分活动表格选择器 -->
<!-- 积分商城活动选择弹窗组件 -->
<script lang="ts" setup>
// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { Checkbox, Radio } from 'ant-design-vue';
import { dateFormatter, fenToYuanFormat } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPointActivityPage } from '#/api/mall/promotion/point';
interface PointTableSelectProps {
multiple?: boolean;
multiple?: boolean; // 是否单选：true - checkbox；false - radio
}
const props = withDefaults(defineProps<PointTableSelectProps>(), {
@@ -26,90 +24,75 @@ const props = withDefaults(defineProps<PointTableSelectProps>(), {
const emit = defineEmits<{
change: [
value:
activity:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
];
}>();
// 单选：选中的活动 ID
const selectedActivityId = ref<number>();
// 多选：选中状态映射
const checkedStatus = ref<Record<number, boolean>>({});
// 多选：选中的活动列表
const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
/** 单选：处理选中变化 */
function handleRadioChange() {
const selectedRow =
gridApi.grid.getRadioRecord() as MallPointActivityApi.PointActivity;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
// 全选状态
const isCheckAll = ref(false);
const isIndeterminate = ref(false);
/** 计算已兑换数量 */
const getRedeemedQuantity = (row: MallPointActivityApi.PointActivity) =>
(row.totalStock || 0) - (row.stock || 0);
// 搜索表单配置
const formSchema = computed<VbenFormSchema[]>(() => {
return [
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择活动状态',
allowClear: true,
},
/** 搜索表单 Schema */
const formSchema = computed<VbenFormSchema[]>(() => [
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择活动状态',
clearable: true,
},
];
});
},
]);
// 列配置
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
// 多选模式
if (props.multiple) {
columns.push({
field: 'checkbox',
title: '',
width: 55,
align: 'center',
slots: { default: 'checkbox-column', header: 'checkbox-header' },
});
columns.push({ type: 'checkbox', width: 55 });
} else {
// 单选模式
columns.push({
field: 'radio',
title: '#',
width: 55,
align: 'center',
slots: { default: 'radio-column' },
});
columns.push({ type: 'radio', width: 55 });
}
columns.push(
{
field: 'id',
title: '活动编号',
minWidth: 80,
minWidth: 100,
align: 'center',
},
{
field: 'picUrl',
title: '商品图片',
minWidth: 80,
width: 100,
align: 'center',
cellRender: {
name: 'CellImage',
props: {
height: 40,
},
},
},
{
field: 'spuName',
title: '商品标题',
minWidth: 300,
minWidth: 200,
},
{
field: 'marketPrice',
title: '原价',
minWidth: 100,
formatter: 'formatAmount2',
align: 'center',
formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
},
{
field: 'status',
@@ -118,9 +101,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
align: 'center',
cellRender: {
name: 'CellDict',
props: {
type: DICT_TYPE.COMMON_STATUS,
},
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
@@ -140,216 +121,119 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '已兑换数量',
minWidth: 100,
align: 'center',
formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
formatter: ({ row }) => getRedeemedQuantity(row),
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
width: 180,
align: 'center',
formatter: 'formatDateTime',
formatter: ({ cellValue }) => dateFormatter(cellValue),
},
);
return columns;
});
// 初始化表格
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
showOverflow: true,
checkboxConfig: {
reserve: true,
},
radioConfig: {
reserve: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
try {
const params: any = {
pageNo: page.currentPage,
pageSize: page.pageSize,
};
if (formValues.status !== undefined) {
params.status = formValues.status;
}
const data = await getPointActivityPage(params);
const list = data.list || [];
// 初始化 checkbox 绑定
list.forEach(
(activityVO) =>
(checkedStatus.value[activityVO.id] =
checkedStatus.value[activityVO.id] || false),
);
// 计算全选框状态
calculateIsCheckAll(list);
return {
items: list,
total: data.total || 0,
};
} catch (error) {
console.error('加载积分活动数据失败:', error);
return { items: [], total: 0 };
}
return await getPointActivityPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
/**
* 单选：处理选中
*/
function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
selectedActivityId.value = row.id;
emit('change', row);
modalApi.close();
}
/**
* 多选：全选/全不选
*/
function handleCheckAll(e: any) {
const checked = e.target.checked;
isCheckAll.value = checked;
isIndeterminate.value = false;
const list = gridApi.grid.getData();
list.forEach((pointActivity) =>
handleCheckOne(checked, pointActivity, false),
);
}
/**
* 多选：选中一行
*/
function handleCheckOne(
checked: boolean,
pointActivity: MallPointActivityApi.PointActivity,
isCalcCheckAll: boolean,
) {
if (checked) {
checkedActivities.value.push(pointActivity);
checkedStatus.value[pointActivity.id] = true;
} else {
const index = findCheckedIndex(pointActivity);
if (index > -1) {
checkedActivities.value.splice(index, 1);
checkedStatus.value[pointActivity.id] = false;
isCheckAll.value = false;
}
}
// 计算全选框状态
if (isCalcCheckAll) {
const list = gridApi.grid.getData();
calculateIsCheckAll(list);
}
}
/**
* 查找活动在已选中列表中的索引
*/
function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
}
/**
* 计算全选框状态
*/
function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
isCheckAll.value = list.every(
(activityVO) => checkedStatus.value[activityVO.id],
);
isIndeterminate.value =
!isCheckAll.value &&
list.some((activityVO) => checkedStatus.value[activityVO.id]);
}
/**
* 多选：确认选择
*/
function handleConfirm() {
emit('change', [...checkedActivities.value]);
modalApi.close();
}
/**
* 打开对话框
*/
function open(pointList?: MallPointActivityApi.PointActivity[]) {
// 重置
checkedActivities.value = [];
checkedStatus.value = {};
isCheckAll.value = false;
isIndeterminate.value = false;
// 处理已选中
if (pointList && pointList.length > 0) {
checkedActivities.value = [...pointList];
checkedStatus.value = Object.fromEntries(
pointList.map((activityVO) => [activityVO.id, true]),
);
}
modalApi.open();
}
// 暴露 open 方法
defineExpose({ open });
// 初始化弹窗
const [Modal, modalApi] = useVbenModal({
onConfirm: props.multiple ? handleConfirm : undefined,
destroyOnClose: true,
showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
onConfirm: () => {
const selectedRows =
gridApi.grid.getCheckboxRecords() as MallPointActivityApi.PointActivity[];
emit('change', selectedRows);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清理状态
if (!props.multiple) {
selectedActivityId.value = undefined;
}
await gridApi.grid.clearCheckboxRow();
await gridApi.grid.clearRadioRow();
return;
}
// 打开时触发查询
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
const data = modalApi.getData<
MallPointActivityApi.PointActivity | MallPointActivityApi.PointActivity[]
>();
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((activity) => {
const row = tableData.find(
(item: MallPointActivityApi.PointActivity) =>
item.id === activity.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallPointActivityApi.PointActivity) => item.id === data.id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}
},
});
/** 对外暴露的方法 */
defineExpose({
open: (
data?:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) => {
modalApi.setData(data).open();
},
});
</script>
<template>
<Modal class="w-[70%]" title="选择活动">
<Grid>
<!-- 多选：表头 checkbox -->
<template v-if="props.multiple" #checkbox-header>
<Checkbox
v-model:checked="isCheckAll"
:indeterminate="isIndeterminate"
@change="handleCheckAll"
/>
</template>
<!-- 多选：行 checkbox -->
<template v-if="props.multiple" #checkbox-column="{ row }">
<Checkbox
v-model:checked="checkedStatus[row.id]"
@change="(e: any) => handleCheckOne(e.target.checked, row, true)"
/>
</template>
<!-- 单选：行 radio -->
<template v-if="!props.multiple" #radio-column="{ row }">
<Radio
:checked="selectedActivityId === row.id"
:value="row.id"
class="cursor-pointer"
@click="handleSingleSelected(row)"
/>
</template>
</Grid>
<Modal title="选择活动" class="w-[950px]">
<Grid />
</Modal>
</template>

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

@@ -7,7 +7,7 @@ import { onMounted, ref, watch } from 'vue';
import { ElScrollbar } from 'element-plus';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
import {
CouponDiscount,
@@ -32,9 +32,7 @@ watch(
() => props.property.couponIds,
async () => {
if (props.property.couponIds?.length > 0) {
couponList.value = await CouponTemplateApi.getCouponTemplateList(
props.property.couponIds,
);
couponList.value = await getCouponTemplateList(props.property.couponIds);
}
},
{

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

@@ -39,7 +39,7 @@ function handleToggleFab() {
<ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="ep:picture" :color="item.textColor" />
<IconifyIcon icon="lucide:image" :color="item.textColor" />
</div>
</template>
</ElImage>
@@ -55,7 +55,7 @@ function handleToggleFab() {
<!-- todo: @owen 使用APP主题色 -->
<ElButton type="primary" size="large" circle @click="handleToggleFab">
<IconifyIcon
icon="ep:plus"
icon="lucide:plus"
class="transition-transform duration-300"
:class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
/>

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

@@ -23,9 +23,9 @@ const formData = useVModel(props, 'modelValue', emit);
const editDialogRef = ref(); // 热区编辑对话框
/** 打开热区编辑对话框 */
const handleOpenEditDialog = () => {
function handleOpenEditDialog() {
editDialogRef.value.open();
};
}
</script>
<template>

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
View File

@@ -19,7 +19,7 @@ export interface NoticeContentProperty {
export const component = {
id: 'NoticeBar',
name: '公告栏',
icon: 'ep:bell',
icon: 'lucide:bell',
property: {
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
contents: [

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

@@ -19,7 +19,6 @@ function handleActive(index: number) {
activeIndex.value = index;
}
</script>
<template>
<div
v-for="(item, index) in props.property.list"
@@ -35,7 +34,7 @@ function handleActive(index: number) {
<ElImage :src="item.imgUrl" fit="contain" class="h-full w-full">
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="ep:picture" />
<IconifyIcon icon="lucide:image" />
</div>
</template>
</ElImage>

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

@@ -5,7 +5,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
import { ref, watch } from 'vue';
import * as ArticleApi from '#/api/mall/promotion/article/index';
import { getArticle } from '#/api/mall/promotion/article';
/** 营销文章 */
defineOptions({ name: 'PromotionArticle' });
@@ -18,7 +18,7 @@ watch(
() => props.property.id,
async () => {
if (props.property.id) {
article.value = await ArticleApi.getArticle(props.property.id);
article.value = await getArticle(props.property.id);
}
},
{

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

@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
import { ElImage } from 'element-plus';
import * as ProductSpuApi from '#/api/mall/product/spu';
import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
import { getSpuDetailList } from '#/api/mall/product/spu';
import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
/** 拼团卡片 */
defineOptions({ name: 'PromotionCombination' });
@@ -34,9 +34,7 @@ watch(
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取拼团活动详情列表
combinationActivityList.value =
await CombinationActivityApi.getCombinationActivityListByIds(
activityIds,
);
await getCombinationActivityListByIds(activityIds);
// 获取拼团活动的 SPU 详情列表
spuList.value = [];
@@ -44,7 +42,7 @@ watch(
.map((activity) => activity.spuId)
.filter((spuId): spuId is number => typeof spuId === 'number');
if (spuIdList.value.length > 0) {
spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
spuList.value = await getSpuDetailList(spuIdList.value);
}
// 更新 SPU 的最低价格
@@ -78,7 +76,7 @@ function calculateSpace(index: number) {
return { marginLeft, marginTop };
}
const containerRef = ref();
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {

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

@@ -74,7 +74,7 @@ function calculateSpace(index: number) {
return { marginLeft, marginTop };
}
const containerRef = ref();
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {

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

@@ -54,11 +54,6 @@ const formData = useVModel(props, 'modelValue', emit);
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton>
</ElTooltip>
<!--<ElTooltip class="item" content="三列" placement="bottom">
<ElRadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</ElRadioButton>
</ElTooltip>-->
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="商品名称" prop="fields.name.show">