You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.2 KiB
111 lines
4.2 KiB
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { useAgreementGate, useLogin, useOnboarding } from '../../../src/hooks';
|
|
import { useAuth } from '../../../src/context/AuthContext';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { Illustration } from '../ui/Illustration';
|
|
import { AgreementCheckbox } from '../ui/AgreementCheckbox';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
import { AgreementModal } from '../ui/AgreementModal';
|
|
|
|
/** P2Q 一键登录确认：本机号码认证 —— 掩码手机号 + 一键登录 + 运营商服务声明 */
|
|
export function P2QuickLogin() {
|
|
const { data, setData, navigate, back } = useOnboarding();
|
|
const { gate, modalProps } = useAgreementGate();
|
|
const { loginByCarrier, loading, error } = useLogin();
|
|
/** 登录态写入：此前本页只跳 P3 不写 token */
|
|
const { login: writeAuth } = useAuth();
|
|
|
|
const agreed = data.agreed;
|
|
const phone = data.phone;
|
|
|
|
/** 一键登录：运营商返回本机号码并换取令牌，成功后才进 P3 */
|
|
const handleLogin = async () => {
|
|
try {
|
|
const result = await loginByCarrier();
|
|
writeAuth(result.token);
|
|
} catch {
|
|
// 失败原因由 useLogin 记录，页面下方展示
|
|
return;
|
|
}
|
|
navigate('P3');
|
|
};
|
|
|
|
/** 掩码：150****9367；未输入时用演示号段占位 */
|
|
const masked = phone.length === 11 ? `${phone.slice(0, 3)}****${phone.slice(7)}` : '150****9367';
|
|
|
|
return (
|
|
<ScreenShell showBack onBack={back}>
|
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
|
|
<View style={styles.brandArea}>
|
|
<Illustration name="logo" size={88} radius={22} />
|
|
</View>
|
|
|
|
<Text style={styles.phone}>{masked}</Text>
|
|
<Text style={styles.subtitle}>首次验证通过即注册有职账号</Text>
|
|
|
|
<View style={styles.btnArea}>
|
|
<PrimaryButton
|
|
label="一键登录"
|
|
active={!loading}
|
|
loading={loading}
|
|
onPress={() => gate(handleLogin)}
|
|
/>
|
|
</View>
|
|
|
|
{error ? <Text style={styles.formError}>{error.message}</Text> : null}
|
|
|
|
<View style={styles.agree}>
|
|
<AgreementCheckbox
|
|
checked={agreed}
|
|
onToggle={() => setData({ agreed: !agreed })}
|
|
text={
|
|
<Text style={styles.agreeText}>
|
|
已阅读并同意
|
|
<Text style={styles.link}>《中国移动认证服务条款》</Text>
|
|
、
|
|
<Text style={styles.link} onPress={() => navigate('B2')}>《有职用户协议》</Text>
|
|
和
|
|
<Text style={styles.link} onPress={() => navigate('B2')}>《隐私政策》</Text>
|
|
，允许有职统一管理本人账号信息
|
|
</Text>
|
|
}
|
|
/>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View style={styles.footer}>
|
|
<View style={styles.footRow}>
|
|
<Text style={styles.footItem}>服务热线</Text>
|
|
<Text style={styles.footItem}>举报监督电话</Text>
|
|
<Text style={styles.footItem}>资质证照</Text>
|
|
</View>
|
|
<Text style={styles.carrierNote}>认证服务由中国移动提供</Text>
|
|
</View>
|
|
|
|
<AgreementModal {...modalProps} />
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
content: { flexGrow: 1 },
|
|
brandArea: { alignItems: 'center', marginTop: '16%' },
|
|
phone: {
|
|
textAlign: 'center',
|
|
fontSize: 30,
|
|
fontWeight: '800',
|
|
color: colors.textPrimary,
|
|
marginTop: 40,
|
|
},
|
|
subtitle: { textAlign: 'center', fontSize: 14, color: colors.textSecondary, marginTop: 12 },
|
|
btnArea: { marginTop: 36 },
|
|
formError: { marginTop: 10, textAlign: 'center', fontSize: 12, color: colors.danger },
|
|
agree: { marginTop: 20 },
|
|
agreeText: { fontSize: 12, color: colors.textSecondary, lineHeight: 18 },
|
|
link: { color: colors.primary, fontWeight: '600' },
|
|
footer: { paddingTop: 16, paddingBottom: 8 },
|
|
footRow: { flexDirection: 'row', justifyContent: 'center', gap: 18 },
|
|
footItem: { fontSize: 12, color: colors.textHint },
|
|
carrierNote: { textAlign: 'center', fontSize: 12, color: colors.textHint, marginTop: 12 },
|
|
});
|
|
|