parking_h5/pages/paymentMethod/paymentMethod.vue

<!--
 * @Description: 支付方式选择  微信or快捷支付or聚合支付
 * @Author: 空白格
 * @Date: 2022-08-01 11:45:20
 * @LastEditors: 空白格
 * @LastEditTime: 2022-09-01 09:54:36
 * @FilePath: \parking_h5\pages\paymentMethod\paymentMethod.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->

<template>
  <view>
    <u-modal
      v-model="payWayPop"
      :title-style="{ color: '#404040' }"
      title="缴费方式"
      width="660rpx"
      :show-confirm-button="false"
      :show-cancel-button="false"
    >
      <view class="slot-content">
        <view class="pay-way-new">
          <!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
						<view class="title">贵州银行</view>
						<view class="subtitle">前三个月每天首次一分钱<br/>长期八折优惠</view>
					</view>
					<view class="pay-way-item pay-way-item-jh" @click="wechatPay">
						<image src="../../static/img/juhe-icon.png" mode=""></image>
						<view class="title">微信/支付宝</view>
					</view> -->
          <view class="pay-way-item pay-way-item-hy" @click="$u.debounce(gyBankPay, 1000, (immediate = true))">
            <image src="/static/img/gyyh-icon.svg" mode=""></image>
            <view class="title">贵州银行</view>
          </view>
          <!-- #ifdef H5 || MP-WEIXIN -->
          <view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))" v-if="wxEnv">
            <image src="/static/img/weixin-icon.svg" mode=""></image>
            <view class="title">微信支付</view>
          </view>
          <!-- #endif -->
          <view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
            <image src="/static/img/juhe-icon.svg" mode=""></image>
            <view class="title">聚合支付</view>
          </view>
        </view>
        <view class="pay-way-subtitle">
          <view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
          <!-- #ifdef H5 || MP-WEIXIN -->
          <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view>
          <!-- #endif -->
          <view class="pay-way-subtitle-item">&nbsp;</view>
        </view>
        <button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
      </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: false
    },
    // 订单数组
    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
    },
    // 跳转页面
    jumpUrl: {
      type: String,
      default: null
    },
    // 出口扫码   接口不一样
    exportFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      wxEnv: true
    };
  },
  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,
        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,
        sanPay: this.sanPay
      };
      if (this.exportFlag) {
        this.$u.api.parkingWechatPayApi(params).then((res) => {
          if (res.code === 200) {
            $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'
                  });
                  break;
                case 2: // 支付失败
                  this.$refs.uToast.show({
                    title: '支付失败，请检查!',
                    type: 'error'
                  });
                  break;
              }
            });
          }
        });
      } else {
        this.$u.api.wechatPayApi(params).then((res) => {
          if (res.code === 200) {
            $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'
                  });
                  break;
                case 2: // 支付失败
                  this.$refs.uToast.show({
                    title: '支付失败，请检查!',
                    type: 'error'
                  });
                  break;
              }
            });
          }
        });
      }
    },
    /**
     * 直接通过后台获取贵阳银行微信支付地址
     * @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,
        sanPay: this.sanPay
      };
      if (this.exportFlag) {
        this.$u.api
          .polyPayExportApi(params)
          .then((res) => {
            if (res.code === 200) {
              localStorage.setItem('jumpUrl', this.jumpUrl);
              location.href = res.data.qrCodeUrl;
            } else {
              uni.hideLoading();
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '无法调起微信支付!',
              type: 'error'
            });
          });
      } else {
        this.$u.api
          .ordinaryWxPay(params)
          .then((res) => {
            if (res.code === 200) {
              localStorage.setItem('jumpUrl', this.jumpUrl);
              location.href = res.data.qrCodeUrl;
            } else {
              uni.hideLoading();
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '无法调起微信支付!',
              type: 'error'
            });
          });
      }
    },
    /**
     * 关闭弹框
     * */
    closePaymentMethod() {
      this.$emit('closePaymentMethod');
    }
  }
};
</script>

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