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="gyBankPay">
						<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="wechatPay" 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="juhePay">
						<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 getUrlParams from '@/utils/getUrlParams.js';
	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>