mini-industry-antui/es/car-number/index.js

小程序行业组件

Component({
  data: {
    keyOpened: false,
    inputValue: ['', '', '', '', '', '', ''],
    type: 'province', // 键盘的 type 值
    add: false,
    currentInput: 0,
    number: [{ focus: false }, { focus: false }, { focus: false }, { focus: false }, { focus: false }, { focus: false }, { focus: false }]
  },
  props: {
    focusIndex: false, // input 的 focus 状态
    className: '',
    disableArray: [], // disable Item的数组，默认‘I’，‘O’ disable
    value: [],
    close: ''
  },
  didMount: function didMount() {
    if (this.props.focusIndex && Number.isSafeInteger(this.props.focusIndex) && this.props.focusIndex > 0 && this.props.focusIndex < 8) {
      this.onInputTap(this.props.focusIndex - 1);
      this.setData({
        keyOpened: true
      });
    }
    if (Array.isArray(this.props.value) && this.props.value.length > 6) {
      if (this.props.value.length === 8) {
        this.setData({
          add: true
        });
        this.onAdd();
      }
      this.setData({
        inputValue: this.props.value
      });
    }
  },
  didUpdate: function didUpdate(prevProps, prevData) {
    if (this.data.keyOpened !== prevData.keyOpened) {
      this.onKeyboardOpened();
    }
    // 关闭键盘
    if ('close' in this.props && !this.props.close) {
      this.setData({
        keyOpened: this.props.close
      });
      this.clearFocus();
      this.onKeyboardOpened();
    }
    if ('value' in this.props && !this._handleCompare(this.props.value, this.data.inputValue) && this._handleCompare(this.data.inputValue, prevData.inputValue)) {
      if (this.props.value.length === 8 && !this.data.add) {
        this.onAdd();
      }
      this.setData({
        inputValue: this.props.value
      });
    }
    if ('focusIndex' in this.props && this.props.focusIndex) {
      this.onInputTap(this.props.focusIndex - 1);
      this.setData({
        keyOpened: true
      });
      this.onSetFocus();
    }
  },

  methods: {
    // 点击 input 框
    onInputTap: function onInputTap(ev) {
      this.clearFocus();
      var curId = '';
      if (ev && ev.currentTarget) {
        curId = ev.currentTarget.id;
      } else {
        curId = 'input-' + ev;
      }
      var curNum = parseInt(curId.substring(6, 7), 10);
      if (curId === 'input-0') {
        this.setData({
          type: 'province',
          switchToAbc: 'ABC',
          currentInput: curNum
        });
      } else {
        this.setData({
          type: 'alphanum',
          switchToAbc: '省份',
          currentInput: curNum
        });
      }
      if (!this.data.keyOpened) {
        this.setData({
          keyOpened: true
        });
        this.onKeyboardOpened();
      }
      if (!this.data.number[curNum].focus) {
        var param = {};
        var string = 'number[' + curNum + ']';
        param[string] = { focus: true };
        this.setData(param);
      }
    },

    // 切换 ABC 和 省份
    onSwitchToAbc: function onSwitchToAbc(ev) {
      if (ev.type === 'province') {
        this.setData({
          type: 'alphanum',
          switchToAbc: '省份'
        });
      } else {
        this.setData({
          type: 'province',
          switchToAbc: 'ABC'
        });
      }
    },

    // 回收键盘
    onComplete: function onComplete() {
      this.setData({
        keyOpened: false
      });
    },

    // Item 的click操作
    onItemClick: function onItemClick(ev) {
      this.clearFocus();
      var param = {};
      var string = 'inputValue[' + this.data.currentInput + ']';
      var numFocus = 'number[' + (this.data.currentInput + 1) + ']';
      if (this.data.currentInput > 6 && this.data.add) {
        numFocus = 'number[7]';
        this.onInputTap(7);
      } else if (this.data.currentInput === 6 && !this.data.add) {
        numFocus = 'number[6]';
      } else {
        this.onInputTap(this.data.currentInput + 1);
      }
      param[string] = ev.inputValue;
      param[numFocus] = { focus: true };
      this.setData(param);
      this.onChange(ev);
    },

    // Item 删除功能
    onDelete: function onDelete(ev) {
      if (this.data.inputValue[this.data.currentInput] === '' && this.data.currentInput - 1 > -1) {
        this.onInputTap(this.data.currentInput - 1);
      }
      var param = {};
      var string = 'inputValue[' + this.data.currentInput + ']';
      param[string] = ev.inputValue;
      this.setData(param);
      this.onChange(ev);
    },

    // 增加一个input
    onAdd: function onAdd(e) {
      this.clearFocus();
      var param = {};
      var string = 'number[7]';
      param[string] = { focus: true };
      param.add = true;
      this.setData(param);
      e && this.onInputTap(7);
    },

    // 输入变化时更新
    onChange: function onChange() {
      var onChange = this.props.onChange;

      if (onChange) {
        var param = {};
        var string = 'inputValue';
        param[string] = this.data.inputValue;
        onChange(param);
      }
    },

    // 清除聚焦状态
    clearFocus: function clearFocus() {
      var numberList = this.data.number;
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = numberList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var value = _step.value;

          value.focus = false;
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator['return']) {
            _iterator['return']();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      this.setData({
        number: numberList
      });
    },

    // 监听键盘状态
    onKeyboardOpened: function onKeyboardOpened() {
      var onKeyboardOpened = this.props.onKeyboardOpened;

      if (onKeyboardOpened) {
        var param = {};
        var string = 'keyboardOpened';
        param[string] = this.data.keyOpened;
        onKeyboardOpened(param);
      }
    },
    onSetFocus: function onSetFocus() {
      var onSetFocus = this.props.onSetFocus;

      if (onSetFocus) {
        onSetFocus();
      }
    },

    // 比较数组
    _handleCompare: function _handleCompare(arr1, arr2) {
      if (arr1.length !== arr2.length) {
        return false;
      }
      var ret = true;
      arr1.forEach(function (v, i) {
        if (v !== arr2[i]) {
          ret = false;
        }
      });
      return ret;
    }
  }
});