Files
template-10584/src/pages/user/user.tsx
赵忠林 3d94125c5e feat(user): 添加用户信息实时同步和刷新功能
- 在个人中心页面添加用户信息实时刷新机制
- 实现用户头像和昵称修改后的同步更新
- 新增 reloadUserInfo 方法用于重新加载用户数据
- 添加本地存储同步机制保持用户信息一致性
- 优化登录状态管理和用户数据显示逻辑
- 整合微信 OpenID 获取流程到用户信息刷新过程
2026-02-25 17:19:20 +08:00

69 lines
2.1 KiB
TypeScript

import {useEffect, useRef} from 'react'
import {PullToRefresh} from '@nutui/nutui-react-taro'
import UserCard from "./components/UserCard";
import UserOrder from "./components/UserOrder";
import UserFooter from "./components/UserFooter";
import {View} from '@tarojs/components';
import './user.scss'
import IsDealer from "./components/IsDealer";
import {useThemeStyles} from "@/hooks/useTheme";
import UserGrid from "@/pages/user/components/UserGrid";
import { useDidShow } from '@tarojs/taro'
function User() {
const userCardRef = useRef<any>()
const themeStyles = useThemeStyles();
// 下拉刷新处理
const handleRefresh = async () => {
if (userCardRef.current?.handleRefresh) {
await userCardRef.current.handleRefresh()
}
}
useEffect(() => {
}, []);
// 每次进入/切回个人中心都刷新一次统计(包含水票数量)
useDidShow(() => {
userCardRef.current?.reloadStats?.()
// 个人资料(头像/昵称)可能在其它页面被修改,这里确保返回时立刻刷新
userCardRef.current?.reloadUserInfo?.()
})
return (
<PullToRefresh
onRefresh={handleRefresh}
headHeight={60}
>
{/* 装饰性背景 */}
<View className={'h-64 w-full fixed top-0 z-0'} style={themeStyles.primaryBackground}>
{/* 装饰性背景元素 - 小程序兼容版本 */}
<View className="absolute w-32 h-32 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.1)',
top: '-16px',
right: '-16px'
}}></View>
<View className="absolute w-24 h-24 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.08)',
bottom: '-12px',
left: '-12px'
}}></View>
<View className="absolute w-16 h-16 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
top: '60px',
left: '120px'
}}></View>
</View>
<UserCard ref={userCardRef}/>
<UserOrder/>
<IsDealer/>
<UserGrid/>
<UserFooter/>
</PullToRefresh>
)
}
export default User