feat(商品列表): 实现商品列表吸顶效果和分享功能- 添加 Tabs 粘性布局组件，实现吸顶效果- 新增商品分享功能，支持分享给好友

-优化商品列表展示样式，使用瀑布流布局
- 调整商品图片展示方式和点击跳转逻辑- 添加空状态提示，改善用户体验
-修复部分样式问题，提升页面美观度- 移除旧版订单列表相关代码和依赖- 更新页面结构，提高组件复用性
- 添加系统信息获取，适配不同设备屏幕
-优化页面滚动体验，解决滑动冲突问题

src/pages/index/Header.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import Taro from '@tarojs/taro';
-import {Button, Space} from '@nutui/nutui-react-taro'
+import {Button, Space, Sticky} from '@nutui/nutui-react-taro'
 import {TriangleDown} from '@nutui/icons-react-taro'
 import {Avatar, NavBar} from '@nutui/nutui-react-taro'
 import {getUserInfo, getWxOpenId} from "@/api/layout";
@@ -13,7 +13,7 @@ import {View,Text} from '@tarojs/components'
 import MySearch from "./MySearch";
 import './Header.scss';
 
-const Header = (props: any) => {
+const Header = (_: any) => {
   // 使用新的useShopInfo Hook
   const {
     getWebsiteName,
@@ -22,6 +22,7 @@ const Header = (props: any) => {
 
   const [IsLogin, setIsLogin] = useState<boolean>(true)
   const [statusBarHeight, setStatusBarHeight] = useState<number>()
+  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
 
   const reload = async () => {
     Taro.getSystemInfo({
@@ -166,49 +167,76 @@ const Header = (props: any) => {
     })
   }
 
+  // 处理粘性布局状态变化
+  const onStickyChange = (isSticky: boolean) => {
+    setStickyStatus(isSticky)
+    console.log('Header 粘性状态:', isSticky ? '已固定' : '取消固定')
+  }
+
+  // 获取小程序系统信息
+  // const getSystemInfo = () => {
+  //   const systemInfo = Taro.getSystemInfoSync()
+  //   // 状态栏高度 + 导航栏高度 (一般为44px)
+  //   return (systemInfo.statusBarHeight || 0) + 44
+  // }
+
   useEffect(() => {
     reload().then()
   }, [])
 
   return (
     <>
-      <View className={'fixed top-0 header-bg'} style={{
-        height: !props.stickyStatus ? '180px' : 'auto',
-        paddingBottom: '12px'
-      }}>
-        <MySearch statusBarHeight={statusBarHeight} />
-        {/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
-      </View>
-      <NavBar
-        style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
-        onBackClick={() => {
+      <Sticky
+        threshold={0}
+        onChange={onStickyChange}
+        style={{
+          zIndex: 1000,
+          backgroundColor: stickyStatus ? '#03605c' : 'transparent',
+          transition: 'background-color 0.3s ease',
         }}
-        left={
-          !IsLogin ? (
-            <View style={{display: 'flex', alignItems: 'center'}}>
-              <Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
-                <Space>
-                  <Avatar
-                    size="22"
-                    src={getWebsiteLogo()}
-                  />
-                  <Text style={{color: '#ffffff'}}>{getWebsiteName()}</Text>
-                  <TriangleDown size={9} className={'text-white'}/>
-                </Space>
-              </Button>
-            </View>
-          ) : (
-            <View style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
-              <Avatar
-                size="22"
-                src={getWebsiteLogo()}
-              />
-              <Text className={'text-white'}>{getWebsiteName()}</Text>
-              <TriangleDown className={'text-white'} size={9}/>
-            </View>
-          )}>
-        {/*<QRLoginButton />*/}
-      </NavBar>
+      >
+        <View className={'header-bg'} style={{
+          height: !stickyStatus ? '180px' : `${(statusBarHeight || 0) + 44}px`,
+          paddingBottom: !stickyStatus ? '12px' : '0px'
+        }}>
+          {/* 只在非吸顶状态下显示搜索框 */}
+          {!stickyStatus && <MySearch statusBarHeight={statusBarHeight} />}
+        </View>
+        <NavBar
+          style={{
+            marginTop: `${statusBarHeight}px`,
+            marginBottom: '0px',
+            backgroundColor: 'transparent'
+          }}
+          onBackClick={() => {
+          }}
+          left={
+            !IsLogin ? (
+              <View style={{display: 'flex', alignItems: 'center'}}>
+                <Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
+                  <Space>
+                    <Avatar
+                      size="22"
+                      src={getWebsiteLogo()}
+                    />
+                    <Text style={{color: '#ffffff'}}>{getWebsiteName()}</Text>
+                    <TriangleDown size={9} className={'text-white'}/>
+                  </Space>
+                </Button>
+              </View>
+            ) : (
+              <View style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+                <Avatar
+                  size="22"
+                  src={getWebsiteLogo()}
+                />
+                <Text className={'text-white'}>{getWebsiteName()}</Text>
+                <TriangleDown className={'text-white'} size={9}/>
+              </View>
+            )}>
+          {/*<QRLoginButton />*/}
+        </NavBar>
+      </Sticky>
     </>
   )
 }