微信支付

通过微信扫码,在微信浏览器内打开网页,提交订单并进行微信支付的前端代码

jQuery:
在这里插入图片描述

VUE项目:

// 确定支付
	       pay(msg){
	         //console.log('用户选择的支付方式===' + msg)
	         var that = this;
	        console.log('用户uid===' + that.uid)
	        console.log('订单号oid===' + that.oid)
	        if(msg[0] == 2){
	        //   that.$vux.loading.show({
	        //       text: '支付跳转中'
	        //   });
	          that.wePay()
	        }else{
	          that.$vux.toast.text('请选择支付方式', 'middle');
	        }
	      },
	
	
	  // 微信支付
	      wePay(){
	        var that = this;
	        that.$vux.loading.show({
	              text: '支付跳转中~' 
	          });
	        that.$axios.post('webPay/?oid=' + that.oid + '&price=' + that.price).then(response => {
	          that.msg = response;
	          that.$vux.loading.hide()
	          that.callpay(response.data)
	        })
	        .catch((error) => {
	          // alert(error)
	          setTimeout(function(){
	            //that.$vux.loading.hide()
	            that.closePayModal();
	            that.$vux.toast.show("支付失败 ",'middle');
	            // that.$router.push({name: 'index'});
	        },1000)
	      })
	    },
	
	
	    callpay(data){
	        var that = this;
			if (typeof WeixinJSBridge == "undefined"){
			    if( document.addEventListener ){
	                document.addEventListener('WeixinJSBridgeReady', 
	                that.jsApiCall(data), false);
			    }else if (document.attachEvent){
	                document.attachEvent('WeixinJSBridgeReady',  
	                that.jsApiCall(data)); 
	                document.attachEvent('onWeixinJSBridgeReady',  
	                that.jsApiCall(data)); 
			    }
			}else{
			    that.jsApiCall(data);
			}
	    },
	
	
	    jsApiCall(data){
	        var that = this;
			var new_data = JSON.parse(decodeURIComponent(data));     //此处很关键,
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				new_data,
				function(res){
	    			if(res.err_msg == "get_brand_wcpay_request:ok" ){
	    				 location.href = "{:url('/order_status')}";
			      		// 使用以上方式判断前端返回,微信团队郑重提示:
			            //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
		      		}else{
		      			alert("支付失败!");
		      		}
				}
			);
		}