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

1.第一个组件距离顶部导航的距离计算

master
sws 2024-10-19 16:01:55 +08:00
parent fc92dda4d2
commit 1fca81001b
23 changed files with 295 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
common/js/common/common.js
View File

@ -1,3 +1,4 @@
const app = getApp();
/**
* 判断一个对象是否为空。
*
@ -107,9 +108,28 @@ 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) {
export function padding_computer (new_style, scale = 1, is_custom = false, index) {
if (!is_custom) {
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;`;
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;`;
}
@ -135,7 +155,7 @@ export function radius_computer (new_style, scale = 1, is_custom = false) {
} 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;`;
}
}
/**
* 设置阴影样式
@ -196,8 +216,8 @@ 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) {
return padding_computer(new_style) + background_computer(new_style) + `overflow:hidden;box-sizing: border-box;`;
export function common_img_computer (new_style, index) {
return padding_computer(new_style, 1, false, index) + background_computer(new_style) + `overflow:hidden;box-sizing: border-box;`;
}
/**
* 生成一个随机数学字符串。

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

@ -80,9 +80,14 @@
},
// 关键key
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -239,7 +244,7 @@
if (this.propIsCommonStyle) {
this.setData({
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
}
},

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

@ -49,6 +49,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
components: {
componentDiyModulesTabsView,
@ -161,7 +166,7 @@
this.setData({
article_tabs: new_data,
style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style,
});
},

9
components/diy/auxiliary-blank.vue
View File

@ -17,9 +17,14 @@
},
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -44,7 +49,7 @@
this.setData({
style: `height: ${height * 2}rpx;background: ${line_color || 'transparent'};`,
style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
});
},
},

7
components/diy/auxiliary-line.vue
View File

@ -20,6 +20,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -49,7 +54,7 @@
this.setData({
style: border_content + border_style,
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
},

7
components/diy/carousel.vue
View File

@ -79,6 +79,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -150,7 +155,7 @@
popup_width: block * 16 * 2 + 'rpx', // 视频的宽度，依照16:9比例来算
popup_height: block * 9 * 2 + 'rpx', // 视频的高度
style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 公共样式显示
style_img_container: this.propIsCommon ? common_img_computer(common_style) : '', // 公共样式显示
style_img_container: this.propIsCommon ? common_img_computer(common_style, this.propIndex) : '', // 公共样式显示
img_style: radius_computer(new_style), // 图片的设置
indicator_style: this.get_indicator_style(new_style), // 指示器的样式
dot_style: `bottom: ${ (new_style.indicator_bottom + common_style.margin_bottom + common_style.padding_bottom) * (sys_width / 390) * 2 }rpx;`, // 指示器位置

7
components/diy/coupon.vue
View File

@ -171,6 +171,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -284,7 +289,7 @@
url_3: new_content.theme_5_static_img[0].url,
},
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
// 领取优惠券

161
components/diy/custom.vue
View File

@ -2,7 +2,7 @@
<view :style="style_container + 'height:' + form.height * scale + 'px;'">
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
<view class="wh-auto ht-auto pr">
<view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ 'left': get_percentage_count(item.location.x, div_width), 'top': get_percentage_count(item.location.y, div_height), 'width': get_percentage_count(item.com_data.com_width, div_width), 'height': get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
<view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
<template v-if="item.key == 'text'">
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
</template>
@ -25,92 +25,97 @@
</template>
<script>
import { common_styles_computer, common_img_computer, percentage_count } from '@/common/js/common/common.js';
const app = getApp();
import modelText from '@/components/diy/modules/custom/model-text.vue';
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
import { common_styles_computer, common_img_computer, percentage_count } from '@/common/js/common/common.js';
const app = getApp();
import modelText from '@/components/diy/modules/custom/model-text.vue';
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
modelText,
modelLines,
modelImage,
modelIcon,
modelPanel
},
props: {
propValue: {
type: Object,
default: () => {
return {};
export default {
components: {
modelText,
modelLines,
modelImage,
modelIcon,
modelPanel,
},
props: {
propValue: {
type: Object,
default: () => {
return {};
},
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
propKey: {
type: [String,Number],
default: '',
},
},
data() {
return {
form: {},
new_style: {},
scale: 1,
style_container: '',
style_img_container: '',
div_width: 0,
div_height: 0,
custom_list_length: 0,
};
},
computed: {
get_percentage_count() {
return (num, container_size) => {
return num * this.scale + 'px';
data() {
return {
form: {},
new_style: {},
scale: 1,
style_container: '',
style_img_container: '',
div_width: 0,
div_height: 0,
custom_list_length: 0,
};
},
},
watch: {
propKey(val) {
// 初始化
computed: {
get_percentage_count() {
return (num, container_size) => {
return num * this.scale + 'px';
};
},
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
},
mounted() {
this.init();
},
methods: {
percentage_count,
init() {
const new_form = this.propValue.content;
const new_style = this.propValue.style;
const { margin_left, margin_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right;
this.setData({
form: new_form,
new_style: new_style,
div_width: width,
scale: width / 390,
custom_list_length: new_form.custom_list.length - 1,
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style),
div_height: new_form.height,
});
methods: {
percentage_count,
init() {
const new_form = this.propValue.content;
const new_style = this.propValue.style;
const { margin_left, margin_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right;
this.setData({
form: new_form,
new_style: new_style,
div_width: width,
scale: width / 390,
custom_list_length: new_form.custom_list.length - 1,
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
div_height: new_form.height,
});
},
url_event(e) {
app.globalData.url_event(e);
},
},
url_event(e) {
app.globalData.url_event(e);
},
},
};
};
</script>
<style scoped lang="scss">
.main-content {
position: absolute;
overflow: hidden;
}
.main-content {
position: absolute;
overflow: hidden;
}
</style>

7
components/diy/data-magic.vue
View File

@ -89,6 +89,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -146,7 +151,7 @@
content_img_radius: radius_computer(new_style.img_radius),
data_magic_list: this.get_data_magic_list(new_form.data_magic_list),
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);

93
components/diy/diy.vue
View File

@ -16,30 +16,30 @@
<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'" :propKey="item.id" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propKey="item.id" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propKey="item.id" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propKey="item.id" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propKey="item.id" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propKey="item.id" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propKey="item.id" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :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="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>
<componentDiySearch v-if="item.key == 'search'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="item.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"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="item.index" :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="index" :propKey="item.id" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propKey="item.id" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propKey="item.id" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propKey="item.id" :propValue="item.com_data"></componentDiyImgMagic>
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propKey="item.id" :propValue="item.com_data"></componentDiyHotZone>
<componentDiySeckill v-else-if="item.key == 'seckill'" :propKey="item.id" :propValue="item.com_data"></componentDiySeckill>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="item.index" :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="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyImgMagic>
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyHotZone>
<componentDiySeckill v-else-if="item.key == 'seckill'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiySeckill>
<!-- 插件 -->
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propKey="item.id" :propValue="item.com_data"></componentDiyCoupon>
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="item.index" :propKey="item.id" :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" :propValue="item.com_data"></componentDiyTitle>
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryLine>
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propKey="item.id" :propValue="item.com_data"></componentDiyRichText>
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id" :propIndex="item.index" :propValue="item.com_data"></componentDiyTitle>
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryLine>
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyRichText>
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="item.index" :propKey="item.id" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
</template>
</view>
</template>
@ -141,7 +141,7 @@
default: '',
},
propKey: {
type: [String,Number],
type: [String, Number],
default: 0,
},
},
@ -278,34 +278,55 @@
// 初始化
init() {
let header = this.propValue.header;
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_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') {
if (header_style.immersive_style == '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);
new_diy_index++;
}
});
// tabs选项卡数据过滤
this.setData({
header_data: this.propValue.header,
header_data: header,
footer_data: this.propValue.footer,
diy_data: this.propValue.diy_data,
diy_data: new_diy_data,
tabs_data: this.propValue.tabs_data,
page_style: common_styles_computer(this.propValue.header.com_data.style.common_style),
page_img_style: common_img_computer(this.propValue.header.com_data.style.common_style),
page_style: common_styles_computer(header.com_data.style.common_style),
page_img_style: common_img_computer(header.com_data.style.common_style),
// 判断顶部导航是否置顶
is_header_top: parseInt(this.propValue.header.com_data.style.up_slide_display) == 1 ? true : false,
is_header_top: parseInt(header.com_data.style.up_slide_display) == 1 ? true : false,
temp_sticky_top: this.sticky_top,
temp_header_top: `calc(${this.sticky_top}px + 66rpx + ${parseInt(this.propValue.header.com_data.style.data_alone_row_space || 5) * 2}rpx + ${this.propValue.header.com_data.content.data_alone_row_value.length > 0 ? '66rpx' : '0rpx'});`,
header_top: `calc(${this.sticky_top}px + 66rpx + ${parseInt(this.propValue.header.com_data.style.data_alone_row_space || 5) * 2}rpx + ${this.propValue.header.com_data.content.data_alone_row_value.length > 0 ? '66rpx' : '0rpx'});`,
// temp_header_top: `calc(${this.sticky_top}px + 66rpx + 40rpx + 66rpx);`,
// header_top: `calc(${this.sticky_top}px + 66rpx + 40rpx + 66rpx);`,
temp_header_top: `calc(${this.sticky_top}px + 33px + ${parseInt(header.com_data.content.data_alone_row_value.length > 0 ? header.com_data.style.data_alone_row_space || 5 : 0) * 2}rpx + ${header.com_data.content.data_alone_row_value.length > 0 ? '33px' : '0rpx'});`,
header_top: `calc(${this.sticky_top}px + 33px + ${parseInt(header.com_data.content.data_alone_row_value.length > 0 ? header.com_data.style.data_alone_row_space || 5 : 0) * 2}rpx + ${header.com_data.content.data_alone_row_value.length > 0 ? '33px' : '0rpx'});`,
// 顶部导航高度是否变化--------------------------------------------------
is_search_alone_row: this.propValue.header.com_data.content.data_alone_row_value.length > 0 ? true : false,
data_alone_row_space: parseInt(this.propValue.header.com_data.style.data_alone_row_space || 5),
// is_search_alone_row: true,
// data_alone_row_space: 20,
is_search_alone_row: header.com_data.content.data_alone_row_value.length > 0 ? true : false,
data_alone_row_space: parseInt(header.com_data.style.data_alone_row_space || 5),
});
var client_value = app.globalData.application_client_type();
var client_brand = app.globalData.application_client_brand();
if (client_value == 'h5' || client_brand == 'devtools') {
}
// 缓存数据
uni.setStorageSync(this.cache_key + this.tabs_home_id, this.propValue.diy_data);
uni.setStorageSync(this.cache_key + this.tabs_home_id, diy_data);
},
// 顶部导航沉浸模式回调
immersion_model_call_back(bool) {

17
components/diy/goods-list.vue
View File

@ -25,7 +25,7 @@
</block>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || is_show('sales_count') || is_show('plugins_view_icon') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<view class="flex-col gap-10 top-title">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{'gap': new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
@ -118,7 +118,7 @@
</block>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<view class="flex-col gap-10 top-title">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{'gap': new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
@ -187,9 +187,14 @@
default: true,
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
propDiyIndex: {
type: Number,
default: 0,
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 0,
@ -246,7 +251,7 @@
isEmpty,
init() {
const new_form = this.propValue.content;
const new_style = this.propValue.style
const new_style = this.propValue.style;
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
@ -282,7 +287,7 @@
show_content: ['0', '1', '2'].includes(new_form.theme), // 显示除标题外的其他区域
text_line: this.get_text_line(new_form), // 超过多少行隐藏
style_container: this.propIsCommonStyle ? common_styles_computer(new_style.common_style) : '', // 公共样式
style_img_container: this.propIsCommonStyle ? common_img_computer(new_style.common_style) : '', // 图片样式
style_img_container: this.propIsCommonStyle ? common_img_computer(new_style.common_style, this.propIndex) : '', // 图片样式
// 内容样式设置
title_style: this.trends_config(new_style, 'title', 'title', new_form.theme),
price_style: this.trends_config(new_style, 'price'),
@ -454,7 +459,7 @@
let is_success_tips = this.propIsCartParaCurve ? 0 : 1;
this.$emit(
'goods_buy_event',
this.propIndex,
this.propDiyIndex,
goods,
{
buy_event_type: 'cart',

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

@ -3,7 +3,7 @@
<view class="ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
<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>
@ -48,9 +48,14 @@
default: false,
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
propDiyIndex: {
type: Number,
default: 0,
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 0,
@ -156,7 +161,7 @@
this.setData({
goods_tabs: new_data,
style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style,
});
},

14
components/diy/header.vue
View File

@ -10,7 +10,7 @@
<view class="model-top flex-1 mt-1">
<view class="roll pr z-i">
<view class="model-head pr padding-left-main padding-right-main" style="box-sizing: border-box">
<view class="flex-col" :style="'gap:' + form.style.data_alone_row_space * 2 + 'rpx;'">
<view class="flex-col" :style="'gap:' + data_alone_row_space">
<view class="model-head-content flex-row align-c jc-sb gap-16 wh-auto pr" :style="header_style">
<view v-if="!is_tabbar_pages" class="z-i dis-inline-block margin-top-xs" @tap="top_nav_left_back_event">
<iconfont name="icon-arrow-left" size="40rpx" propContainerDisplay="flex" :color="form.style.left_back_btn_color || '#333'"></iconfont>
@ -72,13 +72,13 @@
</view>
<block v-if="!is_immersion_model">
<view v-if="!is_positon_realative" class="nav-seat" :style="top_content_style">
<view :style="'height:' + (is_search_alone_row || is_icon_alone_row ? 'calc(132rpx + ' + data_alone_row_space * 2 + 'rpx);' : '66rpx;')"></view>
<view :style="'height:' + (is_search_alone_row || is_icon_alone_row ? 'calc(132rpx + ' + data_alone_row_space + ');' : '66rpx;')"></view>
</view>
</block>
<!-- #ifndef H5 || MP-TOUTIAO -->
<view v-if="is_positon_realative" class="wh-auto pf top-0 left-0 right-0" :style="roll_style">
<view :style="top_content_style">
<view :style="'height:' + (is_search_alone_row || is_icon_alone_row ? 'calc(132rpx + ' + data_alone_row_space * 2 + 'rpx);' : '66rpx;')"></view>
<view :style="'height:' + (is_search_alone_row || is_icon_alone_row ? 'calc(132rpx + ' + data_alone_row_space + ');' : '66rpx;')"></view>
</view>
</view>
<!-- #endif -->
@ -108,7 +108,7 @@
default: 0,
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
},
@ -140,11 +140,9 @@
// 顶部背景样式类别
header_background_type: 'color_image',
// #ifdef MP
sticky_top: bar_height + 5,
header_top: bar_height + 5 + 12 + 33,
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_top: bar_height + 7 + 12,
header_top: bar_height + 7 + 12 + 33,
// #endif
// #ifdef APP
@ -159,7 +157,7 @@
// 判断header的查询是否独行
is_search_alone_row: false,
is_icon_alone_row: false,
data_alone_row_space: 0,
data_alone_row_space: '0rpx',
};
},
watch: {
@ -227,7 +225,7 @@
header_style: menu_button_info,
header_background_type: header_background_type,
is_immersion_model: header_background_type !== 'color_image' && immersive_style == '1',
data_alone_row_space: new_style.data_alone_row_space,
data_alone_row_space: new_style.data_alone_row_space * 2 + 'rpx',
is_search_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search'),
is_icon_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon'),
});

7
components/diy/hot-zone.vue
View File

@ -23,6 +23,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -62,7 +67,7 @@
img_height: new_content.hot.img_height || 1,
hot_data: new_content.hot.data || [],
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
// 图片加载完成 获取宽高

7
components/diy/img-magic.vue
View File

@ -53,6 +53,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -116,7 +121,7 @@
img_outer_spacing: new_style.image_spacing * 2 + 'rpx',
content_img_radius: radius_computer(new_style),
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;',
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
img_fit: fit,
});

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

@ -49,6 +49,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -85,7 +90,7 @@
form: new_content,
new_style: new_style,
style_container: common_styles_computer(new_style.common_style), // 用于样式显示
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
img_style: radius_computer(new_style), // 图片的设置
text_style: `font-size: ${new_style.title_size * 2 || 24}rpx; color: ${new_style.title_color || '#000'};`, // 标题的样式
indicator_style: this.get_indicator_style(new_style), // 指示器的样式

7
components/diy/notice.vue
View File

@ -73,6 +73,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -155,7 +160,7 @@
direction_type: direction,
interval_list: new_interval_list,
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
// 跳转链接

7
components/diy/rich-text.vue
View File

@ -19,6 +19,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -44,7 +49,7 @@
this.setData({
content: new_content.html,
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
},

7
components/diy/search.vue
View File

@ -63,6 +63,11 @@ export default {
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -98,7 +103,7 @@ export default {
new_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),
style_img_container: this.propIsPageSettings ? '' : common_img_computer(common_style, this.propIndex),
search_button_radius: radius_computer(search_button_radius), // 按钮圆角
box_style: this.get_box_style(new_style, new_form), // 搜索框设置
search_box_style: `border: 1px solid ${new_style.search_border == '#fff' ? '#eee' : new_style.search_border};`,

7
components/diy/seckill.vue
View File

@ -190,6 +190,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -296,7 +301,7 @@
seckill_head_style: this.get_seckill_head_style(new_style, '1'),
seckill_head_img_style: this.get_seckill_head_style(new_style, '2'),
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;',
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
content_outer_spacing: new_style.content_outer_spacing + 'px',
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
content_radius: radius_computer(new_style.shop_radius),

7
components/diy/title.vue
View File

@ -47,6 +47,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -113,7 +118,7 @@
title_style: `color:${title_color}; font-size: ${title_size * 2}rpx; ${common_styles}`,
subtitle_style: this.get_subtitle_style(), // 副标题样式设置
style_container: common_styles_computer(common_style), // 通用样式区
style_img_container: common_img_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex),
});
},
// 副标题样式设置

7
components/diy/user-info.vue
View File

@ -44,6 +44,11 @@
type: [String,Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -146,7 +151,7 @@
stats_name_style: 'color:' + temp_base_data.stats_name_color + ';' + 'font-size:' + temp_base_data.stats_name_size * 2 + 'rpx;' + 'font-weight:' + temp_base_data.stats_name_weight + ';',
stats_number_style: 'color:' + temp_base_data.stats_number_color + ';' + 'font-size:' + temp_base_data.stats_number_size * 2 + 'rpx;' + 'font-weight:' + temp_base_data.stats_number_weight + ';',
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
// 跳转链接

9
components/diy/video.vue
View File

@ -18,9 +18,14 @@
default: () => ({}),
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
@ -51,7 +56,7 @@
video_img: new_content.video_img.length > 0 ? new_content.video_img[0].url : '',
video: new_content.video.length > 0 ? new_content.video[0].url : '',
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
},
// 获取视频高度