74 lines
3.5 KiB
TypeScript
74 lines
3.5 KiB
TypeScript
import UserSvg from '@/assets/icons/svg/ataver.svg';
|
||
import StarSvg from '@/assets/icons/svg/star.svg';
|
||
import { ThemedText } from '@/components/ThemedText';
|
||
import { UserInfoDetails } from '@/types/user';
|
||
import { useState } from 'react';
|
||
import { Image, ScrollView, View } from 'react-native';
|
||
import CopyButton from '../copy';
|
||
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
|
||
// 添加状态来跟踪图片加载状态
|
||
const [imageError, setImageError] = useState(false);
|
||
return (
|
||
<View className='flex flex-row justify-between items-center mt-[1rem] gap-[1rem] w-full'>
|
||
{/* 头像 */}
|
||
<View className='w-auto'>
|
||
{userInfo?.user_info?.avatar_file_url && !imageError ? (
|
||
<Image
|
||
source={{ uri: userInfo.user_info.avatar_file_url }}
|
||
style={{ width: 70, height: 70, borderRadius: 40 }}
|
||
onError={() => {
|
||
setImageError(true);
|
||
}}
|
||
/>
|
||
) : (
|
||
<UserSvg width={70} height={70} />
|
||
)}
|
||
</View>
|
||
{/* 用户名 */}
|
||
<View className='flex flex-col w-[75%] gap-1'>
|
||
<View className='flex flex-row items-center justify-between w-full'>
|
||
<View className='flex flex-row items-center gap-2 w-full'>
|
||
<ThemedText
|
||
className='max-w-[80%] !text-textSecondary !font-semibold !text-2xl'
|
||
numberOfLines={1} // 限制为1行
|
||
ellipsizeMode="tail"
|
||
>
|
||
{userInfo?.user_info?.nickname}
|
||
</ThemedText>
|
||
<ScrollView
|
||
className='max-w-[20%]'
|
||
horizontal // 水平滚动
|
||
showsHorizontalScrollIndicator={false} // 隐藏滚动条
|
||
contentContainerStyle={{
|
||
flexDirection: 'row',
|
||
gap: 8, // 间距，
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
{
|
||
userInfo?.medal_infos?.map((item, index) => (
|
||
<Image
|
||
key={index}
|
||
source={{ uri: item.url }}
|
||
style={{ width: 24, height: 24 }}
|
||
/>
|
||
))
|
||
}
|
||
</ScrollView>
|
||
<View className='flex flex-row items-center gap-2 border border-bgPrimary px-2 py-1 rounded-full'>
|
||
<StarSvg />
|
||
<ThemedText style={{ color: 'bgPrimary', fontSize: 14, fontWeight: '700' }}>{userInfo?.remain_points}</ThemedText>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={{ display: "flex", flexDirection: "row", gap: 2, alignItems: "center" }}>
|
||
<ThemedText style={{ color: '#AC7E35', fontSize: 12, fontWeight: '600' }}>User ID：{userInfo?.user_info?.user_id}</ThemedText>
|
||
<CopyButton textToCopy={userInfo?.user_info?.user_id || ""} />
|
||
</View>
|
||
</View>
|
||
|
||
</View >
|
||
);
|
||
}
|
||
|