102 lines
4.4 KiB
HTML
102 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>支付宝支付</title>
|
||
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; }
|
||
.container { max-width: 420px; margin: 0 auto; padding: 40px 20px; text-align: center; }
|
||
.icon { width: 80px; height: 80px; margin: 0 auto 20px; }
|
||
.icon-loading { border: 4px solid #ddd; border-top: 4px solid #1677ff; border-radius: 50%; animation: spin 1s linear infinite; }
|
||
.icon-success { background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||
.icon-success::after { content: ''; width: 30px; height: 16px; border: 4px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(2px, -4px); }
|
||
.title { font-size: 18px; color: #333; margin-bottom: 12px; }
|
||
.subtitle { font-size: 14px; color: #999; margin-bottom: 30px; }
|
||
.btn { display: inline-block; width: 100%; padding: 14px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; }
|
||
.btn-primary { background: #1677ff; color: #fff; }
|
||
.btn-primary:active { background: #0958d9; }
|
||
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
{% if pay_url %}
|
||
{# ===== 中转模式：自动跳转到支付宝 ===== #}
|
||
<div class="icon icon-loading"></div>
|
||
<div class="title">正在跳转到支付宝...</div>
|
||
<div class="subtitle">请稍候</div>
|
||
<script>
|
||
window.location.href = '{{ pay_url|escapejs }}';
|
||
</script>
|
||
|
||
{% else %}
|
||
{# ===== 返回模式：支付完成后的返回页 ===== #}
|
||
<div class="icon icon-loading" id="status-icon"></div>
|
||
<div class="title" id="status-title">正在确认支付结果...</div>
|
||
<div class="subtitle" id="status-subtitle">请稍候</div>
|
||
<button class="btn btn-primary" id="back-btn" style="display:none;" onclick="goBack()">返回小程序</button>
|
||
|
||
<script>
|
||
var orderNo = '{{ out_trade_no|escapejs }}';
|
||
var pollCount = 0;
|
||
var maxPoll = 15;
|
||
var btnShown = false;
|
||
|
||
function showSuccess() {
|
||
document.getElementById('status-icon').className = 'icon icon-success';
|
||
document.getElementById('status-title').innerText = '支付成功';
|
||
document.getElementById('status-subtitle').innerText = '订单号: ' + orderNo;
|
||
document.getElementById('back-btn').style.display = 'inline-block';
|
||
btnShown = true;
|
||
}
|
||
|
||
function showTimeout() {
|
||
document.getElementById('status-title').innerText = '支付确认超时';
|
||
document.getElementById('status-subtitle').innerText = '如已完成支付，请点击下方按钮返回';
|
||
document.getElementById('back-btn').style.display = 'inline-block';
|
||
btnShown = true;
|
||
}
|
||
|
||
function goBack() {
|
||
// 尝试通过微信 JSSDK 返回小程序
|
||
if (typeof wx !== 'undefined' && wx.miniProgram) {
|
||
wx.miniProgram.navigateBack();
|
||
} else {
|
||
// 非小程序环境，尝试 history.back
|
||
if (history.length > 1) {
|
||
history.back();
|
||
} else {
|
||
window.close();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 双保险：3秒后无论如何都显示返回按钮
|
||
setTimeout(function() {
|
||
if (!btnShown) {
|
||
document.getElementById('back-btn').style.display = 'inline-block';
|
||
}
|
||
}, 3000);
|
||
|
||
// 轮询订单状态（通过 mini-program 后台轮询，H5 仅作备用展示）
|
||
// 注意：H5 页面无 JWT token，无法直接调用 PaymentVerifyView
|
||
// 此处仅做延时等待，实际状态确认由小程序端轮询处理
|
||
if (orderNo) {
|
||
// 简单延时后展示成功（实际以小程序端轮询为准）
|
||
setTimeout(function() {
|
||
if (!btnShown) {
|
||
showSuccess();
|
||
}
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
{% endif %}
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|