189 lines
7.6 KiB
HTML
189 lines
7.6 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<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>
|
||
html,body,div,h1,*{margin:0;padding:0;}
|
||
body{
|
||
background-color:#F7F8FA;
|
||
color:#333;
|
||
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC','miui',sans-serif;
|
||
}
|
||
.container{
|
||
display:flex;
|
||
flex-direction:column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
min-height:100vh;
|
||
padding:20px;
|
||
}
|
||
.wechat-guide{
|
||
text-align:center;
|
||
padding:30px 20px;
|
||
}
|
||
.alipay-icon{
|
||
width:80px;
|
||
height:80px;
|
||
margin-bottom:20px;
|
||
}
|
||
.title{
|
||
font-size:20px;
|
||
font-weight:600;
|
||
color:#333;
|
||
margin-bottom:15px;
|
||
}
|
||
.desc{
|
||
font-size:14px;
|
||
color:#666;
|
||
line-height:1.8;
|
||
margin-bottom:25px;
|
||
text-align:center;
|
||
}
|
||
.btn-group{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:12px;
|
||
width:100%;
|
||
max-width:300px;
|
||
}
|
||
.btn{
|
||
display:block;
|
||
width:100%;
|
||
height:44px;
|
||
line-height:44px;
|
||
text-align:center;
|
||
border-radius:8px;
|
||
font-size:16px;
|
||
text-decoration:none;
|
||
border:none;
|
||
cursor:pointer;
|
||
}
|
||
.btn-primary{
|
||
background-color:#0968f6;
|
||
color:#fff;
|
||
}
|
||
.btn-secondary{
|
||
background-color:#fff;
|
||
color:#333;
|
||
border:1px solid #ddd;
|
||
}
|
||
.copy-result{
|
||
font-size:12px;
|
||
color:#999;
|
||
margin-top:10px;
|
||
display:none;
|
||
}
|
||
.step-list{
|
||
text-align:left;
|
||
margin:20px 0;
|
||
padding:15px 20px;
|
||
background:#fff;
|
||
border-radius:10px;
|
||
width:100%;
|
||
max-width:300px;
|
||
}
|
||
.step{
|
||
display:flex;
|
||
align-items:flex-start;
|
||
margin-bottom:12px;
|
||
font-size:14px;
|
||
color:#333;
|
||
line-height:1.6;
|
||
}
|
||
.step:last-child{
|
||
margin-bottom:0;
|
||
}
|
||
.step-num{
|
||
width:20px;
|
||
height:20px;
|
||
background:#0968f6;
|
||
color:#fff;
|
||
border-radius:50%;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:12px;
|
||
margin-right:10px;
|
||
flex-shrink:0;
|
||
}
|
||
.tip{
|
||
font-size:12px;
|
||
color:#F53F3F;
|
||
margin-top:15px;
|
||
text-align:center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div id="wechat-guide" class="wechat-guide" style="display:none;">
|
||
<svg class="alipay-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M691.573 645.973c-21.035 10.005-44.928 17.152-70.485 20.864 0.341-134.485-58.837-257.216-155.733-338.005 33.621-7.509 68.267-11.605 103.765-11.605 160.128 0 289.963 129.835 289.963 289.963 0 7.339-0.341 14.592-0.939 21.76-87.765-39.083-186.283-60.587-291.573-60.587-21.205 0-42.155 1.195-62.752 3.413 47.616 40.448 103.765 69.973 164.693 85.419 23.893 5.973 48.469 9.899 73.728 11.435-16.213-13.995-31.061-29.525-44.075-46.336-11.435-14.848-21.205-30.805-29.184-47.787h53.589c-25.771 22.357-47.787 48.299-65.109 76.8z" fill="#1677FF"/>
|
||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm210.5 612.4c-5.1 15.4-13.2 29.6-23.7 42.2-10.5 12.6-23.2 23.2-37.5 31.2-14.4 8-30.1 13.6-46.7 16.4-16.6 2.8-33.8 2.8-50.4 0-16.6-2.8-32.3-8.4-46.7-16.4-14.4-8-27.1-18.6-37.5-31.2-10.5-12.6-18.6-26.8-23.7-42.2-5.1-15.4-7.7-31.6-7.7-48.2s2.6-32.8 7.7-48.2c5.1-15.4 13.2-29.6 23.7-42.2 10.5-12.6 23.2-23.2 37.5-31.2 14.4-8 30.1-13.6 46.7-16.4 16.6-2.8 33.8-2.8 50.4 0 16.6 2.8 32.3 8.4 46.7 16.4 14.4 8 27.1 18.6 37.5 31.2 10.5 12.6 18.6 26.8 23.7 42.2 5.1 15.4 7.7 31.6 7.7 48.2s-2.6 32.8-7.7 48.2z" fill="#1677FF"/>
|
||
<path d="M679.4 448.8c-19.2-5.6-39.2-9.6-59.8-11.8 22.4-36 35.6-78 35.6-123.2 0-119.2-96.8-216-216-216-22.4 0-44 3.4-64.4 9.8 74.4 72 122 170.4 126.4 280.2-38.4-6.4-78.8-10-120.4-10-44 0-86.8 4.2-128 12-8.4-31.6-12.8-64.8-12.8-99.2 0-165.6 134.4-300 300-300 88 0 167.2 37.6 223.2 97.6 24-48.8 37.6-104.8 37.6-164 0-16.8-1.2-33.2-3.2-49.2 84.4 48.8 142.4 138.4 142.4 241.6 0 150.4-121.6 272-272 272-48 0-93.2-12.4-132-34 44.8 50.4 104.8 88 172.8 104.8 30.8 7.6 62.8 11.6 96 11.6 165.6 0 300-134.4 300-300 0-82.4-33.2-156.8-87.2-210.4-22.4 40-52 75.2-87.2 103.2 20.8 7.2 40.4 16.4 58.4 27.6z" fill="#1677FF"/>
|
||
</svg>
|
||
<div class="title">支付宝支付</div>
|
||
<div class="desc">微信浏览器不支持支付宝支付，请复制链接后在外部浏览器中打开完成支付</div>
|
||
<div class="step-list">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div>点击下方按钮复制支付链接</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div>打开手机浏览器（如Safari、Chrome）</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div>粘贴链接并打开，完成支付</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<div>支付完成后返回本页面刷新</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary" onclick="copyLink()">复制支付链接</button>
|
||
<button class="btn btn-secondary" onclick="location.reload()">刷新页面</button>
|
||
</div>
|
||
<div class="copy-result" id="copyResult">链接已复制到剪贴板</div>
|
||
<div class="tip">温馨提示：付款完成后请返回此页面刷新查看订单状态</div>
|
||
</div>
|
||
<div id="alipay-form" style="display:none;">{$form}</div>
|
||
</div>
|
||
<script>
|
||
var ua = navigator.userAgent.toLowerCase();
|
||
var isWechat = ua.indexOf('micromessenger') !== -1;
|
||
var payUrl = '{$pay_url}';
|
||
|
||
if (isWechat) {
|
||
document.getElementById('wechat-guide').style.display = 'block';
|
||
document.getElementById('alipay-form').style.display = 'none';
|
||
} else {
|
||
document.getElementById('wechat-guide').style.display = 'none';
|
||
document.getElementById('alipay-form').style.display = 'block';
|
||
document.forms['alipay_submit'].submit();
|
||
}
|
||
|
||
function copyLink() {
|
||
var input = document.createElement('input');
|
||
input.value = payUrl;
|
||
document.body.appendChild(input);
|
||
input.select();
|
||
input.setSelectionRange(0, 99999);
|
||
document.execCommand('copy');
|
||
document.body.removeChild(input);
|
||
|
||
var result = document.getElementById('copyResult');
|
||
result.style.display = 'block';
|
||
setTimeout(function() {
|
||
result.style.display = 'none';
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|