parking_h5/pages/choosePayment/choosePayment.vue

<template>
  <view>
    <u-modal
      v-model="payWayPop"
      :title-style="{ color: '#404040' }"
      title="选择支付方式"
      width="550rpx"
      :show-confirm-button="false"
      :show-cancel-button="false"
    >
      <view class="pay-content">
        <view class="pay-list">
          <radio-group>
            <view class="pay-list-item">
              <view class="pay-list-item-image">
                <image class="image" src="/static/img/wechat-icon-new.png" mode="aspectFit" />
                <view>微信支付</view>
              </view>
              <view class="radioBox">
                <radio color="#2DCF8C" value="1" :checked="1 === radioCurrent" />
              </view>
            </view>
            <view class="pay-list-item">
              <view class="pay-list-item-image">
                <image class="image" src="/static/img/gy-icon-new.png" mode="aspectFit" />
                <view>贵州银行</view>
              </view>
              <view class="radioBox">
                <radio color="#2DCF8C" value="2" :checked="2 === radioCurrent" />
              </view>
            </view>
            <view class="pay-list-item">
              <view class="pay-list-item-image">
                <image class="image" src="/static/img/juhe-icon-new.png" mode="aspectFit" />
                <view>聚合支付</view>
              </view>
              <view class="radioBox">
                <radio color="#2DCF8C" value="3" :checked="3 === radioCurrent" />
              </view>
            </view>
          </radio-group>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getEnvIsWx } from '@/utils/judgEnvironment.js';
import $wxPay from '@/utils/wxPay.js';
export default {
  props: {
    // 弹框显示
    payWayPop: {
      type: Boolean,
      default: true
    },
    // 订单数组
    curOrderList: {
      type: Array,
      default: null
    },
    // 设备编号
    deviceNo: {
      type: String,
      default: null
    },
    // 地磁支付需要字段
    payeeId: {
      type: String,
      default: undefined
    },
    // 地磁支付需要字段
    payeeName: {
      type: String,
      default: undefined
    },
    // 扫码支付需要字段
    sanPay: {
      type: Boolean,
      default: false
    },
    // 追缴类型
    pursueType: {
      type: String,
      default: undefined
    },
    // 车牌号
    vehicleNo: {
      type: String,
      default: undefined
    },
    // 跳转页面
    jumpUrl: {
      type: String,
      default: null
    },
    // 出口扫码   接口不一样
    exportFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      wxEnv: true,
      radioCurrent: 1
    };
  },
  created() {
    this.wxEnv = getEnvIsWx();
  },
  methods: {
    /**
     * 贵阳银行支付
     * @param {Array} orderList 需要支付的订单号组成的数组
     * @param {String} deviceNo 设备编号(只有车位锁部分有)
     * */
    gyBankPay() {
      const params = {
        orderList: this.curOrderList,
        deviceNo: this.deviceNo,
        jumpUrl: this.jumpUrl,
        payeeId: this.payeeId,
        payeeName: this.payeeName,
        pursueType: this.pursueType,
        vehicleNo: this.vehicleNo,
        sanPay: this.sanPay
      };
      if (this.exportFlag == true) {
        this.$u.api
          .quickPayExportApi(params)
          .then((res) => {
            if (res.data.needPay) {
              let payUrl = res.data.url;
              location.href = payUrl;
            } else {
              this.$refs.uToast.show({
                title: '无需支付',
                type: 'info'
              });
              setTimeout(() => {
                uni.hideLoading();
                location.reload();
              }, 1000);
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: err.msg,
              type: 'error'
            });
          });
      } else {
        this.$u.api
          .payGzbank(params)
          .then((res) => {
            if (res.data.needPay) {
              let payUrl = res.data.url;
              location.href = payUrl;
            } else {
              this.$refs.uToast.show({
                title: '无需支付',
                type: 'info'
              });
              setTimeout(() => {
                uni.hideLoading();
                location.reload();
              }, 1000);
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: err.msg,
              type: 'error'
            });
          });
      }
    },
    /**
     * 聚合支付
     * */
    juhePay() {
      this.getWXPayByJava(this.curOrderList, this.deviceNo);
    },
    /**
     * 微信支付
     */
    wechatPay() {
      const params = {
        orderList: this.curOrderList,
        openid: this.vuex_wxinfo.openId,
        deviceNo: this.deviceNo || undefined,
        payeeId: this.payeeId || undefined,
        payeeName: this.payeeName || undefined,
        vehicleNo: this.vehicleNo,
        sanPay: this.sanPay
      };
      if (this.exportFlag) {
        this.$u.api.parkingWechatPayApi(params).then((res) => {
          if (res.code === 200) {
            if (res.data.needPay) {
              $wxPay.wexinPay(res.data.wx).then((r) => {
                switch (Number(r.code)) {
                  case 0: // 成功
                    //#ifdef H5
                    window.location.reload();
                    //#endif
                    break;
                  case 1: // 取消
                    this.$refs.uToast.show({
                      title: '已取消支付',
                      type: 'info'
                    });
                    window.location.reload();
                    break;
                  case 2: // 支付失败
                    this.$refs.uToast.show({
                      title: '支付失败，请检查!',
                      type: 'error'
                    });
                    break;
                }
              });
            } else {
              this.$refs.uToast.show({
                title: '无需支付',
                type: 'info'
              });
              setTimeout(() => {
                uni.hideLoading();
                location.reload();
              }, 1000);
            }
          }
        });
      } else {
        this.$u.api.wechatPayApi(params).then((res) => {
          if (res.code === 200) {
            if (res.data.needPay) {
              $wxPay.wexinPay(res.data.wx).then((r) => {
                switch (Number(r.code)) {
                  case 0: // 成功
                    //#ifdef H5
                    window.location.reload();
                    //#endif
                    break;
                  case 1: // 取消
                    this.$refs.uToast.show({
                      title: '已取消支付',
                      type: 'info'
                    });
                    window.location.reload();
                    break;
                  case 2: // 支付失败
                    this.$refs.uToast.show({
                      title: '支付失败，请检查!',
                      type: 'error'
                    });
                    break;
                }
              });
            } else {
              this.$refs.uToast.show({
                title: '无需支付',
                type: 'info'
              });
              setTimeout(() => {
                uni.hideLoading();
                location.reload();
              }, 1000);
            }
          }
        });
      }
    },
    /**
     * 直接通过后台获取贵阳银行微信支付地址
     * @param {Array} list 需要支付的订单组合数组
     * @param {Number} deviceNo 设备编号(在停车锁部分需要)
     * */
    getWXPayByJava(orderList, deviceNo) {
      let params = {
        orderList: orderList,
        openid: this.vuex_wxinfo.openId,
        jumpUrl: this.jumpUrl,
        deviceNo: deviceNo ? deviceNo : null,
        payeeId: this.payeeId,
        payeeName: this.payeeName,
        pursueType: this.pursueType,
        vehicleNo: this.vehicleNo,
        sanPay: this.sanPay
      };
      if (this.exportFlag) {
        this.$u.api
          .polyPayExportApi(params)
          .then((res) => {
            if (res.code === 200) {
              if (res.data.needPay) {
                localStorage.setItem('jumpUrl', this.jumpUrl);
                location.href = res.data.qrCodeUrl;
              } else {
                this.$refs.uToast.show({
                  title: '无需支付',
                  type: 'info'
                });
                setTimeout(() => {
                  uni.hideLoading();
                  location.href = this.jumpUrl;
                }, 1000);
              }
            } else {
              uni.hideLoading();
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '无法调起微信支付!',
              type: 'error'
            });
          });
      } else {
        this.$u.api
          .ordinaryWxPay(params)
          .then((res) => {
            if (res.code === 200) {
              if (res.data.needPay) {
                localStorage.setItem('jumpUrl', this.jumpUrl);
                location.href = res.data.qrCodeUrl;
              } else {
                this.$refs.uToast.show({
                  title: '无需支付',
                  type: 'info'
                });
                setTimeout(() => {
                  uni.hideLoading();
                  location.href = this.jumpUrl;
                }, 1000);
              }
            } else {
              uni.hideLoading();
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '无法调起微信支付!',
              type: 'error'
            });
          });
      }
    },
    /**
     * 关闭弹框
     * */
    closePaymentMethod() {
      this.$emit('closePaymentMethod');
    }
  }
};
</script>

<style lang="scss" scoped>
@import './choosePayment.scss';
</style>