@51yzone/pc-components
Version:
An enterprise-class UI design language and React-based implementation
211 lines (168 loc) • 7.13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
require("antd/lib/input/style");
var _input = _interopRequireDefault(require("antd/lib/input"));
require("antd/lib/col/style");
var _col = _interopRequireDefault(require("antd/lib/col"));
require("antd/lib/row/style");
var _row = _interopRequireDefault(require("antd/lib/row"));
require("antd/lib/message/style");
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _regex = require("../constants/regex");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var __awaiter = void 0 && (void 0).__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());
});
};
/**
* 关键字：手机验证码
* 新增人：徐友万
*/
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 = (0, _react.useState)(initCountDown),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
count = _useState2[0],
setCount = _useState2[1]; // 获取验证码
var handleCodeClick = function handleCodeClick() {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _mobile;
return _regenerator["default"].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字段
_message2["default"].warning('请先输入手机号');
_context.next = 15;
break;
case 9:
if (!_regex.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);
}));
};
(0, _react.useEffect)(function () {
// 倒计时完后，重新设置成可获取验证码
if (count <= 0) {
setCount(initCountDown);
clearInterval(countDownTimer);
}
}, [count]);
return /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 16
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
size: size,
value: value,
onChange: onChange,
placeholder: "\u9A8C\u8BC1\u7801",
maxLength: 6,
prefix: prefixIconVisible && /*#__PURE__*/_react["default"].createElement(_icons.MailOutlined, {
className: "".concat(prefixCls, "__icon-outlined")
})
})), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
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'
};
var _default = CodeInput;
exports["default"] = _default;