index.js 3.55 KB
Newer Older
zhanghaozhe committed
1 2
import React, { Component } from 'react';
import './veri-code-input.scss'
zhanghaozhe committed
3
import { http, validateEmail } from '@/utils';
zhanghaozhe committed
4
import { Toast } from "antd-mobile";
zhanghaozhe committed
5
import { has, isEmpty } from 'lodash'
zhanghaozhe committed
6

zhanghaozhe committed
7 8 9 10 11 12

import classnames from 'classnames'

import Input from '../Input'

class VeriCodeInput extends Component {
zhanghaozhe committed
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  count = 60
  state = {
    counting: false,
    count: this.count,
    isFirst: true
  }
  timer = null


  countDown = () => {
    let {count} = this.state
    if (!this.state.isFirst) {
      Toast.info('请重新进行滑块验证', 2, null, false)
      this.props.instance.reset()
      this.setState({
zhanghaozhe committed
28
        isFirst: true
zhanghaozhe committed
29 30
      })
      return
zhanghaozhe committed
31 32
    }

zhanghaozhe committed
33 34 35 36 37 38 39 40 41 42
    if (!this.state.counting) {
      if (!this.sendCode()) {
        return
      }
      this.setState({count: count--, counting: true})
      this.timer = setInterval(() => {
        if (count <= 0) {
          clearInterval(this.timer)
          this.setState({counting: false, count: this.count})
          return
zhanghaozhe committed
43
        }
zhanghaozhe committed
44 45
        this.setState({count: count--})
      }, 1000)
zhanghaozhe committed
46
    }
zhanghaozhe committed
47
  }
zhanghaozhe committed
48

zhanghaozhe committed
49 50 51 52
  getType = () => {
    const {email} = this.props
    if (validateEmail(email)) {
      return 'email'
zhanghaozhe committed
53
    }
zhanghaozhe committed
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
  }


  sendCode = () => {
    if (!this.validate()) return
    this.getType() === 'email' ? this.sendEmail() : this.sendSMS();
    return true;
  }

  sendEmail = () => {
    const {email, validationData} = this.props
    http.post(`${API['passport-api']}/send_email_code`, {
      email,
      ...validationData
    }).then(res => {
      if (res.data.errno === 0) {
        Toast.info('验证码发送成功', 2, null, false)
      } else {
        Toast.info(res.data.msg, 2, null, false)
      }
      this.setState({
        isFirst: false
      })
    })

  }

  sendSMS = () => {
    const {action, tel, account, validationData, checking, country} = this.props
    if (!tel) {
      Toast.info('请输入手机号')
      return
zhanghaozhe committed
86
    }
zhanghaozhe committed
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
    http.post(`${API['passport-api']}/quick_sms`, {
      phone_num: tel || account,
      action: action || 'login',
      area_code: '00' + country.num,
      checking,
      ...validationData
    }).then(res => {
      if (res.data.errno === 0) {
        Toast.info('验证码发送成功', 2, null, false)
      } else {
        Toast.info(res.data.msg, 2, null, false)
      }
      this.setState({
        isFirst: false
      })
    })
  }


  validate = () => {
    const {tel, validationData, email} = this.props
    let hasTel = has(this.props, 'tel')
    let content

    if (hasTel) {
      if (!tel) {
        content = '手机号码不能为空'
      }
      if (!/\d/.test(tel)) {
        content = '请输入正确格式的手机号码'
      }
    } else {
      if (!email) {
        content = '电子邮件不能为空'
      }
      if (!validateEmail(email)) {
        content = '请输入正确格式的电子邮件'
      }
zhanghaozhe committed
125
    }
zhanghaozhe committed
126

zhanghaozhe committed
127 128 129
    if (content) {
      Toast.info(content, 2, null, false)
      return false
zhanghaozhe committed
130 131
    }

zhanghaozhe committed
132 133 134
    if (isEmpty(validationData)) {
      Toast.info('请进行滑块验证', 2, null, false)
      return false
zhanghaozhe committed
135
    }
zhanghaozhe committed
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
    return true
  }

  render() {
    let {className, validationData, ...rest} = this.props
    return (
      <Input
        type={'number'}
        wrapperClass={className}
        {...rest}
      >
        <button type='button' className={classnames('verify', {active: !this.state.counting})}
                onClick={this.countDown}>
          {
            this.state.counting ?
              (`重新发送${this.state.count}s`)
              : '发送验证码'
          }
        </button>
      </Input>
    );
  }
zhanghaozhe committed
158 159 160
}

export default VeriCodeInput;