From f8e5eed6cf166901e4eeb6a797184881239d48b3 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 26 Sep 2024 16:28:19 +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      | 43 +++++++++++++++++++++-------
 components/diy/diy.vue               | 16 +++++------
 components/diy/goods-tabs.vue        | 40 +++++++++++++++++++-------
 components/diy/modules/tabs-view.vue |  4 +--
 components/diy/tabs.vue              | 17 ++++++-----
 5 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 900f586c..a33320e8 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 文章列表 -->
-    <view class="ou" :style="style_container">
+    <view class="article-tabs ou" :style="style_container">
         <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="padding-top oh">
             <componentDiyArticleList :key="key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
@@ -42,18 +42,19 @@
                 top_up: '0',
                 // 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
                 // #ifdef MP
-                sticky_offset: bar_height + 5 + 12 + 33,
+                sticky_offset_postion: bar_height + 5 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
                 // #endif
                 // #ifdef H5 || MP-TOUTIAO
-                sticky_offset: bar_height + 7 + 12 + 33,
+                sticky_offset_postion: bar_height + 7 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
                 // #endif
                 // #ifdef APP
-                sticky_offset: bar_height + 0 + 12 + 33,
+                sticky_offset_postion: bar_height + 0 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
                 // #endif
                 tabs_style: '',
+                sticky_offset: 0,
             };
         },
         created() {
@@ -105,15 +106,35 @@
                 });
             },
             handle_scroll() {
-                // 判断是否吸顶了
-                if (window.scrollY >= this.sticky_offset) {
-                    const new_style = this.propValue.style || {};
-                    this.setData({
-                        tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
-                    });
-                }
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.goods-tabs')
+                    .boundingClientRect((data) => {
+                        if (data) {
+                            const new_style = this.propValue.style || {};
+                            this.setData({
+                                sticky_offset: data.top - new_style.common_style.padding_top,
+                            });
+                            // 判断是否吸顶了
+                            console.log(this.sticky_offset);
+                            if (window.scrollY >= this.sticky_offset) {
+                                const new_style = this.propValue.style || {};
+                                this.setData({
+                                    tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
+                                });
+                            } else {
+                                this.setData({
+                                    tabs_style: '',
+                                });
+                            }
+                        }
+                    })
+                    .exec();
             },
         },
+        destroyed() {
+            window.removeEventListener('scroll', this.handle_scroll);
+        },
     };
 </script>
 <style lang="scss" scoped></style>
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 56c4959f..7a1cc833 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -4,12 +4,12 @@
         <view class="pr header">
             <componentDiyHeader :key="key" :propValue="header_data.com_data"></componentDiyHeader>
         </view>
-        <view class="pr content" :style="header_top">
-            <view v-for="(item, index) in tabs_data" :key="index">
-                <componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
+        <view class="content flex-col" :style="header_top">
+            <block v-for="(item, index) in tabs_data">
+                <componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" @tabs-click="tabs_click_event"></componentDiyTabs>
                 <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :key="key + index" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
-            </view>
-            <view v-if="is_tabs_type" class="diy">
+            </block>
+            <block 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': -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx' }">
                         <!-- 基础组件 -->
@@ -38,8 +38,8 @@
                         <componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
                     </view>
                 </template>
-            </view>
-            <view v-else>
+            </block>
+            <block v-else>
                 <!-- goods九宫格数据 -->
                 <!-- 列表 -->
                 <scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
@@ -53,7 +53,7 @@
                     <!-- 结尾 -->
                     <component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
                 </scroll-view>
-            </view>
+            </block>
         </view>
         <view v-if="is_show_footer == 1" class="footer">
             <componentDiyFooter :key="key" :propValue="footer_data.com_data"></componentDiyFooter>
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index a8351500..fc2564d6 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="ou" :style="style_container">
+    <view class="goods-tabs ou" :style="style_container">
         <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="padding-top oh">
             <componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
@@ -39,18 +39,19 @@
                 top_up: '0',
                 // 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
                 // #ifdef MP
-                sticky_offset: bar_height + 5 + 12 + 33,
+                sticky_offset_postion: bar_height + 5 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
                 // #endif
                 // #ifdef H5 || MP-TOUTIAO
-                sticky_offset: bar_height + 7 + 12 + 33,
+                sticky_offset_postion: bar_height + 7 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
                 // #endif
                 // #ifdef APP
-                sticky_offset: bar_height + 0 + 12 + 33,
+                sticky_offset_postion: bar_height + 0 + 12 + 33,
                 tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
                 // #endif
                 tabs_style: '',
+                sticky_offset: 0,
             };
         },
         created() {
@@ -101,14 +102,33 @@
             },
             handle_scroll() {
                 // 判断是否吸顶了
-                if (window.scrollY >= this.sticky_offset) {
-                    const new_style = this.propValue.style || {};
-                    this.setData({
-                        tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
-                    });
-                }
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.goods-tabs')
+                    .boundingClientRect((data) => {
+                        if (data) {
+                            const new_style = this.propValue.style || {};
+                            this.setData({
+                                sticky_offset: data.top - new_style.common_style.padding_top,
+                            });
+                            if (window.scrollY >= this.sticky_offset) {
+                                const new_style = this.propValue.style || {};
+                                this.setData({
+                                    tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
+                                });
+                            } else {
+                                this.setData({
+                                    tabs_style: '',
+                                });
+                            }
+                        }
+                    })
+                    .exec();
             },
         },
+        destroyed() {
+            window.removeEventListener('scroll', this.handle_scroll);
+        },
     };
 </script>
 
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 55cafc88..1279396a 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -15,7 +15,7 @@
                     </view>
                 </scroll-view>
             </view>
-            <iconfont v-if="propIsTabs" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" @click="category_check_event"></iconfont>
+            <iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" @click="category_check_event"></iconfont>
         </view>
         <componentPopup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="tabs_top" @onclose="quick_close_event">
             <view class="padding-vertical-lg">
@@ -56,7 +56,7 @@
                 type: Object,
                 default: () => {},
             },
-            propIsTabs: {
+            propIsTabsIcon: {
                 type: Boolean,
                 default: false,
             },
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 7b241689..f28a1e4d 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 选项卡 -->
-    <view class="ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="tabs_data" :propIsTabs="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+    <view class="ou tabs" :style="style_container">
+        <componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propIsTop="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
     </view>
 </template>
 
@@ -42,13 +42,13 @@
                 top_up: '0',
                 // 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
                 // #ifdef MP
-                tabs_top: 'padding-top:calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
+                tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
                 // #endif
                 // #ifdef H5 || MP-TOUTIAO
-                tabs_top: 'padding-top:calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
+                tabs_top: '0',
                 // #endif
                 // #ifdef APP
-                tabs_top: 'padding-top:calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
+                tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
                 // #endif
             };
         },
@@ -59,7 +59,7 @@
             init() {
                 const new_content = this.propValue.content || {};
                 const new_style = this.propValue.style || {};
-                let new_tabs_data = this.propValue;
+                let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
                 new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
                 this.setData({
                     tabs_data: new_tabs_data,
@@ -88,8 +88,7 @@
 </script>
 
 <style lang="scss" scoped>
-    .seize-seat {
-        z-index: 101;
-        position: relative;
+    .tabs {
+        max-height: 100rpx;
     }
 </style>