feat: 支付方式卡片

app/(tabs)/rights.tsx

@@ -1,5 +1,7 @@
+import ChoicePaySvg from '@/assets/icons/svg/choicePay.svg';
 import ReturnArrowSvg from '@/assets/icons/svg/returnArrow.svg';
 import StarSvg from '@/assets/icons/svg/whiteStart.svg';
+import YesSvg from '@/assets/icons/svg/yes.svg';
 import PrivacyModal from '@/components/owner/qualification/privacy';
 import Normal from '@/components/owner/rights/normal';
 import Premium, { PayItem } from '@/components/owner/rights/premium';
@@ -17,12 +19,15 @@ export default function Rights() {
     const insets = useSafeAreaInsets();
     const router = useRouter();
     const { t } = useTranslation();
+    // 选择购买方式
+    const [payChoice, setPayChoice] = useState<'weChatPay' | 'apple'>('weChatPay');
     // 获取路由参数
     const { credit } = useLocalSearchParams<{
         credit: string;
     }>();
     // 普通用户，会员
     const [userType, setUserType] = useState<'normal' | 'premium'>('normal');
+
     // 选择权益方式
     const [payType, setPayType] = useState<string>('');
 
@@ -101,6 +106,35 @@ export default function Rights() {
                     {/* 会员权益 */}
                     <Premium setPayType={setPayType} setShowTerms={setShowTerms} payType={payType} premiumPay={premiumPay} loading={loading} style={{ display: userType === 'normal' ? "none" : "flex" }} />
                 </View>
+                {/* 支付方式 */}
+                <View style={[styles.paymentMethod, { display: userType === 'normal' ? "none" : "flex" }]}>
+                    <TouchableOpacity
+                        onPress={() => { setPayChoice('weChatPay') }}
+                        style={{ padding: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 1, borderBottomColor: '#FFD38D' }}
+                    >
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+                            <ChoicePaySvg />
+                            <ThemedText style={{ fontWeight: '700', fontSize: 16, color: "#4C320C" }}>
+                                {t('personal:rights.weChatPay')}
+                            </ThemedText>
+                        </View>
+                        <View style={[styles.payChoice, { backgroundColor: payChoice === 'weChatPay' ? '#FFB645' : '#D9D9D9' }]}>{payChoice === 'weChatPay' ? <YesSvg /> : null}</View>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={{ padding: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
+                        onPress={() => { setPayChoice('apple') }}
+                    >
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+                            <ChoicePaySvg />
+                            <ThemedText style={{ fontWeight: '700', fontSize: 16, color: "#4C320C" }}>
+                                {t('personal:rights.apple')}
+                            </ThemedText>
+                        </View>
+                        <View style={[styles.payChoice, { backgroundColor: payChoice === 'apple' ? '#FFB645' : '#D9D9D9' }]}>
+                            {payChoice === 'apple' ? <YesSvg /> : null}
+                        </View>
+                    </TouchableOpacity>
+                </View>
                 {/* 会员权益信息 */}
                 <View style={{ flex: 1, marginBottom: 80 }}>
                     <ProRights style={{ display: userType === 'normal' ? "none" : "flex" }} />
@@ -147,6 +181,27 @@ export default function Rights() {
 }
 
 const styles = StyleSheet.create({
+    payChoice: {
+        width: 20,
+        height: 20,
+        borderRadius: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paymentMethod: {
+        marginHorizontal: 16,
+        marginVertical: 16,
+        borderRadius: 12,
+        backgroundColor: '#fff',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 5,
+        elevation: 5,
+    },
     goPay: {
         backgroundColor: '#E2793F',
         borderRadius: 24,

assets/icons/svg/choicePay.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="6" fill="#FFB645"/>
+</svg>

i18n/locales/en/personal.json

@@ -109,6 +109,8 @@
         "bonus": "Enjoy 100 Bonus Credits Every Month",
         "bonusText": "Generate more memory pictures & videos and explore your past.",
         "storage": "10GB of Cloud Storage",
-        "storageText": "Safely store your cherished photos, videos, and generated memories."
+        "storageText": "Safely store your cherished photos, videos, and generated memories.",
+        "weChatPay": "WeChat",
+        "apple": "Apple Pay"
     }
 }

i18n/locales/zh/personal.json

@@ -109,6 +109,8 @@
         "bonus": "每月享受100积分",
         "bonusText": "生成更多记忆照片和视频，探索你的过去。",
         "storage": "10GB的云存储",
-        "storageText": "安全存储你的珍贵照片、视频和生成的记忆。"
+        "storageText": "安全存储你的珍贵照片、视频和生成的记忆。",
+        "weChatPay": "微信支付",
+        "apple": "苹果支付"
     }
 }