qm-bus/src/SafeBox/index.js

千米公有云业务组件库

import React, { Component } from 'react'
import { Row, Col, message, Button, Form, Input } from 'antd'
const FormItem = Form.Item
import { checkSmsCode, sendSafeSmsCode } from './webapi'

/**
 * @class
 * @author yyp[of1643]
 * @date 17.05.11
 * @description 安全组件
 */
export default class SafeBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mobileCode: '',
      err: '',
      submitDisabled: false,
      errNum: 0,
      time: props.time ? props.time : null, //倒计时时间
      sendCodeDisabled: false,
      sendButtonMsg: '发送验证码',
    }
  }

  componentWillMount() {
    let { time } = this.state
    if (time != null && time != 0) {
      this.countDown(time)
    }
  }

  render() {
    let { mobileCode, err, submitDisabled, sendCodeDisabled, sendButtonMsg } = this.state
    return (
      <div className="modal-body-main">
        <Form>
          <FormItem
            label="短信验证码"
            help={err}
            validateStatus={err != '' ? 'error' : ''}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}>
            <Input
              value={mobileCode}
              onChange={this.mCodeChange}
              id="mobileCode"
              type="text"
              style={{ width: '150px' }}
            />
            <Button
              id="sendCodeBtn"
              className="pushl"
              type="ghost"
              disabled={sendCodeDisabled}
              onClick={this.sendCode}>
              {sendButtonMsg}
            </Button>
          </FormItem>
          <Row>
            <Col span="14" offset="6">
              <p className="inline-tips lh-default">
                如果1分钟内没有收到验证短信，请点击重新发送按钮，验证码5分钟内有效
              </p>
            </Col>
          </Row>
          <div className="modal-footer-main">
            <Button size="large" type="primary" disabled={submitDisabled} onClick={this.checkCode}>
              提交
            </Button>
          </div>
        </Form>
      </div>
    )
  }

  // 手机验证码输入框
  mCodeChange = e => {
    this.setState({
      mobileCode: e.target.value,
    })
  }

  // 发送手机验证码
  sendCode = () => {
    sendSafeSmsCode().then(res => {
      this.setState({ submitDisabled: false, err: '', errNum: 0 })
      this.countDown(60)
    })
  }

  // 校验验证码
  checkCode = () => {
    let { mobileCode, errNum } = this.state
    if (mobileCode == null || mobileCode == '') {
      this.setState({ err: '验证码不能为空' })
      return
    }
    let { close } = this.props

    checkSmsCode(mobileCode).then(res => {
      let data = res.data
      if (data != null) {
        switch (data) {
          case -1: //过期
            this.setState({ err: '验证码错误或已过期，请重新发送', submitDisabled: true })
            break
          case 0: //验证错误
            let num = errNum + 1
            this.setState({ err: '第' + num + '次验证失败', errNum: num })
            break
          case 1: //验证成功
            close()
            break
          case 2: //超过最大错误次数
            this.setState({ err: '超过最大错误次数，请重新发送验证', submitDisabled: true })
            break
        }
      }
    })
  }

  // 重发发送短信验证码
  countDown = t => {
    let _this = this
    var resetTimes = t
    if (resetTimes == 0) {
      this.setState({ sendCodeDisabled: false, sendButtonMsg: '重新发送' })
    } else {
      this.setState({ sendCodeDisabled: true, sendButtonMsg: --resetTimes + 's后重发' })
      setTimeout(function() {
        _this.countDown(resetTimes)
      }, 1000)
    }
  }
}