wxpay.vue

<template>
	<view class="content">
		<view class="nav-content">
			<uni-icons color="#212121" class="search-icon-arrowleft" size="24" type="arrowleft" @click="goBack" />
			<view class="title">微信支付</view>
		</view>
		<view class="sub-title">
			谛宝多多订单-{{order_id}}
		</view>
		<view class="price">
			￥{{amount}}
		</view>
		<button type="primary" class="submit-btn" :loading="loading" @click="handleSumit">立即支付</button>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import {parse} from 'querystring'
	export default{
		components: {
			uniIcons
		},
		data(){
			return {
				loading: false,
				amount: '',
				order_id: '',
				type: '' // monthly:连续包月
			}
		},
		onLoad(options){
			const { href } = location;
			const { amount, order_id, code } = parse(href.split('?')[1]);
			this.amount = amount;
			this.order_id = order_id;
			this.type = uni.getStorageSync('monthly') || '';
		},
		methods: {
			handleSumit(){
				const { href } = location;
				const { amount, order_id, code } = parse(href.split('?')[1]);
				if(!amount || !order_id || !code){
					uni.showToast({
						title: '参数错误请重新支付',
						icon: 'none'
					})
					return;
				}
				this.loading = true;
				let url = '';
				if(this.type === 'monthly') {
					url = '/uni/api/month_repayment/GoPay'
				} else {
					url = '/uni/api/repayment/GoPay';
				}
				uni.request({
					url: url,
					method: 'post',
					dataType: 'json',
					data: {
						amount: parseFloat(amount),
						order_id: order_id,
						payment_code: "epaywxjs",
						payment_name: "微信支付",
						wx_code: code
					},
					success: (res) => {
						const {data} = res;
						this.loading = false;
						if(data.code === 0){
							this.onBridgeReady(data.data);
						}
					}
				})
			},
			onBridgeReady(res){
				if(res.package === undefined){
					uni.showToast({
						title: '获取参数失败，请重新支付',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => {
						history.back();
					},2000);
					return;
				}
				jWeixin.miniProgram.getEnv(function (result) {
					if(result.miniprogram){
						var path = '/pages/pay/index?payParam='+encodeURIComponent(JSON.stringify(res))+'&type=uni';
						jWeixin.miniProgram.navigateTo({url: path});
					} else {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": res.app_id,     //公众号名称，由商户传入
								"timeStamp": res.timeStamp,         //时间戳，自1970年以来的秒数
								"nonceStr": res.nonce_str, //随机串
								"package": res.package,
								"signType": res.sign_type,         //微信签名方式：
								"paySign": res.pay_sign //微信签名
							},
							function (res) {
								WeixinJSBridge.log(res.err_msg);
								const url = window.location.origin;
								if (res.err_msg === "get_brand_wcpay_request:ok") {
									uni.removeStorageSync('monthly');
									uni.navigateTo({
										url: '/pages/payresult/payresult'
									})
								} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
									uni.showToast({
										title: '已取消支付,请重新支付',
										duration: 2000,
										icon: 'none'
									});
									setTimeout(() => {
										history.back();
									},2000);
								} else if (res.err_msg === "get_brand_wcpay_request:fail") {
									// Toast.fail('支付失败', 3);
									uni.showToast({
										title: '支付失败，请重新支付',
										duration: 2000,
										icon: 'none'
									});
									// 回退上一页重新支付
									setTimeout(() => {
										history.back();
									},2000);
									// 提示支付失败，关闭当前页面
									// setTimeout(function() {
										//这个可以关闭安卓系统的手机
										 // document.addEventListener(
											// 	"WeixinJSBridgeReady",
											// 	function() {
											// 		WeixinJSBridge.call("closeWindow");
											// 	},
											//  false
										 // );
											// //这个可以关闭ios系统的手机
										 // WeixinJSBridge.call("closeWindow");
										 // this.$jump(`${url}?app=member`);
									// }, 300);
								} else {
									uni.showToast({
										title: '未知错误，刷新重试',
										duration: 2000,
										icon: 'none'
									});
								}
							}
						);
					}
				})
			},
			goBack(){
				this.$backup();
			}
		}
	}
</script>

<style lang="scss">
	.nav-content{
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		.search-icon-arrowleft{
			width: 40rpx;
			position: absolute;
			left: 20rpx;
		}
		.title{
			text-align: center;
			width: 100%;
			font-size: 30rpx;
		}
	}
	.sub-title{
		font-size:30rpx;
		text-align: center;
		color: #5d5d5d;
		margin-top: 120rpx;
	}
	.price{
		text-align: center;
		margin-top: 50rpx;
		font-size: 60rpx;
	}
	.submit-btn{
		margin: 0 48rpx;
		margin-top: 80rpx;
		font-size: 34rpx;
		
	}
	uni-button[type=primary]{
		background-color: #07c160; 
	}
	uni-button[loading][type=primary]{
		background-color: #06ae56;
	}
	.button-hover[type=primary]{
		color: rgba(0,0,0,.5);
		background-color: #06ae56;
	}
</style>