JQ+Layui弹窗 实现支付功能

  下载layui或者单独下载layer（指路layui官网）以及jquery。我下载的是layui

  引入layui.all.js、layui/css/layui.css以及jquery的main.js文件.

<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="layui/layui.all.js" type="text/javascript"></script>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" ></script>

点击支付按钮事件.

$("#btn1").click(function(){
    //判断是否登录的回调函数
    request(function(){
    $("#oneContent").css("display","block");
     oneContent("支付内容","需支付金额100元","支付内容");
     })
})

// 判断是否登录
var request = function(click){
　　　//layui内置的loading等待加载
    var loading = layer.load(2, {
        shade: false,
        time: 2*1000
     });
    $.get("api",function(data,status){
      layer.close(loading);    //关闭loading
　　　　if(status =="error"){
          // 登录页面
          localStorage.setItem("activePage", "project/index.html");
          console.log(localStorage.getItem("activePage"));
       }
       if(status=="success"){
           // 支付页面
           click();
        }
    });
}

//支付弹窗页面   
var oneContent=function(content,price,successCon){
    $("#oneContent").css("display","block");
    payWechat()   //获取二维码的数据请求
    layui.use('layer', function(){
    layerOne = layui.layer;
   　 payWindow = layerOne.open({
　　　　   type:1,       　　　　　　　　　　　　//　　弹窗类型共五种 0，1，2，3，4
    　　  content: $('#oneContent'),　　　　　// 指定弹窗显示的元素 要求该元素上级目录是body
          area:["581px","440px"],　　　　　　　　//弹窗大小
          title: ["提示", 'font-size:18px;',"padding:15px 10px;","color: rgb(51, 51, 51)"],  //弹窗header 可设置成false
          success(layero,index){            //弹窗打开成功后的回调
          　　con=successCon;
　　　　　　　　clearInterval(interval);
             interval = setInterval("pay()", "1000");  //创建定时器，一秒向后台请求一次数据，判断是否支付成功
           },
          cancel:function(){       　　　　　　//点击右上角关闭按钮触发的回调
         　　   $("#oneContent").css("display","none");
               clearInterval(interval)       //关闭支付弹窗清除定时器
           },
  　　　})    
    });
    $("#content").text(content);
    $("#price").text(price);
 }

  

// 判断是否支付成功的回调
 function pay(){
     $.get("api2",function(data,status){
         const statu="error";
         if(statu=="success"){      //支付成功
             layerOne.close(payWindow);    //支付成功后关闭支付页面
              $("#oneContent").css("display","none");  
              var layerThree = layui.layer;
              uccessWindow = layerThree.open({     //支付页面关闭后出现支付成功提示页面
                  type:1,
                  content: $('#success'),
                  title:false,
                   area:["351px","440px"],
                   cancel:function(index){
                  　　 $("#success").css("display","none");
                  　　 layerThree.close(index);    
                      clearInterval(interval);      //支付成功后清除定时器
                  　　}
                   })
                $("#successCon").text(con)
           }
           if(statu=="error"){      //没有支付
                console.log(data.message);     
            }
      });
   }