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

Merge branch 'dev-sws' into dev

master
gongfuxiang 2024-09-29 14:14:09 +08:00
parent 73f923a566 7a64ae7dbe
commit 8543c21efc
6 changed files with 96 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,11 @@
type: Number,
default: 0,
},
// 顶部导航是否开启沉浸模式
isImmersionModel: {
type: Boolean,
default: false,
},
},
components: {
componentDiyModulesTabsView,
@ -60,7 +65,7 @@
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);

14
components/diy/diy.vue
View File

@ -2,7 +2,7 @@
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event">
<!-- 头部小程序兼容 -->
<view class="pr header">
<componentDiyHeader v-if="hack_reset" :propValue="header_data.com_data"></componentDiyHeader>
<componentDiyHeader v-if="hack_reset" :propValue="header_data.com_data" :propScrollTop="scroll_top" @immersion-model-call-back="immersion_model_call_back"></componentDiyHeader>
</view>
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
<view v-for="(item, index) in tabs_data" :key="item.key">
@ -20,8 +20,8 @@
<componentDiyNotice v-else-if="item.key == 'notice'" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyGoodsTabs>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? 33 : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? 33 : 0"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :propValue="item.com_data"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propValue="item.com_data"></componentDiyDataMagic>
@ -155,6 +155,8 @@
is_tabs: false,
// 是否是模块数据或者是九宫格商品分类样式数据， 默认模块数据
is_tabs_type: true,
// 是否开启沉浸模式
is_immersion_model: false,
// 5,7,0 是误差，， 12 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
@ -246,6 +248,12 @@
});
uni.setStorageSync(this.cache_key + this.tabs_home_id, this.propValue.diy_data);
},
// 顶部导航沉浸模式回调
immersion_model_call_back(bool) {
this.setData({
is_immersion_model: bool,
});
},
// 选项卡回调更新数据
tabs_click_event(tabs_id, bool, params = {}) {

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

@ -40,6 +40,11 @@
type: Number,
default: 0,
},
// 顶部导航是否开启沉浸模式
isImmersionModel: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -59,7 +64,7 @@
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);

63
components/diy/header.vue
View File

@ -1,7 +1,7 @@
<template>
<view v-if="(propValue || null) !== null" class="header-container">
<view class="wh-auto header-z-3" :style="roll_style + position">
<view class="bg-white" :style="top_content_style">
<view :style="top_content_style">
<view class="header-content flex-row align-c">
<view class="model-top flex-1">
<view class="roll pr z-i">
@ -32,7 +32,7 @@
</view>
</template>
</view>
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c padding-right-main" :class="['1'].includes(form.content.theme) ? 'right-0' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
@ -46,9 +46,14 @@
</view>
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
</view>
<block v-if="!is_immersion_model">
<view v-if="!is_positon_realative" class="nav-seat" :style="top_content_style">
<view style="height: 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 class="bg-white" :style="top_content_style">
<view :style="top_content_style">
<view style="height: 66rpx"></view>
</view>
</view>
@ -73,6 +78,10 @@
type: Object,
default: () => ({}),
},
propScrollTop: {
type: Number,
default: 0,
},
},
components: {
componentDiySearch,
@ -99,8 +108,37 @@
top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:12px;',
// #endif
is_positon_realative: false,
// 顶部背景样式类别
header_background_type: 'color_image',
// #ifdef MP
header_top: bar_height + 5 + 12 + 33,
// #endif
// #ifdef H5 || MP-TOUTIAO
header_top: bar_height + 7 + 12 + 33,
// #endif
// #ifdef APP
header_top: bar_height + 0 + 12 + 33,
// #endif
// 判断是否是沉浸模式
is_immersion_model: false,
};
},
watch: {
propScrollTop(newVal) {
if (this.header_background_type != 'color_image') {
if (newVal < this.header_top) {
this.setData({
// 20是大小误差
roll_style: this.roll_style + 'background: rgba(255,255,255,' + (newVal + 20 < this.header_top ? 0 : (newVal / this.header_top).toFixed(2)) + ');',
});
} else {
this.setData({
roll_style: this.roll_style + 'background: rgba(255,255,255,1);',
});
}
}
},
},
created() {
if ((this.propValue || null) !== null) {
this.init();
@ -112,7 +150,7 @@
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
let new_roll_style = '';
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style;
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type, immersive_style } = new_style;
if (header_background_type === 'color_image') {
// 渐变
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
@ -136,7 +174,24 @@
roll_style: new_roll_style,
text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
header_style: menuButtonInfo,
header_background_type: header_background_type,
is_immersion_model: header_background_type !== 'color_image' && immersive_style == '1',
});
this.$emit('immersion-model-call-back', this.is_immersion_model);
},
// 获取顶部导航高度
get_nav_height() {
const query = uni.createSelectorQuery().in(this);
query
.select('.article-tabs')
.boundingClientRect((res) => {
if ((res || null) != null) {
this.setData({
tabs_top: res.top,
});
}
})
.exec();
},
go_map_event() {
console.log('地图方法');

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

@ -129,12 +129,9 @@
this.init();
// 延迟执行，等待dom渲染完成
this.$nextTick(() => {
// #ifdef H5 || MP-TOUTIAO
// 获取自定义导航栏高度
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {

22
components/diy/tabs.vue
View File

@ -1,18 +1,19 @@
<template>
<!-- 选项卡 -->
<view class="tabs pr" :style="'padding-top:' + tabs_padding_top">
<view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="tabs_top_style">
<view class="tabs pr">
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style">
<view class="max-w tabs-content" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
<view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
<!-- <view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px;padding-top:' + tabs_padding_top"></view> -->
<view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px;'"></view>
</view>
</template>
<script>
const app = getApp();
import { common_styles_computer } from '@/common/js/common/common.js';
import { common_styles_computer, gradient_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -59,7 +60,7 @@
// 置顶时，选项卡高度
tabs_seat_height: 0,
// 置顶时，选项卡距离顶部高度
tabs_padding_top: 0,
// tabs_padding_top: 0,
// 置顶时，选项卡样式
tabs_top_style: '',
};
@ -100,14 +101,19 @@
new_tabs_top_style = 'top:' + other_style + ';z-index:3;';
new_top_up = this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0';
// #endif
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (!Array.isArray(tabs_bg) || tabs_bg.length === 0 || !tabs_bg[0] || !tabs_bg[0].color) {
new_tabs_background = 'background:#fff;';
}
this.setData({
tabs_data: new_tabs_data,
style_container: common_styles_computer(new_style.common_style),
style_container: common_styles_computer(new_style.common_style) + new_tabs_background,
tabs_top_style: new_tabs_top_style,
// 判断是否置顶
top_up: new_top_up,
tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
// tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
});
},
// 获取选项卡高度
@ -154,7 +160,7 @@
<style lang="scss" scoped>
.tabs {
z-index: 4;
z-index: 3;
.tabs-top {
position: fixed;
left: 0;