parking_h5/pages/paymentMethod/paymentMethod.vue

<template>
	<!-- 
		支付方式选择  微信or贵阳银行
	 -->
	<view>
		<u-modal v-model="payWayPop" :title-style="{color: '#404040'}" title="缴费方式" :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>
				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	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 {}
		},
		methods: {
			/**
			 * 贵阳银行支付
			 * @param {Array} orderList 需要支付的订单号组成的数组
			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
			 * */
			gyBankPay() {
				uni.showLoading({
					title: '加载中'
				});
				const params = {
					orderList: this.curOrderList,
					deviceNo: this.deviceNo,
					jumpUrl: this.jumpUrl,
					payeeId: this.payeeId,
					payeeName: this.payeeName,
					pursueType: this.pursueType,
					sanPay: this.sanPay
				};
				console.log(params)
				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等信息
			 * 最后再调起微信支付
			 * */
			wechatPay() {
				uni.showLoading({
					title: '加载中'
				});
				this.getWXPayByJava(this.curOrderList, this.deviceNo)
			},
			/**
			 * 直接通过后台获取贵阳银行微信支付地址
			 * @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,
					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>