Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄庭坚
jinfa-platform
Commits
d3657e68
Commit
d3657e68
authored
Aug 24, 2021
by
前端-许佳敏
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 滑动验证码组件
parent
55560f3b
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
76 additions
and
27 deletions
+76
-27
Phone.tsx
src/components/NiceForm/components/Phone.tsx
+68
-25
index.less
src/components/NiceForm/index.less
+8
-2
No files found.
src/components/NiceForm/components/Phone.tsx
View file @
d3657e68
import
React
,
{
useEffect
,
useState
}
from
'react'
import
{
Row
,
Input
,
Col
,
Button
,
Result
}
from
'antd'
;
import
React
,
{
useEffect
,
use
Ref
,
use
State
}
from
'react'
import
{
Row
,
Input
,
Col
,
Button
,
Result
,
message
,
Modal
}
from
'antd'
;
import
useCountDown
from
'@/utils/hooks'
;
import
{
PublicApi
}
from
'@/services/api'
;
import
godEvent
from
'@/utils/event'
import
{
RiskCheck
}
from
'god'
;
import
{
createEffectHook
}
from
'@formily/antd
'
;
import
{
decryptedByAES
,
encryptedByAES
}
from
'@/utils/cryptoAes
'
;
const
customEvent$
=
createEffectHook
(
'SHOW_PHONE_VALIDATE'
)
// 滑块尺寸
const
FLAG_SIZE
=
60
const
IMG_WIDTH
=
352
const
IMG_HEIGHT
=
180
const
Phone
=
(
props
)
=>
{
const
{
text
,
isActive
,
start
}
=
useCountDown
({
...
...
@@ -23,9 +26,22 @@ const Phone = (props) => {
const
[
loading
,
setLoading
]
=
useState
(
false
)
const
[
isShowValidate
,
setIsShowValidate
]
=
useState
(
false
)
const
instanceRef
=
useRef
({
canIUseSms
:
false
})
const
[
remoteImg
,
setRemoteImg
]
=
useState
({
x
:
0
,
y
:
0
,
imgId
:
''
,
img
:
''
,
})
useEffect
(()
=>
{
godEvent
.
on
(
'SHOW_PHONE_VALIDATE'
,
(
payload
)
=>
{
if
(
isActive
)
{
// 验证码在loading的时候 不能再次触发
return
;
}
setIsShowValidate
(
true
)
})
...
...
@@ -33,7 +49,34 @@ const Phone = (props) => {
godEvent
.
off
(
'SHOW_PHONE_VALIDATE'
)
}
},
[])
useEffect
(()
=>
{
if
(
isShowValidate
)
{
PublicApi
.
getMemberCaptcha
({
width
:
IMG_WIDTH
.
toString
(),
height
:
IMG_HEIGHT
.
toString
(),
size
:
FLAG_SIZE
.
toString
()
}).
then
(
res
=>
{
const
{
backImage
,
width
,
height
,
imgId
}
=
res
.
data
console
.
log
(
Number
(
decryptedByAES
(
width
)))
setRemoteImg
(()
=>
{
return
{
img
:
'data:image/jpeg;base64,'
+
backImage
,
imgId
,
x
:
Number
(
decryptedByAES
(
width
)),
y
:
Number
(
height
)
}
})
})
}
},
[
isShowValidate
])
const
handleClickSms
=
()
=>
{
if
(
!
instanceRef
.
current
.
canIUseSms
)
{
message
.
error
(
'请先进行验证码校验'
)
setIsShowValidate
(
true
)
return
false
}
if
(
smsFn
)
{
smsFn
(
form
,
setLoading
,
()
=>
{
start
()
...
...
@@ -41,23 +84,16 @@ const Phone = (props) => {
})
return
;
}
// console.log(props)
// console.log(form.action)
// setTimeout(() => {
// form.getFieldState('phone', state => {
// console.log(state)
// if (state.errors.length === 0) {
// setIsShowValidate(true)
// }
// })
// }, 50)
handleStartSms
()
}
const
handleStartSms
=
()
=>
{
setLoading
(
true
)
PublicApi
.
postMemberRegisterSms
({
countryCode
:
'+86'
,
phone
:
form
.
getFieldValue
(
'phone'
)
width
:
String
(
remoteImg
.
x
),
imgId
:
remoteImg
.
imgId
,
phone
:
encryptedByAES
(
form
.
getFieldValue
(
'phone'
))
}).
finally
(()
=>
{
start
()
setLoading
(
false
)
...
...
@@ -67,7 +103,7 @@ const Phone = (props) => {
const
handleCheckSuccess
=
(
reset
)
=>
{
setTimeout
(()
=>
{
setIsShowValidate
(
false
)
handleStartSms
()
instanceRef
.
current
.
canIUseSms
=
true
},
1000
)
}
...
...
@@ -83,19 +119,26 @@ const Phone = (props) => {
<
Col
style=
{
{
marginLeft
:
8
}
}
>
<
Button
disabled=
{
isActive
}
style=
{
{
minWidth
:
110
,
marginLeft
:
8
}
}
loading=
{
loading
}
size=
'large'
onClick=
{
handleClickSms
}
>
{
text
}
</
Button
>
</
Col
>
{
isShowValidate
&&
<
Modal
title=
'滑动验证'
visible=
{
isShowValidate
}
mask
centered
footer=
{
null
}
onCancel=
{
()
=>
setIsShowValidate
(
false
)
}
>
<
RiskCheck
imgUrl=
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1505%2F05%2Fc9%2F6361159_6361159_1430799005928.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626945322&t=5bbeeecc4566988c9f44e0aae3640e69"
imgWidth=
{
300
}
imgHeight=
{
150
}
xPoint=
{
100
}
yPoint=
{
30
}
shadowSize=
{
60
}
className=
'lx-risk-check'
imgUrl=
{
remoteImg
.
img
}
imgWidth=
{
IMG_WIDTH
}
imgHeight=
{
IMG_HEIGHT
}
xPoint=
{
remoteImg
.
x
}
yPoint=
{
remoteImg
.
y
}
shadowSize=
{
FLAG_SIZE
}
differ=
{
10
}
onSuccess=
{
handleCheckSuccess
}
/>
}
</
Modal
>
</
Row
>
)
}
...
...
src/components/NiceForm/index.less
View file @
d3657e68
...
...
@@ -49,4 +49,11 @@
line-height: 1;
content: '*';
}
}
\ No newline at end of file
}
// 滑动验证码
.lx-risk-check {
display: flex;
flex-direction: column;
align-items: center;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment