验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
片段 1 片段 2 片段 3 片段 4
VerificaCode.js
原始数据 复制代码
import React, { Component } from 'react';
import { InputItem, Button, Toast } from 'antd-mobile';
import '../styles/components/verificaCode.css';
import checkCode from '../assets/check_code.png'
// 实际开发过程中使用此接口
// const checkCode = '/api/verify/imgCode?type=forget'
class verificaCode extends Component {
constructor(props) {
/** 父组件传递参数
* codeType 验证码类型
* 1. IMG:图片验证码
* 调用的时候使用 this.refs.verifica_code.getImgCode()
* 2. SMS:短信验证码
* 1) codePhone 接受验证码的手机号
* 2) codeTime 重新发送验证码的时长,默认为60s (选填)
*/
super(props);
this.state = {
sendSuccess: false, //true验证码发送成功 false验证码未发送
time: 0 //时间
};
}
componentDidMount = () => { }
componentWillUnmount = () => { }
// 图片验证码获取事件
getImgCode = () => {
// 实际开发过程中使用此接口
// this.refs.imgCode.src = `/api/verify/imgCode?r=${Math.random()}`;
console.log('获取验证码')
}
getSMSCode = (codePhone, codeTime) => {
//判断手机号是否正确
let regPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[45678]|19[89]|16[6])[0-9]{8}$/;
if (!regPhone.test(codePhone)) return Toast.fail('请检查手机号是否正确');
else {
//初始化倒计时长
this.setState({
time: codeTime || 60 //默认验证码时间为60s
})
this.countDown();
// // 发送获取验证码请求
// this.http.verify.SMSCode({
// mobile: codePhone,
// r: Math.random()
// })
// .then(res => {
// //请求成功则禁用表单开启倒计时(这里可以根据状态码判断)
// this.countDown(true);
// Toast.fail(res.msg)
// })
// .catch((err) => {
// //返回接口错误信息
// console.log(err)
// });
}
}
//定时器
countDown() {
this.setState({ sendSuccess: true })
this.Timer = setInterval(() => {
if (this.state.time <= 1) {
this.setState({ sendSuccess: false, time: 0 })
clearInterval(this.Timer);
} else {
this.setState({ time: this.state.time - 1 })
}
}, 1000);
}
// 短信验证码方法
render() {
const { className, codeType, codePhone, codeTime} = this.props;
const {sendSuccess, time} = this.state;
let extraEle;
// 再此处判断与渲染ele结构
if (codeType === 'IMG') extraEle = <img src={ checkCode } ref = "imgCode" alt= "验证码" onClick= { this.getImgCode } />;
else extraEle = <Button className="btn_extra" disabled= { sendSuccess }
onClick = { this.getSMSCode.bind(this, codePhone, codeTime) }
style = {{backgroundColor: sendSuccess ? '#999' : '#f70' }}>
{ sendSuccess? time+ 's' : '获取验证码'}
< /Button>;
return (
<div id="verificaCode" className= { className } >
<div className="input_box verificaCode" >
<InputItem className="input_self" placeholder = "请输入验证码" extra = { extraEle } >
<div className={ codeType === 'IMG' ? 'checkImg input_icon' : 'checkPhone input_icon' } />
</InputItem>
</div>
</div>
);
}
}
export default verificaCode;
verificaCode.css
原始数据 复制代码
#verificaCode .verificaCode .input_self .am-input-extra{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 100%;
max-height: none;
right: 0;
}
#verificaCode .checkImg{
background-image: url('../../assets/check_img_icon.png');
}
#verificaCode .checkPhone{
background-image: url('../../assets/check_phone_icon.png');
}
#verificaCode .verificaCode .input_self .am-input-extra img{
width: 100%;
height: 100%;
}
#verificaCode .verificaCode .input_self .btn_extra{
width: 90%;
height: .6rem;
line-height: .6rem;
font-size: .25rem;
color: #fff;
background-color: #f70;
}
#verificaCode .verificaCode .input_self .btn_extra::before{
border: none;
}
Login.js
原始数据 复制代码
import React, { Component } from 'react';
import { Button } from 'antd-mobile';
import VerificaCode from '../../components/VerificaCode'
class Login extends Component {
constructor(props) {
super(props);
this.state = {};
}
// 该方法在首次渲染之前调用(数据初始化)
componentWillMount() { }
//已经生成对应的dom结构
componentDidMount = () => { }
//在组件从 DOM 中移除的时候立刻被调用。
componentWillUnmount = () => { }
login = () => {
console.log('登录')
//登录失败的时候调用获取验证码接口
this.refs.verifica_code.getImgCode()
}
render() {
return (
<div id="Login" >
{/* 此处先用常用验证码方式代替 */ }
<VerificaCode codeType="IMG" ref= "verifica_code" > </VerificaCode>
<VerificaCode codeType= "SMS" codePhone= { 18612908099}> </VerificaCode>
<div className= "input_box" >
<Button className="btn_self" onClick= { this.login } > 立即登录 < /Button>
< /div>
< /div>
);
}
}
export default Login;
效果展示.png

评论列表( 1 )

你可以在登录后,发表评论

搜索帮助