PC端 微信支付 扫码之后页面跳转处理


其实就是用Ajax异步刷新去后台轮询、


if(payType == 'wxPay'){
    		$.ajax({
    	        url: "********",
    	        type: "post",
    	        data: {
    	        	oId: oId
    	        },
    	        success: function(result) {
    	            if(result == 'orderError'){
    	            	alert("订单信息异常...");
    	            	return false;
    	            }else{
    	            	var url = result;
    	            	jQuery('#qrcode').qrcode(url);
    	            	$(".orderBoxPay").hide();
    	            	$(".wxpay-box").slideDown("fast");
			            $(".markall").css({
			                display:"block",
			                height:document.body.clientHeight+"px",
			            });
			            
			            var repeat = 200;  // 限制执行次数为200次
			            var timer = setInterval(function() {    
			                if (repeat == 0) {
			                    clearInterval(timer);
			                    //处理页面提示信息
			                } else {
			                	//Ajax后台轮询 查询订单状态
			                	$.ajax({
					    	        url: "${path}/pages/order/checkOrderStatus",
					    	        type: "post",
					    	        data: {
					    	        	oId: oId
					    	        },
					    	        success: function(result) {
					    	            if(result == '1'){
					    	            	clearInterval(timer);
					    	            	window.location.href = "********";
					    	            }
					    	        }
					    	    });
			                	
			                    repeat--;
			                }
			            }, 3000);//3秒执行一次 总共200次 10分钟
    	            }
    	        }
    	    });
    	}


  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在 Vue PC端页面实现微信扫码支付,你需要使用微信支付的 Native 支付模式。具体步骤如下: 1. 向服务器获取支付二维码链接:你需要向服务器发送请求,获取支付二维码的链接。 2. 生成支付二维码:你可以使用第三方库 `qrcode` 来生成支付二维码,并将生成的二维码显示在页面上。 ```javascript import QRCode from 'qrcode' export default { data() { return { qrCodeUrl: '' // 存储二维码链接 } }, mounted() { this.getPayQrCode() }, methods: { getPayQrCode() { // 向服务器获取支付二维码链接 axios.get('/api/getPayQrCode') .then(res => { const qrCodeUrl = res.data.qrCodeUrl // 生成二维码 QRCode.toDataURL(qrCodeUrl, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrCodeUrl = dataUrl }) .catch(err => { console.error(err) }) }) .catch(err => { console.error(err) }) } } } ``` 以上代码中,`getPayQrCode` 方法向服务器获取支付二维码链接,然后使用 `qrcode` 库生成二维码,并将二维码链接存储在 `qrCodeUrl` 变量中,你可以将该变量绑定到一个 `img` 标签上来显示二维码。 3. 轮询支付状态:使用轮询的方式来查询支付状态,如果支付成功,则弹出支付成功的提示框。 ```javascript checkPayStatus() { setInterval(() => { axios.get('/api/checkPayStatus') .then(res => { const status = res.data.status if (status === 'success') { // 支付成功 this.showPaySuccess() } }) .catch(err => { console.error(err) }) }, 3000) }, showPaySuccess() { // 弹出支付成功的提示框 alert('支付成功!') } ``` 以上代码中,`checkPayStatus` 方法使用轮询的方式查询支付状态,每隔 3 秒发送一次请求,如果支付成功,则调用 `showPaySuccess` 方法弹出支付成功的提示框。 4. 调起微信扫码支付界面:在支付成功后,你需要调用微信扫码支付界面,在微信扫描支付二维码后完成支付。 ```javascript startNativePay() { const qrCodeUrl = '支付二维码的链接' const userAgent = window.navigator.userAgent.toLowerCase() if (userAgent.indexOf('micromessenger') === -1) { // 不在微信中,跳转支付链接 window.location.href = qrCodeUrl } else { // 在微信中,调起微信扫码支付界面 window.location.href = 'weixin://wxpay/bizpayurl?url=' + encodeURIComponent(qrCodeUrl) this.checkPayStatus() } } ``` 以上代码中,`startNativePay` 方法判断当前是否在微信中,如果在微信中,则使用 `weixin://wxpay/bizpayurl?url=` 协议调起微信扫码支付界面,并将支付二维码的链接作为参数传递给微信支付界面。支付成功后,使用轮询的方式查询支付状态,如果支付成功,则弹出支付成功的提示框。 希望这能帮助到你。如果你有其他问题,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值