refactor(user-profile): 调整个人信息页面布局优化结构

- 调整用户ID位置至头像之上以强化信息层次
- 统一并优化代码格式排版,提升代码可读性
- 合并重复的用户ID展示,避免冗余
- 保持功能一致,未改动交互逻辑
- 优化注释及空白行,代码风格更规范
This commit is contained in:
2026-07-17 11:42:04 +08:00
parent ceba1cabec
commit 955b156399

View File

@@ -94,6 +94,11 @@ const ProfilePage: React.FC = () => {
return ( return (
<View className='min-h-screen bg-gray-50 pb-32'> <View className='min-h-screen bg-gray-50 pb-32'>
{/* 用户ID */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'>ID</Text>
<Text className='text-sm text-gray-600'>{displayId || '未设置'}</Text>
</View>
{/* 头像 - 使用 Taro 原生 Button 支持 open-type="chooseAvatar" */} {/* 头像 - 使用 Taro 原生 Button 支持 open-type="chooseAvatar" */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'> <View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'></Text> <Text className='text-sm text-gray-700 w-20'></Text>
@@ -138,7 +143,8 @@ const ProfilePage: React.FC = () => {
</View> </View>
{/* 性别 */} {/* 性别 */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50' onClick={() => setShowGenderSheet(true)}> <View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'
onClick={() => setShowGenderSheet(true)}>
<Text className='text-sm text-gray-700 w-20'></Text> <Text className='text-sm text-gray-700 w-20'></Text>
<View className='flex items-center gap-2'> <View className='flex items-center gap-2'>
<Text className='text-sm text-gray-600'>{genderOptions[form.gender ?? 0]}</Text> <Text className='text-sm text-gray-600'>{genderOptions[form.gender ?? 0]}</Text>
@@ -152,42 +158,12 @@ const ProfilePage: React.FC = () => {
<Text className='text-sm text-gray-600'>{form.phone || '未绑定'}</Text> <Text className='text-sm text-gray-600'>{form.phone || '未绑定'}</Text>
</View> </View>
{/* 用户ID */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'>ID</Text>
<Text className='text-sm text-gray-600'>{displayId || '未设置'}</Text>
</View>
{/* 注册时间 */} {/* 注册时间 */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'> <View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'></Text> <Text className='text-sm text-gray-700 w-20'></Text>
<Text className='text-sm text-gray-600'>{registerTime || '未知'}</Text> <Text className='text-sm text-gray-600'>{registerTime || '未知'}</Text>
</View> </View>
{/* 门店名称 */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'></Text>
<Input
className='flex-1 text-right text-sm text-gray-600'
placeholder='请输入门店名称'
value={(form as any)?.merchantName || ''}
onInput={(e: any) => setForm(prev => ({ ...prev, merchantName: e.detail.value }))}
maxlength={50}
/>
</View>
{/* 门店地址 */}
<View className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'>
<Text className='text-sm text-gray-700 w-20'></Text>
<Input
className='flex-1 text-right text-sm text-gray-600'
placeholder='请输入门店地址'
value={(form as any)?.address || ''}
onInput={(e: any) => setForm(prev => ({ ...prev, address: e.detail.value }))}
maxlength={100}
/>
</View>
{/* 保存按钮 */} {/* 保存按钮 */}
<BottomButton <BottomButton
text='保存' text='保存'
@@ -199,7 +175,8 @@ const ProfilePage: React.FC = () => {
{/* 性别选择弹窗 */} {/* 性别选择弹窗 */}
{showGenderSheet && ( {showGenderSheet && (
<View className='fixed inset-0 z-50'> <View className='fixed inset-0 z-50'>
<View className='absolute inset-0 bg-black bg-opacity-50' onClick={() => setShowGenderSheet(false)} /> <View className='absolute inset-0 bg-black bg-opacity-50'
onClick={() => setShowGenderSheet(false)}/>
<View className='absolute bottom-0 left-0 right-0 bg-white rounded-t-xl'> <View className='absolute bottom-0 left-0 right-0 bg-white rounded-t-xl'>
<View className='px-4 py-3 border-b border-gray-50'> <View className='px-4 py-3 border-b border-gray-50'>
<Text className='text-base font-medium text-gray-800'></Text> <Text className='text-base font-medium text-gray-800'></Text>
@@ -210,7 +187,8 @@ const ProfilePage: React.FC = () => {
className='px-4 py-3 border-b border-gray-50 flex items-center justify-between' className='px-4 py-3 border-b border-gray-50 flex items-center justify-between'
onClick={() => handleGenderSelect(index)} onClick={() => handleGenderSelect(index)}
> >
<Text className={`text-sm ${(form.gender ?? 0) === index ? 'text-green-600 font-medium' : 'text-gray-700'}`}> <Text
className={`text-sm ${(form.gender ?? 0) === index ? 'text-green-600 font-medium' : 'text-gray-700'}`}>
{label} {label}
</Text> </Text>
{(form.gender ?? 0) === index && <Text className='text-green-600'></Text>} {(form.gender ?? 0) === index && <Text className='text-green-600'></Text>}