まず、ジャンプ アニメーション ファイルを保存するためのレイアウト フォルダーをページと同じレベルに作成する必要があります。
次に、ページ内にログイン ファイルを保存するログイン フォルダーを作成し、その中にログイン ファイルとインデックス ファイルを作成してコードの記述を開始します。
次に、早速コードに入りましょう。
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>
)
}
次にスタイルコードです
.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%;
}