From ba239c95fa3b93203e71572ec2e6b01e8fd9a26a Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 27 Sep 2024 17:58:51 +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               |  6 +-
 components/diy/diy.vue                        | 60 ++++++++++---
 components/diy/goods-tabs.vue                 |  6 +-
 components/diy/modules/tabs-view.vue          | 10 ++-
 components/diy/tabs-carousel.vue              | 57 +++++++++----
 components/diy/tabs.vue                       | 84 ++++++++++++++++++-
 .../components/uv-sticky/uv-sticky.vue        |  8 ++
 7 files changed, 195 insertions(+), 36 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 9f1d1e3a..57b6346c 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表 -->
     <view class="ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="oh">
             <componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
         </view>
@@ -27,6 +27,10 @@
                 type: Number,
                 default: 0,
             },
+            propCustomNavHeight: {
+                type: String,
+                default: '66rpx',
+            },
         },
         components: {
             componentDiyModulesTabsView,
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index a177145e..bd25889f 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -1,14 +1,14 @@
 <template>
-    <view class="ht-auto min-ht">
+    <scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event">
         <!-- 头部小程序兼容 -->
         <view class="pr header">
             <componentDiyHeader v-if="hackReset" :propValue="header_data.com_data"></componentDiyHeader>
         </view>
-        <view class="content flex-col" :style="'padding-top:' + header_top">
-            <template v-for="(item, index) in tabs_data">
-                <componentDiyTabs v-if="item.key == 'tabs'" :key="index" :propValue="item.com_data" :propTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabs>
-                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
-            </template>
+        <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">
+                <componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
+                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
+            </view>
             <template v-if="is_tabs_type">
                 <template v-if="diy_data.length > 0">
                     <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;' }">
@@ -20,9 +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="sticky_top"></componentDiyArticleTabs>
-                        <componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="sticky_top"></componentDiyGoodsTabs>
+                        <componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyArticleTabs>
+                        <componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></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>
@@ -60,7 +59,7 @@
         <view v-if="is_show_footer == 1" class="footer">
             <componentDiyFooter v-if="hackReset" :propValue="footer_data.com_data"></componentDiyFooter>
         </view>
-    </view>
+    </scroll-view>
 </template>
 
 <script>
@@ -152,7 +151,7 @@
                 // 5,7,0 是误差，， 12 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
                 // #ifdef MP
                 sticky_top: bar_height + 5 + 12,
-                header_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
+                header_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66px);',
                 // #endif
                 // #ifdef H5 || MP-TOUTIAO
                 sticky_top: bar_height + 7 + 12,
@@ -162,6 +161,12 @@
                 sticky_top: bar_height + 0 + 12,
                 header_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
                 // #endif
+                temp_sticky_top: 0,
+                temp_header_top: '0px',
+                is_header_top: false,
+                temp_is_header_top: false,
+                // 选项卡高度
+                tabs_height: 0,
 
                 header_data: {},
                 footer_data: {},
@@ -222,6 +227,10 @@
                     footer_data: this.propValue.footer,
                     diy_data: this.propValue.diy_data,
                     tabs_data: this.propValue.tabs_data,
+                    // 判断顶部导航是否置顶
+                    is_header_top: this.propValue.header.com_data.style.up_slide_display == '1' ? true : false,
+                    temp_sticky_top: this.sticky_top,
+                    temp_header_top: this.header_top,
                 });
                 uni.setStorageSync(this.cache_key + this.tabs_home_id, this.propValue.diy_data);
             },
@@ -284,6 +293,13 @@
                     });
                 }
             },
+            // 选项卡高度
+            tabs_height_event(height) {
+                console.log(height);
+                this.setData({
+                    tabs_height: height,
+                });
+            },
 
             // 滚动加载
             scroll_lower(e) {
@@ -391,6 +407,28 @@
                     },
                 });
             },
+            on_scroll_event(e) {
+                // 判断顶部导航是否置顶
+                if (!this.is_header_top) {
+                    if (e.detail.scrollTop >= this.sticky_top + 33) {
+                        // #ifdef H5 || MP-TOUTIAO
+                        this.setData({
+                            temp_sticky_top: 0,
+                            temp_header_top: this.tabs_height + 'px',
+                            temp_is_header_top: true,
+                        });
+                        // #endif
+                    } else {
+                        // #ifdef H5 || MP-TOUTIAO
+                        this.setData({
+                            temp_header_top: this.header_top,
+                            temp_sticky_top: this.sticky_top,
+                            temp_is_header_top: false,
+                        });
+                        // #endif
+                    }
+                }
+            },
         },
     };
 </script>
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index ca61e4ec..a3262f56 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="oh">
             <componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
         </view>
@@ -32,6 +32,10 @@
                 type: Number,
                 default: 0,
             },
+            propCustomNavHeight: {
+                type: String,
+                default: '66rpx',
+            },
         },
         data() {
             return {
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index ef0f95b3..2d82934c 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 文章列表  66rpx是自定义顶部导航栏的高度-->
-    <uv-sticky :disabled="!propIsTop" :offset-top="propTop" zIndex="2" customNavHeight="66rpx" bgColor="#fff">
+    <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
         <view class="flex-row gap-10 jc-sb align-c" :style="propStyle">
             <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">
@@ -75,6 +75,14 @@
                 type: String,
                 default: '',
             },
+            propZIndex: {
+                type: Number,
+                default: 2,
+            },
+            propCustomNavHeight:{
+                type: String,
+                default: '66rpx',
+            }
         },
         components: {
             componentPopup,
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
index e8294d49..10c2c74f 100644
--- a/components/diy/tabs-carousel.vue
+++ b/components/diy/tabs-carousel.vue
@@ -1,17 +1,17 @@
 <template>
     <view class="flex-col ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="propValue" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <componentDiyTabs :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
         <componentDiycarousel :propValue="propValue" :propIsCommon="false"></componentDiycarousel>
     </view>
 </template>
 
 <script>
     import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
-    import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
+    import componentDiyTabs from '@/components/diy/tabs';
     import componentDiycarousel from '@/components/diy/carousel';
     export default {
         components: {
-            componentDiyModulesTabsView,
+            componentDiyTabs,
             componentDiycarousel,
         },
         props: {
@@ -25,6 +25,16 @@
                 type: Number,
                 default: 0,
             },
+            // 是否导航栏置顶
+            propNavIsTop: {
+                type: Boolean,
+                default: true,
+            },
+            // 是否选项卡置顶
+            propTabsIsTop: {
+                type: Boolean,
+                default: false,
+            },
         },
         data() {
             return {
@@ -48,32 +58,43 @@
         created() {
             this.init();
         },
+        // 属性值改变监听
+        watch: {
+            // 数据
+            propTabsIsTop(value, old_value) {
+                this.init();
+            },
+        },
         methods: {
             init() {
                 const new_content = this.propValue.content || {};
                 const new_style = this.propValue.style || {};
-                let tabs_style_obj = {
-                    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 common_style = Object.assign({}, new_style.common_style, {
-                    padding_top: 0,
-                    margin_top: 0,
-                });
+                // let tabs_style_obj = {
+                //     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 common_style = Object.assign({}, new_style.common_style, {
+                //     padding_top: 0,
+                //     margin_top: 0,
+                // });
                 this.setData({
-                    style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
+                    // style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
+                    style_container: `${common_styles_computer(new_style.common_style)};gap:${new_style.data_spacing * 2}rpx`,
                     top_up: new_content.tabs_top_up,
-                    tabs_style: new_tabs_style,
+                    // tabs_style: new_tabs_style,
                 });
             },
             tabs_click_event(tabs_id, is_micro_page) {
                 this.$emit('tabs-click', tabs_id, is_micro_page);
             },
+            tabs_height_event(height) {
+                this.$emit('computer-height', height);
+            },
         },
     };
 </script>
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index d40ee0a0..1169f313 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -1,6 +1,11 @@
 <template>
     <!-- 选项卡 -->
-    <componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="style_container" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+    <view class="tabs pr" :style="'padding-top:' + tabs_padding_top">
+        <view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="style_container">
+            <componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        </view>
+        <view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
+    </view>
 </template>
 
 <script>
@@ -18,10 +23,25 @@
                 type: Object,
                 default: () => ({}),
             },
+            // 置顶距离顶部高度
             propTop: {
                 type: Number,
                 default: 0,
             },
+            // 是否导航栏置顶
+            propNavIsTop: {
+                type: Boolean,
+                default: true,
+            },
+            // 是否选项卡置顶
+            propTabsIsTop: {
+                type: Boolean,
+                default: false,
+            },
+            propStyle: {
+                type: String,
+                default: '',
+            },
         },
         components: {
             componentDiyModulesTabsView,
@@ -34,10 +54,27 @@
 
                 // 是否滑动置顶
                 top_up: '0',
+                // 置顶时，选项卡高度
+                tabs_seat_height: 0,
+                // 置顶时，选项卡距离顶部高度
+                tabs_padding_top: 0,
             };
         },
         created() {
             this.init();
+            this.$nextTick(() => {
+                this.get_tabs_height();
+            });
+        },
+        // 属性值改变监听
+        watch: {
+            // 数据
+            propTabsIsTop(value, old_value) {
+                this.init();
+                this.$nextTick(() => {
+                    this.get_tabs_height();
+                });
+            },
         },
         methods: {
             init() {
@@ -45,12 +82,46 @@
                 const new_style = this.propValue.style || {};
                 let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
                 new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
+                // 判断选项卡是否置顶
+                let other_style = '';
+                if (new_content.tabs_top_up == '1') {
+                    other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
+                    // #ifdef H5 || MP-TOUTIAO
+                    if (this.propTabsIsTop) {
+                        other_style = '0';
+                    }
+                    // #endif
+                }
                 this.setData({
                     tabs_data: new_tabs_data,
-                    style_container: common_styles_computer(new_style.common_style),
-                    top_up: new_content.tabs_top_up,
+                    style_container: common_styles_computer(new_style.common_style) + 'top:' + other_style + ';z-index:3;',
+                    // 判断是否置顶
+                    top_up: this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0',
+                    tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
                 });
             },
+            // 获取选项卡高度
+            get_tabs_height() {
+                if (this.top_up == '1') {
+                    const query = uni.createSelectorQuery();
+                    // 选择我们想要的元素
+                    query
+                        .in(this)
+                        .select('.tabs-top')
+                        .boundingClientRect((res) => {
+                            if ((res || null) != null) {
+                                // data包含元素的宽度、高度等信息
+                                this.setData({
+                                    tabs_seat_height: res.height,
+                                });
+                                this.$emit('computer-height', this.tabs_seat_height);
+                            }
+                        })
+                        .exec(); // 执行查询
+                } else {
+                    this.$emit('computer-height', 0);
+                }
+            },
             // 选项卡回调
             tabs_click_event(index, item) {
                 let tabs_id = '';
@@ -73,6 +144,11 @@
 
 <style lang="scss" scoped>
     .tabs {
-        max-height: 100rpx;
+        .tabs-top {
+            position: fixed;
+            left: 0;
+            right: 0;
+            max-width: 100%;
+        }
     }
 </style>
diff --git a/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue b/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
index 3d7eb7e9..07d25750 100644
--- a/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
+++ b/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
@@ -76,6 +76,14 @@
                 return this.zIndex ? this.zIndex : 970;
             },
         },
+        watch: {
+            offsetTop(val) {
+                this.getStickyTop();
+            },
+            customNavHeight(val) {
+                this.getStickyTop();
+            },
+        },
         created() {
             this.elId = this.$uv.guid();
         },