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

有赞vue wap业务组件库

import "vant/es/cell/style";
import _Cell from "vant/es/cell";
import "vant/es/loading/style";
import _Loading from "vant/es/loading";
import payConfig from '../config/pay-config';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return !_vm.loading ? _c('div', {
      staticClass: "cap-pay-item",
      class: [{
        'cap-pay-item--disabled': !_vm.payWay.available
      }, _vm.highlightClass],
      style: {
        color: _vm.highlightColor
      },
      on: {
        "click": _vm.onPayClick
      }
    }, [_c('div', {
      staticClass: "cap-pay-item__wrapper"
    }, [_c('p', {
      staticClass: "cap-pay-item__content"
    }, [_vm._v(_vm._s(_vm.payWayDesc))]), _vm.extraDesc ? _c('p', {
      staticClass: "cap-pay-item__light"
    }, [_vm._v("\n      " + _vm._s(_vm.extraDesc) + "\n    ")]) : _vm._e()])]) : _c('div', {
      staticClass: "cap-pay-item"
    }, [_c('van-loading', {
      staticClass: "cap-pay-item__loading"
    })], 1);
  },
  name: 'van-payitem',
  components: {
    'van-loading': _Loading,
    'van-cell': _Cell
  },
  props: {
    payWay: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    onClick: {
      type: Function,
      validate: function validate(value) {
        return typeof value === 'function';
      }
    }
  },
  data: function data() {
    // 支付方式显示
    var payWayDesc = this.payWay.pay_channel_name;
    return {
      payWayDesc: payWayDesc,
      extraDesc: this.payWay.available_desc ? '（' + this.payWay.available_desc + '）' : ''
    };
  },
  computed: {
    highlightColor: function highlightColor() {
      var highlightData = payConfig[this.payWay.pay_channel] || {};
      return highlightData.color || '';
    },
    highlightClass: function highlightClass() {
      var highlightData = payConfig[this.payWay.pay_channel] || {};
      return this.highlightColor ? '' : highlightData.className || '';
    }
  },
  methods: {
    onPayClick: function onPayClick() {
      if (!this.payWay.available) return;
      this.onClick(this.payWay);
    }
  }
};