captain-ui/es/pay/src/components/pay-list.js

有赞vue wap业务组件库

/* eslint-disable camelcase */
import PayItem from './pay-item';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-pay-list"
    }, _vm._l(_vm.displayPayWays, function (payWay) {
      return _c('cap-payitem', {
        key: payWay.pay_channel,
        attrs: {
          "pay-way": payWay,
          "on-click": _vm.doPayItemClick,
          "loading": payWay.pay_channel === _vm.loadingPayWay.pay_channel
        }
      });
    }), 1);
  },
  components: {
    'cap-payitem': PayItem
  },
  props: {
    loadingPayWay: Object,
    payWays: {
      type: Array,
      required: true
    },
    onPayItemClick: {
      type: Function,
      required: true
    }
  },
  data: function data() {
    return {
      showAllPayWays: false
    };
  },
  computed: {
    displayPayWays: function displayPayWays() {
      if (this.showAllPayWays) {
        return this.payWays;
      }

      var displayPayWays = this.payWays.filter(function (payWay) {
        return !payWay.should_wrap;
      });

      if (displayPayWays.length !== this.payWays.length) {
        displayPayWays.push({
          pay_channel_name: '更多支付方式',
          available: true,
          pay_channel: 'more'
        });
      }

      return displayPayWays;
    }
  },
  methods: {
    doPayItemClick: function doPayItemClick(payWay) {
      if (payWay.pay_channel === 'more') {
        this.showAllPayWays = true;
        return;
      }

      this.onPayItemClick(payWay);
    }
  }
};