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

Merge branch 'dev-sws' into dev-yxl

master
于肖磊 2024-10-22 13:38:06 +08:00
parent 0c713ad4f0 b931266ed5
commit d0d3b902da
6 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
common/js/common/common.js
View File

@ -9,14 +9,13 @@ const app = getApp();
* @param obj 要检查的对象。可以是任何类型的对象，包括数组。
* @returns 如果对象为空，则返回true；否则返回false。
*/
export function is_obj_empty (obj) {
export function is_obj_empty(obj) {
return Object.keys(obj).length === 0;
}
/**
* 判断对象数组等是否为空。
*/
export function isEmpty (value) {
export function isEmpty(value) {
return (
value === null ||
value === undefined ||
@ -37,7 +36,7 @@ export function isEmpty (value) {
* @param obj 未知类型的参数，待检查是否为对象
* @returns 如果参数是对象，则返回 true；否则返回 false
*/
export function is_obj (obj) {
export function is_obj(obj) {
// 特殊处理 null值，因为 typeof null 返回 "object"，但 null 并不是我们要检查的对象
if (obj === null) return false;
// 使用 typeof 排除非对象类型
@ -52,7 +51,7 @@ export function is_obj (obj) {
* @param {string[], string} path
* @returns {string}
*/
export function gradient_computer (new_style, is_return_all = true) {
export function gradient_computer(new_style, is_return_all = true) {
let color_list = new_style.color_list;
let direction = new_style.direction;
return gradient_handle(color_list, direction, is_return_all);
@ -65,7 +64,7 @@ export function gradient_computer (new_style, is_return_all = true) {
* @param is_return_all 是否返回所有样式，包括渐变类型、颜色列表和方向。默认为false，只返回渐变样式。
* @returns 返回一个字符串，包含生成的线性渐变样式。
*/
export function gradient_handle (color_list, direction, is_return_all = true) {
export function gradient_handle(color_list, direction, is_return_all = true) {
let container_common_styles = ``;
if (color_list && color_list.length > 0) {
if (is_return_all) {
@ -108,30 +107,34 @@ export function gradient_handle (color_list, direction, is_return_all = true) {
* @param {string[], string} path
* @returns {string}
*/
export function padding_computer (new_style, scale = 1, is_custom = false, index) {
if (!is_custom) {
let padding_top = '';
if (index == 0) {
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
let sticky_top = 0;
// #ifdef MP
sticky_top = bar_height + 5 + 12;
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_top = bar_height + 7 + 12;
// #endif
// #ifdef APP
sticky_top = bar_height + 0 + 12;
// #endif
padding_top = `padding-top:calc(${new_style.padding_top * 2 || 0}rpx + ${sticky_top}px);`;
export function padding_computer(new_style, scale = 1, is_custom = false, index) {
if (new_style) {
if (!is_custom) {
let padding_top = '';
if (index == 0) {
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
let sticky_top = 0;
// #ifdef MP
sticky_top = bar_height + 5 + 12;
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_top = bar_height + 7 + 12;
// #endif
// #ifdef APP
sticky_top = bar_height + 0 + 12;
// #endif
padding_top = `padding-top:calc(${new_style.padding_top * 2 || 0}rpx + ${sticky_top}px);`;
}
return `padding: ${new_style.padding_top * 2 || 0}rpx ${new_style.padding_right * 2 || 0}rpx ${new_style.padding_bottom * 2 || 0}rpx ${new_style.padding_left * 2 || 0}rpx;` + padding_top;
} else {
return `padding: ${new_style.padding_top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
}
return `padding: ${new_style.padding_top * 2 || 0}rpx ${new_style.padding_right * 2 || 0}rpx ${new_style.padding_bottom * 2 || 0}rpx ${new_style.padding_left * 2 || 0}rpx;` + padding_top;
} else {
return `padding: ${new_style.padding_top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
return '';
}
}
/**
@ -140,7 +143,7 @@ export function padding_computer (new_style, scale = 1, is_custom = false, index
* @param {string[], string} path
* @returns {string}
*/
export function margin_computer (new_style) {
export function margin_computer(new_style) {
return `margin: ${new_style.margin_top * 2 || 0}rpx ${new_style.margin_right * 2 || 0}rpx ${new_style.margin_bottom * 2 || 0}rpx ${new_style.margin_left * 2 || 0}rpx;`;
}
/**
@ -149,13 +152,16 @@ export function margin_computer (new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function radius_computer (new_style, scale = 1, is_custom = false) {
if (!is_custom) {
return `border-radius: ${new_style.radius_top_left * 2 || 0}rpx ${new_style.radius_top_right * 2 || 0}rpx ${new_style.radius_bottom_right * 2 || 0}rpx ${new_style.radius_bottom_left * 2 || 0}rpx;`;
export function radius_computer(new_style, scale = 1, is_custom = false) {
if (new_style) {
if (!is_custom) {
return `border-radius: ${new_style.radius_top_left * 2 || 0}rpx ${new_style.radius_top_right * 2 || 0}rpx ${new_style.radius_bottom_right * 2 || 0}rpx ${new_style.radius_bottom_left * 2 || 0}rpx;`;
} else {
return `border-radius: ${new_style.radius_top_left * scale || 0}px ${new_style.radius_top_right * scale || 0}px ${new_style.radius_bottom_right * scale || 0}px ${new_style.radius_bottom_left * scale || 0}px;`;
}
} else {
return `border-radius: ${new_style.radius_top_left * scale || 0}px ${new_style.radius_top_right * scale || 0}px ${new_style.radius_bottom_right * scale || 0}px ${new_style.radius_bottom_left * scale || 0}px;`;
return '';
}
}
/**
* 设置阴影样式
@ -163,7 +169,7 @@ export function radius_computer (new_style, scale = 1, is_custom = false) {
* @param {string[], string} path
* @returns {string}
*/
export function box_shadow_computer (new_style) {
export function box_shadow_computer(new_style) {
return `box-shadow: ${new_style.box_shadow_x * 2 || 0}rpx ${new_style.box_shadow_y * 2 || 0}rpx ${new_style.box_shadow_blur * 2 || 0}rpx ${new_style.box_shadow_spread * 2 || 0}rpx ${new_style.box_shadow_color || 'rgba(0,0,0,0)'};`;
}
/**
@ -172,13 +178,12 @@ export function box_shadow_computer (new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function background_computer (new_style) {
export function background_computer(new_style) {
if (new_style.background_img.length > 0) {
let url_styke = '';
if (new_style.background_img_style == '1') {
url_styke = 'background-repeat: repeat;';
} else if (new_style.background_img_style == '2') {
} else {
} else if (new_style.background_img_style == '2') {} else {
url_styke = `background-repeat: no-repeat;background-position: center;`;
}
switch (new_style.background_img_style) {
@ -212,18 +217,17 @@ export function background_computer (new_style) {
* @param new_style 组件的新样式对象，包含了需要计算的样式属性。
* @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/
export function common_styles_computer (new_style) {
export function common_styles_computer(new_style) {
return gradient_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + `overflow:hidden;`;
}
export function common_img_computer (new_style, index, bool) {
export function common_img_computer(new_style, index, bool) {
return padding_computer(new_style, 1, false, index, bool) + background_computer(new_style) + `overflow:hidden;box-sizing: border-box;`;
}
/**
* 生成一个随机数学字符串。
* @returns {string} 一个6位的36进制随机字符串。
*/
export function get_math () {
export function get_math() {
// 通过Math.random()生成随机数，并转换为36进制的字符串
let randomString = Math.random().toString(36);
// 确保随机字符串至少有6位，因为substring(2)可能会使短于6位的字符串产生错误。
@ -232,7 +236,6 @@ export function get_math () {
// 截取掉随机字符串开头的'0.'部分，获得最终的6位随机字符串。
return randomString.substring(2);
}
/**
* 将大小计算成百分比
*

8
components/diy/article-list.vue
View File

@ -157,18 +157,20 @@
data_list:
new_content.data_type == '0'
? new_content.data_list
: new_content.data_auto_list.map((item) => ({
: new_content.data_auto_list && new_content.data_auto_list.length > 0
? new_content.data_auto_list.map((item) => ({
id: get_math(),
new_title: '',
new_cover: [],
data: item,
})),
}))
: [],
article_theme_class: this.article_theme_class_computer(new_content.theme),
article_theme: new_content.theme,
field_show: new_content.field_show,
// 样式
article_name: 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';',
article_desc: 'font-size:' + new_style.desc_size + 'px;line-height:' + new_style.desc_size + 'px;height:'+ new_style.desc_size + 'px;color:' + new_style.desc_color + ';',
article_desc: 'font-size:' + new_style.desc_size + 'px;line-height:' + new_style.desc_size + 'px;height:' + new_style.desc_size + 'px;color:' + new_style.desc_color + ';',
article_date: 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';',
article_page_view: 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';',
content_radius: radius_computer(new_style.content_radius),

42
components/diy/diy.vue
View File

@ -16,29 +16,29 @@
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:1;')">
<!-- 基础组件 -->
<template v-if="item.is_enable == '1'">
<componentDiySearch v-if="item.key == 'search'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyImgMagic>
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyHotZone>
<componentDiySeckill v-else-if="item.key == 'seckill'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiySeckill>
<componentDiySearch v-if="item.key == 'search'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyHotZone>
<componentDiySeckill v-else-if="item.key == 'seckill'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySeckill>
<!-- 插件 -->
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyCoupon>
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCoupon>
<!-- 工具组件 -->
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id" :propValue="item.com_data"></componentDiyFloatWindow>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propValue="item.com_data"></componentDiyTitle>
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryLine>
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyRichText>
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id + index" :propValue="item.com_data"></componentDiyFloatWindow>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propValue="item.com_data"></componentDiyTitle>
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryLine>
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyRichText>
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
</template>
</view>
</template>

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

@ -131,7 +131,7 @@
},
methods: {
init() {
let new_data = typeof(this.propValue) == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
const new_content = new_data.content || {};
const new_style = new_data.style || {};
// 产品的值
@ -157,12 +157,13 @@
margin_top: 0,
});
this.setData({
top_up:new_content.tabs_top_up,
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),
tabs_style: new_tabs_style,
});
console.log(this.propValue);
},
tabs_click_event(index) {
let new_data = JSON.parse(JSON.stringify(this.propValue));

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

@ -3,6 +3,7 @@
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
<view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
<view class="tabs flex-1 flex-width">
{{ tabs_list }}
<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">
@ -142,8 +143,8 @@
};
// 标题样式
const new_tabs_theme_style = {
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${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: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size * 2}rpx;color:${new_style.tabs_color};`,
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: `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};`,
};
this.setData({
tabs_spacing: Number(new_style.tabs_spacing),
@ -159,6 +160,7 @@
tabs_bottom_line_theme: new_style.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '',
tabs_theme_1_style: new_style.tabs_one_theme == '1',
});
console.log(this.propValue);
},
// 获取选项卡主题
get_tabs_theme(data) {
@ -261,7 +263,7 @@
}
.tabs-bottom-line-theme {
opacity: 0.6;
bottom: 16rpx;
bottom: 0;
z-index: 0;
height: 14rpx;
border-radius: 0;
@ -287,7 +289,7 @@
.title {
background: #ff2222;
border-radius: 40rpx;
padding: 4rpx 24rpx;
padding: 12rpx 24rpx;
color: #fff;
}
}

10
components/diy/nav-group.vue
View File

@ -3,7 +3,7 @@
<view :style="style_img_container">
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :style="{ height: new_height }" @change="slideChange">
<swiper-item v-for="(item, index) in nav_content_list" :key="index" class="flex-row align-c">
<view class="banner-img flex-row flex-wrap wh-auto" :style="space">
<view class="banner-img flex-row flex-wrap wh-auto" :class="'banner-img-' + propKey" :style="space">
<view v-for="(item1, index1) in item.split_list" :key="index1" class="flex-col gap-10 align-c" :style="group_width + nav_title_space" :data-value="item1.link.page" @tap="url_open_event">
<view v-if="['image_with_text', 'image'].includes(nav_style)" class="flex-row align-c jc-c">
<view class="top-img" :style="img_size">
@ -46,7 +46,7 @@
},
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
// 组件渲染的下标
@ -102,11 +102,11 @@
nav_style: new_content.nav_style || 'image_with_text', // 是否显示文字和图片
nav_content_list: this.get_nav_content_list(new_content),
});
setTimeout(() => {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
// 选择我们想要的元素
query
.select('.banner-img')
.select('.banner-img-' + this.propKey)
.boundingClientRect((res) => {
if ((res || null) != null) {
// data包含元素的宽度、高度等信息
@ -116,7 +116,7 @@
}
})
.exec(); // 执行查询
}, 0);
});
},
get_nav_content_list(data) {
// 深拷贝一下，确保不会出现问题