PhoneLogin.tsx - AiToEarn

PhoneLogin.tsx

1	import { ForwardedRef, forwardRef, memo, useState } from 'react';
2	import styles from '../login.module.scss';
3	import { Button, Form, Input, message } from 'antd';
4	import { phoneReg } from '@/utils/regulars';
5	import GetCode from '@/components/GetCode';
6	import { userApi } from '@/api/user';
7	import { IRefreshToken, PhoneLoginParams } from '@/api/types/user-t';
8	import { useNavigate } from 'react-router-dom';
9	import { useUserStore } from '@/store/user';
10
11	export interface IPhoneLoginProps {}
12	export interface IPhoneLoginRef {}
13
14	const PhoneLogin = memo(
15	forwardRef(({}: IPhoneLoginProps, ref: ForwardedRef<IPhoneLoginRef>) => {
16	const [form] = Form.useForm();
17	const [loginLoading, setLoginLoading] = useState(false);
18	const [formValid, setFormValid] = useState(false);
19	const navigate = useNavigate();
20	const userStore = useUserStore();
21
22	const handleValuesChange = () => {
23	const values = form.getFieldsValue();
24	setFormValid(!!values.phone && !!values.code);
25	};
26
27	const loginCore = async (params: PhoneLoginParams) => {
28	setLoginLoading(true);
29	const res = await userApi
30	.phoneLogin(params)
31	.catch(() => setLoginLoading(true));
32	setLoginLoading(false);
33	LoginSuccess(res);
34	};
35
36	const LoginSuccess = (res: IRefreshToken \| void) => {
37	if (!res) return;
38	window.ipcRenderer.invoke('ICP_USER_ADD', res.userInfo);
39	userStore.setToken(res);
40	userStore.getUserInfo(res.userInfo);
41	message.success('登录成功！');
42	window.ipcRenderer.invoke('start-kwai-listen');
43	navigate('/');
44	};
45
46	const MyInput = (props: any) => (
47	<div style={{ display: 'flex', width: '100%' }}>
48	<div className={styles['loginForm-phone-site']}>+86</div>
49	<Input {...props} style={{ width: '100%' }} />
50	</div>
51	);
52
53	return (
54	<div className={styles.phoneLogin}>
55	<div className={styles.loginHeader}>
56	<h2>欢迎来到哎哟赚</h2>
57	<p>请使用手机号登录</p>
58	</div>
59	<Form
60	form={form}
61	className={styles.loginForm}
62	onFinish={loginCore}
63	autoComplete="off"
64	onValuesChange={handleValuesChange}
65	>
66	<Form.Item<PhoneLoginParams>
67	name="phone"
68	className={styles['loginForm-phone']}
69	rules={[
70	{ required: true, message: '请输入手机号' },
71	{
72	pattern: phoneReg,
73	message: '手机号格式错误，请重新输入',
74	},
75	]}
76	>
77	<MyInput placeholder="请输入您的手机号码" />
78	</Form.Item>
79
80	<div style={{ position: 'relative', height: '43px' }}>
81	<Form.Item<PhoneLoginParams>
82	name="code"
83	rules={[{ required: true, message: '验证码不能为空' }]}
84	>
85	<Input placeholder="请输入您的验证码" />
86	</Form.Item>
87	<GetCode
88	onGetCode={async (unlock) => {
89	const validateRes = await form
90	.validateFields(['phone'])
91	.catch(() => unlock());
92	if (!validateRes) return;
93	const res = await userApi.getUserCode({
94	phone: form.getFieldValue('phone'),
95	});
96	if (!res) return;
97	message.success('验证码已发送');
98	if (typeof res === 'string') {
99	form.setFieldsValue({
100	code: res,
101	});
102	}
103	}}
104	/>
105	</div>
106
107	<Form.Item
108	className={styles['loginForm-buttonWrapper']}
109	wrapperCol={{ offset: 0 }}
110	>
111	<Button
112	loading={loginLoading}
113	className={`${styles.submitBtn} ${formValid ? styles.active : ''}`}
114	htmlType="submit"
115	>
116	登录
117	</Button>
118	</Form.Item>
119	</Form>
120	</div>
121	);
122	}),
123	);
124
125	PhoneLogin.displayName = 'PhoneLogin';
126	export default PhoneLogin;
127

127 lines Plain Text