feat(user): 更新用户卡片组件以支持微信手机号登录

- 引入 Button 组件用于触发微信获取手机号功能
- 根据登录状态显示不同的用户头像和信息区域
- 为未登录用户提供点击登录入口并绑定手机号
- 登录后展示用户头像、昵称及角色标签
- 优化用户卡片界面布局与交互逻辑
This commit is contained in:
2025-11-21 13:38:48 +08:00
parent 1d73521e17
commit 078b422db0

View File

@@ -1,4 +1,4 @@
import {Avatar, Tag, Space} from '@nutui/nutui-react-taro' import {Avatar, Tag, Space, Button} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components' import {View, Text} from '@tarojs/components'
import {getUserInfo, getWxOpenId} from '@/api/layout'; import {getUserInfo, getWxOpenId} from '@/api/layout';
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
@@ -179,22 +179,35 @@ const UserCard = forwardRef<any, any>((_, ref) => {
className={'user-card w-full flex flex-col justify-around rounded-xl'} className={'user-card w-full flex flex-col justify-around rounded-xl'}
> >
<View className={'user-card-header flex w-full justify-between items-center pt-4'}> <View className={'user-card-header flex w-full justify-between items-center pt-4'}>
<View className={'flex items-center mx-4'} onClick={handleGetPhoneNumber}> <View className={'flex items-center mx-4'}>
<Avatar size="large" {IsLogin && (
<View style={{color: '#ffffff', height: 'auto'}} onClick={() => navTo(`/user/profile/profile`)}>
<View className={'flex items-center gap-2'}>
<Avatar
size={'large'}
src={userInfo?.avatar || ''} src={userInfo?.avatar || ''}
shape="round"/> />
<View className={'user-info flex flex-col px-2'}> <View className={'flex flex-col'}>
<View className={'py-1 text-white font-bold'}>{getDisplayName()}</View> <Text style={{color: '#ffffff'}}>{getDisplayName() || '点击登录'}</Text>
{IsLogin ? ( <View><Tag type="success">{getRoleName()}</Tag></View>
<View className={'grade text-xs py-1'}> </View>
<Tag type="success" round>
<Text className={'p-1'}>
{getRoleName()}
</Text>
</Tag>
</View> </View>
) : ''} </View>
</View> )}
{!IsLogin && (
<Button style={{color: '#ffffff', height: 'auto'}} open-type="getPhoneNumber"
onGetPhoneNumber={handleGetPhoneNumber}>
<View className={'flex items-center gap-2'}>
<Avatar
size={'large'}
src={userInfo?.avatar || ''}
/>
<View className={'flex flex-col'}>
<Text style={{color: '#ffffff'}}>{getDisplayName() || '点击登录'}</Text>
</View>
</View>
</Button>
)}
</View> </View>
<Space style={{ <Space style={{
marginTop: '30px', marginTop: '30px',