初始化项目

server-tp6/public/pay/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>等待支付</title>
+    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
+    <meta name='keywords' content=''>
+    <meta name='description' content=''>
+    <meta property=\"wb:webmaster\" content=\"0dce06cfe30d6b53\" />
+    <meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no'>
+    <meta name='apple-mobile-web-app-capable' content='yes'/>
+    <meta name='apple-mobile-web-app-status-bar-style' content='black'/>
+    <meta name='format-detection' content='telephone=no'/>
+    <link rel="stylesheet" href="style.css?v=1.0.4">
+    <script src="jquery-3.1.1.min.js?v=1.0.4"></script>
+    <script src="main.js?v=1.0.4"></script>
+</head>
+<body>
+    <div class='container mui-ptop45 mui-mbottom60' id="wait">
+        <p class='tick-text'>订单关闭时间<span class='min'></span>分<span class='sec'></span>秒</p>
+        <p class='box-title explain center'>当前支付人数较多，预计需要等待28秒</p>
+        <p class='box-title explain-blue center'>订单正在匹配中 请稍等 ...</p>
+    </div>
+    <div class='container mui-ptop45 mui-mbottom60 pay-box' id="WX">
+        <p class='wx-title'><img class='wx-img' src="img/wechat.png" ><span class='wx-title-text'>微信截图扫码</span></p>
+        <p class='wx-tick-text'>剩余时间：<span id='remainTime'></span></p>
+        <p class='wx-tick-text-no'><span class='money'></span><span>元</span></p>
+        <div class='qrcode-div qrcode-wx'></div>
+        <p class='box-title explain'>系统支付量过大，支付过程中出现下方提示请按要求解除限制后，可放心支付！</p>
+        <p class='explain-div'><img src="img/explain-new.png" ></p>
+        <!--<p class='box-title explain center'>超时不补不退 ，请在5分钟内支付。</p>
+        <p class='box-title explain center'>”解除限制”后可以继续付款</p>
+        <div class='text-box'>
+            <p class='box-title explain'>如果按钮无法发起支付，请先截屏二维码保存到相册，然后用扫一扫上传相册的二维码进行支付</p>
+            <p class='box-title explain black'>1、如果微信支付出现风险管控，请选择解除风险并选择为”微信支付“付款方式。</p>
+            <p class='box-title explain black'>2、如风险，选择【苏宁支付】方式付款，绑卡支付必过！</p>
+            <p class='box-title explain black'>3、扫码支付完成后”10秒钟”内完成上分!</p>
+            <p class='box-title explain black'>4、如支付完成”30秒”内沒有上分请尽快”联系客服”</p>
+            <p class='box-title explain black'>5、点击申请解除限制能正常付款</p>
+        </div>-->
+    </div>
+    <div class='container mui-ptop45 mui-mbottom60 box pay-box' id="ZFBH5">
+        <p class='ali-title'><img class='ali-img' src="img/alipay.png" ></p>
+        <p class='tick-text ali-time'>订单关闭时间<span class='min'></span>分<span class='sec'></span>秒</p>
+        <p class='box-title ali-explain center'>最后一步直接点击<span class="red">继续支付</span>就能付款</p>
+        <p class='box-title explain-blue center qrcode-div' onclick="clickNum(this)"></p>
+        <p class='box-title ali-explain center ali-explain-trip'><span class="c-red">请点击浏览器下方的打开支付宝按钮</span></p>
+        <p class='down'><img class='ali-img' src="img/down.png" ></p>
+    </div>
+    <div class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2 class="modal-title"></h2>
+            <p class="modal-text"></p>
+        </div>
+    </div>
+</body>
+</html>

server-tp6/public/pay/main.js

@@ -0,0 +1,138 @@
+var root = 'http://134.122.134.63/index.php?s=/'
+let url = window.location.href
+let searchParams = new URLSearchParams(url.split('?')[1])
+var orderId = searchParams.get('orderId')
+var passageway = searchParams.get('passageway')
+var timer = null
+var count = '' //倒计时
+var min = '' //分
+var sec = '' //秒
+var seconds = 300 // 倒计时秒数
+var money = 0
+var qrcode = ''
+var qrcodeTemplate = `
+    <img class='qrcode' src="${qrcode}" />
+  `;
+var qrcodeButTemplate = `
+    <a class="ali-a" href="${qrcode}">点击打开支付宝</a>
+  `;
+
+$(document).ready(function() {
+    Time()
+    getDetail()
+    window.addEventListener('click', (event) => {
+        if (event.target === $('.modal')) {
+            closeModal();
+        }
+    });
+});
+function clickNum() {
+    // 发送异步请求
+    $.ajax({
+        url: root+'store/passport/clickNum&orderId='+orderId,
+        method: 'GET',
+        success: function(response) {
+        },
+        error: function() {
+            console.log('提交失败，请稍后再试');
+        }
+    });
+}
+function getDetail() {
+    // 显示加载样式
+    $('body').append('<div class="loading">加载中...</div>');
+    // 发送异步请求
+    $.ajax({
+        url: root+'store/passport/detail&orderId='+orderId,
+        method: 'GET',
+        //data: {foo: 'bar'},
+        success: function(result) {
+            // 隐藏加载样式
+            $('.loading').remove();
+
+            if(result.status === 200) {
+                if (result.data.qrcode === '') {
+                    openModal('提示','订单已关闭，请重新发起订单')
+                } else {
+                    if(result.data.passageway === 'SNZFBH5'){
+                        window.location.href = result.data.qrcode
+                    }else {
+                        // 当前记录
+                        money = result.data.money
+                        seconds = result.data.seconds
+                        qrcode = result.data.qrcode
+                        $('.money').text(money)
+                        $('.container').css('display', 'none')
+                        if(passageway === 'WX') {
+                            qrcodeTemplate = `
+    <img class='qrcode' src="${qrcode}" />
+  `;
+                            $('.qrcode-div').html(qrcodeTemplate)
+                            $('#WX').css('display', 'block')
+                        }else{
+                            qrcodeButTemplate = `
+    <a class="ali-a" href="${qrcode}">点击打开支付宝</a>
+  `;
+                            $('.qrcode-div').html(qrcodeButTemplate)
+                            $('#ZFBH5').css('display', 'block')
+                        }
+                    }
+                }
+            }else{
+                openModal('提示','订单已关闭，请重新发起订单')
+            }
+        },
+        error: function() {
+            // 隐藏加载样式
+            $('.loading').remove();
+            // 处理异步请求失败的情况
+            openModal('错误','提交失败，请稍后再试')
+        }
+    });
+}
+function Time() {
+    timer = setInterval(() => {
+        seconds -= 1
+        countDown()
+    }, 1000)
+}
+function countDown() {
+    if(seconds <= 0){
+        clearInterval(timer);
+        timer = null;
+        count = '已超时'
+        qrcode = ''
+        $('#remainTime').text(count)
+        $('.qrcode-div').html('')
+        openModal('提示','订单已关闭，请重新发起订单')
+        return false;
+    }
+    let d = parseInt(seconds / (24 * 60 * 60))
+    d = d < 10 ? "0" + d : d
+    let h = parseInt(seconds / (60 * 60) % 24);
+    h = h < 10 ? "0" + h : h
+    let m = parseInt(seconds / 60 % 60);
+    m = m < 10 ? "0" + m : m
+    let s = parseInt(seconds % 60);
+    s = s < 10 ? "0" + s : s
+    //this.count = d + '天' + h + '时' + m + '分' + s + '秒'
+    count = m + '分' + s + '秒'
+    min = m
+    sec = s
+    timeAssignment()
+}
+function timeAssignment(){
+    $('.min').text(min)
+    $('.sec').text(sec)
+    $('#remainTime').text(count)
+    $('.money').text(money)
+}
+function openModal(title, text) {
+    $('.modal-title').text(title)
+    $('.modal-text').text(text)
+    $('.modal').css('display', 'block')
+}
+
+function closeModal() {
+    $('.modal').css('display', 'none')
+}

server-tp6/public/pay/style.css

@@ -0,0 +1,253 @@
+body {
+    /*overflow-x: hidden;*/
+    font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53,
+    sans-serif;
+    background: #ffffff;
+}
+.container{text-align: center;max-width: 640px;}
+.img{
+    width: 60px;
+    vertical-align: middle;
+}
+.text-box{}
+.box-title{line-height: 30px;}
+.box-p{
+    line-height: 35px;
+    text-align: left;
+    height: 40px;
+}
+.text-val{
+    display: inline-block;
+    width: 240px;
+    border: 1px solid gray;
+    height: 29px;
+    line-height: 25px;
+    padding: 0 5px;
+    background-color: #ededed;
+}
+.copy{
+    margin-left: 10px;
+    color: black;
+    font-size: 13px;
+    border: 1px solid;
+    padding: 5px;
+    background-color: #e9e9e9;
+}
+.sure-but{
+    display: inline-block;
+    width: 100%;
+    height: 45px;
+    line-height: 45px;
+    background-color: #4caf50;
+    color: white;
+    text-align: center;
+    margin-bottom: 60px;
+    margin-top: 20px;
+    border-radius: 5px;
+    font-size: 21px;
+}
+.text-input{
+    display: inline-block;
+    width: 176px;
+    border: 1px solid gray;
+    height: 29px;
+    line-height: 25px;
+    padding: 0 5px;
+}
+.tick-text{line-height: 30px;}
+.tick-text-no{height: 60px;line-height: 60px;font-weight: 600;}
+.explain{
+    color: red;
+    font-weight: 600;
+    width: 90%;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 16px;
+}
+.explain-text{
+    text-align: left;
+    width: 90%;
+    margin: 0 auto;
+    height: 36px;
+}
+.explain-blue{
+    color: #fff;
+    font-weight: unset;
+    width: 80%;
+    font-size: 19px;
+    background-color: #40a9ff;
+    border-radius: 5px;
+}
+.orange{color: #ff5200;font-weight:600;}
+.text-box-top{width: 90%;margin: 0 auto;}
+.red{color: red;}
+.title{
+    height: 75px;
+    line-height: 75px;
+}
+.title-text{
+    font-size: 40px;
+    vertical-align: middle;
+    margin-left: 15px;
+}
+.money{
+    font-size: 40px;
+    color: #ff5200;
+    margin-right: 8px;
+}
+.qrcode{
+    width: 70%;
+}
+.qrcode-div{
+    border-top: 1px solid #ebebeb;
+    border-bottom: 1px solid #ebebeb;
+    margin: 20px 0 20px 0;
+}
+.black{color: black!important;font-size: 13px;}
+.center{text-align: center;margin: 15px auto!important;}
+.min{
+    color:red;
+}
+.sec{
+    color:red;
+}
+
+.ali-img{
+    width: 170px;
+    vertical-align: middle;
+}
+.ali-explain{
+    font-weight: 600;
+    width: 90%;
+    margin: 0 auto;
+    font-size: 15px;
+}
+.ali-title{
+    height: 125px;
+    line-height: 125px;
+}
+.ali-a{
+    color: #fff;
+    display: inline-block;
+    width: 100%;
+}
+.ali-time{
+    color: black;
+    font-size: 14px;
+}
+.ali-explain-trip{
+    margin-top: 27%!important;
+}
+.down img{
+    width: 270px!important;
+}
+
+.explain img{
+    width: 340px!important;
+}
+.box{
+    margin-top: 10%;
+}
+.c-red{
+    color: #c7171e;
+}
+.pay-box{
+    display: none;
+}
+#remainTime{
+    color:red;
+}
+.wx-tick-text{
+    line-height: 0px;
+    font-size: 14px;
+}
+.wx-tick-text-no{
+    height: 40px;
+    line-height: 40px;
+    font-weight: 600;
+}
+.qrcode-wx{
+    margin: 10px 0 10px 0!important;
+}
+.qrcode-wx img{
+    width: 60%!important;
+}
+.explain-div img{
+    width: 100%!important;
+}
+.explain-div{
+    color: red;
+    font-weight: 600;
+    width: 100%;
+    text-align: left;
+    font-size: 16px;
+    margin: 5px auto;
+}
+.wx-title {
+    height: 40px;
+    line-height: 35px;
+}
+.wx-img {
+    width: 42px;
+    vertical-align: middle;
+}
+.wx-title-text {
+    font-size: 30px;
+    vertical-align: middle;
+    margin-left: 15px;
+}
+
+
+.loading {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.modal {
+    display: none; /* 默认隐藏 */
+    position: fixed; /* 固定定位 */
+    z-index: 1; /* 位于所有元素的最上层 */
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto; /* 当内容超出元素高度时自动滚动 */
+    background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
+}
+
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: 15% auto; /* 元素居中 */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+