efunbox-xxt-byuy-web/src/index.js

require('./index.less');
import 'jquery.cookie'
import './helper/response';
import Api from './helper/const';
import Utils from './helper/utils';


let wxPay = false;
let aliPay = false;

// 发送验证码
const getSignAjax = (mobile) => {
    $.ajax({
        url: Api.composeApiPath(`msg?mobileNo=${mobile}`),
        dataType: "json",
        async: true,
        type: "GET",
        success: function (res) {
            console.log(res);
            alert('验证码已发送！')
        }
    });
}

const regTest = (n) => {
    const zhengze = /^[1]([3-9])[0-9]{9}$/;
    if (zhengze.test(n)) {
        return true;
    } else {
        return false
    }
}

let count = 60;
const renderTimer = () => {
    let timer = setTimeout(() => {
        count--;
        $('#sign_btn').html(`${count}秒后重新发送`)
        if (count <= 0) {
            $('#sign_btn').html(`发送验证码`)
            count = 60;
            clearTimeout(timer)
        } else {
            renderTimer()
        }
    }, 1000)
}

const getSign = () => {
    if (count < 60 && count > 0) {
        alert(`请在${count}秒后重新获取`)
        return;
    }
    renderTimer()
    console.log('获取验证码')
    console.log(document.getElementById('mobile_number').value)
    let mobileNumber = document.getElementById('mobile_number').value;

    if (regTest(mobileNumber)) {
        getSignAjax(mobileNumber)
    } else {
        alert('手机号不规则')
    }
}

const showDialog = (type, text1, text2) => {
    if (type === 'bad') {
        $('.success').css('display', 'none');
    }
    $('.pay_type').html(text1);
    $('.pay_type_s').html(text2);
    $('.buy-dialog').css('display', 'block')

}
const onBridgeReady = (data) => {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        data,
        function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                showDialog('success', '支付成功', '您已完成支付');
                setTimeout(() => {
                    window.location.href = 'http://ott80-web.ai160.com/otttest/efunbox_xyyf/res/h5pay/about.html'
                }, 1000)
                return;

            }
            if (res.err_msg == "get_brand_wcpay_request:cancel" || res.err_msg == "get_brand_wcpay_request: fail") {
                showDialog('bad', '支付失败', '请重新支付');
                setTimeout(() => {
                    window.location.href = 'http://ott80-web.ai160.com/otttest/efunbox_xyyf/res/h5pay/about.html'
                }, 2000)
                return;
            }

        });
}

const postBuyInfo = (mobile, sign, payType) => {
    $.ajax({
        url: Api.composeApiPath('order'),
        dataType: "json",
        async: true,
        data: JSON.stringify({
            "mobileNo": mobile,
            "authorizeCode": Utils.GetQueryString('code'),
            "identifyCode": sign,
            "productId": 101001,
            "payType": payType
        }),
        type: "POST",
        contentType: "application/json",
        success: function (res) {
            console.log('创建订单', res)
            const resData = res.data;
            if (payType === 'ALIPAY') {
                document.body.innerHTML = resData;
                console.log(resData);
                // $("form[0]").submit();
                document.forms[0].submit();
            } else if (payType === 'WXPAY') {
                // 拉起支付
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady.bind(this, {
                            "appId": resData.appId, //公众号名称，由商户传入     
                            "timeStamp": resData.timeStamp, //时间戳，自1970年以来的秒数     
                            "nonceStr": resData.nonceStr, //随机串     
                            "package": resData.package,
                            "signType": "MD5", //微信签名方式：     
                            "paySign": resData.sign //微信签名 
                        }), false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady.bind(this, {
                            "appId": resData.appId, //公众号名称，由商户传入     
                            "timeStamp": resData.timeStamp, //时间戳，自1970年以来的秒数     
                            "nonceStr": resData.nonceStr, //随机串     
                            "package": resData.package,
                            "signType": "MD5", //微信签名方式：     
                            "paySign": resData.sign //微信签名 
                        }));
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeRead.bind(this, {
                            "appId": resData.appId, //公众号名称，由商户传入     
                            "timeStamp": resData.timeStamp, //时间戳，自1970年以来的秒数     
                            "nonceStr": resData.nonceStr, //随机串     
                            "package": resData.package,
                            "signType": "MD5", //微信签名方式：     
                            "paySign": resData.sign //微信签名 
                        }));
                    }
                } else {
                    onBridgeReady({
                        "appId": resData.appId, //公众号名称，由商户传入     
                        "timeStamp": resData.timeStamp, //时间戳，自1970年以来的秒数     
                        "nonceStr": resData.nonceStr, //随机串     
                        "package": resData.package,
                        "signType": "MD5", //微信签名方式：     
                        "paySign": resData.sign //微信签名 
                    });
                }
            }
        },
        fail: function (res) {
            showDialog('bad', '支付失败', '')
        }
    });
};


const buyTouchHandler = () => {
    let mobileNumber = document.getElementById('mobile_number').value;
    let signNumber = document.getElementById('sign_number').value;
    if (!regTest(mobileNumber)) {
        alert('手机号不规则');
        return;
    }
    const signTest = /[0-9]{4}$/;
    if (!signTest.test(signNumber)) {
        alert('验证码格式不正确');
        return;
    }
    let payType = aliPay ? 'ALIPAY' : 'WXPAY'
    postBuyInfo(mobileNumber, signNumber, payType);
}

// 绑定事件
$(document).ready(() => {
    const ua = navigator.userAgent.toLowerCase();
    aliPay = ua.indexOf('alipayclient') !== -1;
    wxPay = ua.indexOf('micromessenger') !== -1;
    if (wxPay && !aliPay) {
        if (!Utils.GetQueryString('code')) {
            const url = encodeURIComponent(window.location.href)
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf05800eea975a68b&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
            return;
        }
    }

    // 获取验证码
    $('#sign_btn').on('click', () => {
        getSign();
    });
    // 立即支付
    $('#buy_btn').on('click', () => {
        buyTouchHandler();
    });
    $('.close').on('click', () => {
        $('.buy-dialog').css('display', 'none')
    });
    let price = parseInt(Utils.GetQueryString('p')) / 100;
    let originPrice = parseInt(Utils.GetQueryString('op')) / 100;
    if (price) {
        $('#op').html(`￥${originPrice.toFixed(2)}`);
        $('#minus').html(`￥${(originPrice - price).toFixed(2)}`);
        $('#price').html(`￥${price.toFixed(2)}`);
        console.log(decodeURIComponent(Utils.GetQueryString('name')))
        // $('.productName').html(decodeURIComponent(Utils.GetQueryString('name')));
    }

});