feat: 个人中心 userinfo

This commit is contained in:
jinyaqiu 2025-07-31 15:14:50 +08:00
parent c51168ec56
commit a188ea9d7d
9 changed files with 158 additions and 13 deletions

View File

@ -2,7 +2,6 @@ import ComeinSvg from '@/assets/icons/svg/comein.svg';
import ConversationsSvg from '@/assets/icons/svg/conversations.svg';
import StoriesSvg from '@/assets/icons/svg/stories.svg';
import AskNavbar from '@/components/layout/ask';
import AlbumComponent from '@/components/owner/album';
import CarouselComponent from '@/components/owner/carousel';
import CreateCountComponent from '@/components/owner/createCount';
import Ranking from '@/components/owner/ranking';
@ -82,9 +81,6 @@ export default function OwnerPage() {
{/* 用户信息 */}
<UserInfo userInfo={userInfoDetails} />
{/* 设置栏 */}
<AlbumComponent setModalVisible={setModalVisible} />
{/* 资源数据 */}
<TouchableOpacity
onPress={() => router.push({

View File

@ -257,7 +257,7 @@ export default function Rights() {
{/* 支付方式 */}
{/* <PayTypeModal setConfirmPay={setConfirmPay} modalVisible={showPayType} setModalVisible={setShowPayType} payChoice={payChoice} setPayChoice={setPayChoice} /> */}
{/* 会员权益信息 */}
<View style={{ flex: 1, marginBottom: 80 }}>
<View style={{ flex: 1, marginBottom: 120 }}>
<ProRights style={{ display: userType === 'normal' ? "none" : "flex" }} />
</View>
</ScrollView>

42
assets/icons/svg/free.svg Normal file
View File

@ -0,0 +1,42 @@
<svg width="268" height="140" viewBox="0 0 268 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49.5755 61.4144C50.4475 58.5036 57.1744 61.1692 60.4288 62.8658L52.5625 66.8182C50.6468 66.7604 48.7034 64.3251 49.5755 61.4144Z" fill="#FFDBA3"/>
<path d="M51.0981 61.8437C51.5796 59.3845 56.005 61.8494 58.1575 63.3893L54.2174 65.2282C52.977 65.1247 50.6165 64.3029 51.0981 61.8437Z" fill="#AC7E35"/>
<path d="M133.568 60.0186C132.303 57.2559 126.008 60.8237 123.019 62.9529L131.355 65.7827C133.244 65.4612 134.833 62.7813 133.568 60.0186Z" fill="#FFDBA3"/>
<path d="M132.118 60.6536C131.302 58.2843 127.259 61.3359 125.339 63.1579L129.495 64.436C130.709 64.1624 132.934 63.0229 132.118 60.6536Z" fill="#AC7E35"/>
<path d="M27.1969 92.9743C56.4427 42.319 129.557 42.3191 158.803 92.9744L178.751 127.526C207.997 178.181 171.44 241.5 112.948 241.5H73.0518C14.5601 241.5 -21.9971 178.181 7.24869 127.526L27.1969 92.9743Z" fill="#FFD18A"/>
<rect x="88.5132" y="89.6838" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 88.5132 89.6838)" fill="#4C320C"/>
<rect x="99.2822" y="89.6838" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 99.2822 89.6838)" fill="#4C320C"/>
<path d="M50.1157 120.318C70.7994 90.2494 115.202 90.2493 135.886 120.318L159.443 154.565C183.198 189.1 158.474 236.115 116.558 236.115H69.4435C27.5268 236.115 2.8027 189.1 26.5585 154.565L50.1157 120.318Z" fill="#FFF8DE"/>
<g filter="url(#filter0_i_3223_1552)">
<ellipse cx="134.581" cy="115.111" rx="49.0598" ry="35" fill="#FFF8DE"/>
</g>
<g filter="url(#filter1_i_3223_1552)">
<ellipse cx="51.1196" cy="115.111" rx="48.7607" ry="35" fill="#FFF8DE"/>
</g>
<ellipse cx="92.7008" cy="97.7608" rx="3.58974" ry="2.69231" transform="rotate(180 92.7008 97.7608)" fill="#FFB8B9"/>
<ellipse cx="8.5474" cy="3.40976" rx="8.5474" ry="3.40976" transform="matrix(1 0 0 -1 108.647 142)" fill="#FFD38D"/>
<ellipse cx="65.5473" cy="138.59" rx="8.5474" ry="3.40976" transform="rotate(-180 65.5473 138.59)" fill="#FFD38D"/>
<path d="M91.9591 101.026C92.2223 100.57 92.8803 100.57 93.1434 101.026L93.7356 102.051C93.9988 102.507 93.6698 103.077 93.1434 103.077H91.9591C91.4328 103.077 91.1038 102.507 91.367 102.051L91.9591 101.026Z" fill="#4C320C"/>
<defs>
<filter id="filter0_i_3223_1552" x="80.1369" y="80.1111" width="103.504" height="71.7949" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-5.38462" dy="1.79487"/>
<feGaussianBlur stdDeviation="4.9359"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1552"/>
</filter>
<filter id="filter1_i_3223_1552" x="2.35889" y="80.1111" width="103.504" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5.98291"/>
<feGaussianBlur stdDeviation="3.2906"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1552"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1,3 @@
<svg width="372" height="99" viewBox="0 0 372 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.24" d="M1 64.0308C1.66058 45.3464 16.3302 4.9993 68.3782 3.55844C116.841 2.21683 170.195 28.5409 173.692 30.0733C186.432 35.6553 254.376 68.2174 310.713 53.5645C355.783 41.8421 366.107 13.6372 365.635 1M1 74.2378C31.3602 70.1419 111.645 66.1345 189.904 82.8724C268.164 99.6103 343.243 99.1454 371 96.8207" stroke="white" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 464 B

62
assets/icons/svg/pro.svg Normal file
View File

@ -0,0 +1,62 @@
<svg width="365" height="140" viewBox="0 0 365 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_3223_1170" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="365" height="140">
<rect width="365" height="140" rx="26" fill="#4C320C"/>
</mask>
<g mask="url(#mask0_3223_1170)">
<g filter="url(#filter0_i_3223_1170)">
<path d="M61.4295 56.6599C60.8472 52.3476 66.5965 50.3378 68.8277 54.0737L71.3125 58.2342C73.0132 61.082 77.2417 60.7415 78.4648 57.6582L88.4108 32.5851C89.7463 29.2183 94.5115 29.2183 95.8471 32.5851L105.793 57.6582C107.016 60.7415 111.245 61.082 112.945 58.2342L115.43 54.0737C117.661 50.3378 123.411 52.3476 122.828 56.6599L120.386 74.7507C120.118 76.735 118.424 78.2155 116.422 78.2155H67.8363C65.8341 78.2155 64.1402 76.735 63.8723 74.7507L61.4295 56.6599Z" fill="#FFE88A"/>
</g>
<circle cx="59.1272" cy="39.4803" r="9.12722" fill="#FFB645" stroke="#4C320C" stroke-width="4"/>
<circle cx="92.2844" cy="22.1272" r="9.12722" fill="#E2793F" stroke="#4C320C" stroke-width="4"/>
<circle cx="125.441" cy="39.4803" r="9.12722" fill="#FFB645" stroke="#4C320C" stroke-width="4"/>
<path d="M49.5755 72.4144C50.4475 69.5036 57.1744 72.1692 60.4288 73.8658L52.5625 77.8182C50.6468 77.7604 48.7034 75.3251 49.5755 72.4144Z" fill="#FFDBA3"/>
<path d="M51.0981 72.8437C51.5796 70.3845 56.005 72.8494 58.1575 74.3893L54.2174 76.2282C52.977 76.1247 50.6165 75.3029 51.0981 72.8437Z" fill="#AC7E35"/>
<path d="M133.568 71.0186C132.303 68.2559 126.008 71.8237 123.019 73.9529L131.355 76.7827C133.244 76.4612 134.833 73.7813 133.568 71.0186Z" fill="#FFDBA3"/>
<path d="M132.118 71.6536C131.302 69.2843 127.259 72.3359 125.339 74.1579L129.495 75.436C130.709 75.1624 132.934 74.0229 132.118 71.6536Z" fill="#AC7E35"/>
<path d="M27.1969 103.974C56.4427 53.319 129.557 53.3191 158.803 103.974L178.751 138.526C207.997 189.181 171.44 252.5 112.948 252.5H73.0518C14.5601 252.5 -21.9971 189.181 7.24869 138.526L27.1969 103.974Z" fill="#FFD18A"/>
<rect x="88.5132" y="100.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 88.5132 100.684)" fill="#4C320C"/>
<rect x="99.2822" y="100.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 99.2822 100.684)" fill="#4C320C"/>
<path d="M50.1157 131.318C70.7994 101.249 115.202 101.249 135.886 131.318L159.443 165.565C183.198 200.1 158.474 247.115 116.558 247.115H69.4435C27.5268 247.115 2.8027 200.1 26.5585 165.565L50.1157 131.318Z" fill="#FFF8DE"/>
<g filter="url(#filter1_i_3223_1170)">
<ellipse cx="134.581" cy="126.111" rx="49.0598" ry="35" fill="#FFF8DE"/>
</g>
<g filter="url(#filter2_i_3223_1170)">
<ellipse cx="51.1196" cy="126.111" rx="48.7607" ry="35" fill="#FFF8DE"/>
</g>
<ellipse cx="92.7008" cy="108.761" rx="3.58974" ry="2.69231" transform="rotate(180 92.7008 108.761)" fill="#FFB8B9"/>
<ellipse cx="8.5474" cy="3.40976" rx="8.5474" ry="3.40976" transform="matrix(1 0 0 -1 108.647 143)" fill="#FFD38D"/>
<ellipse cx="65.5473" cy="139.59" rx="8.5474" ry="3.40976" transform="rotate(-180 65.5473 139.59)" fill="#FFD38D"/>
<path d="M91.9591 112.026C92.2223 111.57 92.8803 111.57 93.1434 112.026L93.7356 113.051C93.9988 113.507 93.6698 114.077 93.1434 114.077H91.9591C91.4328 114.077 91.1038 113.507 91.367 113.051L91.9591 112.026Z" fill="#4C320C"/>
</g>
<defs>
<filter id="filter0_i_3223_1170" x="61.3882" y="30.0601" width="61.4814" height="48.1555" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="21"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170"/>
</filter>
<filter id="filter1_i_3223_1170" x="80.1369" y="91.1111" width="103.504" height="71.7949" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-5.38462" dy="1.79487"/>
<feGaussianBlur stdDeviation="4.9359"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170"/>
</filter>
<filter id="filter2_i_3223_1170" x="2.35889" y="91.1111" width="103.504" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5.98291"/>
<feGaussianBlur stdDeviation="3.2906"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3223_1170"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,3 @@
<svg width="37" height="13" viewBox="0 0 37 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.34883 9.46698L8.52856 0.90332H36.021L27.3371 7.27851L0.132812 12.0518L2.34883 9.46698Z" fill="#E0A241"/>
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next';
import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
import { ThemedText } from "../ThemedText";
interface CategoryProps {
setModalVisible: (visible: boolean) => void;
style?: StyleProp<ViewStyle>;
}
const AlbumComponent = ({ setModalVisible, style }: CategoryProps) => {
const AlbumComponent = ({ style }: CategoryProps) => {
const { t } = useTranslation();
const router = useRouter();
return (
<View style={[styles.container, style]}>
<TouchableOpacity style={{ flex: 3 }}>
@ -21,7 +21,6 @@ const AlbumComponent = ({ setModalVisible, style }: CategoryProps) => {
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
// setModalVisible(true);
router.push('/setting');
}}
activeOpacity={0.7}

View File

@ -58,7 +58,6 @@ const styles = StyleSheet.create({
normalInfo: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 16
},
normalItem: {

View File

@ -1,13 +1,18 @@
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, ScrollView, View } from 'react-native';
import { Image, ScrollView, 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 className='flex flex-row justify-between items-center mt-[1rem] gap-[1rem] w-full'>
{/* 头像 */}
@ -55,15 +60,39 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
))
}
</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 className='flex flex-row items-center justify-between w-full'>
<View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 2, maxWidth: '80%' }}>
<ThemedText
style={{
color: '#AC7E35',
fontSize: 12,
fontWeight: '600',
flexShrink: 1,
flexGrow: 0,
}}
numberOfLines={1}
ellipsizeMode="tail"
>
User ID{userInfo?.user_info?.user_id}
</ThemedText>
<CopyButton textToCopy={userInfo?.user_info?.user_id || ""} />
</View>
<TouchableOpacity
onPress={() => {
router.push('/setting');
}}
activeOpacity={0.7}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
style={[styles.text, { flex: 1, alignItems: "center", paddingVertical: 6, zIndex: 999 }]}>
<SettingSvg />
</TouchableOpacity>
</View>
</View>
@ -71,3 +100,15 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
);
}
const styles = StyleSheet.create({
text: {
fontSize: 12,
fontWeight: '700',
color: '#AC7E35',
borderColor: '#FFD18A',
borderWidth: 1,
borderRadius: 20,
padding: 4,
textAlign: "center",
}
});