From 7a64ae7dbed47e191b3a70fdb44cf6442762ae41 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sun, 29 Sep 2024 11:40:18 +0800
Subject: [PATCH] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue      |  7 +++-
 components/diy/diy.vue               | 14 +++++--
 components/diy/goods-tabs.vue        |  7 +++-
 components/diy/header.vue            | 63 ++++++++++++++++++++++++++--
 components/diy/modules/tabs-view.vue |  3 --
 components/diy/tabs.vue              | 22 ++++++----
 6 files changed, 96 insertions(+), 20 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index dac0fc16..b7fa78d6 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -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);
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 1c3e71e4..e78e6513 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -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 = {}) {
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index 4e3f49c3..aa92c1a3 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -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);
diff --git a/components/diy/header.vue b/components/diy/header.vue
index e1c7d0ce..a0648315 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -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('地图方法');
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index c75e08c4..e17ff5ae 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -129,12 +129,9 @@
             this.init();
             // 延迟执行，等待dom渲染完成
             this.$nextTick(() => {
-                // #ifdef H5 || MP-TOUTIAO
-                // 获取自定义导航栏高度
                 this.setData({
                     custom_nav_height: this.propCustomNavHeight,
                 });
-                // #endif
             });
         },
         methods: {
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index b2e9e224..b44545a0 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -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;