60 lines
2.0 KiB
Plaintext
60 lines
2.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>微信支付 - 扫码支付</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<% if (error) { %>
|
|
<div class="error-card">
|
|
<h1>❌ 下单失败</h1>
|
|
<p><%= error %></p>
|
|
<a href="/" class="btn">返回重试</a>
|
|
</div>
|
|
<% } else { %>
|
|
<div class="pay-card">
|
|
<h1>⚡ 微信扫码支付</h1>
|
|
<div class="order-info">
|
|
<p>订单号: <span><%= order.orderId %></span></p>
|
|
<p>商品: <span><%= order.productName %></span></p>
|
|
<p>金额: <span>¥ <%= (order.totalFee / 100).toFixed(2) %></span></p>
|
|
</div>
|
|
<div class="qrcode-wrapper">
|
|
<img src="<%= qrDataUrl %>" alt="支付二维码">
|
|
<p class="hint">请使用微信扫描二维码支付</p>
|
|
</div>
|
|
<div id="status" class="status pending">等待支付...</div>
|
|
<a href="/" class="btn btn-back">返回首页</a>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
|
|
<script>
|
|
<% if (!error) { %>
|
|
const orderId = '<%= order.orderId %>';
|
|
const checkStatus = () => {
|
|
fetch('/pay/status/' + orderId)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const el = document.getElementById('status');
|
|
if (data.status === 'SUCCESS') {
|
|
el.className = 'status success';
|
|
el.textContent = '✅ 支付成功！';
|
|
clearInterval(timer);
|
|
setTimeout(() => { window.location.href = '/pay/success/' + orderId; }, 1500);
|
|
} else if (data.status === 'FAILED') {
|
|
el.className = 'status failed';
|
|
el.textContent = '❌ 支付失败';
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
};
|
|
const timer = setInterval(checkStatus, 2000);
|
|
<% } %>
|
|
</script>
|
|
</body>
|
|
</html>
|