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-06 10:52:21 +08:00
parent 56c047c21b 428f53d07b
commit ee687b4367
9 changed files with 242 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<view :class="theme_view">
<view v-if="propIsShowAddressChoice" class="choice-location pr wh-auto oh" :style="propLocationContainerStyle" @tap="choose_user_location">
<view v-if="propIsShowAddressChoice" class="choice-location pr wh-auto oh" :style="propLocationContainerStyle" @tap.stop="choose_user_location">
<view class="flex-row gap-2 align-c oh" :style="propLocationImgContainerStyle">
<view v-if="propIsLeftIconArrow" class="dis-inline-block va-m lh">
<block v-if="propLeftImgValue.length > 0">
@ -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 text-size-md single-text text" :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>
@ -94,6 +94,10 @@
type: String,
default: 'icon-arrow-bottom',
},
propType: {
type: String,
default: 'header',
},
propLocationContainerStyle: {
type: String,
default: '',

57
components/diy/article-tabs.vue
View File

@ -1,10 +1,12 @@
<template>
<!-- 文章列表 -->
<view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propsTabsPaddingStyle="tabs_padding_style" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
<view class="flex-col ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :style="article_container">
<view :style="article_img_container">
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
</view>
</view>
</view>
@ -12,7 +14,7 @@
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, isEmpty } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, radius_computer, isEmpty } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -65,7 +67,6 @@
style_img_container: '',
style: '',
article_tabs: {},
tabs_padding_style: '',
// 是否滑动置顶
top_up: '0',
tabs_style: '',
@ -73,6 +74,16 @@
tabs_background: 'background:transparent',
custom_nav_height: 33,
diy_key: '',
// 选项卡背景设置
tabs_container: '',
tabs_img_container: '',
// 商品区域背景设置
article_container: '',
article_img_container: '',
// 默认数据
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 },
// #ifdef MP
nav_safe_space: bar_height + 5,
// #endif
@ -154,22 +165,40 @@
padding_top: new_style.common_style.padding_top,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin_top: new_style.common_style.margin_top,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
// 如果是历史数据的话，就执行默认添加下边距
if (isEmpty(new_style.tabs_padding)) {
new_tabs_style += 'padding-bottom: 20rpx;';
}
let common_style = Object.assign({}, new_style.common_style, {
padding_top: 0,
margin_top: 0,
});
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = this.old_radius, tabs_padding = this.old_padding, article_content_color_list = [], article_content_direction = '', article_content_background_img_style = '', article_content_background_img = [], article_content_margin = this.old_margin, article_content_padding = this.old_padding, article_content_radius = this.old_radius } = new_style;
// 选项卡背景设置
const tabs_data = {
color_list: tabs_bg_color_list,
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
}
// 文章区域背景设置
const article_content_data = {
color_list: article_content_color_list,
direction: article_content_direction,
background_img_style: article_content_background_img_style,
background_img: article_content_background_img,
}
this.setData({
top_up: new_content.tabs_top_up,
article_tabs: new_data,
style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
style_img_container: common_img_computer(common_style, this.propIndex) + 'gap:' + (new_style?.shop_content_spacing || 0) * 2 + 'rpx',
tabs_style: new_tabs_style,
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) + 'box-sizing: border-box;' : '',
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;',
article_container: gradient_computer(article_content_data) + margin_computer(article_content_margin) + radius_computer(article_content_radius) + 'overflow: hidden;',
article_img_container: background_computer(article_content_data) + padding_computer(article_content_padding) + 'box-sizing: border-box;overflow: hidden;',
});
},
// tabs切换事件
@ -199,8 +228,10 @@
.select('.article-tabs-' + this.propKey)
.boundingClientRect((res) => {
if ((res || null) != null) {
let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
const new_style = new_data.style || {};
this.setData({
tabs_top: res.top,
tabs_top: res.top - (new_style.common_style?.margin_top || 0),
});
}
})

2
components/diy/diy.vue
View File

@ -11,7 +11,7 @@
<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" :propNavIsTop="is_header_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>
<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>
</template>
</view>
<template v-if="is_tabs_type">

60
components/diy/goods-tabs.vue
View File

@ -1,9 +1,11 @@
<template>
<view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propsTabsPaddingStyle="tabs_padding_style" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
<view class="flex-col ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :style="shop_container">
<view :style="shop_img_container">
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
</view>
</view>
</view>
</view>
@ -11,7 +13,7 @@
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, isEmpty } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, isEmpty, radius_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentGoodsList from '@/components/diy/goods-list';
// 状态栏高度
@ -65,13 +67,22 @@
style_container: '',
style_img_container: '',
goods_tabs: {},
tabs_padding_style: '',
// 是否滑动置顶
top_up: '0',
tabs_top: 0,
tabs_background: 'background:transparent',
custom_nav_height: 33,
diy_key: '',
// 选项卡背景设置
tabs_container: '',
tabs_img_container: '',
// 商品区域背景设置
shop_container: '',
shop_img_container: '',
// 默认数据
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 },
// #ifdef MP
nav_safe_space: bar_height + 5,
// #endif
@ -148,22 +159,41 @@
padding_top: new_style.common_style.padding_top,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin_top: new_style.common_style.margin_top,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
let new_tabs_style = padding_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
// 如果是历史数据的话，就执行默认添加下边距
if (isEmpty(new_style.tabs_padding)) {
new_tabs_style += 'padding-bottom: 20rpx;';
}
let common_style = Object.assign({}, new_style.common_style, {
padding_top: 0,
margin_top: 0,
});
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = this.old_radius, tabs_padding = this.old_padding, shop_content_color_list = [], shop_content_direction = '', shop_content_background_img_style = '', shop_content_background_img = [], shop_content_margin = this.old_margin, shop_content_padding = this.old_padding, shop_content_radius = this.old_radius } = new_style;
// 选项卡背景设置
const tabs_data = {
color_list: tabs_bg_color_list,
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
}
// 商品区域背景设置
const shop_content_data = {
color_list: shop_content_color_list,
direction: shop_content_direction,
background_img_style: shop_content_background_img_style,
background_img: shop_content_background_img,
}
this.setData({
top_up: new_content.tabs_top_up,
goods_tabs: new_data,
style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
style_img_container: common_img_computer(common_style, this.propIndex) + 'gap:' + (new_style?.shop_content_spacing || 0) * 2 + 'rpx',
tabs_style: new_tabs_style,
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) + 'box-sizing: border-box;': '',
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;',
shop_container: gradient_computer(shop_content_data) + margin_computer(shop_content_margin) + radius_computer(shop_content_radius) + 'overflow: hidden;',
shop_img_container: background_computer(shop_content_data) + padding_computer(shop_content_padding) + 'box-sizing: border-box;overflow: hidden;',
});
},
tabs_click_event(index) {
@ -188,8 +218,10 @@
.select('.goods-tabs-' + this.propKey)
.boundingClientRect((res) => {
if ((res || null) != null) {
let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
const new_style = new_data.style || {};
this.setData({
tabs_top: res.top,
tabs_top: res.top - (new_style.common_style?.margin_top || 0),
});
}
})

16
components/diy/header.vue
View File

@ -48,15 +48,15 @@
</template>
</view>
</view>
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c gap-10">
<view :class="'flex-row align-c gap-2 ' + (form.content.positioning_name_float == '1' ? 'pa z-i' : '')">
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c">
<view v-if="form.content.positioning_name_float !== '1'" class="flex-row align-c gap-2">
<view :style="location_margin">
<component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="form.style.position_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
<component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
</view>
</view>
<template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propLocationMargin="location_margin" propSearchType="header" :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" @onBack="choice_location_back"></componentDiySearch>
</view>
</template>
</view>
@ -189,7 +189,10 @@
// 定位设置
style_location_container: '',
style_location_img_container: '',
location_left_size: '24rpx',
location_right_size: '24rpx',
location_margin: '', // 悬浮之后有间距，所以要将margin设置成外padding
location_color: '', // 定位颜色
// 默认数据
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 },
@ -275,6 +278,9 @@
is_icon_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon'),
style_location_container: this.get_style_location_container(new_style),
style_location_img_container: this.get_style_location_img_container(new_style),
location_left_size: !isEmpty(new_style.location_left_icon_size) ? new_style.location_left_icon_size * 2 + 'rpx' : '24rpx',
location_right_size: !isEmpty(new_style.location_right_icon_size) ? new_style.location_right_icon_size * 2 + 'rpx' : '24rpx',
location_color: !isEmpty(new_style.location_color) ? new_style.location_color : new_style?.position_color || '',
location_margin: `padding: ${location_margin.margin_top * 2}rpx ${location_margin.margin_right * 2}rpx ${location_margin.margin_bottom * 2}rpx ${location_margin.margin_left * 2}rpx;`, // 悬浮之后有间距，所以要将margin设置成外padding
});
this.$emit('onImmersionModelCallBack', this.is_immersion_model);
@ -287,7 +293,7 @@
direction: new_style?.location_direction || '',
}
const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
return gradient_computer(style) + radius_computer(location_radius) + `color: ${!isEmpty(new_style.location_color) ? new_style.location_color : new_style?.position_color || ''};height: ${ height * 2}rpx;line-height: ${height * 2}rpx;`;
return gradient_computer(style) + radius_computer(location_radius) + `height: ${ height * 2}rpx;line-height: ${height * 2}rpx;`;
},
// 背景图片
get_style_location_img_container(new_style){

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

@ -2,24 +2,26 @@
<!-- 66rpx是自定义顶部导航栏的高度-->
<view class="tabs-view" :style="tabs_sticky">
<view class="tabs-view" :style="propStyle + propTabsBackground">
<view class="flex-row gap-10 jc-sb align-c" :style="propsTabsPaddingStyle">
<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="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>
<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>
<view :style="propsTabsContainer">
<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="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>
<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>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view :style="tabs_padding_bottom">
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
</scroll-view>
</view>
<view :style="tabs_padding_bottom">
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
</view>
</view>
</view>
</view>
@ -98,7 +100,11 @@
type: [String, Number],
default: '0',
},
propsTabsPaddingStyle: {
propsTabsContainer: {
type: String,
default: ''
},
propsTabsImgContainer: {
type: String,
default: '',
}

99
components/diy/search.vue
View File

@ -1,32 +1,37 @@
<template>
<view :style="style_container">
<view :style="style_img_container">
<view class="search wh-auto pr" :style="style">
<view class="box oh flex-row align-c gap-10" :style="box_style" @tap="search_tap">
<view v-if="form.is_icon_show == '1'" class="search-icon" @tap.stop="search_icon_tap">
<template v-if="form.icon_img.length > 0">
<view class="img-box">
<image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
</view>
<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="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="form.style.location_left_icon_size" :propIconArrowSize="form.style.location_right_icon_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
</view>
<view class="oh flex-1 ht-auto flex-row align-c gap-10" @tap.stop="search_tap">
<view v-if="form.is_icon_show == '1'" class="search-icon" @tap.stop="search_icon_tap">
<template v-if="form.icon_img.length > 0">
<view class="img-box">
<image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
</view>
</template>
<template v-else>
<view>
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search-max'" size="28rpx" :color="new_style.icon_color" propContainerDisplay="flex"></iconfont>
</view>
</template>
</view>
<template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :vertical="true" :duration="500" class="swiper_style" @change="slideChange">
<swiper-item v-for="(item, index) in form.hot_word_list" :key="index">
<view class="flex-row align-c wh-auto ht-auto" :style="{ color: !isEmpty(item.color) ? item.color : !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : '#999' }" :data-value="item.value" @tap.stop="serch_event">
{{ item.value }}
</view>
</swiper-item>
</swiper>
</template>
<template v-else>
<view>
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search-max'" size="28rpx" :color="new_style.icon_color" propContainerDisplay="flex"></iconfont>
</view>
<text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
</template>
</view>
<template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :vertical="true" :duration="500" class="swiper_style" @change="slideChange">
<swiper-item v-for="(item, index) in form.hot_word_list" :key="index">
<view class="flex-row align-c wh-auto ht-auto" :style="{ color: !isEmpty(item.color) ? item.color : !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : '#999' }" :data-value="item.value" @tap.stop="serch_event">
{{ item.value }}
</view>
</swiper-item>
</swiper>
</template>
<template v-else>
<text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
</template>
</view>
<view v-if="form.is_search_show == '1'" class="pa search-outer-botton flex-row align-c jc-c">
<view class="search-botton flex-row align-c jc-c z-i" :style="search_button" @tap.stop="serch_button_event">
@ -49,9 +54,13 @@
</template>
<script>
import componentChoiceLocation from '@/components/choice-location/choice-location';
const app = getApp();
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, isEmpty } from '@/common/js/common/common.js';
export default {
components: {
componentChoiceLocation,
},
props: {
propValue: {
type: Object,
@ -72,6 +81,26 @@ export default {
type: Number,
default: 1000000,
},
propSearchType: {
type: String,
default: 'search',
},
propBaseColor: {
type: String,
default: '',
},
propLocationMargin: {
type: String,
default: '',
},
propLocationContainerStyle: {
type: String,
default: '',
},
propLocationImgContainerStyle: {
type: String,
default: '',
},
},
data() {
return {
@ -105,7 +134,7 @@ export default {
this.setData({
form: new_form,
new_style: new_style,
style: this.get_style(new_style), // 内部样式
// style: this.get_style(new_style), // 内部样式
style_container: this.propIsPageSettings ? '' : common_styles_computer(common_style), // 全局样式
style_img_container: this.propIsPageSettings ? '' : common_img_computer(common_style, this.propIndex),
search_button_radius: radius_computer(search_button_radius), // 按钮圆角
@ -114,15 +143,15 @@ export default {
search_button: this.get_search_button(new_style), // 搜索按钮显示
});
},
get_style(new_style) {
let common_styles = '';
if (new_style.text_style == 'italic') {
common_styles += `font-style: italic`;
} else if (new_style.text_style == '500') {
common_styles += `font-weight: 500`;
}
return common_styles;
},
// get_style(new_style) {
// let common_styles = '';
// if (new_style.text_style == 'italic') {
// common_styles += `font-style: italic`;
// } else if (new_style.text_style == '500') {
// common_styles += `font-weight: 500`;
// }
// return common_styles;
// },
get_box_style(new_style, form) {
let style = `background: ${ new_style?.search_bg_color || '' };border: 1px solid ${new_style.search_border}; ${radius_computer(new_style.search_border_radius)};box-sizing: border-box;`;
if (form.is_center == '1') {
@ -171,6 +200,10 @@ export default {
keywords: this.form.hot_word_list[actived_index].value,
})
},
// 位置回调
onBack(e) {
this.$emit('onBack', e);
},
},
};
</script>
@ -179,7 +212,7 @@ export default {
.search {
.box {
height: 64rpx;
padding: 12rpx 30rpx;
// padding: 12rpx 30rpx;
}
.swiper_style {
height: 64rpx;

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

@ -1,14 +1,18 @@
<template>
<view class="ou" :style="style_container">
<view class="flex-col ou" :style="style_img_container">
<componentDiyTabs :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsPaddingStyle="tabs_padding_style" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
<view class="flex-col ou wh-auto" :style="style_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>
</view>
</view>
</view>
</view>
</template>
<script>
import { common_styles_computer, common_img_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, padding_computer, isEmpty, gradient_computer, margin_computer, background_computer, radius_computer } from '@/common/js/common/common.js';
import componentDiyTabs from '@/components/diy/tabs';
import componentDiycarousel from '@/components/diy/carousel';
export default {
@ -63,6 +67,12 @@
margin_right: 0,
},
tabs_padding_style: '',
// 选项卡内容
tabs_container: '',
tabs_img_container: '',
// 轮播图内容
carousel_container: '',
carousel_img_container: '',
// top_up: '0',
};
},
@ -84,20 +94,37 @@
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = this.old_radius, tabs_padding = this.old_padding, carousel_content_color_list = [], carousel_content_direction = '', carousel_content_background_img_style = '', carousel_content_background_img = [], carousel_content_margin = this.old_margin, carousel_content_padding = this.old_padding, carousel_content_radius = this.old_radius } = new_style;
// 选项卡背景设置
const tabs_data = {
color_list: tabs_bg_color_list,
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
}
// 商品区域背景设置
const carousel_content_data = {
color_list: carousel_content_color_list,
direction: carousel_content_direction,
background_img_style: carousel_content_background_img_style,
background_img: carousel_content_background_img,
}
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',
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) + 'box-sizing: border-box;' : '',
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;',
carousel_img_container: background_computer(carousel_content_data) + padding_computer(carousel_content_padding) + 'box-sizing: border-box;overflow: hidden;',
spacing_common_style: {
padding: 0,
padding_top: new_style.common_style.padding_top,
padding_bottom: 10,
padding_top: new_style.common_style.padding_top + new_style.common_style.margin_top,
padding_bottom: 0,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin: 0,
margin_top: new_style.common_style.margin_top,
margin_bottom: 0,
margin_top: 0,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
},

14
components/diy/tabs.vue
View File

@ -1,10 +1,10 @@
<template>
<!-- 选项卡 -->
<view class="tabs-container pr">
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style + propContentPadding">
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style + (top_up == '1' ? propContentPadding : '')">
<view class="tabs-content wh-auto bs-bb" :style="style_container">
<view class="wh-auto bs-bb" :style="style_img_container">
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propsTabsPaddingStyle="propsTabsPaddingStyle" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :class="top_up == '1' ? 'bs-bb' : 'wh-auto bs-bb'" :style="style_img_container">
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propsTabsContainer="propsTabsContainer" :propsTabsImgContainer="propsTabsImgContainer" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
</view>
@ -59,7 +59,11 @@
type: [String, Number],
default: '',
},
propsTabsPaddingStyle: {
propsTabsContainer: {
type: String,
default: ''
},
propsTabsImgContainer: {
type: String,
default: '',
},
@ -141,7 +145,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) + common_img_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + padding_computer(this.propSpacingCommonStyle) + 'box-sizing: border-box;' : 'padding-bottom:20rpx;', // 如果是选项卡轮播，不需要走默认样式
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;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
// 判断是否置顶
top_up: new_top_up,