index.js

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 'src/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);
        }}
      >
        {({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"
              >
                {({field}) => (
                  <input
                    {...field}
                    className="bargain-bind-phone__ipt"
                    type="tel"
                    placeholder='手机号'
                    maxLength={11}
                  />
                )}
              </Field>
            </div>
            <div className="bargain-bind-phone__item">
              <Field name="code">
                {({field}) => (
                  <input
                    {...field}
                    type="tel"
                    placeholder='验证码'
                    maxLength={6}
                  />
                )}
              </Field>
              {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>
        )}
      </Formik>
    )
  }
}

export default BargainBindPhone;