// main.js
router.beforeEach(async (to: RouteLocationNormalized,from: RouteLocationNormalized,next) => {
    // 判斷有沒(méi)有openId 即授權(quán)了直接放行
    if (store.state.openId) {
        next()
    } else {
        // 沒(méi)有授權(quán)去授權(quán)獲取code 再放行
        const code = await getCode()
        await queryInfo(code)
        next()
    }
})

// 獲取code
function getCode() {
    const code = getUrlCode()?.code
    if (!code) {
        // 沒(méi)有code 請(qǐng)求后端接口進(jìn)行鏈接跳轉(zhuǎn)獲取code(鏈接值微信的授權(quán)鏈接，成功授權(quán)后會(huì)跳回 回調(diào)地址，在回調(diào)地址上 會(huì)攜帶code參數(shù))
        return getWxOauthUrl({
            redirectUrl: window.location.href
        }).then(async ({data}) => {
            if (data.statusCode === 0) {
                window.location.replace(data.msg)
            }
        })
    } else {
        return code
    }
}

// 通過(guò)code 獲取用戶信息
function queryInfo(code: string) {
    return getUserInfo([code]).then(({data}) => {
        const result = data.data || {}
        store.commit('getUserInfo', result)
        store.commit('getUserOpenId', result.openId)
    })
}

// 獲取url 參數(shù)的通用方法
function getUrlCode() {
    // 截取url中的code方法
    const url = location.search;
    const theRequest = new Object();
    if (url.indexOf("?") !== -1) {
        const str = url.substr(1);
        const strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
    }
    return theRequest;
}

// 首先在index.html 中引入微信JS-SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// 然后在支付邏輯中添加以下代碼即可~

if (typeof WeixinJSBridge == "undefined") {
               if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                  document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
              } else {
                onBridgeReady();
              }

function onBridgeReady(result) {
              WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": ,   //公眾號(hào)ID，由商戶傳入
                "timeStamp": ,   //時(shí)間戳，自1970年以來(lái)的秒數(shù)
                "nonceStr": ,      //隨機(jī)串
                "package": ,
                "signType": ,     //微信簽名方式：
                "paySign": 
              },
              function (res) {
                if ((res.errMsg || res.err_msg) === "get_brand_wcpay_request:ok") {
                  // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：
                  //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。
                  
                }
              });
            }

// 跳轉(zhuǎn)中間頁(yè)，把請(qǐng)求支付的參數(shù)一并帶過(guò)去
window.open(`${location.origin}/pay.htm?params=${encodeURIComponent(JSON.stringify(params))}`)

let getQueryString = function (url, name) {
        let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
        if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
    };

    // 獲取接口返回的表單 進(jìn)行支付
    function handlePayForm(data) {
        const div = document.createElement("div");
        div.setAttribute("id", "payContainer");
        div.innerHTML = data
        document.body.appendChild(div);
        const payContainer = document.querySelector("#payContainer");
        const submit = payContainer.querySelector(
            'form[name="punchout_form"] input[type="submit"]'
        );
        submit.click();
        setTimeout(function () {
            div.remove();
        }, 500);
    };
    if (location.hash.indexOf('error') !== -1) {
        alert('參數(shù)錯(cuò)誤，請(qǐng)檢查');
    } else {
        // 判斷當(dāng)前的瀏覽器環(huán)境是不是微信瀏覽器
        let ua = navigator.userAgent.toLowerCase();
        let tip = document.querySelector(".weixin-tip");
        let tipImg = document.querySelector(".J-weixin-tip-img");
        const query = JSON.parse(decodeURIComponent(getQueryString(location.href, 'params')))

        if (ua.indexOf('micromessenger') !== -1) {
            // 如果是微信里的頁(yè)面，做個(gè)指引（請(qǐng)通過(guò)瀏覽器進(jìn)行支付）
            // 這個(gè)頁(yè)面自己定義即可
        } else {
            // 好的，這是外部瀏覽器，請(qǐng)求接口獲取支付的from表單
            axios({
                url: '',
                data: query,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(({data}) => {
                if (data.statusCode === 0) {
                    // 后端返回的form表單進(jìn)行支付
                    if (data.data && data.data.returnCode === "SUCCESS") {
                        // data.data.result ==> 是一個(gè)支付的from表單
                        handlePayForm(data.data.result)
                    }
                }
            })
        }
    }