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

修改选项卡显示内容

v1.3.0
于肖磊 2025-03-10 18:50:20 +08:00
parent 44f3536f9b
commit 2653ca4ccb
5 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,7 @@
</el-form-item> </el-form-item>
</template> </template>
<template v-else> <template v-else>
<el-form-item v-if="data.theme == '0'" label="图片宽度"> <el-form-item v-if="['0', '2'].includes(data.theme)" label="图片宽度">
<slider v-model="form.goods_content_img_width" :max="1000"></slider> <slider v-model="form.goods_content_img_width" :max="1000"></slider>
</el-form-item> </el-form-item>
<el-form-item label="图片高度"> <el-form-item label="图片高度">

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

@ -51,21 +51,21 @@
<template v-if="!['3'].includes(theme)"> <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 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"> <div :class="['oh w h', ['0' , '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)"> <template v-if="!isEmpty(item) && is_show('goods_img')">
<div class="oh re" :class="`flex-img${theme}`"> <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> <image-empty v-model="item.images" :class="`flex-img${theme}`" :style="goods_content_img_radius"></image-empty>
</div> </div>
</template> </template>
<div class="flex-1 flex-row jc-sb" :style="content_style"> <div v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<div class="flex-1 flex-col jc-sb"> <div class="flex-1 flex-col jc-sb">
<div :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')"> <div v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="flex-row align-c text-line-1"> <div v-if="is_show('price')" 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_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ match_item.price }}</span> <span :style="trends_config('price', 'goods')">{{ match_item.price }}</span>
</div> </div>
<div class="flex-row align-c gap-3"> <div v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" /> <img-or-icon-or-text :value="props.value" type="goods_discounts" />
<div class="flex-1 text-line-1"> <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_symbol', 'goods')">{{ match_item.price_symbol }}</span>
@ -82,21 +82,21 @@
<swiper-slide v-for="(item, index) in match_item.good_list" :key="index"> <swiper-slide v-for="(item, index) in match_item.good_list" :key="index">
<div :class="layout_type" :style="layout_style"> <div :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style"> <div :class="['oh w h', ['0', '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)"> <template v-if="!isEmpty(item) && is_show('goods_img')">
<div class="oh re" :class="`flex-img${theme}`"> <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> <image-empty v-model="item.images" :class="`flex-img${theme}`" :style="goods_content_img_radius"></image-empty>
</div> </div>
</template> </template>
<div class="flex-1 flex-row jc-sb" :style="content_style"> <div v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<div class="flex-1 flex-col jc-sb"> <div class="flex-1 flex-col jc-sb">
<div :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')"> <div v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="trends_config('title', 'goods')">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="flex-row align-c text-line-1"> <div v-if="is_show('price')" 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_symbol', 'goods')">{{ match_item.price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ match_item.price }}</span> <span :style="trends_config('price', 'goods')">{{ match_item.price }}</span>
</div> </div>
<div class="flex-row align-c gap-3"> <div v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" /> <img-or-icon-or-text :value="props.value" type="goods_discounts" />
<div class="flex-1 text-line-1"> <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_symbol', 'goods')">{{ match_item.price_symbol }}</span>
@ -365,6 +365,10 @@ const layout_type = computed(() => {
} }
return class_type; return class_type;
}); });
// 判断是否显示对应的内容
const is_show = (index: string) => {
return form.value.is_goods_show.includes(index);
};
// 容器样式 // 容器样式
const layout_style = computed(() => { const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : goods_content_radius.value; const radius = theme.value == '6' ? '' : goods_content_radius.value;
@ -413,8 +417,8 @@ const goods_img_height = computed(() => {
return size_handle('goods', 'height'); return size_handle('goods', 'height');
}); });
const size_handle = (type: string, location: 'width' | 'height') => { const size_handle = (type: string, location: 'width' | 'height') => {
if (typeof new_style.value[`${ type }_content_${ location }`] == 'number') { if (typeof new_style.value[`${ type }_content_img_${ location }`] == 'number') {
return new_style.value[`${ type }_content_${ location }`] + 'px'; return new_style.value[`${ type }_content_img_${ location }`] + 'px';
} else { } 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); 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) { if (list.length > 0) {

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

@ -137,10 +137,10 @@ onMounted(() => {
}); });
const host_graph_theme_change = () => { const host_graph_theme_change = () => {
// 切换风格时，将对应图片的默认值宽度和高度赋值 // 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.host_graph_theme_list.filter(item => item.value == form.value.theme); const list = base_list.host_graph_theme_list.filter(item => item.value == form.value.host_graph_theme);
if (list.length > 0) { if (list.length > 0) {
data.value.host_graph_img_width = list[0].width; data.value.data_content_img_width = list[0].width;
data.value.host_graph_img_height = list[0].height; data.value.data_content_img_height = list[0].height;
} }
} }
// 主题改变 // 主题改变

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

@ -38,7 +38,7 @@
<el-form-item label="组合间距"> <el-form-item label="组合间距">
<slider v-model="form.data_content_outer_spacing" :max="100"></slider> <slider v-model="form.data_content_outer_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<el-form-item v-if="data.theme == '0'" label="图片宽度"> <el-form-item v-if="data.host_graph_theme == '0'" label="图片宽度">
<slider v-model="form.data_content_img_width" :max="1000"></slider> <slider v-model="form.data_content_img_width" :max="1000"></slider>
</el-form-item> </el-form-item>
<el-form-item label="图片高度"> <el-form-item label="图片高度">

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

@ -182,8 +182,8 @@ const defaultRealstore: defaultRealstore = {
goods_discounts_text: '节省', goods_discounts_text: '节省',
}, },
style: { style: {
data_content_img_width: 50, data_content_img_width: 128,
data_content_img_height: 50, data_content_img_height: 128,
data_content_spacing: 10, data_content_spacing: 10,
data_content_outer_spacing: 10, data_content_outer_spacing: 10,
data_color_list: [{ color: '#fff', color_percentage: undefined }], data_color_list: [{ color: '#fff', color_percentage: undefined }],