refactor(user-profile): 调整个人信息页面布局优化结构
- 调整用户ID位置至头像之上以强化信息层次 - 统一并优化代码格式排版,提升代码可读性 - 合并重复的用户ID展示,避免冗余 - 保持功能一致,未改动交互逻辑 - 优化注释及空白行,代码风格更规范
This commit is contained in:
@@ -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>}
|
||||||
|
|||||||
Reference in New Issue
Block a user