@fe6/water-pro/es/input/sms-code.js

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

import { createVNode as _createVNode, resolveComponent as _resolveComponent } from "vue";

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; }

import _regeneratorRuntime from "@babel/runtime/regenerator";

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); }

import { __awaiter, __rest } from "tslib";
import { defineComponent, ref } from 'vue';
import { hasOwn } from '@fe6/shared';
import AButton from '../button';
import useFetch from '../_util/hooks/use-fetch';
import classNames from '../_util/classNames';
import { getComponent, getOptionProps } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import AInput from './Input';
import inputProps from './inputProps';
export default defineComponent({
  name: 'ASmsCode',
  components: {
    AInput: AInput,
    AInputGroup: AInput.Group
  },
  mixins: [BaseMixin],
  inheritAttrs: false,
  emit: ['on-enter'],
  props: _extends(_extends({}, inputProps), {
    prefixCls: PropTypes.string.def('ant-input-smscode'),
    inputPrefixCls: PropTypes.string.def('ant-input'),
    formTest: PropTypes.looseBool,
    buttonOptions: Object,
    btnText: PropTypes.string,
    api: {
      type: Function,
      default: null
    },
    before: {
      type: Function,
      default: function _default(fn) {
        fn();
      }
    },
    ajaxParams: {
      type: Function,
      default: function _default() {
        return {};
      }
    },
    smsInputStyle: PropTypes.style
  }),
  setup: function setup(props) {
    var _a;

    var _useConfigInject = useConfigInject('input-smscode', props),
        configProvider = _useConfigInject.configProvider;

    var _useFetch = useFetch(props.api),
        loading = _useFetch.loading,
        fetch = _useFetch.fetch;

    var btnContent = 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 __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
          var _this3 = this;

          var params;
          return _regeneratorRuntime.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 = 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 = __rest(_a, ["prefixCls", "inputPrefixCls", "size", "suffix", "action", "visibilityToggle", "iconRender", "buttonOptions", "smsInputStyle"]);

    var className = this.$attrs.class;
    var inputClassName = classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-").concat(size), !!size));
    var isLoading = hasOwn(buttonOptions, 'loading') ? buttonOptions.loading || this.sendLoading : this.sendLoading;

    var inputProps = _extends(_extends(_extends(_extends({}, restProps), {
      prefixCls: inputPrefixCls,
      size: size,
      prefix: getComponent(this, 'prefix'),
      addonAfter: getComponent(this, 'addonAfter'),
      addonBefore: 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 _createVNode(AInput.Group, {
      "class": "ant-input-smscode",
      "compact": true
    }, {
      default: function _default() {
        return [_createVNode(_resolveComponent("a-input"), inputProps, null), _createVNode(AButton, btnProps, {
          default: function _default() {
            return [_this4.btnContent];
          }
        })];
      }
    });
  }
});