重构 demo
This commit is contained in:
185
components/OTPBindUI.tsx
Normal file
185
components/OTPBindUI.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
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;
|
||||
}
|
||||
|
||||
export const OTPBindUI: React.FC<OTPBindUIProps> = ({
|
||||
walletType,
|
||||
title,
|
||||
otpLength = 6,
|
||||
mobileLength = 10,
|
||||
onRequestOTP,
|
||||
onVerifyOTP,
|
||||
onSuccess,
|
||||
onError,
|
||||
isDebug,
|
||||
additionalParams = {},
|
||||
}) => {
|
||||
const [state, actions] = useOTPBind(
|
||||
walletType,
|
||||
{
|
||||
onRequestOTP,
|
||||
onVerifyOTP,
|
||||
onSuccess,
|
||||
onError,
|
||||
isDebug,
|
||||
},
|
||||
{
|
||||
otpLength,
|
||||
mobileLength,
|
||||
additionalParams,
|
||||
}
|
||||
);
|
||||
|
||||
if (state.step === 'processing') {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ActivityIndicator size="large" color="#fff" />
|
||||
<Text style={styles.processingText}>处理中...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
|
||||
{state.step === 'mobile' && (
|
||||
<>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="请输入手机号"
|
||||
placeholderTextColor="#999"
|
||||
keyboardType="phone-pad"
|
||||
maxLength={mobileLength}
|
||||
value={state.mobile}
|
||||
onChangeText={actions.setMobile}
|
||||
editable={!state.loading}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, state.loading && styles.buttonDisabled]}
|
||||
onPress={actions.requestOTP}
|
||||
disabled={state.loading}
|
||||
>
|
||||
{state.loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>获取验证码</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
|
||||
{state.step === 'otp' && (
|
||||
<>
|
||||
<Text style={styles.hint}>验证码已发送至 {state.mobile}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder={`请输入 ${otpLength} 位验证码`}
|
||||
placeholderTextColor="#999"
|
||||
keyboardType="number-pad"
|
||||
maxLength={otpLength}
|
||||
value={state.otp}
|
||||
onChangeText={actions.setOtp}
|
||||
editable={!state.loading}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, state.loading && styles.buttonDisabled]}
|
||||
onPress={actions.verifyOTP}
|
||||
disabled={state.loading}
|
||||
>
|
||||
{state.loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>验证并绑定</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.linkButton}
|
||||
onPress={actions.resetToMobile}
|
||||
disabled={state.loading}
|
||||
>
|
||||
<Text style={styles.linkText}>重新输入手机号</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
form: {
|
||||
width: '80%',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 10,
|
||||
padding: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 5,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
marginBottom: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#007AFF',
|
||||
borderRadius: 5,
|
||||
padding: 15,
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: '#ccc',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
linkButton: {
|
||||
marginTop: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
linkText: {
|
||||
color: '#007AFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 10,
|
||||
textAlign: 'center',
|
||||
},
|
||||
processingText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
||||
101
components/WalletBindComponents.tsx
Normal file
101
components/WalletBindComponents.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React, { Component } from 'react';
|
||||
import { WalletType, FreechargePersonalBindResult, MobikwikPersonalBindResult, PaytmPersonalBindResult, PhonePePersonalBindResult } from 'rnwalletman';
|
||||
import { OTPBindUI } from './OTPBindUI';
|
||||
|
||||
export class FreeChargeBind extends Component<{
|
||||
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onSuccess: (result: FreechargePersonalBindResult) => void;
|
||||
onError: (error: string) => void;
|
||||
isDebug: boolean;
|
||||
}> {
|
||||
render() {
|
||||
return (
|
||||
<OTPBindUI
|
||||
walletType={WalletType.FREECHARGE_PERSONAL}
|
||||
title="Freecharge 绑定"
|
||||
otpLength={4}
|
||||
onRequestOTP={this.props.onRequestOTP}
|
||||
onVerifyOTP={this.props.onVerifyOTP}
|
||||
onSuccess={this.props.onSuccess}
|
||||
onError={this.props.onError}
|
||||
isDebug={this.props.isDebug}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class MobikwikOTPBind extends Component<{
|
||||
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onSuccess: (result: MobikwikPersonalBindResult) => void;
|
||||
onError: (error: string) => void;
|
||||
isDebug: boolean;
|
||||
deviceId: string;
|
||||
tuneUserId: string;
|
||||
}> {
|
||||
render() {
|
||||
return (
|
||||
<OTPBindUI
|
||||
walletType={WalletType.MOBIKWIK_PERSONAL}
|
||||
title="Mobikwik 绑定"
|
||||
otpLength={6}
|
||||
onRequestOTP={this.props.onRequestOTP}
|
||||
onVerifyOTP={this.props.onVerifyOTP}
|
||||
onSuccess={this.props.onSuccess}
|
||||
onError={this.props.onError}
|
||||
isDebug={this.props.isDebug}
|
||||
additionalParams={{
|
||||
deviceId: this.props.deviceId,
|
||||
tuneUserId: this.props.tuneUserId,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class PayTmPersonalOTPBind extends Component<{
|
||||
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onSuccess: (result: PaytmPersonalBindResult) => void;
|
||||
onError: (error: string) => void;
|
||||
isDebug: boolean;
|
||||
}> {
|
||||
render() {
|
||||
return (
|
||||
<OTPBindUI
|
||||
walletType={WalletType.PAYTM_PERSONAL}
|
||||
title="Paytm 绑定"
|
||||
otpLength={8}
|
||||
onRequestOTP={this.props.onRequestOTP}
|
||||
onVerifyOTP={this.props.onVerifyOTP}
|
||||
onSuccess={this.props.onSuccess}
|
||||
onError={this.props.onError}
|
||||
isDebug={this.props.isDebug}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class PhonePePersonalOTPBind extends Component<{
|
||||
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
||||
onSuccess: (result: PhonePePersonalBindResult) => void;
|
||||
onError: (error: string) => void;
|
||||
isDebug: boolean;
|
||||
}> {
|
||||
render() {
|
||||
return (
|
||||
<OTPBindUI
|
||||
walletType={WalletType.PHONEPE_PERSONAL}
|
||||
title="PhonePe 绑定"
|
||||
otpLength={8}
|
||||
onRequestOTP={this.props.onRequestOTP}
|
||||
onVerifyOTP={this.props.onVerifyOTP}
|
||||
onSuccess={this.props.onSuccess}
|
||||
onError={this.props.onError}
|
||||
isDebug={this.props.isDebug}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user