@51yzone/pc-components/es/login/code-mobile.js

An enterprise-class UI design language and React-based implementation

import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/col/style";
import _Col from "antd/es/col";
import "antd/es/row/style";
import _Row from "antd/es/row";
import "antd/es/message/style";
import _message from "antd/es/message";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
/**
 * 关键字：手机验证码
 * 新增人：徐友万
 */


import React, { useState, useEffect } from 'react';
import { MailOutlined } from '@ant-design/icons';
import { MOBILE_PHONE } from '../constants/regex';
var countDownTimer; // 验证码倒计时定时器

var CodeInput = function CodeInput(props) {
  var value = props.value,
      _props$initCountDown = props.initCountDown,
      initCountDown = _props$initCountDown === void 0 ? 60 : _props$initCountDown,
      actions = props.actions,
      size = props.size,
      mobile = props.mobile,
      mobileName = props.mobileName,
      prefixIconVisible = props.prefixIconVisible,
      prefixCls = props.prefixCls,
      onChange = props.onChange,
      getCode = props.getCode; // 验证码倒计时

  var _useState = useState(initCountDown),
      _useState2 = _slicedToArray(_useState, 2),
      count = _useState2[0],
      setCount = _useState2[1]; // 获取验证码


  var handleCodeClick = function handleCodeClick() {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _mobile;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _mobile = mobile || actions && actions.getFieldValue(mobileName);

              if (!(actions && !actions.getFieldValue(mobileName))) {
                _context.next = 5;
                break;
              }

              // 表单有手机号输入框，并且未输入值
              actions.setFieldState(mobileName, function (state) {
                var _state = state;
                _state.value = '';
              });
              _context.next = 15;
              break;

            case 5:
              if (!(!actions && !mobile)) {
                _context.next = 9;
                break;
              }

              // 表单没有手机号输入框，且没传入了mobile字段
              _message.warning('请先输入手机号');

              _context.next = 15;
              break;

            case 9:
              if (!MOBILE_PHONE.test(_mobile)) {
                _context.next = 15;
                break;
              }

              _context.next = 12;
              return getCode({
                mobile: _mobile
              });

            case 12:
              // 设置定时器
              setCount(function (preCount) {
                return preCount - 1;
              });
              clearInterval(countDownTimer);
              countDownTimer = setInterval(function () {
                return setCount(function (preCount) {
                  return preCount - 1;
                });
              }, 1000);

            case 15:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
  };

  useEffect(function () {
    // 倒计时完后，重新设置成可获取验证码
    if (count <= 0) {
      setCount(initCountDown);
      clearInterval(countDownTimer);
    }
  }, [count]);
  return /*#__PURE__*/React.createElement(_Row, {
    gutter: 8
  }, /*#__PURE__*/React.createElement(_Col, {
    span: 16
  }, /*#__PURE__*/React.createElement(_Input, {
    size: size,
    value: value,
    onChange: onChange,
    placeholder: "\u9A8C\u8BC1\u7801",
    maxLength: 6,
    prefix: prefixIconVisible && /*#__PURE__*/React.createElement(MailOutlined, {
      className: "".concat(prefixCls, "__icon-outlined")
    })
  })), /*#__PURE__*/React.createElement(_Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(_Button, {
    size: size,
    disabled: count > 0 && count !== initCountDown,
    block: true,
    onClick: handleCodeClick
  }, count > 0 && count !== initCountDown ? "".concat(count, "\u79D2") : '获取验证码')));
};

CodeInput.defaultProps = {
  value: '',
  initCountDown: 60,
  size: 'large',
  mobile: '',
  mobileName: 'mobile',
  prefixIconVisible: true,
  prefixCls: 'yz-login'
};
export default CodeInput;