H5微信支付流程

点击去支付按钮 => 必填字段校验 => 判断是否为微信浏览器

        confirmPayment() {
            // 判断是否为微信浏览器
            if (isWeChat()) {
                // 支付类型：微信浏览器
                this.userOrder.tradeType = "JSAPI";
                this.userOrder.openId = this.openId;
                // 1、在产品详情中存储：链接参数"productParam"和产品信息"productForm"；
                // 2、在出行日历中存储：出行日历信息"scheduleForm"；
                // 3、在订单填写中存储：订单信息"orderForm"；
                // 4、在订单确认中获取已经保存的相关信息，组装订单，提交后台；
                let formObj = {
                    uopiList: this.travelers,
                    userOrder: this.userOrder,
                }
                 
                post(apiCode.createCustomerOrder, formObj).then(res => {
                if (res.code === 0) {
                    // 下单完成清除保存的信息
                    storage.remove("productForm");
                    storage.remove("scheduleForm");
                    storage.remove("orderForm");
                    storage.setString("orderId", res.data.userOrder.orderFlownumber);
                    this.prepayId = res.data.userOrder.prepayId;
                    // 调起微信支付
                    if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener(
                        "WeixinJSBridgeReady",
                        this.onBridgeReady,
                        false
                        );
                    } else if (document.attachEvent) {
                        document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
                        document.attachEvent(
                        "onWeixinJSBridgeReady",
                        this.onBridgeReady
                        );
                    }
                    } else {
                    this.onBridgeReady();
                    }
                } else {
                    this.$toast(res.message);
                }
                });
            } else {
                // 支付类型：非微信浏览器
                this.userOrder.tradeType = "MWEB";
                // 1、在产品详情中存储：链接参数"productParam"和产品信息"productForm"；
                // 2、在出行日历中存储：出行日历信息"scheduleForm"；
                // 3、在订单填写中存储：订单信息"orderForm"；
                // 4、在订单确认中获取已经保存的相关信息，组装订单，提交后台；
                let formObj = {
                    uopiList: this.travelers,
                    userOrder: this.userOrder,
                }
                post(apiCode.createCustomerOrder, formObj).then(res => {
                if (res.code === 0) {
                    // 下单完成清除保存的信息
                    storage.remove("productForm");
                    storage.remove("scheduleForm");
                    storage.remove("orderForm");
                    storage.setString("orderId", res.data.userOrder.orderFlownumber);
                    window.location.href = res.data.userOrder.mwebUrl;
                    // 是否调起支付标志
                    storage.setString("isPay", "0");
                } else {
                    this.$toast(res.message);
                }
                });
            }
        },
________________________________
        onBridgeReady() {
            const appId = "wx68fa393a2964f20d"; //公众号名称，由商户传入
            const timeStamp = new Date().getTime() + ""; //时间戳，自1970年以来的秒数
            const nonceStr = randomWord(false, 32); //随机串
            const prepay = "prepay_id=" + this.prepayId; //订单详情扩展字符串
            const signType = "MD5"; //微信签名方式
            const paramStr = `appId=${appId}&nonceStr=${nonceStr}&package=${prepay}&signType=${signType}&timeStamp=${timeStamp}&key=63b36cd548f998260edc886ddf19fe97`;
            const paySign = Md5Util.md5(paramStr).toUpperCase();
            WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                appId: appId,
                timeStamp: timeStamp,
                nonceStr: nonceStr,
                package: prepay,
                signType: signType,
                paySign: paySign
                },
                res => {
                // 支付完成引导
                this.showModal = true;
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }
                }
            );
        },

截屏2020-06-11 上午9.55.29.png