refactor(user): 重构用户页面并添加下拉刷新功能

- 移除了 HeaderWithHook 和 IndexWithHook 组件
- 优化了 UserCard 组件，使用 forwardRef 和 useImperativeHandle暴露刷新方法
- 在 User 页面中添加 PullToRefresh组件实现下拉刷新
-集成了 useUserData 钩子用于刷新用户数据

src/pages/index/HeaderWithHook.tsx

@@ -1,227 +0,0 @@
-import {useEffect, useState} from "react";
-import Taro from '@tarojs/taro';
-import {Button, Space} from '@nutui/nutui-react-taro'
-import {TriangleDown} from '@nutui/icons-react-taro'
-import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
-import {getUserInfo, getWxOpenId} from "@/api/layout";
-import {TenantId} from "@/config/app";
-import {getOrganization} from "@/api/system/organization";
-import {myUserVerify} from "@/api/system/userVerify";
-import {User} from "@/api/system/user/model";
-import { useShopInfo } from '@/hooks/useShopInfo';
-import { useUser } from '@/hooks/useUser';
-import {handleInviteRelation, getStoredInviteParams} from "@/utils/invite";
-import MySearch from "./MySearch";
-import './Header.scss';
-
-const Header = (props: any) => {
-  // 使用新的hooks
-  const {
-    shopInfo,
-    loading: shopLoading,
-    getWebsiteName,
-    getWebsiteLogo
-  } = useShopInfo();
-
-  const {
-    user,
-    isLoggedIn,
-    loading: userLoading
-  } = useUser();
-
-  const [showBasic, setShowBasic] = useState(false)
-  const [statusBarHeight, setStatusBarHeight] = useState<number>()
-
-  const reload = async () => {
-    Taro.getSystemInfo({
-      success: (res) => {
-        setStatusBarHeight(res.statusBarHeight)
-      },
-    })
-
-    // 注意：商店信息现在通过useShopInfo自动管理，不需要手动获取
-    // 用户信息现在通过useUser自动管理，不需要手动获取
-
-    // 如果需要获取openId，可以在用户登录后处理
-    if (user && !user.openid) {
-      Taro.login({
-        success: (res) => {
-          getWxOpenId({code: res.code}).then(() => {
-            console.log('OpenId获取成功');
-          })
-        }
-      })
-    }
-
-    // 检查用户认证状态
-    if (user?.userId) {
-      // 获取组织信息
-      getOrganization({userId: user.userId}).then((data) => {
-        console.log('组织信息>>>', data)
-      }).catch(() => {
-        console.log('获取组织信息失败')
-      });
-
-      // 检查用户认证
-      myUserVerify({userId: user.userId}).then((data) => {
-        console.log('认证信息>>>', data)
-      }).catch(() => {
-        console.log('获取认证信息失败')
-      });
-    }
-  }
-
-  // 获取手机号授权
-  const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
-    const {code, encryptedData, iv} = detail
-
-    // 获取存储的邀请参数
-    const inviteParams = getStoredInviteParams()
-    const refereeId = inviteParams?.inviter ? parseInt(inviteParams.inviter) : 0
-
-    Taro.login({
-      success: function () {
-        if (code) {
-          Taro.request({
-            url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
-            method: 'POST',
-            data: {
-              code,
-              encryptedData,
-              iv,
-              notVerifyPhone: true,
-              refereeId: refereeId, // 使用解析出的推荐人ID
-              sceneType: 'save_referee',
-              tenantId: TenantId
-            },
-            success: async function (res) {
-              if (res.data.code == 1) {
-                Taro.showToast({
-                  title: res.data.message,
-                  icon: 'error',
-                  duration: 2000
-                })
-                return false;
-              }
-              // 登录成功
-              Taro.setStorageSync('access_token', res.data.data.access_token)
-              Taro.setStorageSync('UserId', res.data.data.user.userId)
-
-              // 处理邀请关系
-              if (res.data.data.user?.userId) {
-                try {
-                  const inviteSuccess = await handleInviteRelation(res.data.data.user.userId)
-                  if (inviteSuccess) {
-                    Taro.showToast({
-                      title: '邀请关系建立成功',
-                      icon: 'success',
-                      duration: 2000
-                    })
-                  }
-                } catch (error) {
-                  console.error('处理邀请关系失败:', error)
-                }
-              }
-
-              // 重新加载小程序
-              Taro.reLaunch({
-                url: '/pages/index/index'
-              })
-            }
-          })
-        } else {
-          console.log('登录失败！')
-        }
-      }
-    })
-  }
-
-  useEffect(() => {
-    reload().then()
-  }, [])
-
-  // 显示加载状态
-  if (shopLoading || userLoading) {
-    return (
-      <div className={'fixed top-0 header-bg'} style={{
-        height: !props.stickyStatus ? '180px' : '148px',
-      }}>
-        <div style={{padding: '20px', textAlign: 'center', color: '#fff'}}>
-          加载中...
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className={'fixed top-0 header-bg'} style={{
-        height: !props.stickyStatus ? '180px' : '148px',
-      }}>
-        <MySearch/>
-      </div>
-      <NavBar
-        style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
-        onBackClick={() => {
-        }}
-        left={
-          !isLoggedIn ? (
-            <div style={{display: 'flex', alignItems: 'center'}}>
-              <Button style={{color: '#000'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
-                <Space>
-                  <Avatar
-                    size="22"
-                    src={getWebsiteLogo()}
-                  />
-                  <span style={{color: '#000'}}>{getWebsiteName()}</span>
-                </Space>
-              </Button>
-              <TriangleDown size={9}/>
-            </div>
-          ) : (
-            <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
-              <Avatar
-                size="22"
-                src={getWebsiteLogo()}
-              />
-              <span className={'text-white'}>{getWebsiteName()}</span>
-              <TriangleDown className={'text-white'} size={9}/>
-            </div>
-          )}>
-      </NavBar>
-      <Popup
-        visible={showBasic}
-        position="bottom"
-        style={{width: '100%', height: '100%'}}
-        onClose={() => {
-          setShowBasic(false)
-        }}
-      >
-        <div style={{padding: '20px'}}>
-          <h3>商店信息</h3>
-          <div>网站名称: {getWebsiteName()}</div>
-          <div>Logo: <img src={getWebsiteLogo()} alt="logo" style={{width: '50px', height: '50px'}} /></div>
-
-          <h3>用户信息</h3>
-          <div>登录状态: {isLoggedIn ? '已登录' : '未登录'}</div>
-          {user && (
-            <>
-              <div>用户ID: {user.userId}</div>
-              <div>手机号: {user.phone}</div>
-              <div>昵称: {user.nickname}</div>
-            </>
-          )}
-
-          <button
-            onClick={() => setShowBasic(false)}
-            style={{marginTop: '20px', padding: '10px 20px'}}
-          >
-            关闭
-          </button>
-        </div>
-      </Popup>
-    </>
-  )
-}
-
-export default Header;

src/pages/index/IndexWithHook.tsx

@@ -1,189 +0,0 @@
-import Header from './Header';
-import BestSellers from './BestSellers';
-import Taro from '@tarojs/taro';
-import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
-import {useEffect, useState} from "react";
-import {Sticky} from '@nutui/nutui-react-taro'
-import { useShopInfo } from '@/hooks/useShopInfo';
-import { useUser } from '@/hooks/useUser';
-import Menu from "./Menu";
-import Banner from "./Banner";
-import './index.scss'
-
-const Home = () => {
-  const [stickyStatus, setStickyStatus] = useState(false);
-
-  // 使用新的hooks
-  const {
-    shopInfo,
-    loading: shopLoading,
-    error: shopError,
-    getWebsiteName,
-    getWebsiteLogo,
-    refreshShopInfo
-  } = useShopInfo();
-
-  const {
-    user,
-    isLoggedIn,
-    loading: userLoading
-  } = useUser();
-
-  const onSticky = (args: any) => {
-    setStickyStatus(args[0].isFixed);
-  };
-
-  const showAuthModal = () => {
-    Taro.showModal({
-      title: '授权提示',
-      content: '需要获取您的用户信息',
-      confirmText: '去授权',
-      cancelText: '取消',
-      success: (res) => {
-        if (res.confirm) {
-          // 用户点击确认，打开授权设置页面
-          Taro.openSetting({
-            success: (settingRes) => {
-              if (settingRes.authSetting['scope.userInfo']) {
-                console.log('用户已授权');
-              } else {
-                console.log('用户拒绝授权');
-              }
-            }
-          });
-        }
-      }
-    });
-  };
-
-  // 分享给好友
-  useShareAppMessage(() => {
-    return {
-      title: `${getWebsiteName()} - 精选商城`,
-      path: '/pages/index/index',
-      imageUrl: getWebsiteLogo(),
-      success: function (res: any) {
-        console.log('分享成功', res);
-        Taro.showToast({
-          title: '分享成功',
-          icon: 'success',
-          duration: 2000
-        });
-      },
-      fail: function (res: any) {
-        console.log('分享失败', res);
-        Taro.showToast({
-          title: '分享失败',
-          icon: 'none',
-          duration: 2000
-        });
-      }
-    };
-  });
-
-  // 分享到朋友圈
-  useShareTimeline(() => {
-    return {
-      title: `${getWebsiteName()} - 精选商城`,
-      imageUrl: getWebsiteLogo(),
-      success: function (res: any) {
-        console.log('分享到朋友圈成功', res);
-      },
-      fail: function (res: any) {
-        console.log('分享到朋友圈失败', res);
-      }
-    };
-  });
-
-  useEffect(() => {
-    // 设置页面标题
-    if (shopInfo?.appName) {
-      Taro.setNavigationBarTitle({
-        title: shopInfo.appName
-      });
-    }
-  }, [shopInfo]);
-
-  useEffect(() => {
-    // 检查用户授权状态
-    Taro.getSetting({
-      success: (res) => {
-        if (res.authSetting['scope.userInfo']) {
-          console.log('用户已经授权过，可以直接获取用户信息');
-        } else {
-          console.log('用户未授权，需要弹出授权窗口');
-          showAuthModal();
-        }
-      }
-    });
-
-    // 获取用户基本信息（头像、昵称等）
-    Taro.getUserInfo({
-      success: (res) => {
-        const avatar = res.userInfo.avatarUrl;
-        console.log('用户头像:', avatar);
-      },
-      fail: (err) => {
-        console.log('获取用户信息失败:', err);
-      }
-    });
-  }, []);
-
-  // 处理错误状态
-  if (shopError) {
-    return (
-      <div style={{padding: '20px', textAlign: 'center'}}>
-        <div>加载商店信息失败: {shopError}</div>
-        <button
-          onClick={refreshShopInfo}
-          style={{marginTop: '10px', padding: '10px 20px'}}
-        >
-          重试
-        </button>
-      </div>
-    );
-  }
-
-  // 显示加载状态
-  if (shopLoading) {
-    return (
-      <div style={{padding: '20px', textAlign: 'center'}}>
-        <div>加载中...</div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Sticky threshold={0} onChange={(args) => onSticky(args)}>
-        <Header stickyStatus={stickyStatus}/>
-      </Sticky>
-      <div className={'flex flex-col mt-12'}>
-        <Menu/>
-        <Banner/>
-        <BestSellers/>
-
-        {/* 调试信息面板 - 仅在开发环境显示 */}
-        {process.env.NODE_ENV === 'development' && (
-          <div style={{
-            position: 'fixed',
-            bottom: '10px',
-            right: '10px',
-            background: 'rgba(0,0,0,0.8)',
-            color: 'white',
-            padding: '10px',
-            borderRadius: '5px',
-            fontSize: '12px',
-            maxWidth: '200px'
-          }}>
-            <div>商店: {getWebsiteName()}</div>
-            <div>用户: {isLoggedIn ? (user?.nickname || '已登录') : '未登录'}</div>
-            <div>加载: {userLoading ? '用户加载中' : '已完成'}</div>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default Home;

src/pages/user/components/UserCard.tsx

@@ -4,16 +4,15 @@ import {View, Text} from '@tarojs/components'
 import {Scan} from '@nutui/icons-react-taro';
 import {getUserInfo, getWxOpenId} from '@/api/layout';
 import Taro from '@tarojs/taro';
-import {useEffect, useState} from "react";
+import {useEffect, useState, forwardRef, useImperativeHandle} from "react";
 import {User} from "@/api/system/user/model";
 import navTo from "@/utils/common";
 import {TenantId} from "@/config/app";
-import {getMyAvailableCoupons} from "@/api/shop/shopUserCoupon";
 import {useUser} from "@/hooks/useUser";
 import {useUserData} from "@/hooks/useUserData";
 import {getStoredInviteParams} from "@/utils/invite";
 
-function UserCard() {
+const UserCard = forwardRef<any, any>((_, ref) => {
   const {
     isAdmin
   } = useUser();
@@ -21,9 +20,6 @@ function UserCard() {
   const {getDisplayName, getRoleName} = useUser();
   const [IsLogin, setIsLogin] = useState<boolean>(false)
   const [userInfo, setUserInfo] = useState<User>()
-  const [couponCount, setCouponCount] = useState(0)
-  const [pointsCount, setPointsCount] = useState(0)
-  const [giftCount, setGiftCount] = useState(0)
 
   // 下拉刷新
   const handleRefresh = async () => {
@@ -34,6 +30,11 @@ function UserCard() {
     })
   }
 
+  // 暴露方法给父组件
+  useImperativeHandle(ref, () => ({
+    handleRefresh
+  }))
+
   useEffect(() => {
     // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
     Taro.getSetting({
@@ -51,33 +52,6 @@ function UserCard() {
     });
   }, []);
 
-  const loadUserStats = (userId: number) => {
-    // 加载优惠券数量
-    getMyAvailableCoupons()
-      .then((coupons: any) => {
-        setCouponCount(coupons?.length || 0)
-      })
-      .catch((error: any) => {
-        console.error('Coupon count error:', error)
-      })
-
-    // 加载积分数量
-    console.log(userId)
-    setPointsCount(0)
-    // getUserPointsStats(userId)
-    //   .then((res: any) => {
-    //     setPointsCount(res.currentPoints || 0)
-    //   })
-    //   .catch((error: any) => {
-    //     console.error('Points stats error:', error)
-    //   })
-    // 加载礼品劵数量
-    setGiftCount(0)
-    // pageUserGiftLog({userId, page: 1, limit: 1}).then(res => {
-    //   setGiftCount(res.count || 0)
-    // })
-  }
-
   const reload = () => {
     Taro.getUserInfo({
       success: (res) => {
@@ -93,11 +67,6 @@ function UserCard() {
             setIsLogin(true);
             Taro.setStorageSync('UserId', data.userId)
 
-            // 加载用户统计数据
-            if (data.userId) {
-              loadUserStats(data.userId)
-            }
-
             // 获取openId
             if (!data.openid) {
               Taro.login({
@@ -268,6 +237,6 @@ function UserCard() {
     </View>
 
   )
-}
+})
 
 export default UserCard;

src/pages/user/user.tsx

@@ -1,9 +1,11 @@
-import {useEffect} from 'react'
+import {useEffect, useRef} from 'react'
+import {PullToRefresh} from '@nutui/nutui-react-taro'
 import UserCard from "./components/UserCard";
 import UserOrder from "./components/UserOrder";
 import UserCell from "./components/UserCell";
 import UserFooter from "./components/UserFooter";
 import {useUser} from "@/hooks/useUser";
+import {useUserData} from "@/hooks/useUserData";
 import './user.scss'
 import IsDealer from "./components/IsDealer";
 
@@ -12,6 +14,18 @@ function User() {
     isAdmin
   } = useUser();
 
+  const { refresh } = useUserData()
+  const userCardRef = useRef<any>()
+
+  // 下拉刷新处理
+  const handleRefresh = async () => {
+    await refresh()
+    // 如果 UserCard 组件有自己的刷新方法，也可以调用
+    if (userCardRef.current?.handleRefresh) {
+      await userCardRef.current.handleRefresh()
+    }
+  }
+
   useEffect(() => {
   }, []);
 
@@ -19,31 +33,39 @@ function User() {
    * 门店核销管理
    */
   if (isAdmin()) {
-    return <>
+    return (
+      <PullToRefresh
+        onRefresh={handleRefresh}
+        headHeight={60}
+      >
         <div className={'w-full'} style={{
           background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
         }}>
-        <UserCard/>
+          <UserCard ref={userCardRef}/>
           <UserOrder/>
           <IsDealer/>
           <UserCell/>
           <UserFooter/>
         </div>
-    </>
+      </PullToRefresh>
+    )
   }
 
   return (
-    <>
+    <PullToRefresh
+      onRefresh={handleRefresh}
+      headHeight={60}
+    >
       <div className={'w-full'} style={{
         background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
       }}>
-        <UserCard/>
+        <UserCard ref={userCardRef}/>
         <UserOrder/>
         <IsDealer/>
         <UserCell/>
         <UserFooter/>
       </div>
-    </>
+    </PullToRefresh>
   )
 }