import React , { useEffect , createRef } from 'react' ; import { useSelector , useStore } from 'react-redux' ; import { getUnlockToken } from '@app/redux/actions/unlock-token' ; import { getUserInfo } from '@app/redux/reducers/user' ; import CaptchaButton from '@app/components/captcha-button' ; import Modal from '@app/components/bootstrap/modal' ; import './styles/index.scss' ; export default function ( ) { const select = createRef ( ) ; const captcha = createRef ( ) ; const me = useSelector ( ( state ) => getUserInfo ( state ) ) ; const store = useStore ( ) ; const _getUnlockToken = ( args ) => getUnlockToken ( args ) ( store . dispatch , store . getState ) ; let complete = ( res ) => { } ; const submit = async function ( ) { const $select = select . current ; const $captcha = captcha . current ; if ( ! $captcha . value ) return $captcha . focus ( ) ; let [ err , res ] = await _getUnlockToken ( { args : { type : $select . value , captcha : $captcha . value } } ) ; if ( err ) { complete ( false ) ; $ . toast ( { text : err . message , position : 'top-center' , showHideTransition : 'slide' , icon : 'error' , loader : false , allowToastClose : false } ) ; } else { complete ( true ) ; $ . toast ( { text : '提交成功' , position : 'top-center' , showHideTransition : 'slide' , icon : 'success' , loader : false , allowToastClose : false } ) ; $ ( `#unlock-token-modal` ) . modal ( 'hide' ) ; } } ; const sendCaptcha = function ( callback ) { const $select = select . current ; callback ( { id : 'unlock-token' , args : { type : $select . value == 'phone' ? 'phone-unlock-token' : 'email-unlock-token' } , fields : `success` } , ( result ) => { } ) ; } ; useEffect ( ( ) => { $ ( '#unlock-token-modal' ) . on ( 'show.bs.modal' , ( e ) => { complete = e . relatedTarget . complete || function ( ) { } ; } ) ; } ) ; return ( < Modal id = "unlock-token-modal" title = "身份验证" body = { < div styleName = "body" > < div > 为了保护你的帐号安全 ， 请验证身份 ， 验证成功后进行下一步操作 < /div> < br / > < div className = "form-group" > < div className = "container" > < div className = "row" > < select className = "form-control" id = "exampleFormControlSelect1" ref = { select } > { me . phone ? < option value = "phone" > 使用 { me . phone } 验证 < /option> : null} { me . email ? < option value = "email" > 使用 { me . email } 验证 < /option> : null} < /select> < /div> < /div> < /div> < div className = "form-group" > < input className = "form-control" type = "text" placeholder = "输入6位数验证码" ref = { captcha } / > < div > < CaptchaButton onClick = { sendCaptcha } /> < /div> < /div> < /div>} footer={<div> < span className = "btn btn-primary" onClick = { submit } > 提交 < /span> < /div>}/ > ) ; }