feat: pro卡片
This commit is contained in:
parent
a188ea9d7d
commit
fa4092302b
2
.env
2
.env
@ -1 +1 @@
|
||||
API_ENDPOINT=http://192.168.31.115:18080/api
|
||||
API_ENDPOINT=http://192.168.31.16:31646/api
|
||||
@ -1,20 +1,19 @@
|
||||
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 CarouselComponent from '@/components/owner/carousel';
|
||||
import CreateCountComponent from '@/components/owner/createCount';
|
||||
import Ranking from '@/components/owner/ranking';
|
||||
import MemberCard from '@/components/owner/rights/memberCard';
|
||||
import SettingModal from '@/components/owner/setting';
|
||||
import UserInfo from '@/components/owner/userName';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { checkAuthStatus } from '@/lib/auth';
|
||||
import { fetchApi } from '@/lib/server-api-util';
|
||||
import { CountData, UserInfoDetails } from '@/types/user';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native';
|
||||
import { FlatList, StyleSheet, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
export default function OwnerPage() {
|
||||
@ -82,7 +81,7 @@ export default function OwnerPage() {
|
||||
<UserInfo userInfo={userInfoDetails} />
|
||||
|
||||
{/* 资源数据 */}
|
||||
<TouchableOpacity
|
||||
{/* <TouchableOpacity
|
||||
onPress={() => router.push({
|
||||
pathname: '/rights',
|
||||
params: { credit: userInfoDetails?.remain_points, pro: userInfoDetails?.membership_level }
|
||||
@ -94,7 +93,9 @@ export default function OwnerPage() {
|
||||
<ThemedText style={styles.secondText}>{t("generalSetting.unlock", { ns: "personal" })}</ThemedText>
|
||||
</View>
|
||||
<ComeinSvg width={24} height={24} />
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity> */}
|
||||
<MemberCard />
|
||||
|
||||
{/* 分类 */}
|
||||
<View style={{ marginHorizontal: -16, marginBottom: -16 }}>
|
||||
<CarouselComponent data={userInfoDetails?.material_counter} />
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 5.3 KiB |
9
assets/icons/svg/proText.svg
Normal file
9
assets/icons/svg/proText.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="55" height="33" viewBox="0 0 55 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.8516 13.3662C16.6758 17.9189 12.998 20.2021 6.81836 20.2158L5.52637 31.8438C5.48535 32.1719 5.31445 32.3428 5.01367 32.3564L0.707031 32.582C0.40625 32.5547 0.255859 32.4248 0.255859 32.1924L3.80371 1.16406C3.8584 0.876953 4.03613 0.719727 4.33691 0.692383C6.89355 0.459961 9.33398 0.34375 11.6582 0.34375C16.2793 0.34375 18.5898 2.55859 18.5898 6.98828C18.5898 9.4082 18.3438 11.5342 17.8516 13.3662ZM8.5 5.12207L7.33105 15.4785C9.69629 15.4785 11.2891 14.9863 12.1094 14.002C12.9297 13.0176 13.3398 11.1035 13.3398 8.25977C13.3398 7.16602 13.0459 6.35937 12.458 5.83984C11.8701 5.32031 11.1182 5.06055 10.2021 5.06055C9.28613 5.06055 8.71875 5.08105 8.5 5.12207ZM34.9756 12.9355L32.7812 12.71C31.0039 12.71 29.5137 13.0654 28.3105 13.7764L26.2803 31.8643C26.2256 32.2061 26.0547 32.3906 25.7676 32.418L21.625 32.582C21.3242 32.5547 21.1738 32.4248 21.1738 32.1924L23.8809 8.3418C23.9355 8.04102 24.1064 7.87695 24.3936 7.84961L28.3926 7.70605C28.7617 7.71973 28.9463 7.89746 28.9463 8.23926L28.7002 10.3516C29.5752 9.46289 30.4229 8.77246 31.2432 8.28027C32.0635 7.77441 32.8838 7.52148 33.7041 7.52148C34.5381 7.52148 35.1738 7.55566 35.6113 7.62402C35.8984 7.67871 36.042 7.87012 36.042 8.19824C36.042 9.1416 35.8848 10.543 35.5703 12.4023C35.502 12.7578 35.3037 12.9355 34.9756 12.9355ZM44.9834 32.7256C42.5635 32.7256 40.7861 32.001 39.6514 30.5518C38.5303 29.0889 37.9697 26.9629 37.9697 24.1738C37.9697 22.875 38.1133 21.1797 38.4004 19.0879C38.6875 16.9961 38.9541 15.4785 39.2002 14.5352C39.4463 13.5781 39.7949 12.6484 40.2461 11.7461C40.6973 10.8301 41.2305 10.0781 41.8457 9.49023C43.1992 8.17773 45.0312 7.52148 47.3418 7.52148C50.623 7.52148 52.749 8.72461 53.7197 11.1309C54.2393 12.416 54.499 13.9746 54.499 15.8066C54.499 17.625 54.3555 19.5117 54.0684 21.4668C53.7949 23.4219 53.5352 24.8711 53.2891 25.8145C53.043 26.7441 52.6943 27.6602 52.2432 28.5625C51.8057 29.4512 51.2793 30.1895 50.6641 30.7773C49.3105 32.0762 47.417 32.7256 44.9834 32.7256ZM48.6133 23.7432C48.7637 23.0186 48.9551 21.665 49.1875 19.6826C49.4336 17.6865 49.5566 16.21 49.5566 15.2529C49.5566 12.9287 48.7158 11.7666 47.0342 11.7666C46.2412 11.7666 45.585 12.1426 45.0654 12.8945C44.5596 13.6465 44.1494 14.8975 43.835 16.6475C43.2061 20.2021 42.8916 23.0869 42.8916 25.3018C42.8916 27.5166 43.7256 28.624 45.3936 28.624C46.1865 28.624 46.8428 28.248 47.3623 27.4961C47.8955 26.7305 48.3125 25.4795 48.6133 23.7432Z" fill="url(#paint0_linear_3450_1414)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3450_1414" x1="-2" y1="0.5" x2="78.7168" y2="57.8104" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#FFE064"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
3
assets/icons/svg/righttopDate.svg
Normal file
3
assets/icons/svg/righttopDate.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="84" height="74" viewBox="0 0 84 74" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.494629 0.839844H27.8592L83.1408 49.3921V73.2953L0.494629 0.839844Z" fill="#FFC56A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 220 B |
139
components/owner/rights/memberCard.tsx
Normal file
139
components/owner/rights/memberCard.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import ProTextSvg from '@/assets/icons/svg/proText.svg';
|
||||
import RightTopDateSvg from '@/assets/icons/svg/righttopDate.svg';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
const MemberCard = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.textContainer}>
|
||||
<ProTextSvg />
|
||||
<ThemedText style={styles.subtitle}>{t("personal:generalSetting.unlock")}</ThemedText>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
|
||||
<View style={styles.characterContainer}>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.decorativeElements}>
|
||||
<View style={styles.righttopData}>
|
||||
<RightTopDateSvg width={"150%"} height={74} />
|
||||
<ThemedText style={styles.date}>2025-09-25截止</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
date: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: '#4C320C',
|
||||
padding: 4,
|
||||
transform: [{ rotate: '40deg' }],
|
||||
position: 'absolute',
|
||||
top: 20,
|
||||
right: -38,
|
||||
},
|
||||
container: {
|
||||
borderRadius: 32,
|
||||
height: 140,
|
||||
},
|
||||
card: {
|
||||
flex: 1,
|
||||
backgroundColor: '#4C320C',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
textContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 42,
|
||||
fontWeight: 'bold',
|
||||
width: '100%',
|
||||
textAlign: 'center'
|
||||
},
|
||||
subtitle: {
|
||||
color: '#FFE4A8',
|
||||
fontSize: 14,
|
||||
marginBottom: 12,
|
||||
},
|
||||
benefitsContainer: {
|
||||
marginTop: 8,
|
||||
},
|
||||
benefit: {
|
||||
color: '#FFF8DE',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
decorativeElements: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
topRightData: {
|
||||
position: 'absolute',
|
||||
top: -4,
|
||||
right: 16,
|
||||
zIndex: 0,
|
||||
},
|
||||
topRightData2: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
right: -16,
|
||||
zIndex: 0,
|
||||
},
|
||||
righttopData: {
|
||||
position: 'absolute',
|
||||
top: -6,
|
||||
right: 20,
|
||||
zIndex: 0,
|
||||
},
|
||||
line: {
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
height: 4,
|
||||
},
|
||||
characterContainer: {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: 360,
|
||||
height: 140,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
gradient: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
transparentText: {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export default MemberCard;
|
||||
@ -87,7 +87,8 @@
|
||||
"premium": "升级至会员",
|
||||
"unlock": "解锁更多记忆魔法",
|
||||
"delete": "确定要注销账号吗?",
|
||||
"cancel": "取消"
|
||||
"cancel": "取消",
|
||||
"pro": "Pro"
|
||||
},
|
||||
"rights": {
|
||||
"title": "权益",
|
||||
|
||||
@ -25,7 +25,7 @@ export interface PagedResult<T> {
|
||||
// 获取.env文件中的变量
|
||||
|
||||
|
||||
export const API_ENDPOINT = Constants.expoConfig?.extra?.API_ENDPOINT || "http://192.168.31.115:18080/api";
|
||||
export const API_ENDPOINT = Constants.expoConfig?.extra?.API_ENDPOINT || "http://192.168.31.16:31646/api";
|
||||
|
||||
// 更新 access_token 的逻辑 - 用于React组件中
|
||||
export const useAuthToken = async<T>(message: string | null) => {
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^14.1.0",
|
||||
"@react-native-masked-view/masked-view": "0.3.2",
|
||||
"@react-navigation/bottom-tabs": "^7.3.10",
|
||||
"@react-navigation/elements": "^2.3.8",
|
||||
"@react-navigation/native": "^7.1.6",
|
||||
@ -3792,6 +3793,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-masked-view/masked-view": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.3.2.tgz",
|
||||
"integrity": "sha512-XwuQoW7/GEgWRMovOQtX3A4PrXhyaZm0lVUiY8qJDvdngjLms9Cpdck6SmGAUNqQwcj2EadHC1HwL0bEyoa/SQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": ">=16",
|
||||
"react-native": ">=0.57"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-picker/picker": {
|
||||
"version": "2.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.1.tgz",
|
||||
|
||||
@ -81,7 +81,8 @@
|
||||
"react-native-view-shot": "4.0.3",
|
||||
"react-native-web": "~0.20.0",
|
||||
"react-native-webview": "13.13.5",
|
||||
"react-redux": "^9.2.0"
|
||||
"react-redux": "^9.2.0",
|
||||
"@react-native-masked-view/masked-view": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user