187 lines
7.2 KiB
HTML
187 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>支付结果 - {{ config.SITE_NAME or '软件授权管理系统' }}</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.payment-result-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
||
|
|
padding: 3rem;
|
||
|
|
max-width: 500px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.success-icon {
|
||
|
|
font-size: 5rem;
|
||
|
|
color: #28a745;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.error-icon {
|
||
|
|
font-size: 5rem;
|
||
|
|
color: #dc3545;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.order-info {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.license-key {
|
||
|
|
background: #000;
|
||
|
|
color: #0f0;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin: 1rem 0;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="payment-result-card">
|
||
|
|
{% if status == 'success' %}
|
||
|
|
<i class="fas fa-check-circle success-icon"></i>
|
||
|
|
<h1 class="text-success mb-3">支付成功！</h1>
|
||
|
|
<p class="text-muted mb-4">您的订单已支付完成，许可证已生成</p>
|
||
|
|
|
||
|
|
<div class="order-info">
|
||
|
|
<h5 class="mb-3"><i class="fas fa-receipt me-2"></i>订单信息</h5>
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">订单号:</div>
|
||
|
|
<div class="col-7 fw-bold">{{ order_number }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">支付金额:</div>
|
||
|
|
<div class="col-7 fw-bold">¥{{ amount }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">支付时间:</div>
|
||
|
|
<div class="col-7">{{ payment_time }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if license_key %}
|
||
|
|
<div class="order-info">
|
||
|
|
<h5 class="mb-3"><i class="fas fa-key me-2"></i>许可证密钥</h5>
|
||
|
|
<div class="license-key">{{ license_key }}</div>
|
||
|
|
<div class="text-muted small">
|
||
|
|
<i class="fas fa-info-circle me-1"></i>
|
||
|
|
请妥善保管您的许可证密钥，可用于激活软件
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="d-grid gap-2 mt-4">
|
||
|
|
<button class="btn btn-primary" onclick="copyLicenseKey()">
|
||
|
|
<i class="fas fa-copy me-2"></i>复制许可证密钥
|
||
|
|
</button>
|
||
|
|
<a href="/user/licenses" class="btn btn-outline-primary">
|
||
|
|
<i class="fas fa-list me-2"></i>查看我的许可证
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% elif status == 'processing' %}
|
||
|
|
<div class="spinner-border text-primary mb-3" style="width: 5rem; height: 5rem;" role="status">
|
||
|
|
<span class="visually-hidden">处理中...</span>
|
||
|
|
</div>
|
||
|
|
<h1 class="text-primary mb-3">正在处理...</h1>
|
||
|
|
<p class="text-muted mb-4">您的支付正在处理中，请稍候...</p>
|
||
|
|
|
||
|
|
<div class="order-info">
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">订单号:</div>
|
||
|
|
<div class="col-7 fw-bold">{{ order_number }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">支付金额:</div>
|
||
|
|
<div class="col-7 fw-bold">¥{{ amount }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-muted small">
|
||
|
|
<i class="fas fa-clock me-1"></i>
|
||
|
|
如果长时间未收到结果，请刷新页面或联系客服
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{% else %}
|
||
|
|
<i class="fas fa-times-circle error-icon"></i>
|
||
|
|
<h1 class="text-danger mb-3">支付失败</h1>
|
||
|
|
<p class="text-muted mb-4">{{ message or '支付过程中出现错误，请重试' }}</p>
|
||
|
|
|
||
|
|
<div class="order-info">
|
||
|
|
<h5 class="mb-3"><i class="fas fa-receipt me-2"></i>订单信息</h5>
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">订单号:</div>
|
||
|
|
<div class="col-7 fw-bold">{{ order_number }}</div>
|
||
|
|
</div>
|
||
|
|
{% if amount %}
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-5 text-muted">支付金额:</div>
|
||
|
|
<div class="col-7 fw-bold">¥{{ amount }}</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-grid gap-2 mt-4">
|
||
|
|
<a href="/user/licenses/purchase" class="btn btn-primary">
|
||
|
|
<i class="fas fa-redo me-2"></i>重新支付
|
||
|
|
</a>
|
||
|
|
<a href="/user/orders/query?order_number={{ order_number }}" class="btn btn-outline-primary">
|
||
|
|
<i class="fas fa-search me-2"></i>查询订单
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="mt-4 text-muted small">
|
||
|
|
<i class="fas fa-shield-alt me-1"></i>
|
||
|
|
如有疑问请联系客服
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<script>
|
||
|
|
// 复制许可证密钥
|
||
|
|
function copyLicenseKey() {
|
||
|
|
const licenseKey = '{{ license_key or "" }}';
|
||
|
|
if (licenseKey) {
|
||
|
|
navigator.clipboard.writeText(licenseKey).then(function() {
|
||
|
|
alert('许可证密钥已复制到剪贴板');
|
||
|
|
}, function(err) {
|
||
|
|
console.error('复制失败: ', err);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 如果是处理中状态，定时刷新查询支付结果
|
||
|
|
{% if status == 'processing' %}
|
||
|
|
setInterval(function() {
|
||
|
|
fetch(`/api/v1/user/orders/query?order_number={{ order_number }}`)
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.success && data.data.status == 1) {
|
||
|
|
// 支付成功，刷新页面
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(err => console.error('查询订单失败:', err));
|
||
|
|
}, 3000); // 每3秒查询一次
|
||
|
|
{% endif %}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|