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">
					<view class="pay-way-item" @click="gyBankPay">
						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
						<view>贵州银行</view>
					</view>
					<view class="pay-way-item" @click="wechatPay">
						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
						<view>微信支付</view>
					</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";
	export default {
		props: {
			// 弹框显示
			payWayPop: {
				type: Boolean,
				default: false
			},
			// 订单数组
			curOrderList: {
				type: Array,
				default: null
			},
			// 设备编号
			deviceNo: {
				type: String,
				default: null
			}
		},
		data() {
			return {}
		},
		methods: {
			/**
			 * 贵阳银行支付
			 * @param {Array} orderList 需要支付的订单号组成的数组
			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
			 * */
			gyBankPay() {
				const params = {
					orderList: this.curOrderList,
					deviceNo: this.deviceNo,
					jumpUrl: window.location.href
				};
				this.$u.api.payGzbank(params).then(res=>{
					if (res.data.needPay) {
						let payUrl = res.data.url;
						window.location.href = payUrl;
					} else {
						this.$refs.uToast.show({
							title: '无需支付',
							type: 'info',
						});
						setTimeout(() => {
							location.reload()
						}, 1000)
					}
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			/**
			 * 微信支付
			 * 判断vuex中是否存在openId
			 * 存在直接调起微信支付
			 * 不存在则通过微信登录去获取用户的code
			 * 完成后通过code去获取用户的openId等信息
			 * 最后再调起微信支付
			 * */
			wechatPay() {
				const openId = this.$store.state.vuex_wxinfo.openId
				if (openId) {
					this.getWXPay(this.curOrderList, this.deviceNo)
				} else {
					this.getCode()
				}
			},
			/**
			 * 调起微信支付接口
			 * @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;
					}
				});
			},
			/**
			 * 获取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>