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

组合搭配开发

v1.3.0
于肖磊 2025-03-07 18:34:41 +08:00
parent 7e1b7d3f00
commit d5a8d70bb9
10 changed files with 641 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/common/img-or-icon-or-text/img-or-icon-or-text-content.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<el-row class="w">
<el-col :span="24"><el-switch v-model="form[`is_${ type }_show`]" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form[`is_${ type }_show`] == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form[`${ type }_type`]" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form[`${ type }_type`] === 'img-icon'">
<upload v-model="form[`${ type }_img`]" v-model:icon-value="form[`${ type }_icon`]" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form[`${ type }_text`]" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
type: {
type: String,
default: '',
}
});
const form = ref(props.value);
// 监听数据变化
watch(() => props.value, (new_value) => {
form.value = new_value;
}, { deep: true, immediate: true });
</script>
<style scoped lang="scss"></style>

135
src/components/model-binding/components/goods-index.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<card-container>
<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>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="原价符号">
<color-text-size-group v-model:color="form.goods_price_symbol_color" v-model:size="form.goods_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="原价">
<color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="节省价符号">
<color-text-size-group v-model:color="form.goods_save_price_symbol_color" v-model:size="form.goods_save_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="节省价">
<color-text-size-group v-model:color="form.goods_save_price_color" v-model:typeface="form.goods_save_price_typeface" v-model:size="form.goods_save_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.goods_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.goods_padding"></padding>
</el-form-item>
<el-form-item label="内容圆角">
<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>
</el-form-item>
<el-form-item label="商户间距">
<slider v-model="form.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>
</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>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.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>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<template v-if="theme == '3'">
<div class="divider-line"></div>
<card-container class="card-container">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.is_roll == '1'">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
</template>
</template>
<script lang="ts" setup>
/**
* @description: 组合搭配列表（样式）
* @param value{Object} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.goods_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.goods_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.goods_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.goods_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.goods_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.goods_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.goods_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.goods_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.goods_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.goods_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.goods_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.goods_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.goods_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.goods_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.goods_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 多商户背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.goods_color_list = arry;
form.value.goods_direction = type.toString();
};
</script>

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

@ -1,64 +1,67 @@
<template>
<div class="oh" :style="style_container">
<div :style="style_img_container">
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in 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}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</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') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
<div class="">
<!-- 商品信息区域 -->
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in 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}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
<span :class="form.shop_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>
</div>
</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 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}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</template>
<div class="flex-col jc-sb gap-10" :style="content_style">
</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') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
</div>
<span :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.desc }}</span>
<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>
</div>
</div>
</swiper-slide>
</swiper>
</template>
</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 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}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</template>
<div class="flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ 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>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</div>
</div>
</div>
@ -131,13 +134,13 @@ const new_url_list = computed(() => {
// 标题图片样式
const title_img_style = computed(() => {
return (title_url: url[], index: number) => {
const { shop_title_img_width = 0, shop_title_img_height = 0, shop_title_img_radius, shop_title_img_inner_spacing, shop_title_img_outer_spacing} = new_style.value;
let style = `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`;
const { goods_title_img_width = 0, goods_title_img_height = 0, goods_title_img_radius, goods_title_img_inner_spacing, goods_title_img_outer_spacing} = new_style.value;
let style = `width: ${goods_title_img_width || 0 }px;height: ${ goods_title_img_height || 0 }px;${ radius_computer(goods_title_img_radius) }`;
const list = title_url.filter(item1 => !isEmpty(item1.url));
if (index < list.length - 1) {
style += `margin-right: ${ shop_title_img_inner_spacing || 0}px;`;
style += `margin-right: ${ goods_title_img_inner_spacing || 0}px;`;
} else {
style += `margin-right: ${ shop_title_img_outer_spacing || 0}px;`;
style += `margin-right: ${ goods_title_img_outer_spacing || 0}px;`;
}
return style;
}
@ -207,20 +210,20 @@ watch(() => watch_data.value, (val, oldVal) => {
// 门店间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
const content_radius = computed(() => radius_computer(new_style.value.goods_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
const content_img_radius = computed(() => radius_computer(new_style.value.goods_img_radius));
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
const shop_left_right_width_margin = computed(() => {
const { shop_margin = old_margin } = new_style.value;
return shop_margin.margin_left + shop_margin.margin_right;
const 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 + shop_left_right_width_margin.value * 2 + 'px' );
const two_columns = computed(() => 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[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
return style_config(new_style.value[`goods_${key}_typeface`], new_style.value[`goods_${key}_size`], new_style.value[`goods_${key}_color`], type);
};
// 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
@ -229,7 +232,7 @@ const style_config = (typeface: string, size: number, color: string | object, ty
};
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '180deg');
return gradient_handle(new_style.value.goods_button_color, '180deg');
};
// 不同风格下的样式
const layout_type = computed(() => {
@ -255,16 +258,16 @@ const layout_type = computed(() => {
// 容器样式
const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value;
const width = theme.value == '0' ? `width: calc(100% - ${ shop_left_right_width_margin.value }px);` : '';
const gradient = gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) + margin_computer(new_style.value.shop_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.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);
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.shop_background_img_style,
background_img: new_style.value.shop_background_img,
background_img_style: new_style.value.goods_background_img_style,
background_img: new_style.value.goods_background_img,
}
return padding + background_computer(data);
});
@ -301,18 +304,18 @@ watchEffect(() => {
carouselKey.value = get_math();
});
//#endregion
const shop_style_list = [
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 shop_img_width = computed(() => {
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_list.filter(item => item.value == theme.value);
const list = goods_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].width + 'px';
} else {
@ -321,11 +324,11 @@ const shop_img_width = computed(() => {
}
});
// 宽度和高度为空的时候，修改默认值
const shop_img_height = computed(() => {
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_list.filter(item => item.value == theme.value);
const list = goods_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].height + 'px';
} else {
@ -350,16 +353,16 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
height: v-bind(content_outer_height);
}
.flex-img0 {
height: v-bind(shop_img_height);
width: v-bind(shop_img_width);
height: v-bind(goods_img_height);
width: v-bind(goods_img_width);
}
.flex-img1 {
width: 100%;
height: v-bind(shop_img_height);
height: v-bind(goods_img_height);
}
.flex-img2 {
width: 100%;
height: v-bind(shop_img_height);
height: v-bind(goods_img_height);
}
.flex-img3 {
width: 100%;

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

@ -5,6 +5,11 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="主图风格">
<el-radio-group v-model="form.host_graph_theme" @change="host_graph_theme_change">
<el-radio v-for="item in base_list.host_graph_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择风格">
<el-radio-group v-model="form.theme" @change="theme_change">
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@ -18,47 +23,38 @@
<el-radio :value="4">四列展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="店铺介绍">
<el-switch v-model="form.shop_desc" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item v-if="form.shop_desc == '1'" label="介绍行数">
<el-radio-group v-model="form.shop_desc_row">
<el-radio value="1">一行</el-radio>
<el-radio value="2">两行</el-radio>
</el-radio-group>
<el-form-item v-if="form.host_graph_theme == '1'" label="主图显示">
<el-switch v-model="form.is_host_graph_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container class="card-container-br">
<div class="mb-12">商户设置</div>
<div class="mb-12">组合搭配设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="shop" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
<data-filter type="binding" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">显示内容</div>
<el-form-item label="商品显示">
<el-checkbox-group v-model="form.is_goods_show">
<el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否展开">
<el-switch v-model="form.is_default_show_goods" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane v-for="(tab, index) in base_list.tabs" :key="index" :label="tab.label" :name="tab.name">
<el-form-item :label="tab.label">
<img-or-icon-or-text-content v-model:value="form" :type="tab.name" />
</el-form-item>
</el-tab-pane>
</el-tabs>
</card-container>
<template v-if="form.theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">按钮设置</div>
<el-form-item label="右侧按钮" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_right_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_right_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.right_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.right_type === 'img-icon'">
<upload v-model="form.right_img" v-model:icon-value="form.right_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.right_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
</card-container>
</template>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['realstore']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>
@ -97,7 +93,13 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const tabs_name = ref('details');
const base_list = reactive({
host_graph_theme_list: [
{ name: '单列展示', value: '0', width: 128, height: 128 },
{ name: '大图展示', value: '1', width: 0, height: 221 },
],
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
@ -105,18 +107,19 @@ const base_list = reactive({
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
],
data_type_list: [
{ name: '指定门店', value: '0' },
{ name: '筛选门店', value: '1' },
{ name: '指定组合搭配', value: '0' },
{ name: '筛选组合搭配', value: '1' },
],
field_show_list: [
{ name: '博客标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
list_show_list: [
{ name: '商品名称', value: 'title'},
{ name: '商品图片', value: 'goods_img' },
{ name: '商品售价', value: 'price' },
{ name: '商品节省价', value: 'save_price' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
tabs: [
{ label: "详情按钮", name: "details" },
{ label: "数据优惠", name: "data_discounts" },
{ label: "商品优惠", name: "goods_discounts" },
]
});
@ -132,6 +135,14 @@ onMounted(() => {
}
}
});
const host_graph_theme_change = () => {
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.host_graph_theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
data.value.host_graph_img_width = list[0].width;
data.value.host_graph_img_height = list[0].height;
}
}
// 主题改变
const theme_change = (val: any) => {
if (val == '3' || val == '4') {
@ -140,20 +151,20 @@ const theme_change = (val: any) => {
form.value.field_show = ['0', '1', '3'];
}
if (val == '0') {
if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
if (data.value.goods_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.goods_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.goods_img_radius.radius = props.defaultConfig.img_radius_0;
data.value.goods_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
data.value.goods_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
data.value.goods_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.goods_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
if (data.value.goods_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.goods_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.goods_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.goods_img_radius.radius = props.defaultConfig.img_radius_1;
data.value.goods_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
data.value.goods_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
data.value.goods_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
data.value.goods_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
@ -218,16 +229,20 @@ const switch_chage = (val: string | number | boolean) => {
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
}
.img {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
:deep(.el-tabs.content-tabs) {
.el-tabs__header.is-top {
background: #fff;
margin: 0;
padding-top: 0rem;
}
.el-tabs__item.is-top {
padding: 0;
align-items: center;
width: 10rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
width: 100%;
}
}
</style>

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

@ -1,108 +1,71 @@
<template>
<div class="h">
<el-form :model="form" label-width="75">
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="标题图标">
<div class="flex-col gap-10 w h">
<el-form-item label="宽度" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_width" :max="1000"></slider>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="数据样式" name="data">
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<background-common v-model:color_list="form.data_color_list" v-model:direction="form.data_direction" v-model:img_style="form.data_background_img_style" v-model:img="form.data_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="高度" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_height" :max="1000"></slider>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.data_title_color" v-model:typeface="form.data_title_typeface" v-model:size="form.data_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="form-item-child-label">
<radius :value="form.shop_title_img_radius"></radius>
<el-form-item label="原价符号">
<color-text-size-group v-model:color="form.data_price_symbol_color" v-model:size="form.data_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="图标间距" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_inner_spacing" :max="50"></slider>
<el-form-item label="原价">
<color-text-size-group v-model:color="form.data_price_color" v-model:typeface="form.data_price_typeface" v-model:size="form.data_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="距离标题" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_outer_spacing" :max="50"></slider>
<el-form-item label="节省价符号">
<color-text-size-group v-model:color="form.data_save_price_symbol_color" v-model:size="form.data_save_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</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>
<el-form-item label="店铺介绍">
<color-text-size-group v-model:color="form.shop_desc_color" v-model:typeface="form.shop_desc_typeface" v-model:size="form.shop_desc_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.shop_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>
<el-form-item label="商户间距">
<slider v-model="form.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>
</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>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :value="form.shop_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>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<template v-if="data.is_right_show == '1' && theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">图标设置</div>
<img-or-icon-or-text-style v-model:value="form.right_style" type="right" :is-icon="data.right_type == 'img-icon' && !isEmpty(data.right_icon)" />
</card-container>
</template>
<template v-if="theme == '3'">
<div class="divider-line"></div>
<card-container class="card-container">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.is_roll == '1'">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
<el-form-item label="节省价">
<color-text-size-group v-model:color="form.data_save_price_color" v-model:typeface="form.data_save_price_typeface" v-model:size="form.data_save_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
<el-form-item label="外间距">
<margin :value="form.data_margin"></margin>
</el-form-item>
</template>
</card-container>
</template>
<el-form-item label="内间距">
<padding :value="form.data_padding"></padding>
</el-form-item>
<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>
<el-form-item label="商户间距">
<slider v-model="form.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>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.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>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</el-tab-pane>
<el-tab-pane label="商品样式" name="goods">
<goods-index :value="props.value" :content="props.content" :default-config="props.defaultConfig"></goods-index>
</el-tab-pane>
</el-tabs>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
/**
* @description: 博客列表（样式）
* @description: 组合搭配列表（样式）
* @param value{Object} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
@ -132,34 +95,33 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const tabs_name = ref('data');
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 多商户背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry;
form.value.shop_direction = type.toString();
form.value.data_color_list = arry;
form.value.data_direction = type.toString();
};
const common_style_update = (value: any) => {
form.value.common_style = value;
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs.content-tabs) {
.el-tabs__header.is-top {
background: #fff;
margin: 0;
padding-top: 0rem;
padding-bottom: 0rem;
}
.el-tabs__item.is-top {
padding: 0;
align-items: center;
width: 10rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
width: 100%;
}
}
</style>

2
src/components/model-goods-list/index.vue
View File

@ -119,7 +119,7 @@
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
<div v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title', 'title')">{{ item.title }}</div>

4
src/components/model-shop/model-shop-content.vue
View File

@ -114,10 +114,6 @@ const base_list = reactive({
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);

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

@ -2,46 +2,142 @@ import defaultCommon from "./index";
import commonTop from './common-top';
import { cloneDeep } from "lodash";
type icon_style = {
color_list: color_list[];
direction: string;
color: string;
size: number;
img_width: number;
img_height: number;
margin: number;
margin_top: number;
margin_bottom: number;
margin_left: number;
margin_right: number;
padding: number;
padding_top: number;
padding_bottom: number;
padding_left: number;
padding_right: number;
radius: number;
radius_top_left: number;
radius_top_right: number;
radius_bottom_left: number;
radius_bottom_right: number;
}
const common_icon_style: icon_style = {
color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg',
color: '#ccc',
size: 12,
img_width: 14,
img_height: 14,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
}
interface defaultRealstore {
content: {
content_top: object;
host_graph_theme: string;
is_host_graph_show: string;
list_show_list: string[];
is_default_show_shop: string;
theme: string;
carousel_col: number;
shop_desc: string;
shop_desc_row: string;
goods_save_price: string;
goods_save_price_row: string;
data_list: string[];
is_right_show: string;
right_type: string;
right_img: uploadList[];
right_icon: string;
right_text: string;
is_details_show: string;
details_type: string;
details_img: uploadList[];
details_icon: string;
details_text: string;
is_data_discounts_show: string,
data_discounts_type: string,
data_discounts_img: uploadList[],
data_discounts_icon: string,
data_discounts_text: string,
is_goods_discounts_show: string,
goods_discounts_type: string,
goods_discounts_img: uploadList[],
goods_discounts_icon: string,
goods_discounts_text: string,
};
style: {
shop_color_list: color_list[];
shop_direction: string;
shop_background_img_style: string;
shop_background_img: uploadList[];
shop_img_radius: radiusStyle;
shop_margin: marginStyle;
shop_padding: paddingStyle;
shop_radius: radiusStyle;
content_img_width: number;
content_img_height: number;
content_spacing: number;
content_outer_spacing: number;
content_outer_height: number;
shop_title_img_width: number,
shop_title_img_height: number,
shop_title_img_radius: radiusStyle,
shop_title_img_inner_spacing: number,
shop_title_img_outer_spacing: number,
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
shop_desc_color: string;
shop_desc_typeface: string;
shop_desc_size: number;
right_style: object,
data_color_list: color_list[];
data_direction: string;
data_background_img_style: string;
data_background_img: uploadList[];
data_img_radius: radiusStyle;
data_margin: marginStyle;
data_padding: paddingStyle;
data_radius: radiusStyle;
data_title_img_width: number,
data_title_img_height: number,
data_title_img_radius: radiusStyle,
data_title_img_inner_spacing: number,
data_title_img_outer_spacing: number,
data_title_color: string;
data_title_typeface: string;
data_title_size: number;
data_price_symbol_color: string;
data_price_symbol_size: number;
data_price_color: string;
data_price_typeface: string;
data_price_size: number;
data_save_price_symbol_color: string;
data_save_price_symbol_size: number;
data_save_price_color: string;
data_save_price_typeface: string;
data_save_price_size: number;
goods_color_list: color_list[];
goods_direction: string;
goods_background_img_style: string;
goods_background_img: uploadList[];
goods_img_radius: radiusStyle;
goods_margin: marginStyle;
goods_padding: paddingStyle;
goods_radius: radiusStyle;
goods_title_img_width: number,
goods_title_img_height: number,
goods_title_img_radius: radiusStyle,
goods_title_img_inner_spacing: number,
goods_title_img_outer_spacing: number,
goods_title_color: string;
goods_title_typeface: string;
goods_title_size: number;
goods_price_symbol_color: string;
goods_price_symbol_size: number;
goods_price_color: string;
goods_price_typeface: string;
goods_price_size: number;
goods_save_price_symbol_color: string;
goods_save_price_symbol_size: number;
goods_save_price_color: string;
goods_save_price_typeface: string;
goods_save_price_size: number;
details_style: object,
data_discounts_style: object,
goods_discounts_style: object,
is_roll: string;
interval_time: number;
rolling_fashion: string;
@ -63,96 +159,154 @@ const defaultRealstore: defaultRealstore = {
content_top: {
...commonTop,
},
host_graph_theme: '0',
is_host_graph_show: '1',
list_show_list: ['title', 'goods_img', 'price', 'save_price'],
is_default_show_shop: '1',
theme: '0',
carousel_col: 1,
shop_desc: '1',
shop_desc_row: '1',
goods_save_price: '1',
goods_save_price_row: '1',
data_list: [],
is_right_show: '1',
right_type: 'img-icon',
right_img: [],
right_icon: 'arrow-right',
right_text: '',
is_details_show: '1',
details_type: 'img-icon',
details_img: [],
details_icon: 'arrow-right',
details_text: '',
is_data_discounts_show: '1',
data_discounts_type: 'img-icon',
data_discounts_img: [],
data_discounts_icon: 'arrow-right',
data_discounts_text: '',
is_goods_discounts_show: '1',
goods_discounts_type: 'img-icon',
goods_discounts_img: [],
goods_discounts_icon: 'arrow-right',
goods_discounts_text: '',
},
style: {
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_direction: '90deg',
shop_background_img_style: '2',
shop_background_img: [],
content_img_width: 50,
content_img_height: 50,
content_spacing: 10,
content_outer_spacing: 10,
content_outer_height: 204,
data_color_list: [{ color: '#fff', color_percentage: undefined }],
data_direction: '90deg',
data_background_img_style: '2',
data_background_img: [],
// 图片圆角
shop_img_radius: {
data_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_margin: {
data_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
shop_padding: {
data_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
shop_radius: {
data_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
content_img_width: 50,
content_img_height: 50,
content_spacing: 10,
content_outer_spacing: 10,
content_outer_height: 204,
shop_title_img_width: 12,
shop_title_img_height: 12,
shop_title_img_radius: {
data_title_img_width: 12,
data_title_img_height: 12,
data_title_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_title_img_inner_spacing: 5,
shop_title_img_outer_spacing: 5,
shop_title_color: '#333',
shop_title_typeface: 'bold',
shop_title_size: 14,
shop_desc_color: '#666',
shop_desc_typeface: '400',
shop_desc_size: 12,
right_style: {
color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg',
color: '#ccc',
size: 12,
img_width: 14,
img_height: 14,
data_title_img_inner_spacing: 5,
data_title_img_outer_spacing: 5,
data_title_color: '#333',
data_title_typeface: 'bold',
data_title_size: 14,
data_price_symbol_color: '#666',
data_price_symbol_size: 12,
data_price_color: '#666',
data_price_typeface: '400',
data_price_size: 12,
data_save_price_symbol_color: '#666',
data_save_price_symbol_size: 12,
data_save_price_color: '#666',
data_save_price_typeface: '400',
data_save_price_size: 12,
goods_color_list: [{ color: '#fff', color_percentage: undefined }],
goods_direction: '90deg',
goods_background_img_style: '2',
goods_background_img: [],
// 图片圆角
goods_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
goods_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
goods_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
goods_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
goods_title_img_width: 12,
goods_title_img_height: 12,
goods_title_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
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_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_save_price_typeface: '400',
goods_save_price_size: 12,
details_style: cloneDeep(common_icon_style),
data_discounts_style: cloneDeep(common_icon_style),
goods_discounts_style: cloneDeep(common_icon_style),
// 是否滚动
is_roll: '1',
interval_time: 3,

10
src/config/const/realstore.ts
View File

@ -193,11 +193,11 @@ const defaultRealstore: defaultRealstore = {
padding_right: 10,
},
realstore_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_img_width: 50,
content_img_height: 50,

10
src/config/const/shop.ts
View File

@ -102,11 +102,11 @@ const defaultRealstore: defaultRealstore = {
padding_right: 10,
},
shop_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_img_width: 50,
content_img_height: 50,