feat: 页面优化

app/(tabs)/owner.tsx

@@ -89,7 +89,7 @@ export default function OwnerPage() {
                         <TouchableOpacity
                             onPress={() => router.push({
                                 pathname: '/rights',
-                                params: { credit: userInfoDetails?.remain_points }
+                                params: { credit: userInfoDetails?.remain_points, pro: userInfoDetails?.membership_level }
                             })}
                             style={styles.resourceContainer}
                         >

app/(tabs)/rights.tsx

@@ -1,5 +1,6 @@
 import ReturnArrowSvg from '@/assets/icons/svg/returnArrow.svg';
 import StarSvg from '@/assets/icons/svg/whiteStart.svg';
+import CheckSvg 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';
@@ -29,13 +30,16 @@ export default function Rights() {
         finishTransaction,
         validateReceipt,
     } = useIAP();
+    // 用户勾选协议
+    const [agree, setAgree] = useState<boolean>(false);
     // 用户选择购买的loading
     const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
     // 选择购买方式
     const [payChoice, setPayChoice] = useState<'ApplePay'>('ApplePay');
     // 获取路由参数
-    const { credit } = useLocalSearchParams<{
+    const { credit, pro } = useLocalSearchParams<{
         credit: string;
+        pro: string;
     }>();
     // 普通用户，会员
     const [userType, setUserType] = useState<'normal' | 'premium'>('normal');
@@ -70,6 +74,7 @@ export default function Rights() {
             for (const purchase of purchases) {
                 await validateAndGrantPurchase(purchase);
             }
+            alert(t('personal:rights.restoreSuccess'));
         } catch (error) {
             console.error('Restore failed:', error);
         }
@@ -129,6 +134,10 @@ export default function Rights() {
 
     // 用户确认购买时，进行 创建订单，创建支付 接口调用
     const confirmPurchase = async () => {
+        if (!agree) {
+            alert(t('personal:rights.agreementError'));
+            return
+        }
         setConfirmLoading(true);
         const history = await fetchPurchaseHistory()
         const historyIds = history?.filter((item: any) => isOrderExpired(item?.expirationDateIos))?.map((i) => { return i?.id })
@@ -144,18 +153,20 @@ export default function Rights() {
             // 创建订单
             createOrder(premiumPay?.filter((item) => item.product_code === payType)?.[0]?.id || 1, 1).then((res: CreateOrder) => {
                 // 创建支付
-                createPayment(res?.id || "", payChoice).then((res) => {
+                createPayment(res?.id || "", payChoice).then(async (res) => {
                     // 苹果支付
-                    handlePurchase(payType, res?.transaction_id || "")
+                    await handlePurchase(payType, res?.transaction_id || "")
+                    setConfirmLoading(false);
                 }).catch((err) => {
                     console.log("createPayment", err);
+                    setConfirmLoading(false);
                 })
             }).catch((err) => {
                 console.log("createOrder", err);
+                setConfirmLoading(false);
             })
         } catch (error) {
             console.log("confirmPurchase", error);
-        } finally {
             setConfirmLoading(false);
         }
     };
@@ -166,6 +177,15 @@ export default function Rights() {
         }
     }, [currentPurchase]);
 
+    useEffect(() => {
+        console.log('pro', pro);
+        if (pro === "Pro") {
+            setUserType('premium')
+        } else {
+            setUserType('normal')
+        }
+    }, [pro])
+
     useEffect(() => {
         fetchPurchaseHistory()
     }, [])
@@ -236,7 +256,7 @@ export default function Rights() {
                     {/* 普通权益 */}
                     <Normal setUserType={setUserType} style={{ display: userType === 'normal' ? "flex" : "none" }} />
                     {/* 会员权益 */}
-                    <Premium setPayType={setPayType} setShowTerms={setShowTerms} payType={payType} premiumPay={premiumPay} loading={loading} style={{ display: userType === 'normal' ? "none" : "flex" }} />
+                    <Premium restorePurchases={restorePurchases} setPayType={setPayType} setShowTerms={setShowTerms} payType={payType} premiumPay={premiumPay} loading={loading} style={{ display: userType === 'normal' ? "none" : "flex" }} />
                 </View>
                 {/* 支付方式 */}
                 {/* <PayTypeModal setConfirmPay={setConfirmPay} modalVisible={showPayType} setModalVisible={setShowPayType} payChoice={payChoice} setPayChoice={setPayChoice} /> */}
@@ -248,6 +268,7 @@ export default function Rights() {
             {/* 付费按钮 */}
             <View style={{
                 padding: 16,
+                paddingBottom: 32,
                 backgroundColor: '#fff',
                 borderTopWidth: 1,
                 borderTopColor: '#eee',
@@ -257,6 +278,28 @@ export default function Rights() {
                 right: 0,
                 display: userType === 'normal' ? "none" : "flex"
             }}>
+                <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', marginLeft: 8, marginBottom: 8 }}>
+                    <TouchableOpacity onPress={() => { setAgree(!agree) }} activeOpacity={0.8}>
+                        <View style={[styles.agree, { backgroundColor: agree ? '#FFB645' : '#fff', borderColor: agree ? '#FFB645' : '#AC7E35' }]}>
+                            {agree && <CheckSvg />}
+                        </View>
+                    </TouchableOpacity>
+                    <View style={{ flexDirection: 'row', gap: 4 }}>
+                        <ThemedText style={{ fontWeight: '400', fontSize: 11 }}>
+                            {t('personal:rights.agreement')}
+                        </ThemedText>
+                        <TouchableOpacity
+                            onPress={async () => {
+                                setShowTerms(true);
+                            }}
+                            activeOpacity={0.8}
+                        >
+                            <ThemedText style={{ color: '#AC7E35', fontWeight: '400', fontSize: 11, textAlign: 'center' }}>
+                                {t('personal:rights.membership')}
+                            </ThemedText>
+                        </TouchableOpacity>
+                    </View>
+                </View>
                 <TouchableOpacity
                     style={styles.goPay}
                     onPress={async () => {
@@ -268,16 +311,7 @@ export default function Rights() {
                         {t('rights.subscribe', { ns: 'personal' })}
                     </ThemedText>
                 </TouchableOpacity>
-                <TouchableOpacity
+
-                    onPress={async () => {
-                        setShowTerms(true);
-                    }}
-                    activeOpacity={0.8}
-                >
-                    <ThemedText style={{ color: '#AC7E35', fontWeight: '400', fontSize: 11, textDecorationLine: 'underline', textAlign: 'center' }}>
-                        {t('rights.terms', { ns: 'personal' })}
-                    </ThemedText>
-                </TouchableOpacity>
             </View>
             {/* 协议弹窗 */}
             <PrivacyModal modalVisible={showTerms} setModalVisible={setShowTerms} type={"user"} />
@@ -286,6 +320,15 @@ export default function Rights() {
 }
 
 const styles = StyleSheet.create({
+    agree: {
+        width: 15,
+        height: 15,
+        borderRadius: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: '#AC7E35',
+        borderWidth: 1,
+    },
     loadingContent: {
         justifyContent: 'center',
         alignItems: 'center',

components/owner/rights/payType.tsx

@@ -34,8 +34,8 @@ const PayTypeModal = (props: Props) => {
             <View style={styles.centeredView}>
                 <View style={styles.modalView}>
                     <View style={styles.modalHeader}>
-                        <ThemedText style={{ opacity: 0 }}>支付方式</ThemedText>
+                        <ThemedText style={{ opacity: 0 }}>{t('personal:rights.payType')}</ThemedText>
-                        <ThemedText style={styles.modalTitle}>支付方式</ThemedText>
+                        <ThemedText style={styles.modalTitle}>{t('personal:rights.payType')}</ThemedText>
                         <TouchableOpacity onPress={() => setModalVisible(false)}>
                             <Text style={styles.closeButton}>×</Text>
                         </TouchableOpacity>

components/owner/rights/premium.tsx

@@ -11,6 +11,7 @@ interface Props {
     premiumPay: any;
     loading: boolean;
     setShowTerms: (visible: boolean) => void;
+    restorePurchases: () => void;
 }
 
 export interface PayItem {
@@ -30,7 +31,7 @@ export interface PayItem {
 
 }
 const Premium = (props: Props) => {
-    const { style, payType, setPayType, premiumPay, loading, setShowTerms } = props;
+    const { style, payType, setPayType, premiumPay, loading, setShowTerms, restorePurchases } = props;
     const bestValue = maxDiscountProduct(premiumPay)?.product_code
     const { t } = useTranslation();
 
@@ -79,13 +80,15 @@ const Premium = (props: Props) => {
                     })
                 }
             </ScrollView>
-            <View style={{ flexDirection: 'row', gap: 8, marginLeft: 4 }}>
+            <View style={{ flexDirection: 'row', gap: 8, marginLeft: 4, marginTop: 8 }}>
                 <ThemedText style={{ color: '#AC7E35', fontSize: 10 }}>
-                    {t('rights.cancelAnytimeBeforeRenewal', { ns: 'personal' })}
+                    {t('personal:rights.restorePurchase')}
-                </ThemedText>
-                <ThemedText style={{ color: '#E2793F', fontSize: 10, textDecorationLine: 'underline' }} onPress={() => setShowTerms(true)}>
-                    {t('rights.terms', { ns: 'personal' })}
                 </ThemedText>
+                <TouchableOpacity onPress={restorePurchases}>
+                    <ThemedText style={{ color: '#E2793F', fontSize: 10, textDecorationLine: 'underline' }}>
+                        {t('personal:rights.restore')}
+                    </ThemedText>
+                </TouchableOpacity>
             </View>
         </View>
     );

i18n/locales/en/personal.json

@@ -115,6 +115,13 @@
         "confirm": "Confirm",
         "cancel": "Cancel",
         "confirmLoading": "Confirming...",
-        "againError": "You have already purchased this benefit, no need to purchase again"
+        "againError": "You have already purchased this benefit, no need to purchase again",
+        "payType": "Pay Type",
+        "restoreSuccess": "Restore purchase successfully",
+        "restore": "restore purchase",
+        "restorePurchase": "Membership purchased but not active,please try to",
+        "agreement": "I have read and agree to",
+        "membership": "《Membership Agreement》",
+        "agreementError": "Please read and agree to the agreement"
     }
 }

i18n/locales/zh/personal.json

@@ -115,6 +115,13 @@
         "confirm": "确认",
         "cancel": "取消",
         "confirmLoading": "正在购买...",
-        "againError": "您已购买过该权益，无需重复购买"
+        "againError": "您已购买过该权益，无需重复购买",
+        "payType": "支付方式",
+        "restoreSuccess": "恢复购买成功",
+        "restore": "恢复购买",
+        "restorePurchase": "已购买会员，但未生效，请尝试",
+        "agreement": "我已阅读并同意",
+        "membership": "《会员协议》",
+        "agreementError": "请先阅读并同意协议"
     }
 }