前端界面优化

components/OTPBindUI.tsx

@@ -45,6 +45,7 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
     const showOtp = state.step === 'otp' || state.step === 'processing';
 
     return (
+        <View style={styles.overlay}>
             <View style={styles.card}>
                 <Text style={styles.title}>{title}</Text>
 
@@ -126,45 +127,52 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
                     </>
                 )}
             </View>
+        </View>
     );
 };
 
 const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
     card: {
-        width: '92%',
+        width: '88%',
         backgroundColor: '#fff',
-        borderRadius: 20,
-        padding: 28,
+        borderRadius: 16,
+        padding: 22,
         alignSelf: 'center',
     },
     title: {
-        fontSize: 22,
+        fontSize: 18,
         fontWeight: '700',
         textAlign: 'center',
         color: '#111',
-        marginBottom: 24,
+        marginBottom: 18,
     },
     label: {
         fontSize: 13,
         color: '#666',
-        marginBottom: 6,
+        marginBottom: 5,
         fontWeight: '500',
     },
     hint: {
-        fontSize: 14,
+        fontSize: 13,
         color: '#555',
         textAlign: 'center',
-        marginBottom: 18,
+        marginBottom: 14,
     },
     input: {
         borderWidth: 1.5,
         borderColor: '#e0e0e0',
         borderRadius: 10,
-        paddingHorizontal: 14,
-        paddingVertical: 14,
-        fontSize: 17,
+        paddingHorizontal: 12,
+        paddingVertical: 11,
+        fontSize: 16,
         color: '#111',
-        marginBottom: 18,
+        marginBottom: 14,
         backgroundColor: '#fafafa',
     },
     inputError: {
@@ -173,34 +181,33 @@ const styles = StyleSheet.create({
     },
     errorText: {
         color: '#ff3b30',
-        fontSize: 13,
-        marginBottom: 12,
+        fontSize: 12,
+        marginBottom: 10,
         textAlign: 'center',
-        lineHeight: 18,
+        lineHeight: 17,
     },
     btn: {
         backgroundColor: '#007AFF',
-        borderRadius: 12,
-        paddingVertical: 16,
+        borderRadius: 10,
+        paddingVertical: 13,
         alignItems: 'center',
-        marginTop: 4,
+        marginTop: 2,
     },
     btnDisabled: {
         backgroundColor: '#a0c4ff',
     },
     btnText: {
         color: '#fff',
-        fontSize: 17,
+        fontSize: 16,
         fontWeight: '600',
-        letterSpacing: 0.3,
     },
     linkBtn: {
-        marginTop: 16,
+        marginTop: 12,
         alignItems: 'center',
         paddingVertical: 4,
     },
     linkText: {
         color: '#007AFF',
-        fontSize: 14,
+        fontSize: 13,
     },
 });

components/WalletBindComponents.tsx

@@ -131,7 +131,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
     const [step, setStep] = useState<'credentials' | 'otp'>('credentials');
     const [mobile, setMobile] = useState('');
     const [otp, setOtp] = useState('');
-    const [sessionId, setSessionId] = useState('');
+    const [sessionToken, setSessionToken] = useState('');
     const [loading, setLoading] = useState(false);
     const [errorMsg, setErrorMsg] = useState('');
 
@@ -143,7 +143,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
         try {
             const res = await onRequestOTP(WalletType.PAYTM_BUSINESS, { mobile });
             log('RequestOTP:', res);
-            if (res.success) { setSessionId(res.data?.sessionId || ''); setStep('otp'); }
+            if (res.success) { setSessionToken(res.data?.sessionToken || ''); setStep('otp'); }
             else { const msg = res.message || 'Failed to send OTP'; setErrorMsg(msg); onError(msg); }
         } catch (e) {
             const msg = e instanceof Error ? e.message : 'Failed to send OTP';
@@ -155,7 +155,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
         if (!otp || otp.length !== 6) { setErrorMsg('请输入6位验证码'); return; }
         setLoading(true); setErrorMsg('');
         try {
-            const res = await onVerifyOTP(WalletType.PAYTM_BUSINESS, { mobile, otp, sessionId });
+            const res = await onVerifyOTP(WalletType.PAYTM_BUSINESS, { mobile, otp, sessionToken });
             log('VerifyOTP:', res);
             if (res.success) {
                 onSuccess({ type: WalletType.PAYTM_BUSINESS, success: true, cookie: res.data?.cookie || '', xCsrfToken: res.data?.xCsrfToken || '', qrData: res.data?.qrData || [] });

hooks/useOTPBind.ts

@@ -121,7 +121,7 @@ export function useOTPBind(
                 setErrorMessage('');
                 onSuccess(response.data);
             } else {
-                error('Verify failed:', response.message);
+                log('Verify failed:', response.message);
                 const msg = response.message || 'Failed to verify OTP';
                 setStep('otp');
                 setErrorMessage(msg);