sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改秒杀的商品背景和商品图片高度

v1.1.0
于肖磊 2024-11-11 10:53:10 +08:00
parent ce9a06523b
commit eb8cc0b4d7
5 changed files with 249 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/components/model-seckill/index.vue
View File

@ -38,62 +38,64 @@
</div>
<template v-if="form.shop_style_type != '3'">
<div class="flex flex-wrap" :style="`gap: ${content_outer_spacing}px;`">
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${content_radius}; ${shop_style_type == '1' ? content_padding : ''}`">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${shop_style_type}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
<div class="flex-col gap-10 w">
<!-- 标题 -->
<div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
<div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<!-- 进度条 -->
<!-- <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<div class="re flex-1">
<div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
<div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
<div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
</div>
</div>
<span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
</div> -->
</div>
<div class="flex-row align-e gap-10 jc-sb">
<div class="flex-col gap-5">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
<span class="original-price text-line-1 flex-1"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
</div>
</div>
<div v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['1'].includes(shop_style_type) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${shop_style_type}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
<div class="flex-col gap-10 w">
<!-- 标题 -->
<div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
<div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<!-- 进度条 -->
<!-- <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<div class="re flex-1">
<div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
<div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
<div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
</div>
</div>
<span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
</div> -->
</div>
<div class="flex-row align-e gap-10 jc-sb">
<div class="flex-col gap-5">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
<span class="original-price text-line-1 flex-1"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
</div>
</div>
<div v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
</template>
</div>
</div>
</div>
</div>
@ -102,62 +104,64 @@
</template>
<template v-else>
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="content_outer_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${content_radius}; ${shop_style_type == '1' ? content_padding : ''}`">
<template v-if="!isEmpty(item)">
<div class="oh re w h">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
<div class="flex-col gap-10 w">
<!-- 标题 -->
<div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
<div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<!-- 进度条 -->
<div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<div class="re flex-1">
<div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
<div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
<div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
</div>
</div>
<span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
</div>
</div>
<div class="flex-row align-e gap-10 jc-sb">
<div class="flex-col gap-5">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
<span class="original-price text-line-1 flex-1"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
</div>
</div>
<div v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
<swiper-slide v-for="(item, index) in list" :key="index" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['1'].includes(shop_style_type) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re w h">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
<div class="flex-col gap-10 w">
<!-- 标题 -->
<div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
<div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
</div>
<!-- 进度条 -->
<div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<div class="re flex-1">
<div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
<div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
<div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
</div>
</div>
<span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
</div>
</div>
<div class="flex-row align-e gap-10 jc-sb">
<div class="flex-col gap-5">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
<span class="original-price text-line-1 flex-1"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
</div>
</div>
<div v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
</template>
</div>
</div>
</div>
</div>
@ -392,19 +396,65 @@ const layout_type = computed(() => {
let class_type = '';
switch (shop_style_type.value) {
case '1':
class_type = `flex-row bg-f oh multicolumn-columns`;
class_type = `oh multicolumn-columns`;
break;
case '2':
class_type = `flex-col bg-f oh multicolumn-columns`;
class_type = `multicolumn-columns`;
break;
case '3':
class_type = `flex-col bg-f oh roll-columns`;
class_type = `roll-columns`;
break;
default:
break;
}
return class_type;
});
// 容器样式
const layout_style = computed(() => {
const radius = content_radius.value;
const gradient = gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction);
return `${radius} ${ gradient }`;
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = ['1'].includes(shop_style_type.value) ? content_padding.value : '';
const data = {
background_img_style: new_style.value.shop_background_img_style,
background_img: new_style.value.shop_background_img,
}
return padding + background_computer(data);
});
const shop_style_type_list= [
{ name: '单列', value: '1', width: 110, height: 120 },
{ name: '双列', value: '2', width: 180, height: 180 },
{ name: '横向滑动', value: '3', width: 0, height: 0 },
];
// 宽度和高度为空的时候，修改默认值
const goods_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = shop_style_type_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const goods_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = shop_style_type_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
@ -525,13 +575,12 @@ const corner_marker = computed(() => {
min-width: v-bind(multicolumn_columns_width) !important;
}
.flex-img1 {
min-height: 11rem;
max-height: 12rem;
width: 11rem;
width: v-bind(goods_img_width);
height: v-bind(goods_img_height);
}
.flex-img2 {
width: 100%;
height: 18rem;
height: v-bind(goods_img_height);
}
.flex-img3 {
background: #f4fcff;

36
src/components/model-seckill/model-seckill-content.vue
View File

@ -118,11 +118,21 @@ const props = defineProps({
const form = ref(props.value);
const data = ref(props.styles);
watchEffect(() => {
form.value = props.value;
onBeforeMount(() => {
init();
});
const init = () => {
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = data.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3'].includes(form.value.shop_style_type)) {
const list = base_list.shop_style_type_list.filter(item => item.value == form.value.shop_style_type);
if (list.length > 0) {
emit('shop_style_change', list[0].width, list[0].height);
}
}
};
const emit = defineEmits(['update:change-theme', 'shop_style_change']);
const base_list = {
themeList: [
{ id: '1', name: '风格1', url: common_store.common.config.attachment_host + `/static/diy/images/components/model-seckill/theme-1.png` },
@ -131,9 +141,9 @@ const base_list = {
{ id: '4', name: '风格4', url: common_store.common.config.attachment_host + `/static/diy/images/components/model-seckill/theme-4.png` },
],
shop_style_type_list: [
{ name: '单列', value: '1' },
{ name: '双列', value: '2' },
{ name: '横向滑动', value: '3' },
{ name: '单列', value: '1', width: 110, height: 120 },
{ name: '双列', value: '2', width: 180, height: 180 },
{ name: '横向滑动', value: '3', width: 0, height: 0 },
],
list_show_list: [
{ name: '商品名称', value: 'title' },
@ -179,11 +189,19 @@ const change_style = (val: any): void => {
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.shop_style_type_list.filter(item => item.value == form.value.shop_style_type);
if (list.length > 0) {
emit('shop_style_change', list[0].width, list[0].height);
}
};
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {
emit('update:change-theme', val);
};
watchEffect(() => {
form.value = props.value;
init();
});
</script>
<style lang="scss" scoped></style>

15
src/components/model-seckill/model-seckill-setting.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-seckill-content :value="form.content" :styles="form.style" :default-config="data_config" @update:change-theme="change_theme"></model-seckill-content>
<model-seckill-content :value="form.content" :styles="form.style" :default-config="data_config" @update:change-theme="change_theme" @shop_style_change="shop_style_change"></model-seckill-content>
</template>
<template v-if="type == '2'">
<model-seckill-styles :value="form.style" :content="form.content" :default-config="data_config"></model-seckill-styles>
@ -56,6 +56,10 @@ onBeforeMount(async () => {
header_background_direction: '180deg',
header_background_img_style: '2',
header_background_img: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
shop_direction: '90deg',
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_background_img_style: '0',
shop_background_img: [],
shop_radius: {
radius: 8,
radius_top_left: 8,
@ -81,7 +85,7 @@ onBeforeMount(async () => {
content_spacing: 10,
content_outer_height: 232,
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_size: 14,
shop_title_color: "#333333",
shop_price_typeface: '500',
shop_price_size: 18,
@ -178,10 +182,17 @@ const form = ref(props.value);
// 切换风格的时候会将对应风格的默认数据合并到form中
const change_theme = (val: string) => {
if (val) {
// 将默认数据样式合并到form中
form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
// 将默认数据样式合并到form中
form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
}
};
const shop_style_change = (width: number, height: number) => {
form.value.style.content_img_width = width;
form.value.style.content_img_height = height;
};
</script>
<style lang="scss" scoped>
</style>

42
src/components/model-seckill/model-seckill-styles.vue
View File

@ -38,6 +38,17 @@
</template>
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item label="商品背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_color_list" :type="form.shop_direction" @update:value="shop_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="shop_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
@ -70,9 +81,11 @@
<el-form-item label="内容圆角">
<radius :value="form.shop_radius"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<template v-if="data.shop_style_type == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
@ -82,9 +95,15 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="data.shop_style_type == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<template v-if="data.shop_style_type !== '3'">
<el-form-item v-if="data.shop_style_type == '1'" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
@ -173,7 +192,7 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
console.log(form);
let clone_form = cloneDeep(props.value);
const base_list = {
@ -202,6 +221,15 @@ const countdown_color_picker_event = (arry: color_list[], type: number) => {
form.value.countdown_bg_color_list = arry;
form.value.countdown_direction = type.toString();
};
// 商品背景渐变设置
const shop_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry;
form.value.shop_direction = type.toString();
};
// 商品背景图片设置
const shop_background_img_change = (arry: uploadList[]) => {
form.value.shop_background_img = arry;
};
// 进度条选中的设置
const progress_color_picker_event = (arry: color_list[], type: number) => {
form.value.progress_actived_color_list = arry;

12
src/config/const/seckill.ts
View File

@ -36,12 +36,18 @@ interface DefaultSeckill {
header_background_img_style: string;
header_background_img: uploadList[];
seckill_head_padding: paddingStyle;
shop_direction: string,
shop_color_list: color_list[],
shop_background_img_style: string,
shop_background_img: uploadList[],
shop_radius: radiusStyle;
shop_img_radius: radiusStyle;
shop_padding: paddingStyle;
content_outer_spacing: number;
content_spacing: number;
content_outer_height: number;
content_img_width: number | undefined;
content_img_height: number | undefined;
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
@ -127,6 +133,10 @@ const defaultSeckill: DefaultSeckill = {
padding_left: 13,
padding_right: 13,
},
shop_direction: '90deg',
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_background_img_style: '0',
shop_background_img: [],
// 商品内容圆角
shop_radius: {
radius: 8,
@ -156,6 +166,8 @@ const defaultSeckill: DefaultSeckill = {
content_spacing: 10,
// 商品高度
content_outer_height: 232,
content_img_width: undefined,
content_img_height: undefined,
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: '#333333',