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';
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() {
			uni.showLoading({
				title: '加载中'
			});
			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() {
			uni.showLoading({
				title: '加载中'
			});
			this.getWXPayByJava(this.curOrderList, this.deviceNo);
		},
		/**
		 * 微信支付
		 */
		wechatPay() {
			// this.$refs.uToast.show({
			// 	title: '暂不支持',
			// 	type: 'info',
			// });
			this.$pay.wxPay({ orderList: this.curOrderList, openid: this.vuex_wxinfo.openId }).then(res => {
				console.log(res);
			});
		},
		/**
		 * 调起微信支付接口
		 * @param {Array} list 需要支付的订单组合数组
		 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
		 * */
		async getWXPay(orderList, deviceNo) {
			let params = {
				orderList: orderList,
				openid: this.$store.state.vuex_wxinfo.openId,
				deviceNo: deviceNo ? deviceNo : null
			};

			await this.$wxApi.config();
			this.$pay.wechatPay(params).then(res => {
				switch (Number(res.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;
						// this.cookie.set("jumpUrl",this.jumpUrl);
					} else {
						uni.hideLoading();
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '无法调起微信支付!',
						type: 'error'
					});
				});
		},
		/**
		 * 获取code
		 * 1 微信登录获取code
		 * 2 url中截取
		 * */
		getCode() {
			// 获取页面完整url
			const local = window.location.href;
			// 获取url后面的参数
			const locationLocaturl = window.location.search;
			// 截取url中的code
			this.code = getUrlParams(locationLocaturl, 'code');
			// 如果没有code，则去请求
			if (this.code == null || this.code === '') {
				window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(
					local
				)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`;
			} else {
				// 把code传给后台获取用户信息
				this.handleGetWXInfo(this.code);
			}
		},
		/**
		 * 通过code获取openId等用户信息
		 * 拿到用户信息后再调起微信支付
		 * */
		handleGetWXInfo(code) {
			let _this = this;
			this.$u.api
				.getWXInfo(code)
				.then(res => {
					if (res.code === 200) {
						this.$u.vuex('vuex_wxinfo', res.data);
						this.getWXPay(this.currentItem);
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		/**
		 * 关闭弹框
		 * */
		closePaymentMethod() {
			this.$emit('closePaymentMethod');
		}
	}
};
</script>

<style lang="scss" scoped>
@import './paymentMethod.scss';
</style>