FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: card

Browse Source
This commit is contained in:
jinyaqiu 2025-08-05 18:09:23 +08:00
parent 5fa25e225f
commit 3a96ba6d91
4 changed files with 203 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/icons/svg/cardBg.svg Normal file
View File

@ -0,0 +1,25 @@
<svg width="376" height="169" viewBox="0 0 376 169" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M286.349 53.467L292.529 44.9033H320.021L311.337 51.2785L284.133 56.0518L286.349 53.467Z" fill="#E0A241" />
<path d="M367.546 122.188L363.914 116.368C363.798 116.183 363.714 115.98 363.664 115.768L362.749 111.887C362.722 111.77 362.684 111.657 362.636 111.547L362.079 110.266C361.211 108.273 363.698 106.522 365.282 108.01L375.138 117.274L370.767 122.424C369.891 123.457 368.263 123.338 367.546 122.188Z" fill="#E0A241" />
<rect x="1.17188" y="48.8311" width="370" height="120" rx="34" fill="#4C320C" />
<path opacity="0.24" d="M1 118.031C1.66058 99.3464 16.3302 58.9993 68.3782 57.5584C116.841 56.2168 170.195 82.5409 173.692 84.0733C186.432 89.6553 254.376 122.217 310.713 107.564C355.783 95.8421 366.107 67.6372 365.635 55M1 128.238C31.3602 124.142 111.645 120.135 189.904 136.872C268.164 153.61 343.243 153.145 371 150.821" stroke="white" stroke-width="1.5" />
<path d="M175.398 56.0518C175.398 56.0518 175.916 62.7711 177.936 64.7908C179.956 66.8105 184.795 67.329 184.795 67.329C184.795 67.329 179.956 67.8475 177.936 69.8672C175.916 71.8869 175.398 74.8472 175.398 74.8472C175.398 74.8472 174.879 71.8869 172.859 69.8672C170.84 67.8475 166 67.329 166 67.329C166 67.329 170.84 66.8105 172.859 64.7908C174.879 62.7711 175.398 56.0518 175.398 56.0518Z" fill="#FFB645" />
<path d="M149.929 54.0527C149.929 54.0527 150.816 65.5433 154.27 68.9971C157.724 72.451 166 73.3377 166 73.3377C166 73.3377 157.724 74.2244 154.27 77.6783C150.816 81.1321 149.929 86.1943 149.929 86.1943C149.929 86.1943 149.042 81.1321 145.589 77.6783C142.135 74.2244 133.858 73.3377 133.858 73.3377C133.858 73.3377 142.135 72.451 145.589 68.9971C149.042 65.5433 149.929 54.0527 149.929 54.0527Z" fill="#FFB645" />
<path d="M181.214 75.7812C181.214 75.7812 181.92 84.9229 184.668 87.6707C187.415 90.4186 194 91.124 194 91.124C194 91.124 187.415 91.8295 184.668 94.5773C181.92 97.3251 181.214 101.353 181.214 101.353C181.214 101.353 180.509 97.3251 177.761 94.5773C175.013 91.8295 168.429 91.124 168.429 91.124C168.429 91.124 175.013 90.4186 177.761 87.6707C180.509 84.9229 181.214 75.7812 181.214 75.7812Z" fill="#FFB645" />
<path d="M292.495 44.8398H319.859L375.141 93.3921V117.295L292.495 44.8398Z" fill="#FFC56A" />
<defs>
<linearGradient id="paint0_linear_0_1" x1="26" y1="72.5" x2="106.717" y2="129.81" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="#FFE064" />
</linearGradient>
<linearGradient id="paint1_linear_0_1" x1="30.4844" y1="134.396" x2="141.612" y2="134.396" gradientUnits="userSpaceOnUse">
<stop stop-color="#D0BFB0" />
<stop offset="0.405582" stop-color="#FFE57D" />
<stop offset="1" stop-color="white" />
</linearGradient>
<linearGradient id="paint2_linear_0_1" x1="100.511" y1="78.9371" x2="164.522" y2="104.117" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFF3E8" />
<stop offset="1" stop-color="#FFFAB9" />
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

82
assets/icons/svg/pro.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

10
assets/icons/svg/proSecondText.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

162
components/owner/rights/memberCard.tsx
View File

@ -1,9 +1,12 @@
import HandersSvg from '@/assets/icons/svg/handers.svg'; import CardBgSvg from '@/assets/icons/svg/cardBg.svg';
import ProSvg from '@/assets/icons/svg/pro.svg'; import ProSecondTextSvg from '@/assets/icons/svg/proSecondText.svg';
import ProTextSvg from '@/assets/icons/svg/proText.svg';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from "react-native"; import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
import Svg, { Circle, Defs, Ellipse, FeBlend, FeColorMatrix, FeComposite, FeFlood, FeGaussianBlur, FeOffset, Filter, G, Path, Rect } from 'react-native-svg';
const MemberCard = ({ pro }: { pro: string }) => { const MemberCard = ({ pro }: { pro: string }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -12,65 +15,118 @@ const MemberCard = ({ pro }: { pro: string }) => {
const router = useRouter(); const router = useRouter();
return ( return (
<View style={styles.container}> <TouchableOpacity style={[styles.container]} onPress={() => router.push("/rights")}>
<Image source={proPng} style={{ opacity: pro === "Pro" ? 1 : 0.5, width: 330, height: 110, position: "absolute", left: width * 0.5 - 40, bottom: 0, zIndex: 9 }} /> <View style={styles.cardBg}>
<ProSvg width={"100%"} height={"100%"} style={{ opacity: pro === "Pro" ? 1 : 0.5, backgroundColor: '#4C320C', borderRadius: 32 }} /> <CardBgSvg />
<HandersSvg style={{ opacity: pro === "Pro" ? 1 : 0.5, position: "absolute", left: width * 0.5 + 5, bottom: -3, zIndex: 10 }} /> <View style={[styles.dateContainer, { top: width * 0.09, right: -width * 0.09 }]}>
<View style={[styles.dateContainer, { opacity: pro === "Pro" ? 1 : 0.5 }]}> <ThemedText style={{ fontSize: 11, color: "#4C320C" }}>{"2025-09-05截止"}</ThemedText>
<ThemedText style={styles.date}>2025-09-05截止</ThemedText> </View>
</View> </View>
<View style={[styles.proTextContainer, { opacity: pro === "pro" ? 1 : 0 }]}>
{ <ProTextSvg />
pro === "Pro" </View>
? <View style={[styles.ipContainer]}>
null : <Svg width="180" height="110" viewBox="0 0 200 140" fill="none">
<TouchableOpacity <G mask="url(#mask0_3223_1170)">
onPress={() => { {pro === "pro" && <G filter="url(#filter0_i_3223_1170)">
router.push('/rights'); <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>}
activeOpacity={0.7} {pro === "pro" && <Circle cx="59.1272" cy="39.4803" r="9.12722" fill="#FFB645" stroke="#4C320C" stroke-width="4" />}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} {pro === "pro" && <Circle cx="92.2844" cy="22.1272" r="9.12722" fill="#E2793F" stroke="#4C320C" stroke-width="4" />}
style={styles.proText} {pro === "pro" && <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" />
<ThemedText >{t("personal:generalSetting.goPremium")}</ThemedText> <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" />
</TouchableOpacity> <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" />
</View> <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">
<FeFlood floodOpacity="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">
<FeFlood floodOpacity="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">
<FeFlood floodOpacity="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>
</View>
<View style={{ position: "absolute", bottom: width * 0.07, left: width * 0.1 }}>
{/* <ThemedText style={{ fontSize: 11, color: "red" }}>{"解锁更多魔法"}</ThemedText> */}
<ProSecondTextSvg />
</View>
</TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
proText: { container: {
fontSize: 10, position: "relative"
fontWeight: 'bold', },
color: '#4C320C', proTextContainer: {
padding: 4, position: "absolute",
paddingHorizontal: 8,
borderRadius: 16,
backgroundColor: '#fff',
position: 'absolute',
top: 30, top: 30,
left: 90, left: 30,
opacity: 0.7 zIndex: 9,
},
ipContainer: {
position: "absolute",
bottom: 0,
right: 0,
zIndex: 9
},
cardBg: {
marginTop: -50,
width: "100%",
alignSelf: "center",
position: "relative",
marginRight: 10,
zIndex: -1,
}, },
dateContainer: { dateContainer: {
position: 'absolute', position: 'absolute',
top: 16, zIndex: 10,
right: -15, alignItems: 'flex-end',
zIndex: 1, transform: [
transform: [{ rotate: '40deg' }], { translateX: -45 },
}, { rotate: '400deg' },
date: { { translateX: 45 }
fontSize: 11, ],
fontWeight: 'bold',
color: '#4C320C',
padding: 4,
},
container: {
position: "relative",
height: 120
}, },
}); });