Browse Source

滑动校验码增加reset重置方法

main
dark 2 months ago
parent
commit
f62a3aa63a
  1. 32
      src/components/captcha/SlideCapt.tsx
  2. 22
      src/pages/use/login/index.tsx

32
src/components/captcha/SlideCapt.tsx

@ -1,4 +1,4 @@
import React, { memo, useCallback, useEffect, useState } from 'react'
import React, { forwardRef, memo, useCallback, useEffect, useState, useImperativeHandle } from 'react'
import { Popover, message } from 'antd' import { Popover, message } from 'antd'
import GoCaptcha from 'go-captcha-react' import GoCaptcha from 'go-captcha-react'
import { SlideCaptchaCheckData } from './types.ts' import { SlideCaptchaCheckData } from './types.ts'
@ -17,7 +17,18 @@ export interface SlideCaptProps {
onChange?: (value?: string) => void onChange?: (value?: string) => void
} }
const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
export type SlideCaptRef = {
reset: () => void
}
const SlideCapt = forwardRef<SlideCaptRef | undefined, SlideCaptProps>((
{
config,
api,
value,
onChange,
}: SlideCaptProps, ref) => {
const { styles } = useStyle() const { styles } = useStyle()
const [ open, setOpen ] = useState(false) const [ open, setOpen ] = useState(false)
@ -85,7 +96,20 @@ const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
}, 1000) }, 1000)
}) })
}, [ api.checkCaptcha, setData, state, setState, setOpen, innerKey, fetchCaptcha ])
}, [ api.checkCaptcha, setData, state, setState, setOpen, innerKey, onChange, fetchCaptcha ])
useImperativeHandle(ref, () => {
return {
reset() {
setState(prevState => ({
...prevState, type: 'default', title: '点击进行校验',
}))
setKey(undefined)
onChange?.(undefined)
refresh()
}
}
}, [ fetchCaptcha, setState, setKey ])
useEffect(() => { useEffect(() => {
@ -134,6 +158,6 @@ const SlideCapt = ({ config, api, value, onChange }: SlideCaptProps) => {
</Popover> </Popover>
</div> </div>
) )
}
})
export default memo(SlideCapt) export default memo(SlideCapt)

22
src/pages/use/login/index.tsx

@ -11,9 +11,9 @@ import {
telegramLoginAtom, telegramLoginAtom,
upLoginAtom, upLoginAtom,
} from '@/store/system/user.ts' } from '@/store/system/user.ts'
import React, { memo, useEffect, useLayoutEffect, useState } from 'react'
import React, { memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
import systemServ from '@/service/system.ts' import systemServ from '@/service/system.ts'
import SlideCapt from '@/components/captcha/SlideCapt.tsx'
import SlideCapt, { SlideCaptRef } from '@/components/captcha/SlideCapt.tsx'
const { Title, Text, Link } = Typography const { Title, Text, Link } = Typography
const { TabPane } = Tabs const { TabPane } = Tabs
@ -28,6 +28,8 @@ const Login = memo(() => {
const { mutate: emailLoginMutate } = useAtomValue(emailLoginAtom) const { mutate: emailLoginMutate } = useAtomValue(emailLoginAtom)
const { mutate: telegramLoginMutate } = useAtomValue(telegramLoginAtom) const { mutate: telegramLoginMutate } = useAtomValue(telegramLoginAtom)
const slideCaptRef = useRef<SlideCaptRef>()
const uphandleSubmit = (values: any) => { const uphandleSubmit = (values: any) => {
console.log(values) console.log(values)
upLoginFun(values) upLoginFun(values)
@ -118,7 +120,13 @@ const Login = memo(() => {
height: '400px', height: '400px',
}} }}
> >
<Tabs defaultActiveKey="1" style={{ marginTop: '50px' }}>
<Tabs defaultActiveKey="1"
onChange={(key) => {
if (key === '1') {
slideCaptRef.current?.reset()
}
}}
style={{ marginTop: '50px' }}>
<TabPane tab="邮箱密码登录" key="1"> <TabPane tab="邮箱密码登录" key="1">
<Form form={upform} onFinish={uphandleSubmit}> <Form form={upform} onFinish={uphandleSubmit}>
<Form.Item name="username" rules={[ { required: true, message: '请输入邮箱' } ]}> <Form.Item name="username" rules={[ { required: true, message: '请输入邮箱' } ]}>
@ -132,17 +140,15 @@ const Login = memo(() => {
autoComplete="off" autoComplete="off"
/> />
</Form.Item> </Form.Item>
<Form.Item noStyle={true}
name={'captchaKey'}
<Form.Item name={'captchaKey'}
rules={[ { required: true, message: '点击进行校验' } ]}> rules={[ { required: true, message: '点击进行校验' } ]}>
<div style={{ marginBottom: 20 }}>
<SlideCapt <SlideCapt
ref={slideCaptRef}
api={{ api={{
getCaptcha: systemServ.captcha, getCaptcha: systemServ.captcha,
checkCaptcha: systemServ.captchaCheck checkCaptcha: systemServ.captchaCheck
}}/> }}/>
</div>
</Form.Item> </Form.Item>
{/*<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>*/} {/*<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>*/}
{/* <Input.Password size="large" placeholder="验证码" prefix={<LockOutlined />} />*/} {/* <Input.Password size="large" placeholder="验证码" prefix={<LockOutlined />} />*/}

Loading…
Cancel
Save