V免签三页美化-admin

example/index.html、测试
payPage/pay.html、支付
example/return.php、状态

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全支付 - 个人支付中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
        }
        .pay-wrap {
            width: 100%;
            max-width: 460px;
        }
        .pay-card {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }
        .pay-title {
            text-align: center;
            font-size: 22px;
            color: #667eea;
            margin-bottom: 25px;
        }
        .order-info {
            background: #f5f3ff;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 20px;
        }
        .order-item {
            display: flex;
            justify-content: space-between;
            line-height: 2.2;
            font-size: 15px;
            color: #4c1d95;
        }
        .order-item .price {
            font-size: 20px;
            color: #d97706;
            font-weight: bold;
        }
        .input-box {
            margin-bottom: 20px;
        }
        .input-box label {
            display: block;
            font-size: 14px;
            color: #4c1d95;
            margin-bottom: 8px;
        }
        .input-box input {
            width: 100%;
            height: 44px;
            padding: 0 14px;
            border: 1px solid #ddd;
            border-radius: 10px;
            outline: none;
            transition: 0.3s;
        }
        .input-box input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }
        .channel-title {
            font-size: 14px;
            color: #4c1d95;
            margin-bottom: 12px;
        }
        .channel-list {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        .channel-item {
            flex: 1;
            text-align: center;
            padding: 14px 0;
            border: 2px solid #eee;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .channel-item.active {
            border-color: #667eea;
            background: #f0f4ff;
            transform: translateY(-2px);
        }
        .channel-item img {
            width: 36px;
            height: 36px;
            margin-bottom: 6px;
        }
        .submit-btn {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s;
        }
        .submit-btn:hover {
            opacity: 0.92;
        }
        .loading {
            display: none;
            text-align: center;
            color: #667eea;
            margin: 10px 0;
        }
        .tips {
            text-align: center;
            font-size: 13px;
            color: #6b7280;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="pay-wrap">
        <div class="pay-card">
            <h2 class="pay-title">订单结算</h2>

            <div class="order-info">
                <div class="order-item">
                    <span>订单编号</span>
                    <span id="orderNo">ORD20260526002</span>
                </div>
                <div class="order-item">
                    <span>应付金额</span>
                    <span class="price" id="payPrice">¥ 68.00</span>
                </div>
                <div class="order-item">
                    <span>下单时间</span>
                    <span id="createTime">2026-05-26 12:10</span>
                </div>
            </div>

            <div class="input-box">
                <label>付款备注</label>
                <input type="text" placeholder="选填，方便核对订单" id="remark">
            </div>

            <div class="pay-channel">
                <p class="channel-title">选择支付方式</p>
                <div class="channel-list">
                    <div class="channel-item active" data-type="wechat">
                        <img src="https://img.icons8.com/fluency/96/000000/wechat.png" alt="微信">
                        <p>微信支付</p>
                    </div>
                    <div class="channel-item" data-type="alipay">
                        <img src="https://img.icons8.com/fluency/96/000000/alipay.png" alt="支付宝">
                        <p>支付宝</p>
                    </div>
                </div>
            </div>

            <div class="loading" id="loading">正在跳转支付...</div>
            <button class="submit-btn" id="payBtn">确认支付</button>

            <div class="tips">
                个人V免签代收 | 付款后请耐心等待订单同步
            </div>
        </div>
    </div>

    <script>
        const channelItems = document.querySelectorAll('.channel-item');
        let payType = "wechat";

        channelItems.forEach(item => {
            item.onclick = function(){
                channelItems.forEach(i=>i.classList.remove('active'));
                this.classList.add('active');
                payType = this.dataset.type;
            }
        });

        const payBtn = document.getElementById('payBtn');
        const loading = document.getElementById('loading');
        payBtn.onclick = function(){
            const orderNo = document.getElementById('orderNo').innerText;
            const remark = document.getElementById('remark').value;

            loading.style.display = 'block';
            payBtn.disabled = true;
            payBtn.innerText = "跳转中...";

            // 替换为你的 V免签 真实跳转链接
            // let url = `你的V免签地址?order=${orderNo}&paytype=${payType}&msg=${encodeURIComponent(remark)}`;
            // window.location.href = url;

            // 模拟效果
            setTimeout(()=>{
                alert("已选择：" + payType + "，准备跳转支付");
                loading.style.display = 'none';
                payBtn.disabled = false;
                payBtn.innerText = "确认支付";
            },1200)
        }
    </script>
</body>
</html>

用样式二的代码写这个支付界面

改

原

测试

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试支付</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px 10px; } .test-card { width: 100%; max-width: 460px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 35px 30px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .card-title { text-align: center; font-size: 24px; color: #667eea; margin-bottom: 30px; font-weight: 500; } .form-item { margin-bottom: 20px; } .form-item label { display: block; font-size: 14px; color: #4c1d95; margin-bottom: 8px; } .form-item input, .form-item select { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 15px; outline: none; transition: 0.3s; background: #fff; } .form-item input:focus, .form-item select:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } .pay-btn { width: 100%; height: 48px; margin-top: 10px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 12px; font-size: 16px; cursor: pointer; transition: opacity 0.3s; } .pay-btn:hover { opacity: 0.92; } .tip-text { text-align: center; margin-top: 25px; font-size: 13px; color: #6b7280; } </style> </head> <body> <div class="test-card"> <h2 class="card-title">支付测试工具</h2> <div class="form-item"> <label>商户订单号</label> <input type="text" id="payId" readonly> </div> <div class="form-item"> <label>商户订单价</label> <input type="number" id="price" value="0.1"> </div> <div class="form-item"> <label>自定义参数</label> <input type="text" id="param" value="vone666"> </div> <div class="form-item"> <label>支付方式</label> <select id="type"> <option value="1">微信支付</option> <option value="2">支付宝支付</option> </select> </div> <button class="pay-btn" onclick="zf()">立即发起支付</button> <p class="tip-text">自动生成订单号，点击按钮跳转至支付页面</p> </div> <script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js"></script> <script> $("#payId").val(new Date().getTime()); function zf() { var p = "payId="+$("#payId").val() + "&price="+$("#price").val()+"&param="+$("#param").val()+"&type="+$("#type").val(); window.location.href = "main.php?" + p; } </script> </body> </html>

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试支付</title> </head> <body> <p>商户订单号：<input type="text" id="payId"/></p> <p>商户订单价：<input type="number" id="price" value="0.1"/></p> <p>自定义参数：<input type="text" id="param" value="vone666"/></p> <p>支付方式：<select id="type"><option value="1">微信支付</option><option value="2">支付宝支付</option></select></p> <button onclick="zf()">支付</button> <script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js"></script> <script> $("#payId").val(new Date().getTime()); function zf() { var p = "payId="+$("#payId").val() + "&price="+$("#price").val()+"&param="+$("#param").val()+"&type="+$("#type").val(); window.location.href = "main.php?" + p; } </script> </body> </html>

<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
$key = "9a0a2ae5eb68283b6981ba0b9c543e0f";//通讯密钥
$payId = $_GET['payId'];//商户订单号
$param = $_GET['param'];//创建订单的时候传入的参数
$type = $_GET['type'];//支付方式 ：微信支付为1 支付宝支付为2
$price = $_GET['price'];//订单金额
$reallyPrice = $_GET['reallyPrice'];//实际支付金额
$sign = $_GET['sign'];//校验签名

// 签名校验
$_sign = md5($payId . $param . $type . $price . $reallyPrice . $key);
if ($_sign != $sign) {
    header("Content-type: text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校验失败</title>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft Yahei",sans-serif;}
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;justify-content: center;align-items: center;
            padding: 20px;
        }
        .card {
            width: 100%;max-width: 460px;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;padding: 35px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            text-align: center;
        }
        .fail-icon {
            font-size: 70px;color: #ef4444;margin-bottom: 20px;
        }
        .title {
            font-size: 24px;color: #333;margin-bottom: 15px;
        }
        .desc {
            color: #666;font-size: 15px;line-height: 1.8;
        }
        .btn {
            display: inline-block;margin-top: 25px;
            padding: 10px 28px;background: #667eea;color: #fff;
            text-decoration: none;border-radius: 8px;transition: 0.3s;
        }
        .btn:hover {opacity: 0.9;}
    </style>
</head>
<body>
    <div class="card">
        <div class="fail-icon">✕</div>
        <h2 class="title">签名校验失败</h2>
        <p class="desc">请求非法，数据校验不通过，请返回重试</p>
        <a href="javascript:history.back()" class="btn">返回上一页</a>
    </div>
</body>
</html>
<?php
    exit();
}

// 支付方式文字转换
$payTypeText = $type == 1 ? "微信支付" : "支付宝支付";
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>支付成功</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
        }
        .wrap {
            width: 100%;
            max-width: 460px;
        }
        .success-card {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 35px 30px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            text-align: center;
            animation: fadeUp 0.6s ease;
        }
        @keyframes fadeUp {
            from {opacity: 0; transform: translateY(20px);}
            to {opacity: 1; transform: translateY(0);}
        }
        /* 成功图标 */
        .success-icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
            background: #10b981;
            color: #fff;
            font-size: 40px;
            margin: 0 auto 20px;
            animation: scale 0.8s ease;
        }
        @keyframes scale {
            0% {transform: scale(0);}
            50% {transform: scale(1.2);}
            100% {transform: scale(1);}
        }
        .main-title {
            font-size: 26px;
            color: #1f2937;
            margin-bottom: 10px;
        }
        .sub-desc {
            color: #6b7280;
            font-size: 15px;
            margin-bottom: 30px;
        }
        /* 订单信息区域 */
        .order-info {
            background: #f5f3ff;
            border-radius: 12px;
            padding: 20px;
            text-align: left;
            margin-bottom: 30px;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            line-height: 2.4;
            font-size: 15px;
            color: #4c1d95;
            border-bottom: 1px dashed #ddd;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .price-text {
            font-weight: bold;
            color: #d97706;
            font-size: 16px;
        }
        /* 操作按钮 */
        .btn-group {
            display: flex;
            gap: 15px;
        }
        .btn {
            flex: 1;
            height: 46px;
            line-height: 46px;
            border-radius: 10px;
            text-decoration: none;
            font-size: 15px;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }
        .btn-back {
            background: #e5e7eb;
            color: #374151;
        }
        .btn-back:hover {
            background: #d1d5db;
        }
        .btn-index {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
        }
        .btn-index:hover {
            opacity: 0.92;
        }
        /* 底部文案 */
        .footer-tips {
            margin-top: 25px;
            color: rgba(255,255,255,0.85);
            font-size: 13px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="success-card">
            <div class="success-icon">✓</div>
            <h2 class="main-title">支付成功</h2>
            <p class="sub-desc">您的订单已完成付款，服务已正常生效</p>

            <div class="order-info">
                <div class="info-item">
                    <span>商户订单号</span>
                    <span><?php echo $payId; ?></span>
                </div>
                <div class="info-item">
                    <span>自定义参数</span>
                    <span><?php echo htmlspecialchars($param); ?></span>
                </div>
                <div class="info-item">
                    <span>支付方式</span>
                    <span><?php echo $payTypeText; ?></span>
                </div>
                <div class="info-item">
                    <span>订单金额</span>
                    <span class="price-text">¥ <?php echo $price; ?></span>
                </div>
                <div class="info-item">
                    <span>实际支付</span>
                    <span class="price-text">¥ <?php echo $reallyPrice; ?></span>
                </div>
            </div>

            <div class="btn-group">
                <a href="javascript:history.back()" class="btn btn-back">返回上页</a>
                <a href="/" class="btn btn-index">返回首页</a>
            </div>
        </div>
        <div class="footer-tips">
            本支付由个人V免签接口提供 · 感谢您的支持
        </div>
    </div>
</body>
</html>
<?php ?>

<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
$key = "9a0a2ae5eb68283b6981ba0b9c543e0f";//通讯密钥
$payId = $_GET['payId'];//商户订单号
$param = $_GET['param'];//创建订单的时候传入的参数
$type = $_GET['type'];//支付方式 ：微信支付为1 支付宝支付为2
$price = $_GET['price'];//订单金额
$reallyPrice = $_GET['reallyPrice'];//实际支付金额
$sign = $_GET['sign'];//校验签名，计算方式 = md5(payId + param + type + price + reallyPrice + 通讯密钥)
//开始校验签名
$_sign =  md5($payId . $param . $type . $price . $reallyPrice . $key);
if ($_sign != $sign) {
    echo "error_sign";//sign校验不通过
    exit();
}


//继续业务流程
echo "商户订单号：".$payId ."<br>自定义参数：". $param ."<br>支付方式：". $type ."<br>订单金额：". $price ."<br>实际支付金额：". $reallyPrice;


?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>扫码支付</title>
    <!-- 渐变潮流风格 CSS 直接内嵌，无需外部 pay.css -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px 10px;
        }
        .body {
            width: 100%;
            max-width: 460px;
            margin: 0 auto;
        }
        /* 顶部图标标题 */
        .mod-title {
            text-align: center;
            margin-bottom: 20px;
            padding-top: 10px;
        }
        .ico_log {
            display: inline-block;
            width: 48px;
            height: 48px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .ico-1 {
            background-image: url("https://img.icons8.com/fluency/96/000000/wechat.png");
        }
        .ico-2 {
            background-image: url("https://img.icons8.com/fluency/96/000000/alipay.png");
        }
        /* 主卡片容器 */
        .mod-ct {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px 25px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }
        /* 订单过期提示 */
        #timeOut {
            text-align: center;
            padding: 40px 0;
            font-size: 18px !important;
            color: #ef4444 !important;
            font-weight: bold;
        }
        /* 支付金额 */
        #money {
            text-align: center;
            font-size: 32px;
            color: #d97706;
            font-weight: bold;
            margin-bottom: 25px;
        }
        /* 二维码区域 */
        .qrcode-img-wrapper {
            text-align: center;
            margin-bottom: 20px;
        }
        .qrcode-img-area {
            display: inline-block;
            padding: 12px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        #show_qrcode {
            border-radius: 8px;
        }
        .ui-loading {
            color: #667eea;
            text-align: center;
            padding: 30px 0;
            font-size: 15px;
        }
        /* 备注提示文字 */
        #msg {
            text-align: center;
            margin: 15px 0;
            line-height: 1.6;
        }
        #msg h1 {
            font-size: 15px;
            font-weight: normal;
        }
        /* 倒计时 */
        .time-item {
            text-align: center;
            font-size: 16px;
            color: #4c1d95;
            margin: 15px 0;
        }
        .time-item strong {
            background: #f0f4ff;
            padding: 6px 10px;
            border-radius: 6px;
            margin: 0 4px;
        }
        /* 扫码引导提示 */
        .tip {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 25px 0;
            color: #4c1d95;
        }
        .ico-scan {
            width: 24px;
            height: 24px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23667eea' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h6v2H3V3zm12 0h6v2h-6V3zM3 19h6v2H3v-2zm12 0h6v2h-6v-2zM3 7h2v10H3V7zm16 0h2v10h-2V7zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z'/%3E%3C/svg%3E") no-repeat center;
            margin-right: 8px;
        }
        .tip-text p {
            line-height: 1.8;
            font-size: 15px;
        }
        /* 订单详情折叠区域 */
        .detail {
            margin-top: 20px;
            border-top: 1px dashed #ddd;
            padding-top: 15px;
        }
        .detail-ct {
            font-size: 14px;
            color: #4c1d95;
        }
        .detail-ct dl {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 10px;
        }
        .arrow {
            display: block;
            text-align: center;
            color: #667eea;
            margin-top: 10px;
            text-decoration: none;
            font-size: 14px;
        }
        .ico-arrow {
            display: inline-block;
            transition: transform 0.3s;
        }
        .detail-open .ico-arrow {
            transform: rotate(180deg);
        }
        /* 底部提示 */
        .foot {
            margin-top: 25px;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.8;
        }
        .copyRight {
            text-align: center;
            color: rgba(255,255,255,0.7);
            font-size: 12px;
            margin-top: 15px;
        }
    </style>
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div class="body" id="body">
    <h1 class="mod-title">
        <span class="ico_log ico-1" v-if="payType == 1"></span>
        <span class="ico_log ico-2" v-if="payType == 2"></span>
    </h1>

    <div class="mod-ct">
        <div class="order">
        </div>
        <div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;">
            <p>订单已过期，请您返回网站重新发起支付</p><br>
        </div>
        <div id="orderbody">
            <div class="amount" id="money">￥{{ reallyPrice }}</div>
            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                <div data-role="qrPayImg" class="qrcode-img-area">
                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;">加载中</div>
                    <div style="position: relative;display: inline-block;">
                        <img id='show_qrcode' alt="加载中..." :src="'../enQrcode?url='+payUrl" width="210" height="210" style="display: block;">
                    </div>
                </div>
            </div>

            <div class="time-item">
                <div class="time-item" id="msg">
                    <h1 v-if="price != reallyPrice">
                        <span style="color:red">为了您正常支付 请务必付款 {{ reallyPrice }} 元 <br>备注说明无需填写</span><br>
                    </h1>
                </div>
                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>
            </div>

            <div class="tip">
                <div class="ico-scan"></div>
                <div class="tip-text">
                    <p>请使用{{payType1}}扫一扫</p>
                    <p v-if="isAuto == 0">扫描二维码完成支付</p>
                    <p v-if="isAuto == 1">扫码后输入金额支付</p>
                </div>
            </div>

            <div class="detail" id="orderDetail">
                <dl class="detail-ct" id="desc" style="display: none;">
                    <dt>金额</dt>
                    <dd>{{price}}</dd>
                    <dt>商户订单：</dt>
                    <dd>{{payId}}</dd>
                    <dt>创建时间：</dt>
                    <dd>{{formatDate(date)}}</dd>
                    <dt>状态</dt>
                    <dd>等待支付</dd>
                </dl>
                <a href="javascript:void(0)" class="arrow" onclick="aaa()"><i class="ico-arrow">▼</i></a>
            </div>
        </div>
    </div>

    <div class="foot">
        <div class="inner">
            <p>手机用户可保存上方二维码到手机中</p>
            <p>在{{payType1}}扫一扫中选择“相册”即可</p>
        </div>
    </div>
</div>
<div class="copyRight">
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>

<script>
    function aaa() {
        if ($('#orderDetail').hasClass('detail-open')) {
            $('#orderDetail .detail-ct').slideUp(500, function () {
                $('#orderDetail').removeClass('detail-open');
            });
        } else {
            $('#orderDetail .detail-ct').slideDown(500, function () {
                $('#orderDetail').addClass('detail-open');
            });
        }
    }
    function formatDate(now) {
        now = new Date(now*1000)
        return now.getFullYear()
            + "-" + (now.getMonth()>8?(now.getMonth()+1):"0"+(now.getMonth()+1))
            + "-" + (now.getDate()>9?now.getDate():"0"+now.getDate())
            + " " + (now.getHours()>9?now.getHours():"0"+now.getHours())
            + ":" + (now.getMinutes()>9?now.getMinutes():"0"+now.getMinutes())
            + ":" + (now.getSeconds()>9?now.getSeconds():"0"+now.getSeconds());
    }
    var myTimer;
    function timer(intDiff) {
        var i = 0;
        i++;
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0;//时间默认值
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        $('#hour_show').html('<s id="h"></s>' + hour + '时');
        $('#minute_show').html('<s></s>' + minute + '分');
        $('#second_show').html('<s></s>' + second + '秒');
        if (hour <= 0 && minute <= 0 && second <= 0) {
            qrcode_timeout()
            clearInterval(myTimer);
        }
        intDiff--;

        myTimer = window.setInterval(function () {
            i++;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
            if (hour <= 0 && minute <= 0 && second <= 0) {
                qrcode_timeout()
                clearInterval(myTimer);
            }
            intDiff--;
        }, 1000);
    }

    function qrcode_timeout(){
        document.getElementById("orderbody").style.display = "none";
        document.getElementById("timeOut").style.display = "";
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }

    $.post("../getOrder","orderId="+getQueryString("orderId"),function (data) {
        if (data.code==1){
            var time = new Date().getTime()-data.data.date*1000;
            time = time/1000;
            time = data.data.timeOut*60 - time;

            if (data.data.state == -1){
                time = 0;
            }
            timer(time);
            
            if (data.data.payType == 1) {
                data.data.payType1 = "微信";
            }else if (data.data.payType == 2) {
                data.data.payType1 = "支付宝";
            }

            new Vue({
                el: '#body',
                data: data.data
            })

            check();
        }else{
            timer(0)
        }
    });

    function check() {
        $.post("../checkOrder","orderId="+getQueryString("orderId"),function (data) {
            console.log(data);
            if (data.code == 1){
                window.location.href = data.data;
            } else{
                if (data.data == "订单已过期") {
                    intDiff = 0;
                }else{
                    setTimeout("check()",1500);
                }
            }
        })
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>扫码支付</title>
    <link href="pay.css" rel="stylesheet" media="screen">
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div class="body" id="body">
    <h1 class="mod-title">

        <span class="ico_log ico-1" v-if="payType == 1"></span>
        <span class="ico_log ico-2" v-if="payType == 2"></span>

    </h1>

    <div class="mod-ct">
        <div class="order">
        </div>
        <div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;"><p>订单已过期，请您返回网站重新发起支付</p><br></div>
        <div id="orderbody">
            <div class="amount" id="money">￥{{ reallyPrice }}</div>
            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                <div data-role="qrPayImg" class="qrcode-img-area">
                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;">加载中</div>
                    <div style="position: relative;display: inline-block;">
                        <img  id='show_qrcode' alt="加载中..." :src="'../enQrcode?url='+payUrl" width="210" height="210" style="display: block;">
                        <!--<img onclick="$('#use').hide()" id="use" src="use_1.png" v-if="payType==1"
                             style="position: absolute;top: 50%;left: 50%;width:32px;height:32px;margin-left: -16px;margin-top: -16px">
                        <img onclick="$('#use').hide()" id="use" src="use_2.png" v-if="payType==2"
                             style="position: absolute;top: 50%;left: 50%;width:32px;height:32px;margin-left: -16px;margin-top: -16px">-->
                    </div>
                </div>


            </div>
            <div class="time-item">


                <div class="time-item" id="msg">
                    <h1  v-if="price != reallyPrice">
                        <span style="color:red">为了您正常支付 请务必付款 {{ reallyPrice }} 元 <br>备注说明无需填写</span><br>


                    </h1>

                </div>







                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>
            </div>

            <div class="tip">
                <div class="ico-scan"></div>
                <div class="tip-text">
                    <p>请使用{{payType1}}扫一扫</p>

                    <p v-if="isAuto == 0">扫描二维码完成支付</p>
                    <p v-if="isAuto == 1">扫码后输入金额支付</p>

                </div>
            </div>

            <div class="detail" id="orderDetail">
                <dl class="detail-ct" id="desc" style="display: none;">
                    <dt>金额</dt>
                    <dd>{{price}}</dd>
                    <dt>商户订单：</dt>
                    <dd>{{payId}}</dd>
                    <dt>创建时间：</dt>
                    <dd>{{formatDate(date)}}</dd>
                    <dt>状态</dt>
                    <dd>等待支付</dd>
                </dl>

                <a href="javascript:void(0)" class="arrow" onclick="aaa()"><i class="ico-arrow"></i></a>
            </div>
        </div>


        <div class="tip-text">

        </div>


    </div>
    <div class="foot">
        <div class="inner">
            <p>手机用户可保存上方二维码到手机中</p>
            <p>在{{payType1}}扫一扫中选择“相册”即可</p>
        </div>
    </div>

</div>
<div class="copyRight">

</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>

<script>

    function aaa() {
        if ($('#orderDetail').hasClass('detail-open')) {
            $('#orderDetail .detail-ct').slideUp(500, function () {
                $('#orderDetail').removeClass('detail-open');
            });
        } else {
            $('#orderDetail .detail-ct').slideDown(500, function () {
                $('#orderDetail').addClass('detail-open');
            });
        }
    }
    function formatDate(now) {
        now = new Date(now*1000)
        return now.getFullYear()
            + "-" + (now.getMonth()>8?(now.getMonth()+1):"0"+(now.getMonth()+1))
            + "-" + (now.getDate()>9?now.getDate():"0"+now.getDate())
            + " " + (now.getHours()>9?now.getHours():"0"+now.getHours())
            + ":" + (now.getMinutes()>9?now.getMinutes():"0"+now.getMinutes())
            + ":" + (now.getSeconds()>9?now.getSeconds():"0"+now.getSeconds());

    }
    var myTimer;
    function timer(intDiff) {
        var i = 0;
        i++;
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0;//时间默认值
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        $('#hour_show').html('<s id="h"></s>' + hour + '时');
        $('#minute_show').html('<s></s>' + minute + '分');
        $('#second_show').html('<s></s>' + second + '秒');
        if (hour <= 0 && minute <= 0 && second <= 0) {
            qrcode_timeout()
            clearInterval(myTimer);

        }
        intDiff--;

        myTimer = window.setInterval(function () {
            i++;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
            if (hour <= 0 && minute <= 0 && second <= 0) {
                qrcode_timeout()
                clearInterval(myTimer);

            }
            intDiff--;
        }, 1000);
    }



    function qrcode_timeout(){
        document.getElementById("orderbody").style.display = "none";
        document.getElementById("timeOut").style.display = "";
    }


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }

    $.post("../getOrder","orderId="+getQueryString("orderId"),function (data) {
        if (data.code==1){
            var time = new Date().getTime()-data.data.date*1000;
            time = time/1000;
            time = data.data.timeOut*60 - time;

            if (data.data.state == -1){
                time = 0;
            }
            timer(time);
            
            if (data.data.payType == 1) {
                data.data.payType1 = "微信";
            }else if (data.data.payType == 2) {
                data.data.payType1 = "支付宝";
            }


            new Vue({
                el: '#body',
                data: data.data
            })

            check();
        }else{
            timer(0)
        }
    });

    function check() {
        $.post("../checkOrder","orderId="+getQueryString("orderId"),function (data) {
            console.log(data);
            if (data.code == 1){
                window.location.href = data.data;
            } else{
                if (data.data == "订单已过期") {
                    intDiff = 0;
                }else{
                    setTimeout("check()",1500);
                }
            }
        })
    }

</script>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END

未分类

V免签 三页美化

请登录后发表评论

V免签三页美化