index.js 5.21 KB
Newer Older
FE committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
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;