parking_h5/pages/paymentMethod/paymentMethod.vue

<template>
  <!-- 
		支付方式选择  微信or贵阳银行
	 -->
  <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
    },
    // 跳转页面
    jumpUrl: {
      type: String,
      default: null
    }
  },
  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
      };
      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'
          });
        });
    },
    /**
     * 聚合支付
     * 判断vuex中是否存在openId
     * 存在直接调起微信支付
     * 不存在则通过微信登录去获取用户的code
     * 完成后通过code去获取用户的openId等信息
     * 最后再调起微信支付
     * */
    juhePay() {
      this.getWXPayByJava(this.curOrderList, this.deviceNo);
    },
    /**
     * 微信支付
     */
    wechatPay() {
      this.$u.api
        .wechatPayApi({
          orderList: this.curOrderList,
          openid: this.vuex_wxinfo.openId,
          deviceNo: this.deviceNo || undefined,
          payeeId: this.payeeId || undefined,
          payeeName: this.payeeName || undefined
        })
        .then((res) => {
          if (res.code === 200) {
            $wxPay.wexinPay(res.data.wx).then((res1) => {
              switch (Number(res1.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: '',
        jumpUrl: this.jumpUrl,
        deviceNo: deviceNo ? deviceNo : null,
        payeeId: this.payeeId,
        payeeName: this.payeeName
      };
      this.$u.api
        .ordinaryWxPay(params)
        .then((res) => {
          if (res.code === 200) {
            // if (getEnvIsWx()) {
            // 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
            // } else {
            // 	location.href = res.data.qrCodeUrl
            // }
            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>