captain-ui/es/pay-cashier-wsc/src/main.js

有赞vue wap业务组件库

import "vant/es/button/style";
import _Button from "vant/es/button";
import "vant/es/radio/style";
import _Radio from "vant/es/radio";
import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import "vant/es/popup/style";
import _Popup from "vant/es/popup";

var _components;

import _formatMoney from '@youzan/utils/money/format';
import BalanceConfirm from './balanceComfirm';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('van-popup', {
      attrs: {
        "position": "bottom",
        "close-on-click-overlay": false
      },
      model: {
        value: _vm.showPopup,
        callback: function callback($$v) {
          _vm.showPopup = $$v;
        },
        expression: "showPopup"
      }
    }, [_c('div', {
      staticClass: "desk-container"
    }, [_c('section', {
      staticClass: "section-title"
    }, [_c('van-icon', {
      staticClass: "icon-close",
      attrs: {
        "name": "close"
      },
      on: {
        "click": _vm.closePopup
      }
    }), _c('p', {
      staticClass: "title"
    }, [_vm._v("支付")])], 1), _c('section', {
      staticClass: "section-price"
    }, [_c('p', {
      staticClass: "price"
    }, [_vm._v("¥ " + _vm._s(_vm._f("formatMoney")(_vm.price)))]), _c('p', {
      staticClass: "product-name"
    }, [_vm._v(_vm._s(_vm.productName))])]), _c('section', {
      staticClass: "section-pay-way",
      on: {
        "click": function click($event) {
          _vm.selectWay('balance');
        }
      }
    }, [_c('van-radio', {
      attrs: {
        "name": "balance",
        "disabled": !_vm.payWays.balance
      },
      model: {
        value: _vm.payWay,
        callback: function callback($$v) {
          _vm.payWay = $$v;
        },
        expression: "payWay"
      }
    }, [_c('p', {
      staticClass: "pay-way"
    }, [_vm._v("店铺余额支付")]), _c('p', {
      class: {
        'pay-way-tip': true,
        'not-afford': !_vm.canAfford
      }
    }, [_vm._v("\n          " + _vm._s(_vm.balanceText) + "\n        ")])])], 1), _c('section', {
      staticClass: "section-pay-way",
      class: [_vm.payWays.weixin ? '' : 'pay-way-hide'],
      on: {
        "click": function click($event) {
          _vm.selectWay('weixin');
        }
      }
    }, [_c('van-radio', {
      attrs: {
        "name": "weixin"
      },
      model: {
        value: _vm.payWay,
        callback: function callback($$v) {
          _vm.payWay = $$v;
        },
        expression: "payWay"
      }
    }, [_c('p', {
      staticClass: "pay-way-only"
    }, [_vm._v("微信支付")])])], 1), _c('section', {
      staticClass: "section-pay-way",
      class: [_vm.payWays.ali ? '' : 'pay-way-hide'],
      on: {
        "click": function click($event) {
          _vm.selectWay('ali');
        }
      }
    }, [_c('van-radio', {
      attrs: {
        "name": "ali"
      },
      model: {
        value: _vm.payWay,
        callback: function callback($$v) {
          _vm.payWay = $$v;
        },
        expression: "payWay"
      }
    }, [_c('p', {
      staticClass: "pay-way-only"
    }, [_vm._v("支付宝支付")])])], 1), _c('section', {
      staticClass: "section-pay-way",
      class: [_vm.payWays.transfer ? '' : 'pay-way-hide'],
      on: {
        "click": function click($event) {
          _vm.selectWay('transfer');
        }
      }
    }, [_c('van-radio', {
      attrs: {
        "name": "transfer"
      },
      model: {
        value: _vm.payWay,
        callback: function callback($$v) {
          _vm.payWay = $$v;
        },
        expression: "payWay"
      }
    }, [_c('p', {
      staticClass: "pay-way"
    }, [_vm._v("汇款支付")]), _c('p', {
      staticClass: "pay-way-tip"
    }, [_vm._v("需提交汇款凭证，3个工作日内完成审核")])])], 1), _vm.payWays.credit ? _c('section', {
      staticClass: "section-pay-way",
      on: {
        "click": function click($event) {
          _vm.selectWay('credit');
        }
      }
    }, [_c('van-radio', {
      attrs: {
        "name": "credit"
      },
      model: {
        value: _vm.payWay,
        callback: function callback($$v) {
          _vm.payWay = $$v;
        },
        expression: "payWay"
      }
    }, [_c('p', {
      staticClass: "pay-way-only"
    }, [_vm._v("信用卡支付")])])], 1) : _vm._e()]), _c('van-button', {
      staticClass: "btn-sure-pay",
      attrs: {
        "type": "danger"
      },
      on: {
        "click": _vm.preConfirmPay
      }
    }, [_vm._v("\n    确认付款 " + _vm._s(_vm._f("formatMoney")(_vm.price)) + " 元\n  ")]), _c('balance-confirm', {
      attrs: {
        "show": _vm.showBalanceConfirm,
        "price": _vm.price,
        "balance": _vm.balance
      },
      on: {
        "close": function close($event) {
          _vm.toggleBalanceConfirm(false);
        },
        "confirm": _vm.confirmPay
      }
    })], 1);
  },
  name: 'pay-cashier-wsc',
  components: (_components = {}, _components[_Popup.name] = _Popup, _components[_Icon.name] = _Icon, _components[_Radio.name] = _Radio, _components[_Button.name] = _Button, _components[BalanceConfirm.name] = BalanceConfirm, _components),
  filters: {
    formatMoney: function formatMoney(v) {
      return _formatMoney(v);
    }
  },
  props: {
    show: {
      type: Boolean,
      requied: true
    },
    price: {
      type: Number,
      requied: true
    },
    balance: {
      type: Number,
      requied: true
    },
    productName: {
      type: String,
      requied: true
    },
    payWays: {
      type: Object,
      requied: true
    }
  },
  data: function data() {
    return {
      showPopup: this.show,
      payWay: this.payWays.balance ? 'balance' : 'weixin',
      showBalanceConfirm: false
    };
  },
  computed: {
    balanceText: function balanceText() {
      var balanceText = _formatMoney(this.balance);

      return this.canAfford ? "\u5269\u4F59 \uFFE5" + balanceText + "\u5143" : "\u5269\u4F59 \uFFE5" + balanceText + "\u5143\uFF0C\u91D1\u989D\u4E0D\u8DB3\u8BF7\u5148\u5145\u503C";
    },
    canAfford: function canAfford() {
      return this.balance >= this.price;
    }
  },
  watch: {
    show: function show(newV, oldV) {
      this.showPopup = newV;
    },
    payWays: function payWays(newV, oldV) {
      this.payWay = newV.balance ? 'balance' : 'weixin';
    }
  },
  methods: {
    selectWay: function selectWay(payWay) {
      if (this.payWays[payWay]) {
        this.payWay = payWay;
      }

      this.$emit('selected-way', this.payWay);
    },
    closePopup: function closePopup() {
      this.$emit('hide');
    },
    confirmPay: function confirmPay() {
      this.$emit('to-pay');
    },
    preConfirmPay: function preConfirmPay() {
      // 余额支付需要二次确认
      if (this.payWay === 'balance') {
        this.toggleBalanceConfirm(true);
      } else {
        this.confirmPay();
      }
    },
    toggleBalanceConfirm: function toggleBalanceConfirm(show) {
      this.showBalanceConfirm = show;
    }
  }
};