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

修改组合搭配显示逻辑

v1.3.0
于肖磊 2025-03-10 18:09:56 +08:00
parent c5d0461e6e
commit 44f3536f9b
7 changed files with 432 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/model-binding/components/goods-index.vue
View File

@ -1,6 +1,6 @@
<template>
<card-container>
<div class="mb-12">内容样式</div>
<div class="mb-12">商品样式</div>
<el-form-item label="内容背景">
<background-common v-model:color_list="form.goods_color_list" v-model:direction="form.goods_direction" v-model:img_style="form.goods_background_img_style" v-model:img="form.goods_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
@ -29,31 +29,31 @@
<radius :value="form.goods_radius"></radius>
</el-form-item>
<el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
<slider v-model="form.goods_content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商户间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
<slider v-model="form.goods_content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
<slider v-model="form.goods_content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-else>
<el-form-item v-if="data.theme == '0'" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
<slider v-model="form.goods_content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
<slider v-model="form.goods_content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :value="form.goods_img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.goods_border_is_show" v-model:color="form.goods_border_color" v-model:style="form.goods_border_style" v-model:size="form.goods_border_size"></border-config>
<border-config v-model:show="form.goods_border_box.border_is_show" v-model:color="form.goods_border_box.border_color" v-model:style="form.goods_border_box.border_style" v-model:size="form.goods_border_box.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
<shadow-config v-model="form.goods_border_box"></shadow-config>
</card-container>
<template v-if="theme == '3'">
<div class="divider-line"></div>
@ -75,6 +75,28 @@
</template>
</card-container>
</template>
<card-container class="card-container">
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.goods_content_style.color_list" v-model:direction="form.goods_content_style.direction" v-model:img_style="form.goods_content_style.background_img_style" v-model:img="form.goods_content_style.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="组合间距">
<margin :value="form.goods_content_style.outer_margin"></margin>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.goods_content_style"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.goods_content_style"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.goods_content_style"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.goods_content_style.border_is_show" v-model:color="form.goods_content_style.border_color" v-model:style="form.goods_content_style.border_style" v-model:size="form.goods_content_style.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.goods_content_style"></shadow-config>
</card-container>
</template>
<script lang="ts" setup>

373
src/components/model-binding/index.vue
View File

@ -1,64 +1,119 @@
<template>
<div class="oh" :style="style_container">
<div :style="style_img_container">
<div v-for="(match_item, match_index) in list" :key="match_index">
<div class="flex-col">
<div class="flex-col">
<template v-if="!isEmpty(match_item)">
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(match_item.new_cover)">
<image-empty v-model="match_item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="match_item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</template>
<!-- 商品信息区域 -->
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in match_item.good_list" :key="index" class="re oh" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</div>
<div class="oh flex-col" :style="`gap: ${ new_style.data_content_outer_spacing }px;`">
<div v-for="(match_item, match_index) in list" :key="match_index">
<div :style="match_layout_style">
<div class="flex-col" :style="match_layout_img_style">
<div :class="['oh w h', ['0'].includes(host_graph_theme) ? 'flex-row' : 'flex-col' ]">
<template v-if="!isEmpty(match_item)">
<div class="oh re" :class="`flex-match-img${host_graph_theme}`">
<template v-if="!isEmpty(match_item.new_cover)">
<image-empty v-model="match_item.new_cover[0]" :class="`flex-match-img${host_graph_theme}`" :style="data_content_img_radius"></image-empty>
</template>
<div class="flex-1 flex-row jc-sb gap-10" :style="content_style">
<div class="flex-1 flex-col jc-sb gap-10">
<div class="text-line-2" :style="trends_config('title')">
{{ item.title }}
<template v-else>
<image-empty v-model="match_item.images" :class="`flex-match-img${host_graph_theme}`" :style="data_content_img_radius"></image-empty>
</template>
</div>
</template>
<div class="flex-1 flex-col jc-sb gap-6" :style="data_content_style">
<div class="flex-col gap-6">
<span class="text-line-1" :style="trends_config('title', 'data')">{{ match_item.title }}</span>
<div class="flex-row align-c jc-sb">
<div class="flex-col gap-6">
<div class="flex-row align-c">
<span :style="trends_config('price_symbol', 'data')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('price', 'data')">{{ match_item.price }}</span>
</div>
<div class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="data_discounts" />
<div>
<span :style="trends_config('save_price_symbol', 'data')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('save_price', 'data')">{{ match_item.price }}</span>
</div>
</div>
<!-- <span :class="form.goods_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.desc }}</span> -->
</div>
<div v-if="theme == '0'" class="flex-row align-c">
<img-or-icon-or-text :value="props.value" type="right" />
<div v-if="host_graph_theme !== '0'" class="flex-row align-c jc-e">
<img-or-icon-or-text :value="props.value" type="details" />
</div>
</div>
</div>
<div v-if="host_graph_theme == '0'" class="flex-row align-c jc-e">
<img-or-icon-or-text :value="props.value" type="details" />
</div>
</div>
</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 match_item.good_list" :key="index">
<div :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</div>
<!-- 商品信息区域 -->
<div class="oh" :style="margin_computer(new_style.goods_content_style.outer_margin)">
<div :style="goods_content_style">
<div :style="goods_content_img_style">
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in match_item.good_list" :key="index" class="re oh" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0' , '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="goods_content_img_radius"></image-empty>
</div>
</template>
<div class="flex-1 flex-row jc-sb" :style="content_style">
<div class="flex-1 flex-col jc-sb">
<div :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')">
{{ item.title }}
</div>
<div class="flex-row align-c text-line-1">
<span :style="trends_config('price_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ match_item.price }}</span>
</div>
<div class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" />
<div class="flex-1 text-line-1">
<span :style="trends_config('save_price_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('save_price', 'goods')">{{ match_item.price }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<div class="flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title')">
{{ item.title }}
</div>
<!-- <span :class="form.goods_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.desc }}</span> -->
</div>
</div>
</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="goods_content_outer_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in match_item.good_list" :key="index">
<div :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="goods_content_img_radius"></image-empty>
</div>
</template>
<div class="flex-1 flex-row jc-sb" :style="content_style">
<div class="flex-1 flex-col jc-sb">
<div :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')">
{{ item.title }}
</div>
<div class="flex-row align-c text-line-1">
<span :style="trends_config('price_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ match_item.price }}</span>
</div>
<div class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" />
<div class="flex-1 text-line-1">
<span :style="trends_config('save_price_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('save_price', 'goods')">{{ match_item.price }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
@ -91,21 +146,6 @@ const props = defineProps({
});
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 选择的风格
const theme = computed(() => form.value.theme);
// 最外层不同风格下的显示
const outer_class = computed(() => {
const flex = ['0', '2' ].includes(theme.value) ? 'flex-col ' : 'flex-row ';
const wrap = theme.value == '3' ? '' : 'flex-wrap ';
return flex + wrap + 'oh';
});
const onter_style = computed(() => {
const radius = `gap: ${new_style.value.content_outer_spacing + 'px'};`;
return `${radius}`;
});
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
//#region 列表数据
type goods_list = {
title: string,
@ -118,7 +158,9 @@ type goods_list = {
}
type data_list = {
title: string,
pice: string,
price_symbol: string;
price: string,
save_price_symbol: string,
save_pice: string,
images: string,
new_cover: string[],
@ -126,9 +168,11 @@ type data_list = {
}
const default_list = {
title: '测试组合搭配标题',
pice: '￥0.00',
save_pice: '￥0.00',
images: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png',
price_symbol: '￥',
price: '8970.00-9200.00',
save_price_symbol: '￥',
save_pice: '8970.00-9200.00',
images: '',
new_cover: [],
good_list: [
{
@ -223,28 +267,82 @@ watch(() => watch_data.value, (val, oldVal) => {
}
}, { deep: true });
//#endregion
// 门店间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.goods_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.goods_img_radius));
//#region 数据样式
// 选择的风格
const host_graph_theme = computed(() => form.value.host_graph_theme);
const data_content_img_radius = computed(() => radius_computer(new_style.value.data_img_radius));
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.goods_padding));
const data_content_padding = computed(() => padding_computer(new_style.value.data_padding));
// 容器样式
const match_layout_style = computed(() => {
return layout_handle('data') + radius_computer(new_style.value.data_radius);
});
// 容器图片样式
const match_layout_img_style = computed(() => {
const padding = data_content_padding.value;
return padding + layout_img_handle('data');
});
// 内容区域的样式
const data_content_style = computed(() => {
const spacing_value = new_style.value.data_content_spacing;
let spacing = '';
if (['0'].includes(host_graph_theme.value)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = data_content_padding.value;
}
return `${spacing}`;
});
const data_style_list = [
{ name: '单列展示', value: '0', width: 128, height: 128 },
{ name: '大图展示', value: '1', width: 0, height: 221 },
]
// 宽度和高度为空的时候，修改默认值
const data_img_width = computed(() => {
return size_handle('data', 'width');
});
// 宽度和高度为空的时候，修改默认值
const data_img_height = computed(() => {
return size_handle('data', 'height');
});
// 商品内容样式
const goods_content_style = computed(() => common_styles_computer(new_style.value.goods_content_style));
const goods_content_img_style = computed(() => common_img_computer(new_style.value.goods_content_style));
//#endregion
//#region 商品样式
// 选择的风格
const theme = computed(() => form.value.theme);
// 最外层不同风格下的显示
const outer_class = computed(() => {
const flex = ['0'].includes(theme.value) ? 'flex-col ' : 'flex-row ';
const wrap = theme.value == '3' ? '' : 'flex-wrap ';
return flex + wrap + 'oh';
});
const onter_style = computed(() => {
const radius = `gap: ${ new_style.value.goods_content_outer_spacing + 'px'};`;
return `${radius}`;
});
// 门店间距
const goods_content_outer_spacing = computed(() => new_style.value.goods_content_outer_spacing);
// 圆角设置
const goods_content_radius = computed(() => radius_computer(new_style.value.goods_radius));
// 图片圆角设置
const goods_content_img_radius = computed(() => radius_computer(new_style.value.goods_img_radius));
// 内边距设置
const goods_content_padding = computed(() => padding_computer(new_style.value.goods_padding));
const goods_left_right_width_margin = computed(() => {
const { goods_margin = old_margin } = new_style.value;
return goods_margin.margin_left + goods_margin.margin_right;
});
// 两列风格
const two_columns = computed(() => content_outer_spacing.value + goods_left_right_width_margin.value * 2 + 'px' );
const two_columns = computed(() => goods_content_outer_spacing.value + goods_left_right_width_margin.value * 2 + 'px' );
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`goods_${key}_typeface`], new_style.value[`goods_${key}_size`], new_style.value[`goods_${key}_color`], type);
const trends_config = (key: string, type: string) => {
return style_config(new_style.value[`${ type }_${key}_typeface`], new_style.value[`${ type }_${key}_size`], new_style.value[`${ type }_${key}_color`]);
};
// 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
let style = `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
return style;
const style_config = (typeface: string, size: number, color: string | object) => {
return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
};
// 不同风格下的样式
const layout_type = computed(() => {
@ -257,7 +355,7 @@ const layout_type = computed(() => {
class_type = `two-columns oh`;
break;
case '2':
class_type = `oh`;
class_type = `two-columns oh`;
break;
case '3':
class_type = `multicolumn-columns oh`;
@ -268,47 +366,68 @@ const layout_type = computed(() => {
return class_type;
});
// 容器样式
const match_layout_style = computed(() => { return gradient_handle(new_style.value.data_color_list, new_style.value.goods_direction) + margin_computer(new_style.value.goods_margin) + radius_computer(new_style.value) + border_computer(new_style.value) + box_shadow_computer(new_style.value); });
// 容器图片样式
const match_layout_img_style = computed(() => {
const padding = theme.value == 0 ? content_padding.value : '';
const data = {
background_img_style: new_style.value.goods_background_img_style,
background_img: new_style.value.goods_background_img,
}
return padding + background_computer(data);
});
// 容器样式
const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value;
const radius = theme.value == '6' ? '' : goods_content_radius.value;
const width = theme.value == '0' ? `width: calc(100% - ${ goods_left_right_width_margin.value }px);` : '';
const gradient = gradient_handle(new_style.value.goods_color_list, new_style.value.goods_direction) + margin_computer(new_style.value.goods_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value);
const gradient = layout_handle('goods');
return `${radius} ${ gradient } ${ width }`;
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = theme.value == 0 ? content_padding.value : '';
const data = {
background_img_style: new_style.value.goods_background_img_style,
background_img: new_style.value.goods_background_img,
}
return padding + background_computer(data);
const padding = [ '0', '2'].includes(theme.value) ? goods_content_padding.value : '';
return padding + layout_img_handle('goods');
});
const layout_handle = (type: string) => {
return gradient_handle(new_style.value.data_color_list, new_style.value.goods_direction) + margin_computer(new_style.value.goods_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value);
return gradient_handle(new_style.value[`${ type }_color_list`], new_style.value[`${ type }_direction`]) + margin_computer(new_style.value[`${ type }_margin`]) + border_computer(new_style.value[`${ type }_border_box`]) + box_shadow_computer(new_style.value[`${ type }_border_box`]);
};
const layout_img_handle = (type: string) => {
const data = {
background_img_style: new_style.value[`${ type }_background_img_style`],
background_img: new_style.value[`${ type }_background_img`],
}
return background_computer(data);
};
// 内容区域的样式
const content_style = computed(() => {
const spacing_value = new_style.value.content_spacing;
const spacing_value = new_style.value.goods_content_spacing;
let spacing = '';
if (['0'].includes(theme.value)) {
if (['0', '2'].includes(theme.value)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
spacing = goods_content_padding.value;
}
return `${spacing}`;
});
const goods_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const goods_img_width = computed(() => {
return size_handle('goods', 'width');
});
// 宽度和高度为空的时候，修改默认值
const goods_img_height = computed(() => {
return size_handle('goods', 'height');
});
const size_handle = (type: string, location: 'width' | 'height') => {
if (typeof new_style.value[`${ type }_content_${ location }`] == 'number') {
return new_style.value[`${ type }_content_${ location }`] + 'px';
} else {
const list = type == 'goods' ? goods_style_list.filter(item => item.value == theme.value) : data_style_list.filter(item => item.value == host_graph_theme.value);
if (list.length > 0) {
return list[0][location] + 'px';
} else {
return 'auto';
}
}
}
const content_outer_height = computed(() => new_style.value.goods_content_outer_height + 'px');
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
//#endregion
//#region 轮播设置
// 轮播图key值
const carouselKey = ref('0');
@ -331,39 +450,6 @@ watchEffect(() => {
carouselKey.value = get_math();
});
//#endregion
const goods_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, 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 = goods_style_list.filter(item => item.value == theme.value);
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 = goods_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
</script>
<style lang="scss" scoped>
:deep(.el-image) {
@ -373,6 +459,15 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
height: 5rem;
}
}
.flex-match-img0 {
height: v-bind(data_img_height);
width: v-bind(data_img_width);
}
.flex-match-img1 {
height: v-bind(data_img_height);
width: 100%;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
@ -388,7 +483,7 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
height: v-bind(goods_img_height);
}
.flex-img2 {
width: 100%;
width: v-bind(goods_img_width);
height: v-bind(goods_img_height);
}
.flex-img3 {

2
src/components/model-binding/model-binding-content.vue
View File

@ -103,7 +103,7 @@ const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
],
data_type_list: [

18
src/components/model-binding/model-binding-styles.vue
View File

@ -32,25 +32,25 @@
<el-form-item label="内容圆角">
<radius :value="form.data_radius"></radius>
</el-form-item>
<el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
<el-form-item label="内容间距">
<slider v-model="form.data_content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商户间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
<el-form-item label="组合间距">
<slider v-model="form.data_content_outer_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="data.theme == '0'" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
<slider v-model="form.data_content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
<slider v-model="form.data_content_img_height" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.data_img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<border-config v-model:show="form.data_border_box.border_is_show" v-model:color="form.data_border_box.border_color" v-model:style="form.data_border_box.border_style" v-model:size="form.data_border_box.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
<shadow-config v-model="form.data_border_box"></shadow-config>
</card-container>
<div class="divider-line"></div>
<template v-if="new_tabs.length > 0">
@ -112,7 +112,7 @@ const tabs_name = ref('data');
const tabs = [
{ label: "详情按钮", name: "details" },
{ label: "数据优惠", name: "data_discounts" },
{ label: "商品优惠", name: "goods_discounts" },
{ label: "商品优惠", name: "data_discounts" },
];
// 图标数组处理一下，确保打开的都能看到
type tabs_type = { name: string; label: string;};

2
src/components/model-realstore/index.vue
View File

@ -311,7 +311,7 @@ const layout_style = computed(() => {
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = theme.value == 0 ? content_padding.value : '';
const padding = theme.value == '0' ? content_padding.value : '';
const data = {
background_img_style: new_style.value.realstore_background_img_style,
background_img: new_style.value.realstore_background_img,

2
src/components/model-shop/index.vue
View File

@ -261,7 +261,7 @@ const layout_style = computed(() => {
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = theme.value == 0 ? content_padding.value : '';
const padding = theme.value == '0' ? content_padding.value : '';
const data = {
background_img_style: new_style.value.shop_background_img_style,
background_img: new_style.value.shop_background_img,

218
src/config/const/binding.ts
View File

@ -29,7 +29,7 @@ type icon_style = {
const common_icon_style: icon_style = {
color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg',
color: '#ccc',
color: '#52C41A',
size: 12,
img_width: 14,
img_height: 14,
@ -78,11 +78,10 @@ interface defaultRealstore {
goods_discounts_text: string,
};
style: {
content_img_width: number;
content_img_height: number;
content_spacing: number;
content_outer_spacing: number;
content_outer_height: number;
data_content_img_width: number;
data_content_img_height: number;
data_content_spacing: number;
data_content_outer_spacing: number;
data_color_list: color_list[];
data_direction: string;
data_background_img_style: string;
@ -109,6 +108,12 @@ interface defaultRealstore {
data_save_price_color: string;
data_save_price_typeface: string;
data_save_price_size: number;
data_border_box: object;
goods_content_img_width: number;
goods_content_img_height: number;
goods_content_spacing: number;
goods_content_outer_spacing: number;
goods_content_outer_height: number;
goods_color_list: color_list[];
goods_direction: string;
goods_background_img_style: string;
@ -135,22 +140,14 @@ interface defaultRealstore {
goods_save_price_color: string;
goods_save_price_typeface: string;
goods_save_price_size: number;
goods_border_box: object,
details_style: object,
data_discounts_style: object,
goods_discounts_style: object,
is_roll: string;
interval_time: number;
rolling_fashion: string;
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
goods_content_style: object,
common_style: object;
};
}
@ -169,27 +166,26 @@ const defaultRealstore: defaultRealstore = {
is_goods_show: ['title', 'goods_img', 'price', 'save_price'],
is_default_show_goods: '1',
is_details_show: '1',
details_type: 'img-icon',
details_type: 'text',
details_img: [],
details_icon: 'arrow-right',
details_text: '',
details_icon: '',
details_text: '搭配购买',
is_data_discounts_show: '1',
data_discounts_type: 'img-icon',
data_discounts_type: 'text',
data_discounts_img: [],
data_discounts_icon: 'arrow-right',
data_discounts_text: '',
data_discounts_icon: '',
data_discounts_text: '节省',
is_goods_discounts_show: '1',
goods_discounts_type: 'img-icon',
goods_discounts_type: 'text',
goods_discounts_img: [],
goods_discounts_icon: 'arrow-right',
goods_discounts_text: '',
goods_discounts_icon: '',
goods_discounts_text: '节省',
},
style: {
content_img_width: 50,
content_img_height: 50,
content_spacing: 10,
content_outer_spacing: 10,
content_outer_height: 204,
data_content_img_width: 50,
data_content_img_height: 50,
data_content_spacing: 10,
data_content_outer_spacing: 10,
data_color_list: [{ color: '#fff', color_percentage: undefined }],
data_direction: '90deg',
data_background_img_style: '2',
@ -236,17 +232,40 @@ const defaultRealstore: defaultRealstore = {
data_title_img_outer_spacing: 5,
data_title_color: '#333',
data_title_typeface: 'bold',
data_title_size: 14,
data_price_symbol_color: '#666',
data_title_size: 16,
data_price_symbol_color: '#E22C08',
data_price_symbol_size: 12,
data_price_color: '#666',
data_price_color: '#E22C08',
data_price_typeface: '400',
data_price_size: 12,
data_save_price_symbol_color: '#666',
data_save_price_symbol_color: '#52C41A',
data_save_price_symbol_size: 12,
data_save_price_color: '#666',
data_save_price_color: '#52C41A',
data_save_price_typeface: '400',
data_save_price_size: 12,
data_border_box: {
border_is_show: '0',
border_color: '#eee',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
goods_content_img_width: 50,
goods_content_img_height: 50,
goods_content_spacing: 10,
goods_content_outer_spacing: 10,
goods_content_outer_height: 204,
goods_color_list: [{ color: '#fff', color_percentage: undefined }],
goods_direction: '90deg',
goods_background_img_style: '2',
@ -292,41 +311,116 @@ const defaultRealstore: defaultRealstore = {
goods_title_img_inner_spacing: 5,
goods_title_img_outer_spacing: 5,
goods_title_color: '#333',
goods_title_typeface: 'bold',
goods_title_size: 14,
goods_price_symbol_color: '#666',
goods_price_symbol_size: 12,
goods_price_color: '#666',
goods_title_typeface: '400',
goods_title_size: 12,
goods_price_symbol_color: '#EA3323',
goods_price_symbol_size: 9,
goods_price_color: '#EA3323',
goods_price_typeface: '400',
goods_price_size: 12,
goods_save_price_symbol_color: '#666',
goods_save_price_symbol_size: 12,
goods_save_price_color: '#666',
goods_price_size: 9,
goods_save_price_symbol_color: '#52C41A',
goods_save_price_symbol_size: 10,
goods_save_price_color: '#52C41A',
goods_save_price_typeface: '400',
goods_save_price_size: 12,
details_style: cloneDeep(common_icon_style),
data_discounts_style: cloneDeep(common_icon_style),
goods_save_price_size: 10,
goods_border_box: {
border_is_show: '0',
border_color: '#eee',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
details_style: {
...cloneDeep(common_icon_style),
color_list: [{ color: '#E22C08', color_percentage: undefined }],
color: '#fff',
padding: 0,
padding_top: 5,
padding_bottom: 5,
padding_left: 10,
padding_right: 10,
radius: 14,
radius_top_left: 14,
radius_top_right: 14,
radius_bottom_left: 14,
radius_bottom_right: 14,
},
data_discounts_style: {
...cloneDeep(common_icon_style),
color_list: [{ color: '#61AB3C', color_percentage: undefined }, { color: '#91D552', color_percentage: undefined }, { color: '#9BA34A', color_percentage: undefined }],
color: '#fff',
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 8,
padding_right: 8,
radius: 0,
radius_top_left: 0,
radius_top_right: 14,
radius_bottom_left: 14,
radius_bottom_right: 0,
},
goods_discounts_style: cloneDeep(common_icon_style),
// 是否滚动
is_roll: '1',
interval_time: 3,
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
border_is_show: '0',
border_color: '#eee',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
goods_content_style: {
color_list: [{ color: '#f8f8f8', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
outer_margin: {
margin: 0,
margin_top: 10,
margin_bottom: 10,
margin_left: 0,
margin_right: 0,
}
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
// 公共样式
common_style: {
...defaultCommon,