developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

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

Browse Source 
- 移除了 HeaderWithHook 和 IndexWithHook 组件
- 优化了 UserCard 组件，使用 forwardRef 和 useImperativeHandle暴露刷新方法
- 在 User 页面中添加 PullToRefresh组件实现下拉刷新
-集成了 useUserData 钩子用于刷新用户数据
This commit is contained in:
赵忠林
2025-08-26 19:39:11 +08:00
parent 8f21c37f5a
commit 27ff0a8fe7
4 changed files with 45 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/pages/index/HeaderWithHook.tsx
View File

@@ -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;

189
src/pages/index/IndexWithHook.tsx
View File

@@ -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;

47
src/pages/user/components/UserCard.tsx
View File

@@ -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;

52
src/pages/user/user.tsx
View File

@@ -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 <>
<div className={'w-full'} style={{
background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
}}>
<UserCard/>
<UserOrder/>
<IsDealer/>
<UserCell/>
<UserFooter/>
</div>
</>
return (
<PullToRefresh
onRefresh={handleRefresh}
headHeight={60}
>
<div className={'w-full'} style={{
background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
}}>
<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>
)
}