VUE支付宝和微信支付和银联支付

支付宝和银联支付是一样的

后台返回时的一个form表单如图

QQ截图20190830161851.jpg

前端需要将后台传入的表达提交即可

               const div = document.createElement('div') // 创建div
               div.innerHTML = res.data.html // 将返回的form 放入div
                document.body.appendChild(div)
                document.forms[0].submit();

微信H5支付

2222.jpg

      goWechatPayH5() {
                let _this = this;
                let obj = {
                    pay_sn: this.payItem.pay_sn,
                };
                let url = encodeURI(window.location.href + '?openLayer=1')
                this.$fetch(this.phpApiHost + "/mobile/index.php?act=goods_assemble&op=wxpay2_h5_launch", obj, "post", "application/json").then(res => {
                    if (res.code === 200) {
                        window.location.href = res.data.mweb_url + '&redirect_url=' + url;
                    } else if (res.code === 400) {
                        _this.$toast(res.error)
                    }
                });
            },

微信公众号支付

//后台获取支付参数
 goWxPublicPay() {
                console.log('goWxPublicPay')
                let _this = this;
                let obj = {
                    pay_sn: this.payItem.pay_sn,
                    openid: this.openId
                };
                this.$fetch(this.phpApiHost + "/mobile/index.php?act=wxpay_ver3&op=index", obj, "post", "application/json").then(res => {
                    if (res.code === 200) {
                        this.payData=res.data
                        _this.callPay()
                    } else if (res.code === 400) {
                        _this.$toast(res.error)
                    }
                });

            },

          wxApiCall() {
                let _this = this,obj=this.payData;
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId": obj.appId, //公众号名称，由商户传入     
                        "timeStamp": obj.timeStamp, //时间戳
                        "nonceStr": obj.nonceStr, //随机串     
                        "package": obj.package,
                        "signType": "MD5", //微信签名方式：
                        "paySign": obj.paySign //微信签名
                    },
                    function(res) {
                        //清空支付信息
                        // _this.payData = {};
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                             _this.$toast('支付成功');
                        } else if (res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg == "get_brand_wcpay_request:cancel") {
                            _this.$toast('似乎有点问题，稍后重新支付');
                        }
                    });

            },
            callPay(obj) {
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener("WeixinJSBridgeReady", this.wxApiCall, false);
                    } else if (document.attachEvent) {
                        document.attachEvent("WeixinJSBridgeReady", this.wxApiCall);
                        document.attachEvent("onWeixinJSBridgeReady", this.wxApiCall);
                    }
                } else {
                    this.wxApiCall();
                }
            },