feat: 添加滑动验证码

This commit is contained in:
landaiqing
2024-04-24 16:29:29 +08:00
parent 46462c4514
commit 773dbe1e7e
10 changed files with 211 additions and 50 deletions

View File

@@ -1,10 +1,17 @@
import { useNavigate } from 'react-router-dom'
import './index.less'
import {useEffect} from "react";
export default () => {
const navigate = useNavigate()
const goBack = () => {
navigate(-1)
}
useEffect(() => {
document.body.classList.add('not-fount-body')
return ()=>{
document.body.classList.remove('not-fount-body')
}
}, []);
return (
<>
<body translate='no'>

View File

@@ -4,7 +4,9 @@
box-sizing: border-box;
}
.not-fount-body {
background-image: url("@/assets/images/background.png");
}
.container {
position: absolute;

View File

@@ -17,6 +17,8 @@ import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import styles from './index.module.less'
import { observer } from 'mobx-react'
import FooterComponent from '@/components/Footer'
import RotateCaptcha from 'react-rotate-captcha'
import { get, load, verify } from '@/api/captcha/index.ts'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'
@@ -33,6 +35,7 @@ export default observer(() => {
const [form] = Form.useForm()
// @ts-ignore
const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
const [open, setOpen] = useState(false)
const clickGetBase64CodeMethod = async () => {
await getBase64CodeMethod()
}
@@ -271,6 +274,7 @@ export default observer(() => {
block
size='large'
onClick={async () => {
setOpen(true)
let validateFields
if (loginType === 'account') {
validateFields = ['username', 'password', 'code']
@@ -376,6 +380,13 @@ export default observer(() => {
</Space>
</div>
<FooterComponent></FooterComponent>
<RotateCaptcha
get={get}
load={load}
verify={verify}
open={open}
onClose={() => setOpen(false)}
/>
</div>
)
})