psH5/pages/annex/offline_pay/index.vue

<template>
	<form class="form" @submit="checkForm" :style="colorStyle">
		<view class="input-section">
			<view class="section-hd">{{$t(`支付金额`)}}</view>
			<view class="section-bd">
				<view class="input-group">
					{{$t(`￥`)}}
					<input v-model.number="money" class="input" name="money" type="digit" @input="inputChange" placeholder="0.00" />
				</view>
				<view v-if="payPrice && show" class="discount">{{$t(`会员优惠价`)}}：{{$t(`￥`)}}{{ payPrice || 0 }}</view>
			</view>
		</view>
		<view class="radio-section">
			<view class="section-hd">{{$t(`支付方式`)}}</view>
			<radio-group class="section-bd" name="method">
				<label class="item" v-if="yuePay">
					<text class="iconfont icon-yue"></text>
					<view class="name">
						<text>{{$t(`余额支付`)}}</text>
						<text class="money">{{$t(`可用余额`)}}:{{$t(`￥`)}}{{ now_money || 0 }}</text>
					</view>
					<radio value="yue" :checked="payType === 'yue'" />
				</label>
				<label v-if="wxpay" class="item">
					<text class="iconfont icon-weixinzhifu"></text>
					<text class="name">{{$t(`微信支付`)}}</text>
					<radio value="weixin" :checked="payType === 'weixin'" />
				</label>
			</radio-group>
		</view>
		<button class="button" form-type="submit">{{$t(`确认`)}}</button>
		<view class="alipay" v-html="alipayHtml"></view>
	</form>
</template>

<script>
	import {
		offlineCheckPrice,
		offlineCreate,
		orderOfflinePayType
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
		import colors from "@/mixins/color";
	const app = getApp();
	export default {
		mixins: [colors],
		data() {
			return {
				money: '',
				payPrice: '',
				payType: 'weixin',
				alipayHtml: '',
				alipay: false,
				wxpay: false,
				yuePay: false,
				paying: false,
				now_money: 0,
				isWeixin: false,
				site_name: '',
				isCommitted: false,
				show: false
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (!this.isLogin) {
				toLogin()
			}
			// #ifdef H5
			if (options.code) {
				let spread = app.globalData.spid ? app.globalData.spid : '';
				wechatAuthV2(options.code, spread).then(res => {
					location.href = decodeURIComponent(
						decodeURIComponent(options.back_url)
					)
				})
			}
			// #endif
		},
		onShow() {
			if (this.isLogin) {
				this.getPayType();
			}
			//#ifdef H5
			this.isWeixin = this.$wechat.isWeixin();
			//#endif
		},
		methods: {
			inputChange(e){
				var that = this
				e.target.value = (e.target.value.match(/^\d*(.?\d{0,2})/g)[0]) || ""
				this.$nextTick(() => {
					this.money = e.target.value
					this.checkPrice();
				})
			},
			getPayType() {
				orderOfflinePayType()
					.then(res => {
						const {
							ali_pay_status,
							pay_weixin_open,
							yue_pay_status,
							offline_pay_status,
							site_name,
							now_money
						} = res.data;
						this.alipay = ali_pay_status;
						this.wxpay = pay_weixin_open;
						this.yuePay = yue_pay_status;
						this.now_money = now_money;
						this.site_name = site_name;
						if (!offline_pay_status) {
							uni.showModal({
								title: this.$t(`支付提醒`),
								content: this.$t(`线下支付已关闭，请点击确认按钮返回主页`),
								showCancel: false,
								success() {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							});
						}
						if (site_name) {
							uni.setNavigationBarTitle({
								title: site_name
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			},
			checkForm(e) {
				const {
					money,
					method
				} = e.detail.value;
				if (money) {
					this.combData(method);
				} else {
					uni.showToast({
						title: this.$t(`请输入支付金额`),
						icon: 'none'
					});
				}
			},
			// 优惠价
			checkPrice() {
				offlineCheckPrice({
						pay_price: this.money
					})
					.then(res => {
						this.payPrice = res.data.pay_price;
						this.show = res.data.show
					})
					.catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			},
			// 组合数据
			combData(payType) {
				let data = {
					type: 3,
					pay_type: payType,
					from: 'weixinh5',
					price: this.payPrice || this.money,
					money: this.money
				};
				
				// #ifdef H5
				if (this.isWeixin) {
					data.from = 'weixin';
				}
				// #endif
				// #ifdef MP
				data.from = 'routine';
				// #endif
				if (this.paying) {
					return;
				}
				this.paying = true;
				uni.showLoading({
					title: this.$t(`正在确认`)
				});
				offlineCreate(data)
					.then(res => {
						uni.hideLoading();
						this.callPay(res);
					})
					.catch(err => {
						this.paying = false;
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			},
			// 调用支付
			callPay(res) {
				const {
					status,
					result
				} = res.data, {
						orderId,
						jsConfig
					} = result,
					goPages = '/pages/annex/offline_result/index?site_name=' + this.site_name;
				switch (status) {
					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
						this.paying = false;
						this.$util.Tips({
							title: res.msg
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'SUCCESS':
						this.paying = false;
						this.money = '';
						this.$util.Tips({
							title: res.msg,
							icon: 'success'
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'WECHAT_PAY':
						// #ifdef MP
						let that = this;
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							timeStamp: jsConfig.timestamp,
							nonceStr: jsConfig.nonceStr,
							package: jsConfig.package,
							signType: jsConfig.signType,
							paySign: jsConfig.paySign,
							success: function(res) {
								that.$util.Tips({
									title: that.$t(`支付成功`),
									icon: 'success'
								}, {
									tab: 5,
									url: '/pages/annex/offline_result/index'
								});
							},
							fail: function() {
								uni.showToast({
									title: that.$t(`取消支付`),
									icon: 'none',
									success: function() {
										that.paying = false;
									}
								});
							},
							complete: function() {
								that.paying = false;
								uni.hideLoading();
							}
						});
						// #endif
						// #ifndef MP
						this.$wechat
							.pay(result.jsConfig)
							.then(res => {
								this.paying = false;
								this.$util.Tips({
									title: this.$t(`支付成功`),
									icon: 'success'
								}, {
									tab: 5,
									url: '/pages/annex/offline_result/index'
								});
							})
							.catch(err => {
								this.paying = false;
								if (err.errMsg == 'chooseWXPay:cancel') {
									uni.showToast({
										title: this.$t(`取消支付`),
										icon: 'none'
									});
								}
							});
						// #endif
						break;
					case 'PAY_DEFICIENCY':
						this.paying = false;
						this.$util.Tips({
							title: res.msg
						});
						break;
					case 'WECHAT_H5_PAY':
						this.paying = false;
						uni.showToast({
							title: res.msg,
							success() {
								location.href = jsConfig.h5_url;
							}
						});
						break;
					case 'ALIPAY_PAY':
						this.paying = false;
						// #ifdef H5
						if (this.$wechat.isWeixin()) {
							uni.navigateTo({
								url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
							});
						} else {
							this.alipayHtml = jsConfig;
							this.$nextTick(() => {
								document.getElementById('alipaysubmit').submit();
							});
						}
						// #endif
						// #ifdef MP
						uni.navigateTo({
							url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
						});
						// #endif
						break;
				}
			}
		}
	};
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss" scoped>
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
	    border: 1px solid #FDC383 !important;
	    background-color: #FDC383 !important;
	}
	.input-section {
		.section-hd {
			padding: 30rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.section-bd {
			padding-right: 30rpx;
			padding-left: 30rpx;
		}

		.input-group {
			display: flex;
			align-items: flex-end;
			padding: 45rpx 20rpx 47rpx;
			font-size: 80rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 110rpx;
			margin-left: 15rpx;
			font-size: 100rpx;
			color: #282828;
		}

		.discount {
			padding: 27rpx 20rpx;
			border-top: 1rpx solid #eeeeee;
			font-size: 28rpx;
			color: #e93323;
		}
	}

	.radio-section {
		border-top: 20rpx solid #f5f5f5;

		.section-hd {
			padding: 30rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.section-bd {
			padding-left: 50rpx;
		}

		.item {
			display: flex;
			align-items: center;
			padding-top: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.name{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.iconfont {
			font-size: 44rpx;
		}

		.icon-yue {
			color: #fe960f;
		}

		.icon-weixinzhifu {
			color: #41b035;
		}

		.icon-zhifubao {
			color: #099bdf;
		}

		.name {
			flex: 1;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.money {
			float: right;
			padding-right: 20rpx;
			font-size: 20rpx;
		}
	}

	.button {
		height: 86rpx;
		border-radius: 43rpx;
		margin: 114rpx 30rpx 30rpx;
		background: linear-gradient(90deg, #FEE2B7 0%, #FDC383 100%);
		font-size: 30rpx;
		line-height: 86rpx;
		color: #5D3324;
	}
	.alipay {
		display: none;
	}
</style>