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
			},
			//扫码支付需要字段
			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',
						});
					});
				}
			},
			/**
			 * 聚合支付
			 * 判断vuex中是否存在openId
			 * 存在直接调起微信支付
			 * 不存在则通过微信登录去获取用户的code
			 * 完成后通过code去获取用户的openId等信息
			 * 最后再调起微信支付
			 * */
			juhePay() {
				this.getWXPayByJava(this.curOrderList, this.deviceNo);
			},
			/**
			 * 微信支付
			 */
			wechatPay() {
				if (this.exportFlag) {
					this.$refs.uToast.show({
						title: '停车场暂不支持微信支付!',
						type: 'warning'
					});
				} else {
					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: 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>