feat(user): 实现 useUser Hook 并更新相关组件
- 新增 useUser Hook 用于全局用户状态管理 - 更新 UserCard 和 UserCell 组件,集成 useUser 功能 - 添加 UserProfile 组件示例 - 更新 API 引用,统一使用 useUser
This commit is contained in:
99
src/components/UserProfile.tsx
Normal file
99
src/components/UserProfile.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import { Button, Avatar } from '@nutui/nutui-react-taro';
|
||||
import { useUser } from '@/hooks/useUser';
|
||||
import navTo from '@/utils/common';
|
||||
|
||||
// 用户资料组件示例
|
||||
const UserProfile: React.FC = () => {
|
||||
const {
|
||||
user,
|
||||
isLoggedIn,
|
||||
loading,
|
||||
logoutUser,
|
||||
fetchUserInfo,
|
||||
getAvatarUrl,
|
||||
getDisplayName,
|
||||
isCertified,
|
||||
getBalance,
|
||||
getPoints
|
||||
} = useUser();
|
||||
|
||||
// 处理登录跳转
|
||||
const handleLogin = () => {
|
||||
navTo('/pages/login/index');
|
||||
};
|
||||
|
||||
// 处理退出登录
|
||||
const handleLogout = () => {
|
||||
logoutUser();
|
||||
navTo('/pages/index/index');
|
||||
};
|
||||
|
||||
// 刷新用户信息
|
||||
const handleRefresh = async () => {
|
||||
await fetchUserInfo();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className="user-profile loading">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<View className="user-profile not-logged-in">
|
||||
<View className="login-prompt">
|
||||
<Text>请先登录</Text>
|
||||
<Button type="primary" onClick={handleLogin}>
|
||||
立即登录
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="user-profile">
|
||||
<View className="user-header">
|
||||
<Avatar
|
||||
size="large"
|
||||
src={getAvatarUrl()}
|
||||
alt={getDisplayName()}
|
||||
/>
|
||||
<View className="user-info">
|
||||
<Text className="username">{getDisplayName()}</Text>
|
||||
<Text className="user-id">ID: {user?.userId}</Text>
|
||||
{isCertified() && (
|
||||
<Text className="certified">已实名认证</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="user-stats">
|
||||
<View className="stat-item">
|
||||
<Text className="stat-value">¥{getBalance()}</Text>
|
||||
<Text className="stat-label">余额</Text>
|
||||
</View>
|
||||
<View className="stat-item">
|
||||
<Text className="stat-value">{getPoints()}</Text>
|
||||
<Text className="stat-label">积分</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="user-actions">
|
||||
<Button onClick={handleRefresh}>
|
||||
刷新信息
|
||||
</Button>
|
||||
<Button type="danger" onClick={handleLogout}>
|
||||
退出登录
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile;
|
||||
Reference in New Issue
Block a user