fix: lint
This commit is contained in:
@@ -27,7 +27,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const formData = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const treeData = [
|
||||
const treeData: any[] = [
|
||||
{
|
||||
label: '外部边距',
|
||||
prop: 'margin',
|
||||
@@ -96,7 +96,7 @@ const treeData = [
|
||||
},
|
||||
];
|
||||
|
||||
const handleSliderChange = (prop: string) => {
|
||||
function handleSliderChange(prop: string) {
|
||||
switch (prop) {
|
||||
case 'borderRadius': {
|
||||
formData.value.borderTopLeftRadius = formData.value.borderRadius;
|
||||
@@ -120,7 +120,7 @@ const handleSliderChange = (prop: string) => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -161,7 +161,9 @@ const handleSliderChange = (prop: string) => {
|
||||
<FormItem
|
||||
:label="dataRef.label"
|
||||
:name="dataRef.prop"
|
||||
:label-col="dataRef.children ? { span: 6 } : { span: 5, offset: 1 }"
|
||||
:label-col="
|
||||
dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
|
||||
"
|
||||
:wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
|
||||
class="mb-0 w-full"
|
||||
>
|
||||
|
||||
@@ -129,7 +129,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 组件 hover 和 active 状态(需要 CSS 变量)*/
|
||||
/* 组件 hover 和 active 状态(需要 CSS 变量) */
|
||||
.component.active,
|
||||
.component:hover {
|
||||
color: var(--ant-color-white);
|
||||
|
||||
@@ -4,6 +4,17 @@ import type { CarouselProperty } from './config';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
FormItem,
|
||||
Radio,
|
||||
RadioButton,
|
||||
RadioGroup,
|
||||
Slider,
|
||||
Switch,
|
||||
Tooltip,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import UploadFile from '#/components/upload/file-upload.vue';
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
@@ -21,33 +32,33 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<ElForm label-width="80px" :model="formData">
|
||||
<ElCard header="样式设置" class="property-group" shadow="never">
|
||||
<ElFormItem label="样式" prop="type">
|
||||
<ElRadioGroup v-model="formData.type">
|
||||
<ElTooltip class="item" content="默认" placement="bottom">
|
||||
<ElRadioButton value="default">
|
||||
<Form label-width="80px" :model="formData">
|
||||
<Card header="样式设置" class="property-group" shadow="never">
|
||||
<FormItem label="样式" prop="type">
|
||||
<RadioGroup v-model="formData.type">
|
||||
<Tooltip class="item" content="默认" placement="bottom">
|
||||
<RadioButton value="default">
|
||||
<IconifyIcon icon="system-uicons:carousel" />
|
||||
</ElRadioButton>
|
||||
</ElTooltip>
|
||||
<ElTooltip class="item" content="卡片" placement="bottom">
|
||||
<ElRadioButton value="card">
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
<Tooltip class="item" content="卡片" placement="bottom">
|
||||
<RadioButton value="card">
|
||||
<IconifyIcon icon="ic:round-view-carousel" />
|
||||
</ElRadioButton>
|
||||
</ElTooltip>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="指示器" prop="indicator">
|
||||
<ElRadioGroup v-model="formData.indicator">
|
||||
<ElRadio value="dot">小圆点</ElRadio>
|
||||
<ElRadio value="number">数字</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否轮播" prop="autoplay">
|
||||
<ElSwitch v-model="formData.autoplay" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
|
||||
<ElSlider
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="指示器" prop="indicator">
|
||||
<RadioGroup v-model="formData.indicator">
|
||||
<Radio value="dot">小圆点</Radio>
|
||||
<Radio value="number">数字</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="是否轮播" prop="autoplay">
|
||||
<Switch v-model="formData.autoplay" />
|
||||
</FormItem>
|
||||
<FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
|
||||
<Slider
|
||||
v-model="formData.interval"
|
||||
:max="10"
|
||||
:min="0.5"
|
||||
@@ -56,24 +67,19 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
<ElText type="info">单位:秒</ElText>
|
||||
</ElFormItem>
|
||||
</ElCard>
|
||||
<ElCard header="内容设置" class="property-group" shadow="never">
|
||||
<p class="text-info">单位:秒</p>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card header="内容设置" class="property-group" shadow="never">
|
||||
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
|
||||
<template #default="{ element }">
|
||||
<ElFormItem
|
||||
label="类型"
|
||||
prop="type"
|
||||
class="mb-2"
|
||||
label-width="40px"
|
||||
>
|
||||
<ElRadioGroup v-model="element.type">
|
||||
<ElRadio value="img">图片</ElRadio>
|
||||
<ElRadio value="video">视频</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
<FormItem label="类型" prop="type" class="mb-2" label-width="40px">
|
||||
<RadioGroup v-model="element.type">
|
||||
<Radio value="img">图片</Radio>
|
||||
<Radio value="video">视频</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="图片"
|
||||
class="mb-2"
|
||||
label-width="40px"
|
||||
@@ -87,9 +93,9 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
class="min-w-[80px]"
|
||||
:show-description="false"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</FormItem>
|
||||
<template v-else>
|
||||
<ElFormItem label="封面" class="mb-2" label-width="40px">
|
||||
<FormItem label="封面" class="mb-2" label-width="40px">
|
||||
<UploadImg
|
||||
v-model="element.imgUrl"
|
||||
draggable="false"
|
||||
@@ -98,8 +104,8 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
width="100%"
|
||||
class="min-w-[80px]"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="视频" class="mb-2" label-width="40px">
|
||||
</FormItem>
|
||||
<FormItem label="视频" class="mb-2" label-width="40px">
|
||||
<UploadFile
|
||||
v-model="element.videoUrl"
|
||||
:file-type="['mp4']"
|
||||
@@ -107,15 +113,15 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
:file-size="100"
|
||||
class="min-w-[80px]"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</FormItem>
|
||||
</template>
|
||||
<ElFormItem label="链接" class="mb-2" label-width="40px">
|
||||
<FormItem label="链接" class="mb-2" label-width="40px">
|
||||
<AppLinkInput v-model="element.url" />
|
||||
</ElFormItem>
|
||||
</FormItem>
|
||||
</template>
|
||||
</Draggable>
|
||||
</ElCard>
|
||||
</ElForm>
|
||||
</Card>
|
||||
</Form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -50,11 +50,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
<template>
|
||||
<Form :model="formData">
|
||||
<FormItem label="高度" name="height">
|
||||
<Slider
|
||||
v-model:value="formData.height"
|
||||
:min="1"
|
||||
:max="100"
|
||||
/>
|
||||
<Slider v-model:value="formData.height" :min="1" :max="100" />
|
||||
</FormItem>
|
||||
<FormItem label="选择样式" name="borderType">
|
||||
<RadioGroup v-model:value="formData!.borderType">
|
||||
@@ -72,11 +68,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
</FormItem>
|
||||
<template v-if="formData.borderType !== 'none'">
|
||||
<FormItem label="线宽" name="lineWidth">
|
||||
<Slider
|
||||
v-model:value="formData.lineWidth"
|
||||
:min="1"
|
||||
:max="30"
|
||||
/>
|
||||
<Slider v-model:value="formData.lineWidth" :min="1" :max="30" />
|
||||
</FormItem>
|
||||
<FormItem label="左右边距" name="paddingType">
|
||||
<RadioGroup v-model:value="formData!.paddingType">
|
||||
|
||||
@@ -2,13 +2,7 @@
|
||||
import type { PopoverProperty } from './config';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import {
|
||||
Form,
|
||||
FormItem,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Tooltip,
|
||||
} from 'ant-design-vue';
|
||||
import { Form, FormItem, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
|
||||
@@ -40,10 +34,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
</FormItem>
|
||||
<FormItem label="显示次数" :name="`list[${index}].showType`">
|
||||
<RadioGroup v-model:value="element.showType">
|
||||
<Tooltip
|
||||
title="只显示一次,下次打开时不显示"
|
||||
placement="bottom"
|
||||
>
|
||||
<Tooltip title="只显示一次,下次打开时不显示" placement="bottom">
|
||||
<Radio value="once">一次</Radio>
|
||||
</Tooltip>
|
||||
<Tooltip title="每次打开时都会显示" placement="bottom">
|
||||
|
||||
@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
|
||||
const discountDesc =
|
||||
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
|
||||
? `减${floatToFixed2(coupon.discountPrice)}元`
|
||||
: `打${coupon.discountPercent / 10}折`;
|
||||
: `打${coupon.discountPercent ?? 0 / 10}折`;
|
||||
return () => (
|
||||
<div>
|
||||
<span>{useCondition}</span>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
|
||||
setup(props) {
|
||||
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
|
||||
// 折扣
|
||||
let value = `${coupon.discountPercent / 10}`;
|
||||
let value = `${coupon.discountPercent ?? 0 / 10}`;
|
||||
let suffix = ' 折';
|
||||
// 满减
|
||||
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
|
||||
|
||||
@@ -5,6 +5,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
|
||||
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
|
||||
|
||||
import {
|
||||
CouponDiscount,
|
||||
CouponDiscountDesc,
|
||||
|
||||
@@ -33,8 +33,6 @@ import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
|
||||
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
/** 优惠券卡片属性面板 */
|
||||
defineOptions({ name: 'CouponCardProperty' });
|
||||
|
||||
@@ -42,6 +40,8 @@ const props = defineProps<{ modelValue: CouponCardProperty }>();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const formData = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
|
||||
@@ -90,7 +90,9 @@ watch(
|
||||
:key="index"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<ATypographyText ellipsis class="text-base">{{ coupon.name }}</ATypographyText>
|
||||
<ATypographyText ellipsis class="text-base">
|
||||
{{ coupon.name }}
|
||||
</ATypographyText>
|
||||
<ATypographyText type="secondary" ellipsis>
|
||||
<span v-if="coupon.usePrice > 0">
|
||||
满{{ floatToFixed2(coupon.usePrice) }}元,
|
||||
@@ -158,11 +160,7 @@ watch(
|
||||
<ColorInput v-model="formData.button.color" />
|
||||
</FormItem>
|
||||
<FormItem label="间隔" name="space">
|
||||
<Slider
|
||||
v-model:value="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.space" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Image, message } from 'ant-design-vue';
|
||||
import { Button, Image, message } from 'ant-design-vue';
|
||||
|
||||
/** 悬浮按钮 */
|
||||
defineOptions({ name: 'FloatingActionButton' });
|
||||
@@ -57,13 +57,13 @@ const handleActive = (index: number) => {
|
||||
</div>
|
||||
</template>
|
||||
<!-- todo: @owen 使用APP主题色 -->
|
||||
<el-button type="primary" size="large" circle @click="handleToggleFab">
|
||||
<Button type="primary" size="large" circle @click="handleToggleFab">
|
||||
<IconifyIcon
|
||||
icon="ep:plus"
|
||||
class="fab-icon"
|
||||
:class="[{ active: expanded }]"
|
||||
/>
|
||||
</el-button>
|
||||
</Button>
|
||||
</div>
|
||||
<!-- 模态背景:展开时显示,点击后折叠 -->
|
||||
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
|
||||
|
||||
@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Image } from 'ant-design-vue';
|
||||
|
||||
import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
|
||||
import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
|
||||
|
||||
import {
|
||||
CONTROL_DOT_LIST,
|
||||
@@ -201,7 +201,8 @@ const handleAppLinkChange = (appLink: AppLink) => {
|
||||
top: `${item.top}px`,
|
||||
left: `${item.left}px`,
|
||||
color: 'var(--ant-color-primary)',
|
||||
background: 'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
|
||||
background:
|
||||
'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
|
||||
borderColor: 'var(--ant-color-primary)',
|
||||
}"
|
||||
@mousedown="handleMove(item, $event)"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { HotZoneProperty } from './config';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
/** 热区 */
|
||||
defineOptions({ name: 'HotZone' });
|
||||
const props = defineProps<{ property: HotZoneProperty }>();
|
||||
|
||||
@@ -14,8 +14,6 @@ import {
|
||||
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
/** 广告魔方属性面板 */
|
||||
defineOptions({ name: 'MagicCubeProperty' });
|
||||
|
||||
@@ -23,6 +21,8 @@ const props = defineProps<{ modelValue: MagicCubeProperty }>();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const formData = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const selectedHotAreaIndex = ref(-1); // 选中的热区
|
||||
@@ -37,7 +37,9 @@ const handleHotAreaSelected = (_: any, index: number) => {
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<Form :model="formData" class="mt-2">
|
||||
<ATypographyText tag="p"> 魔方设置 </ATypographyText>
|
||||
<ATypographyText type="secondary" class="text-sm"> 每格尺寸187 * 187 </ATypographyText>
|
||||
<ATypographyText type="secondary" class="text-sm">
|
||||
每格尺寸187 * 187
|
||||
</ATypographyText>
|
||||
<MagicCubeEditor
|
||||
class="my-4"
|
||||
v-model="formData.list"
|
||||
@@ -61,11 +63,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
|
||||
</template>
|
||||
</template>
|
||||
<FormItem label="上圆角" name="borderRadiusTop">
|
||||
<Slider
|
||||
v-model:value="formData.borderRadiusTop"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
<FormItem label="下圆角" name="borderRadiusBottom">
|
||||
<Slider
|
||||
@@ -75,11 +73,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="间隔" name="space">
|
||||
<Slider
|
||||
v-model:value="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.space" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</ComponentContainerProperty>
|
||||
|
||||
@@ -11,10 +11,10 @@ import {
|
||||
Switch,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
|
||||
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
|
||||
|
||||
/** 宫格导航属性面板 */
|
||||
|
||||
@@ -19,14 +19,14 @@ defineProps<{ property: MenuListProperty }>();
|
||||
>
|
||||
<div class="flex flex-1 flex-row items-center gap-2">
|
||||
<Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
|
||||
<span class="text-base" :style="{ color: item.titleColor }">{{
|
||||
item.title
|
||||
}}</span>
|
||||
<span class="text-base" :style="{ color: item.titleColor }">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-center flex flex-row justify-center gap-1">
|
||||
<span class="text-xs" :style="{ color: item.subtitleColor }">{{
|
||||
item.subtitle
|
||||
}}</span>
|
||||
<span class="text-xs" :style="{ color: item.subtitleColor }">
|
||||
{{ item.subtitle }}
|
||||
</span>
|
||||
<IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,8 +14,6 @@ import {
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
/** 列表导航属性面板 */
|
||||
defineOptions({ name: 'MenuListProperty' });
|
||||
|
||||
@@ -23,13 +21,17 @@ const props = defineProps<{ modelValue: MenuListProperty }>();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const formData = useVModel(props, 'modelValue', emit);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<ATypographyText tag="p"> 菜单设置 </ATypographyText>
|
||||
<ATypographyText type="secondary" class="text-sm"> 拖动左侧的小圆点可以调整顺序 </ATypographyText>
|
||||
<ATypographyText type="secondary" class="text-sm">
|
||||
拖动左侧的小圆点可以调整顺序
|
||||
</ATypographyText>
|
||||
<Form :model="formData" class="mt-2">
|
||||
<Draggable
|
||||
v-model="formData.list"
|
||||
|
||||
@@ -6,7 +6,14 @@ import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/u
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input, Radio, RadioGroup, Slider } from 'ant-design-vue';
|
||||
import {
|
||||
FormItem,
|
||||
Image,
|
||||
Input,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Slider,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
@@ -71,7 +78,7 @@ const handleHotAreaSelected = (
|
||||
class="m-b-16px"
|
||||
@hot-area-selected="handleHotAreaSelected"
|
||||
/>
|
||||
<img
|
||||
<Image
|
||||
v-if="isMp"
|
||||
alt=""
|
||||
style="width: 76px; height: 30px"
|
||||
|
||||
@@ -32,7 +32,7 @@ watch(
|
||||
* 计算商品的间距
|
||||
* @param index 商品索引
|
||||
*/
|
||||
const calculateSpace = (index: number) => {
|
||||
function calculateSpace(index: number) {
|
||||
// 商品的列数
|
||||
const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
|
||||
// 第一列没有左边距
|
||||
@@ -41,19 +41,19 @@ const calculateSpace = (index: number) => {
|
||||
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') {
|
||||
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
|
||||
}
|
||||
return { width };
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
|
||||
@@ -158,11 +158,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="间隔" name="space">
|
||||
<Slider
|
||||
v-model:value="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.space" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
@@ -56,7 +56,7 @@ onMounted(() => {
|
||||
filterable
|
||||
:loading="loading"
|
||||
:options="
|
||||
articles.map((item) => ({ label: item.title, value: item.id }))
|
||||
articles.map((item: any) => ({ label: item.title, value: item.id }))
|
||||
"
|
||||
@search="queryArticleList"
|
||||
/>
|
||||
|
||||
@@ -156,11 +156,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="间隔" name="space">
|
||||
<Slider
|
||||
v-model:value="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.space" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
@@ -19,7 +19,8 @@ import {
|
||||
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
import { ColorInput } from '#/views/mall/promotion/components';
|
||||
import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
|
||||
// TODO: 添加组件
|
||||
// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
|
||||
|
||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||
|
||||
@@ -158,11 +159,7 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="间隔" name="space">
|
||||
<Slider
|
||||
v-model:value="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.space" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
@@ -101,11 +101,7 @@ watch(
|
||||
<Switch v-model:checked="formData!.showScan" />
|
||||
</FormItem>
|
||||
<FormItem label="框体高度" name="height">
|
||||
<Slider
|
||||
v-model:value="formData!.height"
|
||||
:max="50"
|
||||
:min="28"
|
||||
/>
|
||||
<Slider v-model:value="formData!.height" :max="50" :min="28" />
|
||||
</FormItem>
|
||||
<FormItem label="框体颜色" name="backgroundColor">
|
||||
<ColorInput v-model="formData.backgroundColor" />
|
||||
|
||||
@@ -65,18 +65,10 @@ const rules = {}; // 表单校验
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="偏移量" name="marginLeft">
|
||||
<Slider
|
||||
v-model:value="formData.marginLeft"
|
||||
:max="100"
|
||||
:min="0"
|
||||
/>
|
||||
<Slider v-model:value="formData.marginLeft" :max="100" :min="0" />
|
||||
</FormItem>
|
||||
<FormItem label="高度" name="height">
|
||||
<Slider
|
||||
v-model:value="formData.height"
|
||||
:max="200"
|
||||
:min="20"
|
||||
/>
|
||||
<Slider v-model:value="formData.height" :max="200" :min="20" />
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card title="主标题" class="property-group">
|
||||
@@ -89,11 +81,7 @@ const rules = {}; // 表单校验
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="大小" name="titleSize">
|
||||
<Slider
|
||||
v-model:value="formData.titleSize"
|
||||
:max="60"
|
||||
:min="10"
|
||||
/>
|
||||
<Slider v-model:value="formData.titleSize" :max="60" :min="10" />
|
||||
</FormItem>
|
||||
<FormItem label="粗细" name="titleWeight">
|
||||
<Slider
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import type { UserCouponProperty } from './config';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
/** 用户卡券 */
|
||||
defineOptions({ name: 'UserCoupon' });
|
||||
// 定义属性
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import type { UserOrderProperty } from './config';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
/** 用户订单 */
|
||||
defineOptions({ name: 'UserOrder' });
|
||||
// 定义属性
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import type { UserWalletProperty } from './config';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
/** 用户资产 */
|
||||
defineOptions({ name: 'UserWallet' });
|
||||
// 定义属性
|
||||
|
||||
@@ -80,7 +80,11 @@ const handleDelete = function (index: number) {
|
||||
</div>
|
||||
</template>
|
||||
</VueDraggable>
|
||||
<Tooltip :title="limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
|
||||
<Tooltip
|
||||
:title="
|
||||
limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
|
||||
"
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
|
||||
@@ -258,9 +258,9 @@ function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
|
||||
|
||||
.cube {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
color: var(--ant-color-text-secondary);
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user