@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
260 lines (225 loc) • 8.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _tslib = require("tslib");
var _shared = require("@fe6/shared");
var _button = _interopRequireDefault(require("../button"));
var _useFetch2 = _interopRequireDefault(require("../_util/hooks/use-fetch"));
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
var _propsUtil = require("../_util/props-util");
var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _Input = _interopRequireDefault(require("./Input"));
var _inputProps = _interopRequireDefault(require("./inputProps"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _default2 = (0, _vue.defineComponent)({
name: 'ASmsCode',
components: {
AInput: _Input.default,
AInputGroup: _Input.default.Group
},
mixins: [_BaseMixin.default],
inheritAttrs: false,
emit: ['on-enter'],
props: _extends(_extends({}, _inputProps.default), {
prefixCls: _vueTypes.default.string.def('ant-input-smscode'),
inputPrefixCls: _vueTypes.default.string.def('ant-input'),
formTest: _vueTypes.default.looseBool,
buttonOptions: Object,
btnText: _vueTypes.default.string,
api: {
type: Function,
default: null
},
before: {
type: Function,
default: function _default(fn) {
fn();
}
},
ajaxParams: {
type: Function,
default: function _default() {
return {};
}
},
smsInputStyle: _vueTypes.default.style
}),
setup: function setup(props) {
var _a;
var _useConfigInject = (0, _useConfigInject2.default)('input-smscode', props),
configProvider = _useConfigInject.configProvider;
var _useFetch = (0, _useFetch2.default)(props.api),
loading = _useFetch.loading,
fetch = _useFetch.fetch;
var btnContent = (0, _vue.ref)(props.btnText || ((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.Input.smsCode.btnText) || '获取验证码');
return {
sendLoading: loading,
fetch: fetch,
configProvider: configProvider,
btnContent: btnContent
};
},
data: function data() {
return {
smsCode: '',
// 验证码 start
allTimes: 0,
start: false,
timer: null,
go: true,
// 验证码 end
phone: '',
input: null
};
},
created: function created() {
this.setSmsCode();
this.setPhone();
this.resetCode();
},
beforeUnmount: function beforeUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
},
methods: {
saveInput: function saveInput(node) {
this.input = node;
},
resetCode: function resetCode() {
var _a;
this.btnContent = this.btnText || ((_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.Input.smsCode.btnText) || '获取验证码';
this.allTimes = 60;
this.go = true;
this.start = false;
},
auto: function auto() {
var _this = this;
setTimeout(function () {
var _a;
if (_this.start) {
if (_this.allTimes > 1) {
_this.allTimes--;
_this.btnContent = "".concat(_this.allTimes).concat(((_a = _this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.Input.smsCode.btnUnit) || '秒后重试');
_this.timer = setTimeout(_this.auto.bind(_this), 1000);
} else {
clearTimeout(_this.timer);
_this.resetCode();
}
}
}, 50);
},
sendSMSCode: function sendSMSCode() {
var _this2 = this;
this.before(function (valid) {
return (0, _tslib.__awaiter)(_this2, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
var _this3 = this;
var params;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if ((!this.formTest || !valid) && !this.sendLoading && !this.start && this.go) {
params = _extends({
phone: this.phone
}, this.ajaxParams());
this.fetch({
params: params,
error: function error() {
_this3.resetCode();
},
success: function success(result) {
if (result) {
if (_this3.go && !_this3.start) {
_this3.go = false;
_this3.start = true;
_this3.auto();
}
}
}
});
}
case 1:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
});
},
setPhone: function setPhone() {
this.phone = this.user;
},
setSmsCode: function setSmsCode() {
this.smsCode = String(this.value);
this.resetCode();
},
changeSmsCode: function changeSmsCode(e) {
this.$emit('update:value', this.smsCode || e.target.value);
this.$emit('change', e);
this.$emit('input', e);
},
enterSms: function enterSms() {
this.$emit('on-enter');
}
},
render: function render() {
var _this4 = this;
var _a = (0, _propsUtil.getOptionProps)(this),
prefixCls = _a.prefixCls,
inputPrefixCls = _a.inputPrefixCls,
size = _a.size,
suffix = _a.suffix,
action = _a.action,
visibilityToggle = _a.visibilityToggle,
iconRender = _a.iconRender,
buttonOptions = _a.buttonOptions,
smsInputStyle = _a.smsInputStyle,
restProps = (0, _tslib.__rest)(_a, ["prefixCls", "inputPrefixCls", "size", "suffix", "action", "visibilityToggle", "iconRender", "buttonOptions", "smsInputStyle"]);
var className = this.$attrs.class;
var inputClassName = (0, _classNames2.default)(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-").concat(size), !!size));
var isLoading = (0, _shared.hasOwn)(buttonOptions, 'loading') ? buttonOptions.loading || this.sendLoading : this.sendLoading;
var inputProps = _extends(_extends(_extends(_extends({}, restProps), {
prefixCls: inputPrefixCls,
size: size,
prefix: (0, _propsUtil.getComponent)(this, 'prefix'),
addonAfter: (0, _propsUtil.getComponent)(this, 'addonAfter'),
addonBefore: (0, _propsUtil.getComponent)(this, 'addonBefore')
}), this.$attrs), {
class: inputClassName,
autocomplete: 'off',
onChange: this.changeSmsCode,
onKeyup: this.enterSms,
ref: 'input',
style: smsInputStyle
});
var btnProps = _extends(_extends({}, buttonOptions), {
loading: isLoading,
onClick: function onClick() {
_this4.sendSMSCode();
}
});
return (0, _vue.createVNode)(_Input.default.Group, {
"class": "ant-input-smscode",
"compact": true
}, {
default: function _default() {
return [(0, _vue.createVNode)((0, _vue.resolveComponent)("a-input"), inputProps, null), (0, _vue.createVNode)(_button.default, btnProps, {
default: function _default() {
return [_this4.btnContent];
}
})];
}
});
}
});
exports.default = _default2;