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

组合搭配逻辑优化

v1.3.0
于肖磊 2025-03-11 10:46:56 +08:00
parent 2653ca4ccb
commit 0d58cc2022
5 changed files with 139 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,14 +75,15 @@
</template>
</card-container>
</template>
<div class="divider-line"></div>
<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="组合间距">
<!-- <el-form-item label="组合间距">
<margin :value="form.goods_content_style.outer_margin"></margin>
</el-form-item>
</el-form-item> -->
<el-form-item label="外间距">
<margin :value="form.goods_content_style"></margin>
</el-form-item>

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

@ -5,8 +5,8 @@
<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 w h', host_graph_theme == '0' ? 'flex-row' : 'flex-col' ]" :style="host_graph_theme == '0' ? `margin-bottom: ${ new_style.data_content_bottom_spacing }px;` : ''">
<template v-if="!isEmpty(match_item) && ((host_graph_theme == '1' && form.is_host_graph_show == '1') || host_graph_theme == '0')">
<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>
@ -16,7 +16,8 @@
</template>
</div>
</template>
<div class="flex-1 flex-col jc-sb gap-6" :style="data_content_style">
<!-- 主图单列显示时的显示 -->
<div v-if="host_graph_theme == '0'" 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">
@ -33,19 +34,39 @@
</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>
</div>
<div v-if="host_graph_theme == '0'" class="flex-row align-c jc-e">
<div class="flex-row align-c jc-e">
<img-or-icon-or-text :value="props.value" type="details" />
</div>
</div>
</div>
<!-- 商品信息区域 -->
<div class="oh" :style="margin_computer(new_style.goods_content_style.outer_margin)">
<div :style="goods_content_style">
<div class="flex-col" :style="host_graph_theme !== '0' ? data_content_style : ''">
<!-- 主图大图模式时的显示 -->
<div v-if="host_graph_theme !== '0'" class="flex-col gap-6" :style="`margin-bottom: ${ new_style.data_content_bottom_spacing }px;`">
<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>
</div>
<div class="flex-row align-c jc-e">
<img-or-icon-or-text :value="props.value" type="details" />
</div>
</div>
</div>
<!-- 商品信息区域 -->
<!-- <div class="oh" :style="margin_computer(new_style.goods_content_style.outer_margin)"> -->
<div v-if="form.is_default_show_goods == '1'" :style="goods_content_style">
<div :style="goods_content_img_style">
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
@ -113,6 +134,14 @@
</div>
</div>
</div>
<!-- </div> -->
<!-- 底部展开收起按钮区域 -->
<div :style="bottom_button_style">
<div class="flex-row align-c jc-sb" :style="bottom_button_img_style">
<span class="expand-retract">{{ form.is_default_show_goods == '1' ? '收起' : '展开'}}组合商品</span>
<icon :name="form.is_default_show_goods == '1' ? 'arrow-top' : 'arrow-bottom'" color="#999" size="12"></icon>
</div>
</div>
</div>
</div>
</div>
@ -279,7 +308,7 @@ const match_layout_style = computed(() => {
});
// 容器图片样式
const match_layout_img_style = computed(() => {
const padding = data_content_padding.value;
const padding = host_graph_theme.value == '0' ? data_content_padding.value : '';
return padding + layout_img_handle('data');
});
// 内容区域的样式
@ -308,6 +337,9 @@ const data_img_height = computed(() => {
// 商品内容样式
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));
// 底部展开收起按钮样式
const bottom_button_style = computed(() => common_styles_computer(new_style.value.bottom_button_style));
const bottom_button_img_style = computed(() => common_img_computer(new_style.value.bottom_button_style));
//#endregion
//#region 商品样式
// 选择的风格
@ -404,7 +436,7 @@ const content_style = computed(() => {
});
const goods_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '两列展示（纵向）', value: '1', width:156, height: 156 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
@ -471,7 +503,6 @@ watchEffect(() => {
height: v-bind(data_img_height);
width: 100%;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
@ -494,4 +525,12 @@ watchEffect(() => {
width: 100%;
height: 100%;
}
.expand-retract {
font-weight: 400;
font-size: 12px;
color: #999999;
line-height: 17px;
text-align: left;
font-style: normal;
}
</style>

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

@ -102,7 +102,7 @@ const base_list = reactive({
],
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '两列展示（纵向）', value: '1', width:156, height: 156 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
],
@ -171,8 +171,8 @@ const theme_change = (val: any) => {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
// emits('theme_change', list[0].width, list[0].height);
data.value.content_img_width = list[0].width;
data.value.content_img_height = list[0].height;
data.value.goods_content_img_width = list[0].width;
data.value.goods_content_img_height = list[0].height;
}
};
// 移除

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

@ -33,7 +33,14 @@
<radius :value="form.data_radius"></radius>
</el-form-item>
<el-form-item label="内容间距">
<slider v-model="form.data_content_spacing" :max="100"></slider>
<div class="flex-col gap-10 w h">
<el-form-item v-if="data.host_graph_theme == '0'" label="图片标题" label-width="60" class="form-item-child-label">
<slider v-model="form.data_content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="内容商品" label-width="60" class="form-item-child-label">
<slider v-model="form.data_content_bottom_spacing" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="组合间距">
<slider v-model="form.data_content_outer_spacing" :max="100"></slider>
@ -65,6 +72,26 @@
</card-container>
</template>
<div class="divider-line"></div>
<card-container class="card-container">
<div class="mb-12">底部按钮样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.bottom_button_style.color_list" v-model:direction="form.bottom_button_style.direction" v-model:img_style="form.bottom_button_style.background_img_style" v-model:img="form.bottom_button_style.background_img" @mult_color_picker_event="bottom_button_mult_color_picker_event" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.bottom_button_style"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.bottom_button_style"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bottom_button_style"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.bottom_button_style.border_is_show" v-model:color="form.bottom_button_style.border_color" v-model:style="form.bottom_button_style.border_style" v-model:size="form.bottom_button_style.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.bottom_button_style"></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">
@ -128,6 +155,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.data_color_list = arry;
form.value.data_direction = type.toString();
};
// 底部按钮的显示逻辑
const bottom_button_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.bottom_button_style.color_list = arry;
form.value.bottom_button_style.direction = type.toString();
};
const common_style_update = (value: any) => {
form.value.common_style = value;
};

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

@ -81,6 +81,7 @@ interface defaultRealstore {
data_content_img_width: number;
data_content_img_height: number;
data_content_spacing: number;
data_content_bottom_spacing: number;
data_content_outer_spacing: number;
data_color_list: color_list[];
data_direction: string;
@ -148,6 +149,7 @@ interface defaultRealstore {
interval_time: number;
rolling_fashion: string;
goods_content_style: object,
bottom_button_style: object,
common_style: object;
};
}
@ -185,6 +187,7 @@ const defaultRealstore: defaultRealstore = {
data_content_img_width: 128,
data_content_img_height: 128,
data_content_spacing: 10,
data_content_bottom_spacing: 10,
data_content_outer_spacing: 10,
data_color_list: [{ color: '#fff', color_percentage: undefined }],
data_direction: '90deg',
@ -413,13 +416,51 @@ const defaultRealstore: defaultRealstore = {
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,
}
// outer_margin: {
// margin: 0,
// margin_top: 10,
// margin_bottom: 10,
// margin_left: 0,
// margin_right: 0,
// }
},
bottom_button_style: {
color_list: [{ color: '#fff', 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: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 10,
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,
},
// 公共样式
common_style: {