parking_h5/pages/paymentMethod/paymentMethod.vue

<!--
 * @Description: 支付方式选择  微信or快捷支付or聚合支付
 * @Author: 空白格
 * @Date: 2022-08-01 11:45:20
 * @LastEditors: 空白格
 * @LastEditTime: 2023-01-03 10:21:16
 * @FilePath: \parking_h5\pages\choosePayment\choosePayment.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
			},
			// 车牌号
			vehicleNo: {
				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,
					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.$u.api.updateCouponStatusApi({
												orderList: this.curOrderList
											}).then(res => {
												if (res.code === 200) {
													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.$u.api.updateCouponStatusApi({
												orderList: this.curOrderList
											}).then(res => {
												if (res.code === 200) {
													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 './paymentMethod.scss';
</style>