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

Merge branch 'dev-yxl' of gitee.com:zongzhige/shopxo-uniapp into dev

master
gongfuxiang 2024-12-13 17:26:23 +08:00
parent 3b82f3678e 82f73ff7de
commit 361abcdbad
8 changed files with 220 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
common/js/common/common.js
View File

@ -32,7 +32,7 @@ export function get_nested_property(obj, path) {
// 使用reduce方法遍历属性键数组，逐层访问对象属性
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : ''), obj) ?? '';
}
/**
@ -344,6 +344,10 @@ export function background_computer(new_style) {
* 这些样式包括渐变色、内边距、外边距、圆角和阴影等，为组件提供了一套完整的外观定义。
*
* @param new_style 组件的新样式对象，包含了需要计算的样式属性。
* @param scale 一个缩放比例，用于控制样式的缩放，默认为1。
* @param scale 用于控制样式的缩放比例，默认为1，表示不进行缩放。
* @param is_custom 一个布尔值，用于判断是否为自定义样式，默认为false。
* @param index 用于标识组件的索引，默认为0。
* @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/
export function common_styles_computer(new_style) {

2
components/choice-location/choice-location.vue
View File

@ -10,7 +10,7 @@
<iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor"></iconfont>
</block>
</view>
<view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? 'text-size-md' : 'text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
<view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? ' text-size-md' : ' text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
<view v-if="propIsRightIconArrow" class="va-m lh dis-inline-block margin-left-xs">
<block v-if="propRightImgValue.length > 0">
<image :src="propRightImgValue[0].url" class="dis-block" mode="heightFix"></image>

58
components/diy/carousel.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="pr" :style="style_container">
<view class="pr re" :style="style_img_container">
<view class="pr" :style="style_container + swiper_bg_style">
<view class="pr re" :style="style_img_container + swiper_bg_img_style">
<swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :display-multiple-items="slides_per_group" :duration="500" :style="{ height: swiper_height }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
<block v-if="form.carousel_type == 'card'">
<swiper-item v-for="(item, index) in new_list" :key="index">
@ -129,6 +129,9 @@
// hackReset: true,
// 轮播图的高度
swiper_height: 50,
// 轮播时的背景样式
swiper_bg_style: '',
swiper_bg_img_style: '',
};
},
watch: {
@ -179,6 +182,8 @@
img_fit: fit, // 图片风格 默认为aspectFill
video_style: this.get_video_style(new_style), // 视频播放按钮显示逻辑
swiper_height: new_form.height * scale + 'px', // 轮播图高度
swiper_bg_style: this.get_swiper_bg_style(new_form, 0),
swiper_bg_img_style: this.get_swiper_bg_img_style(new_form, 0),
});
// 风格二显示逻辑
if (new_form.carousel_type == 'card') {
@ -198,17 +203,37 @@
});
// });
}
// this.setData({
// hackReset: false,
// });
// this.$nextTick(() => {
// this.setData({
// hackReset: true,
// });
// });
},
get_swiper_bg_style(form, actived_index) {
if (!this.propIsCommon) {
return '';
}
const style = form?.carousel_list?.[actived_index]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item) => !isEmpty(item.color));
if (list.length > 0) {
try {
return gradient_computer(style);
} catch (error) {
return '';
}
}
return '';
}
return '';
},
get_swiper_bg_img_style(form, actived_index) {
if (!this.propIsCommon) {
return '';
}
if (!isEmpty(form.carousel_list[actived_index]?.style?.background_img)) {
return background_computer(form.carousel_list[actived_index].style);
}
return '';
},
get_seat_list(form) {
if (form.carousel_list.length > 3) {
if (form.carousel_list.length > 3 || form.carousel_type !== 'card') {
return [];
} else {
let seat_list = [];
@ -231,19 +256,22 @@
},
slideChange(e) {
let actived_index = e.detail.current;
if (e.detail.current > this.form.carousel_list.length - 1) {
if (e.detail.current > this.form.carousel_list.length - 1 && this.form.carousel_type == 'card') {
const seat_length = this.seat_list.length;
if (seat_length == 2 && e.detail.current == 3) {
actived_index = 1;
} else if (seat_length == 3) {
actived_index = 0;
} else {
actived_index = e.detail.current - this.seat_list.length;
actived_index = 0;
}
}
if (!this.propIsCommon) {
this.$emit('slideChange', actived_index);
}
this.setData({
animationData: e.detail.current,
actived_index: actived_index,
swiper_bg_style: this.get_swiper_bg_style(this.form, actived_index),
swiper_bg_img_style: this.get_swiper_bg_img_style(this.form, actived_index),
});
},
get_video_style(new_style) {

67
components/diy/diy.vue
View File

@ -10,8 +10,8 @@
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
<view v-for="item in tabs_data" :key="item.key">
<template v-if="item.is_enable == '1'">
<componentDiyTabs v-if="item.key == 'tabs'" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propScrollTop="scroll_top" :propTabsIsTop="temp_is_header_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
<componentDiyTabs v-if="item.key == 'tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propScrollTop="scroll_top" :propTabsIsTop="temp_is_header_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
</template>
</view>
<template v-if="is_tabs_type">
@ -288,38 +288,41 @@
// 初始化
init() {
let header = this.propValue.header;
const { header = {}, diy_data = [], tabs_data = []} = this.propValue;
let header_style = header.com_data.style;
let diy_data = JSON.parse(JSON.stringify(this.propValue.diy_data));
let new_diy_index = 0;
let new_tabs_data = [];
let new_diy_data = [];
diy_data.forEach((item) => {
// 判断是否是商品列表
if (item.com_name == 'float-window') {
item.index = -1;
} else {
if (new_diy_index == 0) {
// 判断是否开启沉浸模式和是否开启安全距离 如果为true则除了选项卡和选项卡轮播外， 第一个组件则加上安全距离样式的padding_top加上顶部导航的高度和安全距离的高度
if (header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1') {
let new_data = JSON.parse(JSON.stringify(item));
// 顶部导航的高度
let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
item = new_data;
}
}
item.index = new_diy_index;
new_diy_data.push(item);
if (tabs_data.length > 0) {
tabs_data.forEach((item) => {
// 修改item的内容
item = this.get_index_content(new_diy_index, header, header_style, item);
new_tabs_data.push(item);
new_diy_index++;
}
});
});
new_diy_data = diy_data;
} else {
new_tabs_data = tabs_data;
// 过滤数据
diy_data.forEach((item) => {
// 判断是否是商品列表
if (item.com_name == 'float-window') {
item.index = -1;
} else {
// 修改item的内容
item = this.get_index_content(new_diy_index, header, header_style, item);
new_diy_data.push(item);
new_diy_index++;
}
});
}
const { padding_right = 0, padding_left = 0} = header.com_data.style.common_style;
// tabs选项卡数据过滤
this.setData({
header_data: header,
footer_data: this.propValue.footer,
diy_data: new_diy_data,
tabs_data: this.propValue.tabs_data,
tabs_data: new_tabs_data,
page_style: common_styles_computer(header.com_data.style.common_style),
page_img_style: background_computer(header.com_data.style.common_style),
// 内间距
@ -344,7 +347,21 @@
is_immersion_model: bool,
});
},
get_index_content(new_diy_index, header, header_style, item) {
item.index = new_diy_index;
if (new_diy_index == 0) {
// 判断是否开启沉浸模式和是否开启安全距离 如果为true则除了选项卡和选项卡轮播外， 第一个组件则加上安全距离样式的padding_top加上顶部导航的高度和安全距离的高度
if (header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1') {
let new_data = JSON.parse(JSON.stringify(item));
// 顶部导航的高度
let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
return new_data;
}
return item;
}
return item;
},
// 选项卡回调更新数据
tabs_click_event(tabs_id, bool, params = {}) {
let new_data = [];

91
components/diy/modules/tabs-view.vue
View File

@ -6,11 +6,27 @@
<view class="flex-row gap-10 jc-sb align-c" :style="propsTabsImgContainer">
<view class="tabs flex-1 flex-width">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
<view class="flex-row">
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
<view class="flex-row" :style="'height:' + tabs_height">
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
<view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
<template v-if="!isEmpty(item.img)">
<image :src="item.img[0].url" class="img" :style="tabs_theme_style.tabs_top_img" mode="aspectFit" />
</template>
<template v-if="item.tabs_type == '1'">
<template v-if="!isEmpty(item.tabs_icon)">
<view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` : '' + tabs_padding_bottom">
<iconfont :name="'icon-' + item.tabs_icon" :color="index == active_index ? tabs_icon_checked_color : tabs_icon_color" propContainerDisplay="flex" :size="index == active_index ? tabs_icon_checked_size : tabs_icon_size"></iconfont>
</view>
</template>
<template v-else>
<view class="title" :style="index == active_index ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` : tabs_padding_bottom">
<imageEmpty :propImageSrc="item.tabs_img[0]" :propStyle="index == active_index ? tabs_theme_style.tabs_img_checked : tabs_theme_style.tabs_img" propImgFit="heightFix" propErrorStyle="width: 40rpx;height: 40rpx;"></imageEmpty>
</view>
</template>
</template>
<template v-else>
<view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_theme_style.tabs_title_checked + tabs_check : tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
</template>
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex" size="40rpx"></iconfont>
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
@ -51,15 +67,19 @@
<script>
const app = getApp();
import { gradient_computer, isEmpty } from '@/common/js/common/common.js';
import { gradient_computer, isEmpty, radius_computer } from '@/common/js/common/common.js';
import componentPopup from '@/components/popup/popup';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
components: {
componentPopup,
imageEmpty,
},
props: {
propValue: {
type: Object,
@ -109,11 +129,9 @@
default: '',
}
},
components: {
componentPopup,
},
data() {
return {
new_style: {},
tabs_theme_index: '',
tabs_theme: '',
tabs_check: '',
@ -126,7 +144,14 @@
tabs_theme_style: {
tabs_title_checked: '',
tabs_title: '',
tabs_img_checked: '',
tabs_img: '',
tabs_top_img: ''
},
tabs_icon_checked_size: '',
tabs_icon_size: '',
tabs_icon_checked_color: '',
tabs_icon_color: '',
icon: {
more_icon_class: '',
more_icon_size: '',
@ -137,6 +162,11 @@
propIsBar: false,
tabs_bottom_line_theme: '',
tabs_sticky: '',
tabs_height: '100%',
// 默认数据
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
old_margin: { margin: 0, margin_top: 10, margin_bottom: 0, margin_left: 0, margin_right: 0 },
};
},
watch: {
@ -178,12 +208,38 @@
more_icon_size: new_style.more_icon_size,
more_icon_color: new_style.more_icon_color,
};
const tabs_top_img_height = new_style?.tabs_top_img_height || 39;
const tabs_top_img_radius = new_style?.tabs_top_img_radius || { radius: 100, radius_top_left: 100, radius_top_right: 100, radius_bottom_left: 100, radius_bottom_right: 100}
// 标题样式
const new_tabs_theme_style = {
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;line-height: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};` + (['2', '4'].includes(this.tabs_theme_index) ? this.tabs_check : ``),
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;line-height: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};`,
tabs_title: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size * 2}rpx;line-height: ${new_style.tabs_size * 2}rpx;color:${new_style.tabs_color};`,
tabs_img_checked: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
tabs_img: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
tabs_top_img: `height: ${tabs_top_img_height * 2 }rpx; width: 100%;box-sizing: border-box;` + radius_computer(tabs_top_img_radius),
};
const { tabs_size_checked, tabs_size, tabs_icon_size_checked = 0, tabs_icon_size = 0, tabs_img_height = 0, tabs_sign_spacing = 0 } = new_style || {};
let default_height = 0;
if (new_content.tabs_theme == '2') {
default_height = 12; // 选中的时候,风格二的内间距
} else if (new_content.tabs_theme == '4') {
const top_index = new_content?.tabs_list?.findIndex((item) => !isEmpty(item.img)) ?? -1;
default_height = 4 + (top_index > -1 ? tabs_top_img_height + tabs_sign_spacing : 0); // 选中的时候,风格二的内间距 加上上边图片的大小和上边图片之间的间距
}
// 筛选出所有的icon
const is_icon = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
// 如果有icon，则取选中的icon大小和未选中的icon大小取最大值，作为图标的高度
let icon_height = 0;
if (is_icon > -1) {
icon_height = Math.max(tabs_icon_size_checked + default_height, tabs_icon_size);
}
// 筛选出所有的图片, 没有选择图标的时候默认是图片
const is_img = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
// 选项卡高度 五个值，作为判断依据，因为图片没有未选中的大小设置，所以高度判断的时候只取选中的高度, 其余的icon和标题都分别取选中和未选中的大小对比，取出最大的值，作为选项卡的高度，避免选项卡切换时会出现抖动问题
const height = Math.max(tabs_size_checked + default_height, tabs_size, icon_height, is_img > -1 ? (tabs_img_height + default_height) : '');
// 参数设置
this.setData({
new_style: new_style,
tabs_spacing: Number(new_style.tabs_spacing),
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `row-gap:${new_style.tabs_sign_spacing * 2}rpx;` : 'row-gap:8rpx;',
tabs_list: new_content.tabs_list,
@ -195,9 +251,14 @@
tabs_check: new_tabs_check,
icon_tabs_check: `${new_tabs_check};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`,
icon: new_icon,
tabs_icon_checked_size: (new_style?.tabs_icon_size_checked || 0) * 2 + 'rpx',
tabs_icon_size: (new_style?.tabs_icon_size || 0) * 2 + 'rpx',
tabs_icon_checked_color: new_style?.tabs_icon_color_checked || '',
tabs_icon_color: new_style?.tabs_icon_color || '',
tabs_theme_style: new_tabs_theme_style,
tabs_bottom_line_theme: new_style.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '',
tabs_theme_1_style: new_style.tabs_one_theme == '1',
tabs_height: ['2', '4'].includes(new_content.tabs_theme) ? height * 2 + 'rpx' : '100%;',
});
},
// 获取选项卡主题
@ -301,8 +362,8 @@
display: none;
}
.img {
width: 78rpx;
height: 78rpx;
// width: 78rpx;
// height: 78rpx;
border-radius: 100%;
border: 2rpx solid transparent;
display: none;
@ -338,9 +399,9 @@
&.tabs-style-3 {
&.active {
.title {
background: #ff2222;
// background: #ff2222;
border-radius: 40rpx;
padding: 12rpx 24rpx;
padding: 6px 12px;
color: #fff;
}
}
@ -364,7 +425,7 @@
font-size: 22rpx;
background: #ff5e5e;
border-radius: 40rpx;
padding: 4rpx 14rpx;
padding: 2px 7px;
color: #fff;
}
.img {

2
components/diy/search.vue
View File

@ -4,7 +4,7 @@
<view class="search wh-auto pr">
<view class="box oh flex-row align-c" :style="box_style">
<view v-if="form.positioning_name_float == '1' && propSearchType == 'header'" :style="propLocationMargin">
<component-choice-location :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
<component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
</view>
<view :class="'oh flex-1 ht-auto flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')" @tap.stop="search_tap">
<view v-if="form.is_icon_show == '1'" class="pr">

50
components/diy/tabs-carousel.vue
View File

@ -1,10 +1,10 @@
<template>
<view class="ou" :style="style_container">
<view class="flex-col ou wh-auto" :style="style_img_container">
<view class="ou" :style="style_container + swiper_bg_style">
<view class="flex-col ou wh-auto" :style="style_img_container + carousel_img_container">
<componentDiyTabs :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<view :style="carousel_container">
<view :style="carousel_img_container">
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play" @slideChange="slideChange"></componentDiycarousel>
</view>
</view>
</view>
@ -48,7 +48,12 @@
propContentPadding: {
type: String,
default: '',
}
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -74,6 +79,10 @@
carousel_container: '',
carousel_img_container: '',
// top_up: '0',
actived_index: 0,
// 轮播图背景
swiper_bg_style: '',
swiper_bg_img_style: '',
};
},
created() {
@ -112,7 +121,7 @@
this.setData({
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};`,
style_img_container: common_img_computer(new_style.common_style) + 'gap:' + new_style.data_spacing * 2 + 'rpx',
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'gap:' + new_style.data_spacing * 2 + 'rpx',
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
carousel_container: gradient_computer(carousel_content_data) + margin_computer(carousel_content_margin) + radius_computer(carousel_content_radius) + 'overflow: hidden;',
@ -128,6 +137,8 @@
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
},
swiper_bg_style: this.get_swiper_bg_style(new_content, 0),
swiper_bg_img_style: this.get_swiper_bg_img_style(new_content, 0),
});
},
// tab点击
@ -142,6 +153,35 @@
video_play(url, popup_width, popup_height) {
this.$emit('onVideoPlay', url, popup_width, popup_height);
},
get_swiper_bg_style(form, actived_index) {
const style = form?.carousel_list?.[actived_index]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item) => !isEmpty(item.color));
if (list.length > 0) {
try {
return gradient_computer(style);
} catch (error) {
return '';
}
}
return '';
}
return '';
},
get_swiper_bg_img_style(form, actived_index) {
if (!isEmpty(form.carousel_list[actived_index]?.style?.background_img)) {
return background_computer(form.carousel_list[actived_index].style);
}
return '';
},
slideChange(index) {
this.setData({
actived_index: index,
swiper_bg_style: this.get_swiper_bg_style(this.propValue.content || {}, index),
swiper_bg_img_style: this.get_swiper_bg_img_style(this.propValue.content || {}, index),
});
},
},
};
</script>

9
components/diy/tabs.vue
View File

@ -70,7 +70,12 @@
propContentPadding: {
type: String,
default: '',
}
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
components: {
componentDiyModulesTabsView,
@ -145,7 +150,7 @@
this.setData({
tabs_data: new_tabs_data,
style_container: this.propIsCommon ? common_styles_computer(new_style.common_style) + new_tabs_background : new_content.tabs_top_up == '1' ? gradient_computer(new_style.common_style) + new_tabs_background : '', // 如果是选项卡轮播，不需要走默认样式
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
// 判断是否置顶
top_up: new_top_up,