index.js

import React, { Component } from 'react'
import './forgot-password.scss'
import VeriCodeInput from '../common/veriCodeInput'
import Button from '../common/Button'
import { withFormik, Form, Field } from 'formik';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { Toast } from "antd-mobile";
import { HeaderBar, CaptchaAli } from "@/common";
import ClearableInput from '../common/clearableInputWithCountryCodes'
import { http } from "@/utils";
import { quickLogin } from '@/store/userAction';
import OnSubmissionError from '../common/OnSubmissionError'
import { Link } from "react-router-dom";


class ForgotPassword extends Component {

  state = {
    validate: null,
    captchaInstance: null,
    validationData: null
  }


  getCaptchaInstance = instance => {
    this.setState({
      captchaInstance: instance
    })
  }
  onVerify = (data) => {
    this.setState({
      validationData: data,
      validate: true
    })
  }
  onSubmissionError = () => {
    const errors = Object.values(this.props.errors);
    errors.length && Toast.info(errors[0], 2, null, false)
  }

  render() {
    const {
      values,
      isValid,
      country
    } = this.props
    return (
      <div className={'forgot-password'}>
        <HeaderBar title='忘记密码' arrow={true}/>
        <div className="content">
          <Form className='forgot-password-form'>
            <Field
              name={'tel'}
              render={({field, form}) => {
                return (
                  <ClearableInput
                    {...field}
                    type={'tel'}
                    placeholder={'请输入注册时的手机号'}
                    wrapperClass={'tel-input'}
                    setFieldValue={form.setFieldValue}
                    country={country}
                  />)
              }}
            />
            {
              this.state.validate &&
              <Field
                name='veriCode'
                render={({field}) => {
                  return (
                    <VeriCodeInput
                      {...field}
                      className={'verify-code'}
                      icon={<i className={'iconfont iconduanxin'}
                               style={{fontSize: '20px', left: '12px'}}
                      />}
                      tel={values.tel}
                      challenge={this.state.validate}
                      instance={this.state.captchaInstance}
                      action={'auth'}
                      checking={1}
                      country={country}
                      validationData={this.state.validationData}
                    />
                  )
                }}
              />
            }
            <OnSubmissionError callback={this.onSubmissionError}/>
            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
            <Button className={'next_step'} active={isValid}>下一步</Button>
            <Link className={'to-email'} to={`/passport/forgot-password-email`} replace>邮箱找回</Link>
          </Form>
        </div>
      </div>
    );
  }

}


const formikConfig = {
  mapPropsToValues: () => ({
    tel: '',
    veriCode: ''
  }),
  validateOnChange: true,
  validateOnBlur: true,
  validate: values => {
    let errors = {}
    if (!/\d/.test(values.tel)) {
      errors.tel = '请输入正确的手机号'
    }
    values.veriCode.toString().length !== 6 && (errors.veriCode = '验证码格式不正确')
    return errors
  },
  handleSubmit(values, {props}) {
    sessionStorage.setItem('r_type', 'phone')
    sessionStorage.setItem('tel', values.tel)
    http.post(`${API['passport-api']}/check_phone_code`, {
      phone: values.tel,
      code: values.veriCode,
      area_code: '00' + props.country.num
    }).then(res => {
      if (res.data.errno == 0) {
        props.history.push('/passport/set-password', {from: props.location})
      } else {
        Toast.info(res.data.msg, 2, null, false)
      }
    })
  },

}

export default compose(
  connect(
    state => ({country: state.country}),
    {quickLogin}
  ),
  withFormik(formikConfig)
)(ForgotPassword)