import React, { Component } from 'react'; import classnames from 'classnames'; import { Link } from 'react-router-dom'; import { Formik, Form, Field } from 'formik'; import { Toast } from 'antd-mobile'; import { http, getParam } from '@/utils'; import './index.scss'; class BargainBindPhone extends Component { constructor(props) { super(props); this.state = { mobile: '', code: '', num: '86', seconds: 60, isTimer: false, // 是否开始倒计时 }; } // 获取短信验证码 handleToSendCode = ({ mobile }) => { const { country: { num = 86 } } = this.props; let { isTimer, seconds } = this.state; if(!isTimer) { if(!/^\d+$/.test(mobile)){ Toast.info('请输入正确的手机号'); return; } // 获取验证码 http.post( `${API['passport-api']}/m/personal/bindPhoneSendCode`, { area_code: `00${num}`, phone_num: mobile } ).then(res => { const { errno, msg } = res.data; if(errno === 200) { Toast.info('验证码发送成功', 2, null, false); // 倒计时 this.timer = window.setInterval(() => { if (seconds <= 0) { window.clearInterval(this.timer); this.setState({ isTimer: false, seconds: 60 }); }else { this.setState({ isTimer: true, seconds: --seconds }); } }, 1000); }else { Toast.info(msg); } }); } } // 绑定手机号 handleToBindPhone = ({code, mobile}) => { const { country: { num = 86}, handleToBargain, confirmBindPhone } = this.props; if (!mobile) { Toast.info('请填手机号码'); return; } if (!code) { Toast.info('请填写验证码'); return; } const params = { area_code: `00${num}`, phone_num: mobile, code: code, }; // is_valid 是否验证 1:验证(默认),0不验证 http.post( `${API['passport-api']}/m/personal/bindPhone`, { ...params, type: 1, is_valid: 1 } ).then(res => { const { errno, data, msg } = res.data; if(errno === 200) { if(data.tip_info) { confirmBindPhone(params, data.tip_info); }else { handleToBargain(); } }else { Toast.info(msg); } }); } render() { const { country: { num = '86' } } = this.props; const { isTimer, seconds } = this.state; return ( <Formik initialValues={{ mobile: '', code: '' }} validate={({mobile, code}) => { const errors = {}; if(!/^\d+$/.test(mobile)) { errors.mobile = '请填写正确格式的手机号'; } if (!/[0-9]{6}/.test(code)) { errors.code = '请输入验证码'; } return errors; }} onSubmit={(values, { setStatus, setSubmitting }) => { this.handleToBindPhone(values); }} render={({values: {mobile, code}, errors}) => ( <Form className="bargain-bind-phone"> <h2 className="bargain-bind-phone__title">绑定手机,先砍一刀</h2> <div className="bargain-bind-phone__item"> <Link className="bargain-bind-phone__button--num" to={`/country?id=${getParam('id')}&from=bargain`} > +{num} <i className="iconfont iconiconfront-69"></i> </Link> <Field name="mobile" render={({field}) => ( <input {...field} className="bargain-bind-phone__ipt" type="tel" placeholder='手机号' maxLength={11} /> )} /> </div> <div className="bargain-bind-phone__item"> <Field name="code" render={({field}) => ( <input {...field} type="tel" placeholder='验证码' maxLength={6} /> )} /> {errors.mobile} <button type="button" className={classnames( 'bargain-bind-phone__button--send', { 'active': mobile && errors.mobile === undefined } )} disabled={!(mobile && errors.mobile === undefined)} onClick={() => this.handleToSendCode({mobile})} > {isTimer? `重新发送${seconds}s` : '发送验证码'} </button> </div> <button type="submit" className="bargain-bind-phone__button--bargain" disabled={!(mobile && code && JSON.stringify(errors) === '{}')} >先砍一刀</button> </Form> )} /> ) } } export default BargainBindPhone;