fix bugs
This commit is contained in:
@@ -1,5 +1,12 @@
|
||||
import React from 'react';
|
||||
import { View, TextInput, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
|
||||
import {
|
||||
View,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { WalletType } from 'rnwalletman';
|
||||
import { useOTPBind } from '../hooks/useOTPBind';
|
||||
|
||||
@@ -30,177 +37,170 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
|
||||
}) => {
|
||||
const [state, actions] = useOTPBind(
|
||||
walletType,
|
||||
{
|
||||
onRequestOTP,
|
||||
onVerifyOTP,
|
||||
onSuccess,
|
||||
onError,
|
||||
isDebug,
|
||||
},
|
||||
{
|
||||
otpLength,
|
||||
mobileLength,
|
||||
additionalParams,
|
||||
}
|
||||
{ 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>
|
||||
);
|
||||
}
|
||||
const isLoading = state.loading || state.step === 'processing';
|
||||
const showOtp = state.step === 'otp' || state.step === 'processing';
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
|
||||
{state.step === 'mobile' && (
|
||||
<>
|
||||
{state.errorMessage ? (
|
||||
<Text style={styles.errorText}>{state.errorMessage}</Text>
|
||||
) : null}
|
||||
<TextInput
|
||||
style={[styles.input, state.errorMessage ? styles.inputError : {}]}
|
||||
placeholder="请输入手机号"
|
||||
placeholderTextColor="#999"
|
||||
keyboardType="phone-pad"
|
||||
maxLength={mobileLength}
|
||||
value={state.mobile}
|
||||
onChangeText={(text) => {
|
||||
actions.setMobile(text);
|
||||
if (state.errorMessage) actions.clearError();
|
||||
}}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
|
||||
{state.step === 'otp' && (
|
||||
<>
|
||||
<Text style={styles.hint}>验证码已发送至 {state.mobile}</Text>
|
||||
{state.errorMessage ? (
|
||||
<Text style={styles.errorText}>{state.errorMessage}</Text>
|
||||
) : null}
|
||||
<TextInput
|
||||
style={[styles.input, state.errorMessage ? styles.inputError : {}]}
|
||||
placeholder={`请输入 ${otpLength} 位验证码`}
|
||||
placeholderTextColor="#999"
|
||||
keyboardType="number-pad"
|
||||
maxLength={otpLength}
|
||||
value={state.otp}
|
||||
onChangeText={(text) => {
|
||||
actions.setOtp(text);
|
||||
if (state.errorMessage) actions.clearError();
|
||||
}}
|
||||
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>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
form: {
|
||||
width: '80%',
|
||||
card: {
|
||||
width: '92%',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 10,
|
||||
padding: 20,
|
||||
borderRadius: 20,
|
||||
padding: 28,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
color: '#111',
|
||||
marginBottom: 24,
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
marginBottom: 6,
|
||||
fontWeight: '500',
|
||||
},
|
||||
hint: {
|
||||
fontSize: 14,
|
||||
color: '#555',
|
||||
textAlign: 'center',
|
||||
marginBottom: 18,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 5,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
marginBottom: 15,
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#e0e0e0',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
fontSize: 17,
|
||||
color: '#111',
|
||||
marginBottom: 18,
|
||||
backgroundColor: '#fafafa',
|
||||
},
|
||||
inputError: {
|
||||
borderColor: '#ff3b30',
|
||||
backgroundColor: '#fff8f7',
|
||||
},
|
||||
errorText: {
|
||||
color: '#ff3b30',
|
||||
fontSize: 14,
|
||||
marginBottom: 10,
|
||||
fontSize: 13,
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
lineHeight: 18,
|
||||
},
|
||||
button: {
|
||||
btn: {
|
||||
backgroundColor: '#007AFF',
|
||||
borderRadius: 5,
|
||||
padding: 15,
|
||||
borderRadius: 12,
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
marginTop: 4,
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: '#ccc',
|
||||
btnDisabled: {
|
||||
backgroundColor: '#a0c4ff',
|
||||
},
|
||||
buttonText: {
|
||||
btnText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
linkButton: {
|
||||
marginTop: 10,
|
||||
linkBtn: {
|
||||
marginTop: 16,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 4,
|
||||
},
|
||||
linkText: {
|
||||
color: '#007AFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 10,
|
||||
textAlign: 'center',
|
||||
},
|
||||
processingText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user