Get order Number

// Send back end parameters about the order
let data = {
    phone,
    / / the amount
    payPrice:
    userName,
    meritsRegion,
    userAddress,
    customVision,
    id
};

// Call the background interface to get orderCode
let orderCode = await addActivity(data);
Copy the code

1. Pay treasure

The simplest is alipay payment, the background will return a form, we can use JS to submit

// Pay by Alipay
// Send the amount and order number to get the form
const form = await zfb_web_pay({
    / / order number
    orderCode,
    / / the amount
    amount
});

const div = document.createElement('div');
div.id = 'alipay';
div.innerHTML = form;
document.body.appendChild(div);
this.$nextTick(function() {
    // Alipay will be invoked after execution
    document
        .getElementById('alipay')
        .children[0].submit();
    // Clear the previous payment form
    document.body.removeChild(div);
});
Copy the code

2. Wechat external payment

Wechat external payment is to return a URL address to call up the wechat app for payment

// Wechat external payment
// Send the amount and order number to get the url of wechat Pay
const { mweb_url } = await wx_WEB({
    / / order number
    orderCode,
    / / the amount
    amount
});
window.location.href = mweb_url;
Copy the code

3. Wechat internal JSAPI payment

Wechat internal payment is the most troublesome, because the front end needs to jump to a URL to obtain the code, and then transfer the interface to exchange for openId according to this code

// Wechat internal JSAPI payment

// Jump to get code in the component's beforeRouteEnter navigation guard
beforeRouteEnter(to, from, next) {
    next(vm= > {
        // If it is wechat internal browser
        if (isWxBrowser()) {
            // If there is no code
            if(! vm.code) {const url =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=$openId} {public platform & redirect_uri =' +
                    encodeURIComponent(window.location.href) +
                    '&response_type=code&scope=snsapi_base#wechat_redirect';
                // Jump link to get code
                window.location.href = url;
            } else {
                // Get code for openIdvm.getOpenId(vm.code); }}}); },computed: {
	code() {
      return getQueryString('code')}},methods: {// Call the interface to exchange code for openId
    getOpenId(code) {
        getOpenId({
            code
        })
            .then(res= > {
                this.openId = res;
            })
            .catch(err= > {
                console.log(err);
            });
    },
    
    getQueryString(name) {
      var reg = new RegExp('(^ | &)' + name + '= (/ ^ & *) (& | $)'.'i')
      var r = window.location.search.substr(1).match(reg)
      if(r ! =null) return unescape(r[2])
      return null}}const wxPayInfo = await wx_WEBNEI({
    / / order number
    orderCode,
    / / the amount
    openId: this.openId
});
weixinPay(wxPayInfo);

weixinPay(data) {
    if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
            document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeReady(data),
                false
            );
        } else if (document.attachEvent) {
            document.attachEvent(
                'WeixinJSBridgeReady',
                onBridgeReady(data)
            );
            document.attachEvent(
                'onWeixinJSBridgeReady', onBridgeReady(data) ); }}else{ onBridgeReady(data); }}function onBridgeReady(data) {
    window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
            appId: data.appId, // The public id is passed in by the merchant
            timeStamp: data.timeStamp, // Timestamp, the number of seconds since 1970
            nonceStr: data.nonceStr, / / random string
            package: data.package, // Order details extension string
            signType: data.signType, // wechat signature:
            paySign: data.sign // Wechat signature
        },
        function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                Toast.success('Payment successful');
            } else {
                Toast.fail('Payment failed! '); }}); }Copy the code