抽离公众号 H5 支付为独立模块

Tevin

2021-05-13 353bc5084a28952e360c4e7a5dc22d552b4fe16d

抽离公众号 H5 支付为独立模块

 common/WxH5Pay.js

New file
@@ -0,0 +1,176 @@
/**
 * WxH5Pay
 * @author Tevin
 */

import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { Tools } from '@components/common/Tools';

const askModal = {
    $modal: null,
    show(type, callback) {
        const that = this;
        Taro.showModal({
            title: type === 'ask' ? '微信支付未响应？' : '微信支付仍未响应？',
            confirmColor: '#4a8aff',
            confirmText: type === 'ask' ? '点击重试' : '重载页面',
            success: res => {
                // 点击重试，执行回调
                if (res.confirm) {
                    callback(true);
                } else if (res.cancel) {
                    callback(false);
                }
                this.$modal = null;
            },
        });
        setTimeout(() => {
            this.$modal = $('.taro__modal');
        }, 10);
    },
    cancel() {
        if (this.$modal) {
            this.$modal.find('.taro-modal__foot > .taro-model__btn:eq(0)').trigger('click');
            this.$modal = null;
        }
    },
};

export class WxH5Pay {

    constructor() {
        this._data = {
            alreadyCall: false,
        };
    }

    callWxPay(payParam, callback, type = 'webview') {
        // 默认 webview 支付
        if (type === 'webview') {
            Tools.toast('正在微信支付...');
            this._data.alreadyCall = false;
            // 0.1 秒后发起正常支付
            setTimeout(() => {
                this._wvChooseWXPay(payParam, callback);
            }, 100);
            // 2.2 秒后，如果 alreadyCall 未变为 true，跳出询问弹窗
            setTimeout(() => {
                if (!this._data.alreadyCall) {
                    askModal.show('ask', next => {
                        if (next) {
                            this.callWxPay(payParam, callback, 'webview2');
                        } else {
                            callback('cancel', '支付已取消!（微信未响应）');
                            window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-noResponse', 0]);
                        }
                    });
                }
            }, 2200);
        }
        // 第二次 webview 支付
        else if (type === 'webview2') {
            // 重新发起支付
            Tools.toast('正在微信支付...');
            this._data.alreadyCall = false;
            // 0.1 秒后发起二次支付
            setTimeout(() => {
                this._wvBrandWCPay(payParam, callback);
            }, 100);
            // 2.2 秒后，如果 alreadyCall 未变为 true，跳出询问弹窗
            setTimeout(() => {
                if (!this._data.alreadyCall) {
                    askModal.show('reload', next => {
                        if (next) {
                            callback('fail', '页面重载中...');
                            window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-pageReload', 0]);
                            setTimeout(() => {
                                if (window.location.href.split('#')[0].indexOf('?') < 0) {
                                    window.location.href =
                                        window.location.href.split(/[#?]/)[0] + '?' + window.location.hash;
                                }
                                window.location.reload();
                            }, 1000);
                        } else {
                            callback('cancel', '支付已取消!（微信未响应）');
                            window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-noResponse', 0]);
                        }
                    });
                }
            }, 2200);
        }
    }

    _wvChooseWXPay(payParam, callback) {
        wx.ready(() => {
            window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-chooseWXPay:start', 0]);
            // 发起支付
            const sign = JSON.parse(payParam);
            wx.chooseWXPay({
                ...sign,
                timestamp: sign.timeStamp,
                complete: complete => {
                    // 关闭询问弹窗
                    askModal.cancel();
                    this._data.alreadyCall = true;
                    // 支付结果
                    if (complete.errMsg === 'chooseWXPay:ok') {
                        callback && callback('ok', '支付成功！');
                        window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-chooseWXPay:ok', 0]);
                    } else if (complete.errMsg === 'chooseWXPay:cancel') {
                        callback && callback('cancel', '支付已取消！');
                        window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-chooseWXPay:cancel', 0]);
                    } else {
                        let msg = '支付失败！';
                        // 例如 "chooseWXPay:没有此SDK或暂不支持此SDK模拟"
                        msg += complete.errMsg ? '（' + complete.errMsg + '）' : '';
                        callback && callback('fail', msg);
                        window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-chooseWXPay:fail', 0]);
                    }
                },
            });
        });
    }

    _wvBrandWCPay(payParam, callback) {
        const jsApiCall = () => {
            window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-BrandWCPay:start', 0]);
            // 发起支付
            const sign = JSON.parse(payParam);
            WeixinJSBridge.invoke('getBrandWCPayRequest', sign, res => {
                // 关闭询问弹窗
                askModal.cancel();
                this._data.alreadyCall = true;
                // 支付结果
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    callback && callback('ok', '支付成功！');
                    window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-brandWCPay:ok', 0]);
                } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                    callback && callback('cancel', '支付已取消！');
                    window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-brandWCPay:cancel', 0]);
                } else {
                    let msg = '支付失败！';
                    const errMsg = res.err_msg || res.errMsg || '';
                    // 例如 "chooseWXPay:没有此SDK或暂不支持此SDK模拟"
                    msg += errMsg ? '（' + errMsg + '）' : '';
                    callback && callback('fail', msg);
                    window._hmt.push(['_trackEvent', 'wx', 'wx-wxPay', 'wx-wxPay-brandWCPay:fail', 0]);
                }
            });
        };
        if (typeof WeixinJSBridge == 'undefined') {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        } else {
            jsApiCall();
        }
    }

}

// 全局服务实例
export const $wxH5Pay = new WxH5Pay();