封装微信支付和微信二维码扫码支付

//用户信息收集弹框
function funTips(title,content,targetUrl,img,targetTip) {
var str =’’;
str += <div class="popover_box"> <div class="popover"> <div class="popover_img"> <img src="${img}" alt=""> </div> <div class="popover_text"> <div class="text_box"> <h1>${title}</h1> <h2 id="content">${content}</h2> </div> <a href="${targetUrl}">${targetTip}</a> </div> <div class="cancel"> <img src="../../images/icon/cancel.png" alt=""> </div> </div> </div>;
$(".content").append(str)
}

function tipsNone() {
$(“tips”).style.display = “none”;
$(“tipsMove”).style.bottom = “0”;
$_(“submits”).disabled = false;
}

let PayMethod;
//PayMethod =1 扫码支付
//PayMethod =2 直接支付

// 点击报名 扫码支付
function funx(data) {
var targetUrl = “javascript:void(0)”; //按钮跳转地址
var targetTip = “保存”; //按钮提示
var img = “”; //背景图片
var title = ‘’; //提示标题
var content = ‘’; //提示说明
var str = ‘’; //存放数据

str += `
<div class="text_box">
    <div class="infor">
        <ul>
            <li>姓名 : <input type="text" placeholder="请输入姓名" id="name"></li>
            <li>手机 : <input type="text" placeholder="请输入手机号" id="phone"></li>
        </ul>
    </div>
</div>
<buttom onclick="submits()" id="submits"><a href="${targetUrl}">${targetTip}</a></buttom>

`;

funTips(title,content,targetUrl,img,targetTip);                 //调用弹框传参
$(".popover_text").html(str);                                //数据渲染
$(".popover").css("background-color","#fff");                //图片无  白色背景填充
$(".popover_text a").css("top","3.1733333333333333rem ");    //按钮位置调下
$(".cancel").click(function () {                             //取消按钮
    location.reload()                                           //刷新页面
});
PayMethod = 1;

}
// 点击报名 直接支付
function funcc() {
var targetUrl = “javascript:void(0)”;
var targetTip = “保存”;
var img = “”;
var title = ‘’;
var content = ‘’;
var str = ‘’;

str += `
<div class="text_box">
    <div class="infor">
        <ul>
            <li>姓名 : <input type="text" placeholder="请输入姓名" id="name"></li>
            <li>手机 : <input type="text" placeholder="请输入手机号" id="phone"></li>
        </ul>
    </div>
</div>
<buttom onclick="submits()" id="submits"><a href="${targetUrl}">${targetTip}</a></buttom>

`;

$(".contents").css("display","block");
funTips(title,content,targetUrl,img,targetTip);
$(".popover_text").html(str);

$(".popover").css("background-color","#fff");
$(".popover_text a").css("top","3.1733333333333333rem ");

$(".cancel").click(function () {
    location.reload()
});
PayMethod = 2;

}
var phone_reg = /¹[3,4,5,7,8][0-9]{9}$/; //验证手机号正则

//扫码支付二维码
function sweepSode() {
this.ewm = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ewm").html() …{this.ewm} alt="">

`;
$(".content").html(str);

$(".sodex").click(function () {
    window.location.reload()
})

}
//提交信息并支付
function submits() {

var name = $_("name").value;
var phone = $_("phone").value;
var title = $("title").html();
if (name == ""){
    $_("tips").style.display = "block";
    $_("tips").innerHTML = "请输入姓名";
    $_("submits").disabled = true;
    setTimeout ('tipsNone()',2000);
    $_("tipsMove").style.bottom = "10%";
}else if (phone == ""){
    $_("tips").style.display = "block";
    $_("tips").innerHTML = "请输入手机号";
    $_("submits").disabled = true;
    setTimeout ('tipsNone()',2000);
    $_("tipsMove").style.bottom = "10%";
}else if(phone_reg.test(phone)){
    $(".popover_box").remove();
    var remark = [];

    remark.push(name);
    remark.push(phone);
    var note = remark.join('|');

    if (PayMethod == 1) {
        sweepSode();
        $.ajax({
            headers:{
                Authorization:'Bearer ' + token,
            },
            url:apiUrl+"user/colform",
            data:{
                name : name,
                mobile : phone,
                type : 1,
                title:title,
            },
            type:"POST",
            dataType:"json",
            // async:false,
            // cache:false,
            crossDomain:true,
            success:function(data){
                // console.log(data)
            },
            error:()=>{
                // console.log("请求失败")
            }
        })
    }else {
        $.ajax({
            type: "POST",
            url:  apiUrl + 'wechat/coujsapi',
            data: {
                total_fee:total_fee,
                openid:openid,
                title:title,
                note:note,
            },
            dataType: "json",
            crossDomain: true,
            success: function(data){
                callpay();
                function jsApiCall(){
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        data.data,
                        function(res){
                            //WeixinJSBridge.log(res.err_msg);

                            var targetUrl = "";
                            var targetTip = "我知道了";
                            var img = "";
                            var title = "";
                            var content;
                            if(res.err_msg == "get_brand_wcpay_request:ok") {
                                content ='购买成功，去个人中心查看订单信息';
                                funTips(title,content,targetUrl,img,targetTip);
                                $(".popover").css("background-color","#fff");
                                $(".cancel").click(function () {
                                    location.reload()
                                });
                            }
                            if(res.err_msg == "get_brand_wcpay_request:cancel"){
                                content ='你已放弃支付,请重新购买';
                                funTips(title,content,targetUrl,img,targetTip);
                                $(".popover").css("background-color","#fff");
                                $(".cancel").click(function () {
                                    location.reload()
                                });
                            }
                            if(res.err_msg == "get_brand_wcpay_request:fail"){
                                content ='支付失败,请重新购买';
                                funTips(title,content,targetUrl,img,targetTip);
                                $(".popover").css("background-color","#fff");
                                $(".cancel").click(function () {
                                    location.reload()
                                });
                            }

                            //    window.location.href="http://api.ujiacity.com/xw/index.html";
                            //alert(res.err_code+res.err_desc+res.err_msg);
                        }
                    );
                }
                function callpay(){
                    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();
                    }
                }
            }
        });
    }

}
else {
    $_("tips").style.display = "block";
    $_("tips").innerHTML = "请输入合法的手机号";
    $_("submits").disabled = true;
    setTimeout ('tipsNone()',2000);
    $_("tipsMove").style.bottom = "10%";
}

}

---

1. 1 ↩︎