forked from gxwebsoft/mp-10550
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 {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',
|
||||||
|
|||||||
Reference in New Issue
Block a user