feat(user): 更新用户卡片组件以支持微信手机号登录
- 引入 Button 组件用于触发微信获取手机号功能 - 根据登录状态显示不同的用户头像和信息区域 - 为未登录用户提供点击登录入口并绑定手机号 - 登录后展示用户头像、昵称及角色标签 - 优化用户卡片界面布局与交互逻辑
This commit is contained in:
@@ -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 {getUserInfo, getWxOpenId} from '@/api/layout';
|
||||
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'}
|
||||
>
|
||||
<View className={'user-card-header flex w-full justify-between items-center pt-4'}>
|
||||
<View className={'flex items-center mx-4'} onClick={handleGetPhoneNumber}>
|
||||
<Avatar size="large"
|
||||
<View className={'flex items-center mx-4'}>
|
||||
{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 || ''}
|
||||
shape="round"/>
|
||||
<View className={'user-info flex flex-col px-2'}>
|
||||
<View className={'py-1 text-white font-bold'}>{getDisplayName()}</View>
|
||||
{IsLogin ? (
|
||||
<View className={'grade text-xs py-1'}>
|
||||
<Tag type="success" round>
|
||||
<Text className={'p-1'}>
|
||||
{getRoleName()}
|
||||
</Text>
|
||||
</Tag>
|
||||
/>
|
||||
<View className={'flex flex-col'}>
|
||||
<Text style={{color: '#ffffff'}}>{getDisplayName() || '点击登录'}</Text>
|
||||
<View><Tag type="success">{getRoleName()}</Tag></View>
|
||||
</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>
|
||||
<Space style={{
|
||||
marginTop: '30px',
|
||||
|
||||
Reference in New Issue
Block a user