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);     
            }
      });
   }