true_casey/rnpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端界面优化

Browse Source
This commit is contained in:
TQCasey
2026-05-10 20:36:11 +08:00
parent 6391e69af9
commit 015e3e10de
4 changed files with 272 additions and 840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
components/OTPBindUI.tsx
View File

@@ -45,126 +45,134 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
const showOtp = state.step === 'otp' || state.step === 'processing'; const showOtp = state.step === 'otp' || state.step === 'processing';
return ( return (
<View style={styles.card}> <View style={styles.overlay}>
<Text style={styles.title}>{title}</Text> <View style={styles.card}>
<Text style={styles.title}>{title}</Text>
{state.step === 'mobile' && ( {state.step === 'mobile' && (
<> <>
{!!state.errorMessage && ( {!!state.errorMessage && (
<Text style={styles.errorText}>{state.errorMessage}</Text> <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> <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 && ( {showOtp && (
<> <>
<Text style={styles.hint}>验证码已发送至 {state.mobile}</Text> <Text style={styles.hint}>验证码已发送至 {state.mobile}</Text>
{!!state.errorMessage && ( {!!state.errorMessage && (
<Text style={styles.errorText}>{state.errorMessage}</Text> <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> <Text style={styles.label}>验证码</Text>
<TouchableOpacity <TextInput
style={styles.linkBtn} style={[styles.input, !!state.errorMessage && styles.inputError]}
onPress={actions.resetToMobile} placeholder={`请输入 ${otpLength} 位验证码`}
disabled={isLoading} placeholderTextColor="#aaa"
> keyboardType="number-pad"
<Text style={[styles.linkText, isLoading && { opacity: 0.4 }]}> maxLength={otpLength}
重新输入手机号 value={state.otp}
</Text> onChangeText={t => {
</TouchableOpacity> 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> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.6)',
justifyContent: 'center',
alignItems: 'center',
},
card: { card: {
width: '92%', width: '88%',
backgroundColor: '#fff', backgroundColor: '#fff',
borderRadius: 20, borderRadius: 16,
padding: 28, padding: 22,
alignSelf: 'center', alignSelf: 'center',
}, },
title: { title: {
fontSize: 22, fontSize: 18,
fontWeight: '700', fontWeight: '700',
textAlign: 'center', textAlign: 'center',
color: '#111', color: '#111',
marginBottom: 24, marginBottom: 18,
}, },
label: { label: {
fontSize: 13, fontSize: 13,
color: '#666', color: '#666',
marginBottom: 6, marginBottom: 5,
fontWeight: '500', fontWeight: '500',
}, },
hint: { hint: {
fontSize: 14, fontSize: 13,
color: '#555', color: '#555',
textAlign: 'center', textAlign: 'center',
marginBottom: 18, marginBottom: 14,
}, },
input: { input: {
borderWidth: 1.5, borderWidth: 1.5,
borderColor: '#e0e0e0', borderColor: '#e0e0e0',
borderRadius: 10, borderRadius: 10,
paddingHorizontal: 14, paddingHorizontal: 12,
paddingVertical: 14, paddingVertical: 11,
fontSize: 17, fontSize: 16,
color: '#111', color: '#111',
marginBottom: 18, marginBottom: 14,
backgroundColor: '#fafafa', backgroundColor: '#fafafa',
}, },
inputError: { inputError: {
@@ -173,34 +181,33 @@ const styles = StyleSheet.create({
}, },
errorText: { errorText: {
color: '#ff3b30', color: '#ff3b30',
fontSize: 13, fontSize: 12,
marginBottom: 12, marginBottom: 10,
textAlign: 'center', textAlign: 'center',
lineHeight: 18, lineHeight: 17,
}, },
btn: { btn: {
backgroundColor: '#007AFF', backgroundColor: '#007AFF',
borderRadius: 12, borderRadius: 10,
paddingVertical: 16, paddingVertical: 13,
alignItems: 'center', alignItems: 'center',
marginTop: 4, marginTop: 2,
}, },
btnDisabled: { btnDisabled: {
backgroundColor: '#a0c4ff', backgroundColor: '#a0c4ff',
}, },
btnText: { btnText: {
color: '#fff', color: '#fff',
fontSize: 17, fontSize: 16,
fontWeight: '600', fontWeight: '600',
letterSpacing: 0.3,
}, },
linkBtn: { linkBtn: {
marginTop: 16, marginTop: 12,
alignItems: 'center', alignItems: 'center',
paddingVertical: 4, paddingVertical: 4,
}, },
linkText: { linkText: {
color: '#007AFF', color: '#007AFF',
fontSize: 14, fontSize: 13,
}, },
}); });

6
components/WalletBindComponents.tsx
View File

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

2
hooks/useOTPBind.ts
View File

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

901
screens/HomeScreen.tsx
View File

File diff suppressed because it is too large Load Diff