feat(user): 优化用户信息加载及表单体验
- 新增页面加载状态,加载中显示提示 - 等待 useUser 初始化完成后再加载用户数据 - 添加获取数据字典和用户信息的异常处理及错误提示 - 同步更新备注信息表单控件,修正校验提示文案 - 修正备注信息输入框的name属性,确保表单数据绑定正确
This commit is contained in:
@@ -34,7 +34,7 @@ interface InputEvent {
|
|||||||
}
|
}
|
||||||
function Profile() {
|
function Profile() {
|
||||||
const formId = Number(router?.params.id)
|
const formId = Number(router?.params.id)
|
||||||
const {user, updateUser} = useUser()
|
const {user, updateUser, loading} = useUser()
|
||||||
|
|
||||||
const [sex, setSex] = useState<DictData[]>()
|
const [sex, setSex] = useState<DictData[]>()
|
||||||
const [FormData, setFormData] = useState<User>(
|
const [FormData, setFormData] = useState<User>(
|
||||||
@@ -49,16 +49,27 @@ function Profile() {
|
|||||||
comments: undefined
|
comments: undefined
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
const [pageLoading, setPageLoading] = useState(true)
|
||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
// 获取数据字典
|
// 获取数据字典
|
||||||
pageDictData({limit: 200}).then(res => {
|
pageDictData({limit: 200}).then(res => {
|
||||||
setSex(res?.list.filter((item) => item.dictCode === 'sex'))
|
setSex(res?.list.filter((item) => item.dictCode === 'sex'))
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('获取数据字典失败:', err)
|
||||||
})
|
})
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
getUserInfo().then((data) => {
|
getUserInfo().then((data) => {
|
||||||
// 更新表单数据
|
// 更新表单数据
|
||||||
setFormData(data);
|
setFormData(data);
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('获取用户信息失败:', err)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '获取用户信息失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}).finally(() => {
|
||||||
|
setPageLoading(false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -140,9 +151,12 @@ function Profile() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 等待 useUser 初始化完成后再加载数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
reload()
|
if (!loading) {
|
||||||
}, []);
|
reload()
|
||||||
|
}
|
||||||
|
}, [loading]);
|
||||||
|
|
||||||
// 监听 useUser hook 中的用户信息变化,同步更新表单数据
|
// 监听 useUser hook 中的用户信息变化,同步更新表单数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -151,6 +165,15 @@ function Profile() {
|
|||||||
}
|
}
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
|
// 加载中显示
|
||||||
|
if (loading || pageLoading) {
|
||||||
|
return (
|
||||||
|
<View className={'flex justify-center items-center h-screen'}>
|
||||||
|
<Text>加载中...</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={'p-4'}>
|
<div className={'p-4'}>
|
||||||
@@ -223,14 +246,14 @@ function Profile() {
|
|||||||
label="备注信息"
|
label="备注信息"
|
||||||
name="comments"
|
name="comments"
|
||||||
initialValue={FormData.comments}
|
initialValue={FormData.comments}
|
||||||
rules={[{message: '备注信息'}]}
|
rules={[{message: '请输入备注信息'}]}
|
||||||
>
|
>
|
||||||
<TextArea
|
<TextArea
|
||||||
placeholder={'个性签名'}
|
name="comments"
|
||||||
value={FormData?.comments}
|
placeholder={'个性签名'}
|
||||||
onChange={(value) => setFormData({...FormData, comments: value})}
|
value={FormData?.comments}
|
||||||
/>
|
onChange={(value) => setFormData({...FormData, comments: value})}
|
||||||
<Input placeholder={'个性签名'} />
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
|
|||||||
Reference in New Issue
Block a user