fix: 旋转图片验证对接完成

This commit is contained in:
landaiqing
2024-05-10 22:45:09 +08:00
parent 7b1fbbf733
commit d3b7d8195e
11 changed files with 783 additions and 838 deletions

View File

@@ -9,14 +9,14 @@ import {
} from '@ant-design/icons'
import { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
import { CSSProperties } from 'react'
import { CSSProperties, useRef } from 'react'
import { useState } from 'react'
import logo from '@/assets/icons/schisandra.svg'
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 RotateCaptcha, { CaptchaInstance } from 'react-rotate-captcha'
import { get, load, verify } from '@/api/captcha/index.ts'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'
@@ -30,8 +30,7 @@ const iconStyles: CSSProperties = {
export default observer(() => {
const [form] = Form.useForm()
const [open, setOpen] = useState(false)
const captcha = useRef<CaptchaInstance>(null)
const items = [
{
label: (
@@ -58,322 +57,320 @@ export default observer(() => {
console.log(formData)
}
return (
<div className={styles.container}>
<div className={styles.content}>
<Space className={styles.content_content}>
<Space className={styles.login_content}>
<Space align='center' className={styles.mp_code}>
<Space direction='vertical' align='center'>
<span className={styles.mp_code_title}></span>
<Image
preview={false}
height={210}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
<span className={styles.mp_tips}></span>
</span>
<br />
<RotateCaptcha get={get} load={load} verify={verify} limit={2} ref={captcha}>
<div className={styles.container}>
<div className={styles.content}>
<Space className={styles.content_content}>
<Space className={styles.login_content}>
<Space align='center' className={styles.mp_code}>
<Space direction='vertical' align='center'>
<span className={styles.mp_code_title}></span>
<Image
preview={false}
height={210}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
<span className={styles.mp_tips}>
</span>
</span>
<br />
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction='vertical' align='center'>
<Space className={styles.logo}>
<img
alt='logo'
src={logo}
style={{ width: '44px', height: '44px' }}
/>
<span></span>
</Space>
<div className={styles.subTitle}></div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
{loginType === 'account' && (
<>
<ProFormText
name='username'
fieldProps={{
size: 'large',
prefix: <UserOutlined className={'prefixIcon'} />,
}}
placeholder={'请输入账号/邮箱/电话号码'}
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<ProFormText.Password
name='password'
fieldProps={{
size: 'large',
prefix: <LockOutlined className={'prefixIcon'} />,
}}
placeholder={'请输入密码'}
rules={[
{
required: true,
message: '请输入密码!',
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
'密码长度需在6~18位字符且必须包含字母和数字',
},
]}
/>
{/*<ProFormText*/}
{/* addonAfter={CodeImg}*/}
{/* name='code'*/}
{/* fieldProps={{*/}
{/* size: 'large',*/}
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
{/* autoComplete: 'off',*/}
{/* }}*/}
{/* placeholder='请输入图形验证码'*/}
{/* rules={[*/}
{/* {*/}
{/* required: true,*/}
{/* message: '请输入图形验证码!',*/}
{/* },*/}
{/* {*/}
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
{/* message: '图形验证码格式不正确',*/}
{/* },*/}
{/* ]}*/}
{/*/>*/}
</>
)}
{loginType === 'phone' && (
<>
<ProFormText
fieldProps={{
size: 'large',
prefix: <MobileOutlined className={'prefixIcon'} />,
autoComplete: 'off',
}}
name='mobile'
placeholder={'请输入手机号'}
rules={[
{
required: true,
message: '请输入手机号!',
},
{
pattern: /^1\d{10}$/,
message: '手机号格式错误!',
},
]}
/>
{/*<ProFormText*/}
{/* addonAfter={CodeImg}*/}
{/* name='code'*/}
{/* fieldProps={{*/}
{/* size: 'large',*/}
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
{/* autoComplete: 'off',*/}
{/* }}*/}
{/* placeholder='请输入图形验证码'*/}
{/* rules={[*/}
{/* {*/}
{/* required: true,*/}
{/* message: '请输入图形验证码!',*/}
{/* },*/}
{/* {*/}
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
{/* message: '图形验证码格式不正确',*/}
{/* },*/}
{/* ]}*/}
{/*/>*/}
<ProFormCaptcha
fieldProps={{
size: 'large',
prefix: <LockOutlined className={'prefixIcon'} />,
}}
captchaProps={{
size: 'large',
}}
placeholder={'请输入验证码'}
captchaTextRender={(timing, count) => {
if (timing) {
return `${count} ${'获取验证码'}`
}
return '获取验证码'
}}
name='captcha'
rules={[
{
required: true,
message: '请输入验证码!',
},
]}
onGetCaptcha={async () => {
captcha.current!.open()
message.success('获取验证码成功验证码为1234')
}}
/>
</>
)}
<div style={{ marginBlockEnd: 14 }}>
<ProFormCheckbox noStyle name='autoLogin'>
</ProFormCheckbox>
<a style={{ float: 'right' }}> </a>
</div>
<Button
type='primary'
block
size='large'
onClick={async () => {
let validateFields
if (loginType === 'account') {
validateFields = ['username', 'password', 'code']
} else {
validateFields = ['mobile', 'captcha', 'code']
}
await form
.validateFields(validateFields)
.then(async (values) => {
if (loginType === 'account') {
captcha.current!.open()
}
await onSubmit(values as API.PhoneRegisterRequest)
})
.catch((errorInfo) => {
console.error(errorInfo)
})
}}>
</Button>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}>
<Divider plain>
<span
style={{
color: '#CCC',
fontWeight: 'normal',
fontSize: 14,
}}>
</span>
</Divider>
<Space align='center' size={24}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<QqOutlined
style={{ ...iconStyles, color: '#1677FF' }}
/>
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<WechatOutlined
style={{ ...iconStyles, color: '#08a327' }}
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<GithubOutlined
style={{ ...iconStyles, color: '#333333' }}
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<GitlabOutlined
style={{ ...iconStyles, color: '#FF6A10' }}
/>
</div>
</Space>
</div>
</Form>
<a href='/register' className={styles.go_to_register}>
<span></span>
</a>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction='vertical' align='center'>
<Space className={styles.logo}>
<img
alt='logo'
src={logo}
style={{ width: '44px', height: '44px' }}
/>
<span></span>
</Space>
<div className={styles.subTitle}></div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
{loginType === 'account' && (
<>
<ProFormText
name='username'
fieldProps={{
size: 'large',
prefix: <UserOutlined className={'prefixIcon'} />,
}}
placeholder={'请输入账号/邮箱/电话号码'}
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<ProFormText.Password
name='password'
fieldProps={{
size: 'large',
prefix: <LockOutlined className={'prefixIcon'} />,
}}
placeholder={'请输入密码'}
rules={[
{
required: true,
message: '请输入密码!',
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
'密码长度需在6~18位字符且必须包含字母和数字',
},
]}
/>
{/*<ProFormText*/}
{/* addonAfter={CodeImg}*/}
{/* name='code'*/}
{/* fieldProps={{*/}
{/* size: 'large',*/}
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
{/* autoComplete: 'off',*/}
{/* }}*/}
{/* placeholder='请输入图形验证码'*/}
{/* rules={[*/}
{/* {*/}
{/* required: true,*/}
{/* message: '请输入图形验证码!',*/}
{/* },*/}
{/* {*/}
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
{/* message: '图形验证码格式不正确',*/}
{/* },*/}
{/* ]}*/}
{/*/>*/}
</>
)}
{loginType === 'phone' && (
<>
<ProFormText
fieldProps={{
size: 'large',
prefix: <MobileOutlined className={'prefixIcon'} />,
autoComplete: 'off',
}}
name='mobile'
placeholder={'请输入手机号'}
rules={[
{
required: true,
message: '请输入手机号!',
},
{
pattern: /^1\d{10}$/,
message: '手机号格式错误!',
},
]}
/>
{/*<ProFormText*/}
{/* addonAfter={CodeImg}*/}
{/* name='code'*/}
{/* fieldProps={{*/}
{/* size: 'large',*/}
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
{/* autoComplete: 'off',*/}
{/* }}*/}
{/* placeholder='请输入图形验证码'*/}
{/* rules={[*/}
{/* {*/}
{/* required: true,*/}
{/* message: '请输入图形验证码!',*/}
{/* },*/}
{/* {*/}
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
{/* message: '图形验证码格式不正确',*/}
{/* },*/}
{/* ]}*/}
{/*/>*/}
<ProFormCaptcha
fieldProps={{
size: 'large',
prefix: <LockOutlined className={'prefixIcon'} />,
}}
captchaProps={{
size: 'large',
}}
placeholder={'请输入验证码'}
captchaTextRender={(timing, count) => {
if (timing) {
return `${count} ${'获取验证码'}`
}
return '获取验证码'
}}
name='captcha'
rules={[
{
required: true,
message: '请输入验证码!',
},
]}
onGetCaptcha={async () => {
message.success('获取验证码成功验证码为1234')
}}
/>
</>
)}
<div style={{ marginBlockEnd: 14 }}>
<ProFormCheckbox noStyle name='autoLogin'>
</ProFormCheckbox>
<a style={{ float: 'right' }}> </a>
</div>
<Button
type='primary'
block
size='large'
onClick={async () => {
setOpen(true)
let validateFields
if (loginType === 'account') {
validateFields = ['username', 'password', 'code']
} else {
validateFields = ['mobile', 'captcha', 'code']
}
await form
.validateFields(validateFields)
.then(async (values) => {
await onSubmit(values as API.PhoneRegisterRequest)
})
.catch((errorInfo) => {
console.error(errorInfo)
})
}}>
</Button>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}>
<Divider plain>
<span
style={{
color: '#CCC',
fontWeight: 'normal',
fontSize: 14,
}}>
</span>
</Divider>
<Space align='center' size={24}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<WechatOutlined
style={{ ...iconStyles, color: '#08a327' }}
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<GithubOutlined
style={{ ...iconStyles, color: '#333333' }}
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<GitlabOutlined
style={{ ...iconStyles, color: '#FF6A10' }}
/>
</div>
</Space>
</div>
</Form>
<a href='/register' className={styles.go_to_register}>
<span></span>
</a>
</Space>
</Space>
</div>
<FooterComponent></FooterComponent>
</div>
<FooterComponent></FooterComponent>
<RotateCaptcha
get={get}
load={load}
verify={verify}
limit={3}
result={(val) => {
console.log(val)
}}
open={open}
onClose={() => setOpen(false)}
/>
</div>
</RotateCaptcha>
)
})