index.js

import React, { Component } from "react"
import "./veri-code-input.scss"
import { http, validateEmail } from "src/utils"
import { Toast } from "antd-mobile"
import { has, isEmpty } from "lodash"

import classnames from "classnames"

import Input from "../Input"

class VeriCodeInput extends Component {
  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({
        isFirst: true,
      })
      return
    }

    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
        }
        this.setState({ count: count-- })
      }, 1000)
    }
  }

  getType = () => {
    const { email } = this.props
    if (validateEmail(email)) {
      return "email"
    }
  }

  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
    }
    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 = "请输入正确格式的电子邮件"
      }
    }

    if (content) {
      Toast.info(content, 2, null, false)
      return false
    }

    if (isEmpty(validationData)) {
      Toast.info("请进行滑块验证", 2, null, false)
      return false
    }
    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>
    )
  }
}

export default VeriCodeInput