Primero, necesitamos crear una carpeta de diseños para almacenar archivos de animación de salto. La carpeta de diseños está al mismo nivel que las páginas.
Luego cree una carpeta de inicio de sesión en páginas para almacenar el archivo de inicio de sesión y luego cree los archivos de inicio de sesión e índice en ella para comenzar a escribir código.
A continuación, sin más preámbulos, entremos en el código.
import React, {
useState, useEffect, useRef } from 'react'
import './index.less'
import {
history } from 'umi'
import {
NavBar, AutoCenter, Input, Form, Button,Toast } from 'antd-mobile'
let timer;
export default function Login() {
const codet = useRef(null);
const [name, setname] = useState('')
const [phone, setphone] = useState('')
const [password, setPass] = useState('')
const [time, setTime] = useState(5);
const [disabled, setDisabled] = useState(true)
const [btnContent, setBtnContent] = useState('获取验证码');
const [btnDisabled, setBtnDisabled] = useState(false);
const [sstr, setstr] = useState('');
const [phonecode, setcode] = useState('');
function usenum() {
let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (name.length==0) {
Toast.show({
icon: 'fail',
content: '请输入姓名',
})
}else
if (!phoneReg.test(phone)) {
Toast.show({
icon: 'fail',
content: '手机号错误',
})
}else
if (phonecode.length == 0) {
Toast.show({
icon: 'fail',
content: '请输入验证码',
})
}
else
if (phonecode != sstr) {
Toast.show({
icon: 'fail',
content: '验证码错误',
})
}
else {
Toast.show({
icon: 'success',
content: '登录成功',
})
history.push({
pathname: '/home', query: {
name } })
}
}
useEffect(() => {
console.log(name);
console.log(phone);
console.log(password);
if (name.length > 0 & phone.length > 0 & password.length > 0) {
console.log(2856725468457);
setDisabled(false)
} else {
setDisabled(true)
}
return () => {
setDisabled(false)
};
}, [name, phone, password]);
useEffect(() => {
clearInterval(timer);
return () => clearInterval(timer);
}, []);
useEffect(() => {
if (time > 0 && time < 60) {
setBtnContent(`${
time}s后重发`);
} else {
clearInterval(timer);
setBtnDisabled(false);
setTime(60);
}
}, [time]);
const getCaptcha = () => {
let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!phoneReg.test(phone)) {
Toast.show({
icon: 'fail',
content: '请输入正确的手机号',
});
} else {
if (!phone) return;
timer = setInterval(() => setTime((pre) => pre - 1), 1000);
setBtnDisabled(true);
let wer = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let sert = '';
for (let e = 0; e < 6; e++) {
sert += wer[Math.ceil(Math.random() * wer.length - 1)];
}
// setcode(sert);
setstr(sert);
Toast.show({
content: '验证码为' + sert,
});
}
};
return (
<div>
<NavBar back={
null} backArrow={
false}>手机号登录</NavBar>
<AutoCenter>
<Form className='autoform' layout='horizontal'
footer={
<Button onClick={
usenum.bind(this)} block type='submit' color='primary' size='large'>
提交
</Button>
}>
<Form.Item label='姓名' name='name'
rules={
[{
message: '姓名不能为空' }]}>
<Input placeholder='请输入姓名' value={
name}
onChange={
val => {
setname(val)
}} clearable />
</Form.Item>
<Form.Item label='手机号'
rules={
[{
message: '手机号不能为空' }]}
name='phone'>
<Input placeholder='请输入手机号' value={
phone}
onChange={
val => {
setphone(val)
}}
clearable />
</Form.Item>
<Form.Item label="短信验证码"
rules={
[{
message: '验证码不能为空' }]}
extra={
<Button
color="warning"
disabled={
btnDisabled}
onClick={
getCaptcha}
>
{
!btnDisabled ? '获取验证码' : `${
time}s后重发`}
</Button>
}>
<Input
placeholder="请输入验证码"
value={
phonecode}
ref={
codet}
onChange={
(val) => {
setcode(val);
}}
/>
</Form.Item>
</Form>
</AutoCenter>
</div>
)
}
Luego está el código de estilo.
.adm-nav-bar {
--height: 45px;
--border-bottom: none;
display: flex;
align-items: center;
height: var(--height);
border-bottom: var(--border-bottom);
padding: 0 12px;
white-space: nowrap;
background-color: darkorchid;
color: white;
font-size: 15px;
}
.adm-auto-center {
display: flex;
justify-content: center;
margin-top: 50%;
}
.adm-button .adm-button-warning .adm-button-shape-default {
--text-color: var(--adm-color-white);
--background-color: #8f8c8a;
/* --border-color: var(--color); */
}
.adm-button-warning {
--color: #dbd7d3;
}
.adm-form {
--border-inner: solid 1px var(--adm-border-color);
--border-top: solid 1px var(--adm-border-color);
--border-bottom: solid 1px var(--adm-border-color);
--prefix-width: 6.8em;
---border-inner: var(--border-inner);
---border-top: var(--border-top);
---border-bottom: var(--border-bottom);
---prefix-width: var(--prefix-width);
margin-top: 50%;
}