141 lines
5.5 KiB
TypeScript
141 lines
5.5 KiB
TypeScript
import UserSvg from '@/assets/icons/svg/ataver.svg';
|
||
import SettingSvg from '@/assets/icons/svg/setting.svg';
|
||
import StarSvg from '@/assets/icons/svg/star.svg';
|
||
import { ThemedText } from '@/components/ThemedText';
|
||
import { UserInfoDetails } from '@/types/user';
|
||
import { useRouter } from 'expo-router';
|
||
import { useState } from 'react';
|
||
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
|
||
import CopyButton from '../copy';
|
||
|
||
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
|
||
// 添加状态来跟踪图片加载状态
|
||
const [imageError, setImageError] = useState(false);
|
||
const router = useRouter();
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
{/* 头像 */}
|
||
<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-[60%]'>
|
||
<View className='flex flex-row items-center justify-between w-full'>
|
||
<View className='flex flex-row items-center gap-2 w-full justify-between'>
|
||
<View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
|
||
<ThemedText
|
||
style={{ maxWidth: "90%", lineHeight: 30 }}
|
||
weight='bold'
|
||
color='textSecondary'
|
||
size='3xl'
|
||
numberOfLines={1}
|
||
ellipsizeMode="tail"
|
||
|
||
>
|
||
{userInfo?.user_info?.nickname}
|
||
</ThemedText>
|
||
{
|
||
userInfo?.membership_level && (
|
||
<Image
|
||
source={require('@/assets/images/png/owner/proIcon.png')}
|
||
style={{ width: 24, height: 24 }}
|
||
/>
|
||
)
|
||
}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className='flex flex-row items-center justify-between w-full'>
|
||
<View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 2, maxWidth: '100%' }}>
|
||
<ThemedText
|
||
style={{
|
||
color: '#AC7E35',
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
flexShrink: 1,
|
||
flexGrow: 0,
|
||
}}
|
||
type="inter"
|
||
numberOfLines={1}
|
||
ellipsizeMode="tail"
|
||
>
|
||
User ID：{userInfo?.user_info?.user_id}
|
||
</ThemedText>
|
||
<CopyButton textToCopy={userInfo?.user_info?.user_id || ""} />
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={{ flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
|
||
<View style={{
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
borderWidth: 1,
|
||
borderColor: '#FFB645',
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 16,
|
||
}}>
|
||
<StarSvg />
|
||
<ThemedText
|
||
style={{
|
||
color: '#4C320C',
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
maxWidth: 40,
|
||
lineHeight: 20
|
||
}}
|
||
type="inter"
|
||
numberOfLines={1}
|
||
ellipsizeMode="tail"
|
||
>
|
||
{userInfo?.remain_points}
|
||
</ThemedText>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
router.push('/setting');
|
||
}}
|
||
activeOpacity={0.7}
|
||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||
style={styles.text}
|
||
>
|
||
<SettingSvg />
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View >
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flexDirection: "row",
|
||
alignItems: "flex-end",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
},
|
||
text: {
|
||
fontSize: 12,
|
||
fontWeight: '700',
|
||
color: '#AC7E35',
|
||
borderColor: '#FFD18A',
|
||
borderWidth: 1,
|
||
borderRadius: 20,
|
||
padding: 4,
|
||
textAlign: "center",
|
||
alignItems: "center",
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 12
|
||
}
|
||
}); |