rnpay/components/OTPBindUI.tsx

import React from 'react';
import {
    View,
    TextInput,
    TouchableOpacity,
    Text,
    StyleSheet,
    ActivityIndicator,
} from 'react-native';
import { WalletType } from 'rnwalletman';
import { useOTPBind } from '../hooks/useOTPBind';

interface OTPBindUIProps {
    walletType: WalletType;
    title: string;
    otpLength?: number;
    mobileLength?: number;
    onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
    onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
    onSuccess: (result: any) => void;
    onError: (error: string) => void;
    isDebug: boolean;
    additionalParams?: any;
    initialMobile?: string;
}

export const OTPBindUI: React.FC<OTPBindUIProps> = ({
    walletType,
    title,
    otpLength = 6,
    mobileLength = 10,
    onRequestOTP,
    onVerifyOTP,
    onSuccess,
    onError,
    isDebug,
    additionalParams = {},
    initialMobile = '',
}) => {
    const [state, actions] = useOTPBind(
        walletType,
        { onRequestOTP, onVerifyOTP, onSuccess, onError, isDebug },
        { otpLength, mobileLength, additionalParams, initialMobile }
    );

    const isLoading = state.loading || state.step === 'processing';
    const showOtp = state.step === 'otp' || state.step === 'processing';

    return (
        <View style={styles.overlay}>
            <View style={styles.card}>
                <Text style={styles.title}>{title}</Text>

                {state.step === 'mobile' && (
                    <>
                        {!!state.errorMessage && (
                            <Text style={styles.errorText}>{state.errorMessage}</Text>
                        )}
                        <Text style={styles.label}>手机号</Text>
                        <TextInput
                            style={[styles.input, !!state.errorMessage && styles.inputError]}
                            placeholder={`请输入 ${mobileLength} 位手机号`}
                            placeholderTextColor="#aaa"
                            keyboardType="phone-pad"
                            maxLength={mobileLength}
                            value={state.mobile}
                            onChangeText={t => {
                                actions.setMobile(t);
                                if (state.errorMessage) actions.clearError();
                            }}
                            editable={!isLoading}
                        />
                        <TouchableOpacity
                            style={[styles.btn, isLoading && styles.btnDisabled]}
                            onPress={actions.requestOTP}
                            disabled={isLoading}
                            activeOpacity={0.8}
                        >
                            {isLoading ? (
                                <ActivityIndicator color="#fff" />
                            ) : (
                                <Text style={styles.btnText}>获取验证码</Text>
                            )}
                        </TouchableOpacity>
                    </>
                )}

                {showOtp && (
                    <>
                        <Text style={styles.hint}>验证码已发送至 {state.mobile}</Text>
                        {!!state.errorMessage && (
                            <Text style={styles.errorText}>{state.errorMessage}</Text>
                        )}
                        <Text style={styles.label}>验证码</Text>
                        <TextInput
                            style={[styles.input, !!state.errorMessage && styles.inputError]}
                            placeholder={`请输入 ${otpLength} 位验证码`}
                            placeholderTextColor="#aaa"
                            keyboardType="number-pad"
                            maxLength={otpLength}
                            value={state.otp}
                            onChangeText={t => {
                                actions.setOtp(t);
                                if (state.errorMessage) actions.clearError();
                            }}
                            editable={!isLoading}
                        />
                        <TouchableOpacity
                            style={[styles.btn, isLoading && styles.btnDisabled]}
                            onPress={actions.verifyOTP}
                            disabled={isLoading}
                            activeOpacity={0.8}
                        >
                            {isLoading ? (
                                <ActivityIndicator color="#fff" />
                            ) : (
                                <Text style={styles.btnText}>验证并绑定</Text>
                            )}
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.linkBtn}
                            onPress={actions.resetToMobile}
                            disabled={isLoading}
                        >
                            <Text style={[styles.linkText, isLoading && { opacity: 0.4 }]}>
                                重新输入手机号
                            </Text>
                        </TouchableOpacity>
                    </>
                )}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    card: {
        width: '88%',
        backgroundColor: '#fff',
        borderRadius: 16,
        padding: 22,
        alignSelf: 'center',
    },
    title: {
        fontSize: 18,
        fontWeight: '700',
        textAlign: 'center',
        color: '#111',
        marginBottom: 18,
    },
    label: {
        fontSize: 13,
        color: '#666',
        marginBottom: 5,
        fontWeight: '500',
    },
    hint: {
        fontSize: 13,
        color: '#555',
        textAlign: 'center',
        marginBottom: 14,
    },
    input: {
        borderWidth: 1.5,
        borderColor: '#e0e0e0',
        borderRadius: 10,
        paddingHorizontal: 12,
        paddingVertical: 11,
        fontSize: 16,
        color: '#111',
        marginBottom: 14,
        backgroundColor: '#fafafa',
    },
    inputError: {
        borderColor: '#ff3b30',
        backgroundColor: '#fff8f7',
    },
    errorText: {
        color: '#ff3b30',
        fontSize: 12,
        marginBottom: 10,
        textAlign: 'center',
        lineHeight: 17,
    },
    btn: {
        backgroundColor: '#007AFF',
        borderRadius: 10,
        paddingVertical: 13,
        alignItems: 'center',
        marginTop: 2,
    },
    btnDisabled: {
        backgroundColor: '#a0c4ff',
    },
    btnText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
    linkBtn: {
        marginTop: 12,
        alignItems: 'center',
        paddingVertical: 4,
    },
    linkText: {
        color: '#007AFF',
        fontSize: 13,
    },
});