drip-ui/es/payment-picker/index.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "drip-payment-picker"
    }, [_c('ul', {
      staticClass: "drip-payment-picker__list"
    }, _vm._l(_vm.amountList, function (amount, i) {
      return _c('li', {
        key: i,
        staticClass: "drip-payment-picker__list-item"
      }, [_c('span', {
        staticClass: "payment-picker-cell",
        "class": {
          selected: _vm.selectedIndex === i
        },
        on: {
          "click": function click($event) {
            _vm.pick(i);
          }
        }
      }, [_c('em', {
        staticClass: "payment-amount"
      }, [_vm._v(_vm._s(amount))]), _vm._v(_vm._s(_vm.unit) + "\n      ")])]);
    })), _vm.showOtherAmount ? _c('label', {
      staticClass: "drip-payment-picker__other-amount"
    }, [_c('input', {
      staticClass: "other-amount-input",
      attrs: {
        "type": "number",
        "placeholder": _vm.placeholder
      },
      domProps: {
        "value": _vm.otherAmount
      },
      on: {
        "focus": _vm.inputFocus,
        "blur": _vm.inputBlur,
        "change": _vm.inputChange
      }
    }), _c('span', {
      staticClass: "amount-unit"
    }, [_vm._v(_vm._s(_vm.unit))])]) : _vm._e()]);
  },
  name: 'drip-payment-picker',
  props: {
    value: {
      type: Number,
      "default": function _default() {
        return 10;
      }
    },
    placeholder: {
      type: String,
      "default": '其他金额'
    },
    unit: {
      type: String,
      "default": '元'
    },
    amountList: {
      type: Array,
      "default": function _default() {
        return [10, 20, 50, 100, 500, 1000];
      }
    },
    showOtherAmount: {
      type: Boolean,
      "default": true
    },
    defaultIndex: {
      type: Number,
      "default": 0
    }
  },
  data: function data() {
    return {
      otherAmount: '',
      inputing: false
    };
  },
  computed: {
    selectedIndex: function selectedIndex() {
      if (this.inputing) {
        return -1;
      }

      return this.amountList.indexOf(this.value);
    }
  },
  watch: {
    value: {
      handler: function handler() {
        var _this = this;

        this.$nextTick(function () {
          if (!_this.showOtherAmount) {
            if (_this.selectedIndex === -1) {
              _this.$emit('input', _this.amountList[_this.defaultIndex]);
            }

            return;
          }

          if (~_this.selectedIndex) {
            _this.otherAmount = '';
          } else {
            _this.otherAmount = _this.value;
          }
        });
      },
      immediate: true
    }
  },
  methods: {
    pick: function pick(index) {
      this.$emit('input', this.amountList[index]);
    },
    inputFocus: function inputFocus() {
      this.inputing = true;
    },
    inputBlur: function inputBlur() {
      this.inputing = false;
    },
    inputChange: function inputChange(ev) {
      var value = +ev.target.value;

      if (value > 0) {
        this.$emit('input', value);
      } else {
        ev.target.value = this.otherAmount = '';
        this.$emit('input', this.amountList[this.defaultIndex]);
      }
    }
  }
});