<!--
* @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"> </view>
<!-- #endif -->
<view class="pay-way-subtitle-item"> </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
},
// 其他参数
otherParams: {
type: Object,
default: () => {}
}
},
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,
...this.otherParams
};
if (this.exportFlag) {
this.$u.api.parkingWechatPayApi(params).then((res) => {
if (res.code === 200) {
if (res.data.needPay) {
$wxPay.weixinPay(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.weixinPay(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>