448 lines
21 KiB
PHP
448 lines
21 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: index.php');
|
|
exit;
|
|
}
|
|
require_once __DIR__ . '/db/config.php';
|
|
|
|
$pdo = db();
|
|
$stmt = $pdo->prepare("SELECT username, balance FROM users WHERE id = ?");
|
|
$stmt->execute([$_SESSION['user_id']]);
|
|
$user = $stmt->fetch();
|
|
|
|
$settings = $pdo->query("SELECT setting_key, setting_value FROM settings")->fetchAll(PDO::FETCH_KEY_PAIR);
|
|
$trc20_address = $settings['usdt_trc20_address'] ?? 'TEm1B...TRC20_ADDRESS_HERE';
|
|
$erc20_address = $settings['usdt_erc20_address'] ?? '0x71C...ERC20_ADDRESS_HERE';
|
|
$site_name = $settings['site_name'] ?? '全球接码';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>充值中心 - <?= htmlspecialchars($site_name) ?></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--primary: #3b82f6;
|
|
--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
--bg-body: #f1f5f9;
|
|
--surface: #ffffff;
|
|
--text-main: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border-color: #e2e8f0;
|
|
--sidebar-width: 280px;
|
|
--radius-xl: 24px;
|
|
--radius-lg: 16px;
|
|
}
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: var(--sidebar-width);
|
|
padding: 2.5rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.card-custom {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-xl);
|
|
padding: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.network-btn {
|
|
background-color: #f8fafc;
|
|
border: 1.5px solid #e2e8f0;
|
|
color: var(--text-muted);
|
|
padding: 18px;
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
}
|
|
.network-btn.active {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
background-color: #eff6ff;
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.qr-card {
|
|
background: #fff;
|
|
padding: 24px;
|
|
border-radius: var(--radius-xl);
|
|
display: inline-block;
|
|
border: 1px solid #f1f5f9;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.address-box-wrapper {
|
|
background-color: #f8fafc;
|
|
padding: 20px 24px;
|
|
border-radius: var(--radius-lg);
|
|
border: 2px dashed #cbd5e1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
}
|
|
|
|
.address-text {
|
|
word-break: break-all;
|
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
|
font-size: 1.1rem;
|
|
color: #1e293b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-copy {
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
width: 48px; height: 48px;
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.btn-copy:hover { transform: scale(1.05); background: #2563eb; }
|
|
|
|
.btn-primary-action {
|
|
background: var(--primary-gradient);
|
|
border: none;
|
|
padding: 20px;
|
|
border-radius: var(--radius-lg);
|
|
font-weight: 800;
|
|
color: white;
|
|
width: 100%;
|
|
transition: all 0.3s;
|
|
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25);
|
|
}
|
|
.btn-primary-action:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35); }
|
|
|
|
.step-panel { display: none; }
|
|
.step-panel.active { display: block; animation: fadeInUp 0.4s ease-out; }
|
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
.scanner-circle {
|
|
width: 100px; height: 100px;
|
|
border: 3px solid var(--primary);
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
}
|
|
.scanner-circle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px; left: -10px; right: -10px; bottom: -10px;
|
|
border: 2px solid rgba(59, 130, 246, 0.2);
|
|
border-radius: 50%;
|
|
animation: ping 1.5s infinite;
|
|
}
|
|
@keyframes ping { 75%, 100% { transform: scale(1.4); opacity: 0; } }
|
|
|
|
.status-badge {
|
|
padding: 8px 16px;
|
|
border-radius: 100px;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.status-sync { background: #dcfce7; color: #166534; }
|
|
|
|
.amt-btn {
|
|
background: #fff;
|
|
border: 1.5px solid #e2e8f0;
|
|
padding: 15px;
|
|
border-radius: var(--radius-lg);
|
|
font-weight: 800;
|
|
transition: all 0.2s;
|
|
}
|
|
.amt-btn:hover { border-color: var(--primary); color: var(--primary); background: #f8fafc; }
|
|
|
|
@media (max-width: 992px) {
|
|
.main-content { margin-left: 0; padding: 1.5rem; }
|
|
.sidebar { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<?php include 'includes/sidebar.php'; ?>
|
|
|
|
<div class="main-content">
|
|
<div class="d-flex justify-content-between align-items-center mb-5">
|
|
<div>
|
|
<h1 class="fw-bold mb-1" style="font-size: 1.5rem;">资产充值 <span class="text-muted fw-medium ms-2 fs-6">RECHARGE CENTER</span></h1>
|
|
<p class="text-muted small mb-0 fw-medium">USDT 全自动区块监听，即时入账安全有保障</p>
|
|
</div>
|
|
<div class="text-end bg-white border p-3 px-4 rounded-4 shadow-sm d-flex align-items-center gap-3">
|
|
<div class="text-end">
|
|
<div class="small text-muted fw-bold" style="font-size: 10px; letter-spacing: 0.5px;">BALANCE</div>
|
|
<div class="h4 fw-bold text-primary mb-0">$<?= number_format($user['balance'] ?? 0, 2) ?></div>
|
|
</div>
|
|
<div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
<i class="fas fa-wallet"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-xl-8">
|
|
<div class="card-custom">
|
|
<!-- Step 1 -->
|
|
<div id="step1" class="step-panel active">
|
|
<h5 class="fw-bold mb-4" style="color: #334155;">1. 输入充值数额 / AMOUNT</h5>
|
|
<div class="p-4 bg-primary bg-opacity-10 rounded-4 mb-4" style="border-left: 4px solid var(--primary);">
|
|
<p class="small text-primary fw-bold mb-0">
|
|
<i class="fas fa-info-circle me-1"></i> 为了极速识别您的支付，系统会生成一个唯一的<strong>随机小数</strong>。请务必支付<strong>包含小数点的准确金额</strong>。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-5 text-center py-4">
|
|
<label class="form-label fw-bold text-muted small mb-3">充值金额 (USDT)</label>
|
|
<div class="d-flex align-items-center justify-content-center gap-2">
|
|
<span class="fs-1 fw-bold text-muted opacity-25">$</span>
|
|
<input type="number" id="inputAmount" class="form-control border-0 text-center fw-bold" style="font-size: 4rem; width: 300px; color: var(--primary);" placeholder="0" min="10" step="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-5">
|
|
<?php foreach([10, 50, 100, 200, 500, 1000] as $amt): ?>
|
|
<div class="col-4 col-md-2">
|
|
<button class="btn amt-btn w-100" onclick="setAmount(<?= $amt ?>)"><?= $amt ?></button>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<button class="btn-primary-action py-4 mt-4" onclick="confirmOrder()">
|
|
生成支付订单 / CONFIRM ORDER <i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div id="step2" class="step-panel">
|
|
<div class="d-flex justify-content-between align-items-center mb-5 pb-4 border-bottom">
|
|
<div>
|
|
<h5 class="fw-bold mb-1">2. 完成区块链支付 / PAYMENT</h5>
|
|
<div class="status-badge status-sync" id="orderIdDisplay">正在连接节点...</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="h2 fw-bold text-primary mb-0" id="displayAmount">0.00</div>
|
|
<div class="small text-muted fw-bold" style="font-size: 10px;">PRECISE AMOUNT (USDT)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold text-muted mb-3 small">A. 选择支付网络 / NETWORK</label>
|
|
<div class="d-flex gap-3 mb-4">
|
|
<div class="network-btn active" id="btnTRC" onclick="selectNetwork('TRC20')">
|
|
<div class="fs-5">TRC20</div>
|
|
<div class="small opacity-50">波场 TRON</div>
|
|
</div>
|
|
<div class="network-btn" id="btnERC" onclick="selectNetwork('ERC20')">
|
|
<div class="fs-5">ERC20</div>
|
|
<div class="small opacity-50">以太坊 ETH</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-warning border-0 rounded-4 p-4" style="background: #fffbeb;">
|
|
<h6 class="fw-bold mb-2 small" style="color: #92400e;"><i class="fas fa-exclamation-triangle me-2"></i> 核心支付准则</h6>
|
|
<ol class="small mb-0 ps-3" style="color: #92400e;">
|
|
<li class="mb-1">转账金额必须<strong>精确到小数点后两位</strong>。</li>
|
|
<li class="mb-1">转账网络必须选择与您选择的选项一致。</li>
|
|
<li>支付后请不要关闭此页面，等待系统自动跳转。</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 text-center">
|
|
<div class="qr-card" id="qrcode"></div>
|
|
<div class="mt-4">
|
|
<div class="badge bg-light text-primary border p-2 px-4 rounded-pill fw-bold">
|
|
<i class="fas fa-clock-rotate-left me-2"></i> 有效期: <span id="countdown">60:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5">
|
|
<label class="text-muted small mb-2 d-block fw-bold px-1">B. 复制收款地址 / ADDRESS</label>
|
|
<div class="address-box-wrapper">
|
|
<div class="address-text" id="addressBox">正在加载...</div>
|
|
<button class="btn-copy" onclick="copyAddress()" title="点击复制"><i class="fas fa-copy"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column align-items-center py-4">
|
|
<div class="scanner-circle">
|
|
<i class="fas fa-satellite-dish text-primary fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-2">正在监听区块确认...</h6>
|
|
<p class="text-muted small text-center mb-5 px-5">我们正在 24/7 监听您的专属付款。一旦链上确认数达标，系统将瞬间为您入账。</p>
|
|
|
|
<div class="d-flex gap-3 w-100">
|
|
<button class="btn btn-light border flex-grow-1 py-3 rounded-4 fw-bold" style="color: #64748b;" onclick="goBackToStep1()">修改金额</button>
|
|
<button class="btn btn-primary flex-grow-1 py-3 rounded-4 fw-bold shadow-sm" onclick="checkStatusManual()">手动刷新状态</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<div class="card-custom" style="padding: 2rem;">
|
|
<h6 class="fw-bold mb-4" style="color: #334155;"><i class="fas fa-lightbulb text-warning me-2"></i> 充值助手 / HELP</h6>
|
|
<div class="mb-4">
|
|
<div class="fw-bold mb-1 small">为什么要支付精确小数？</div>
|
|
<p class="small text-muted mb-0">金额是唯一的。精准支付后，系统可实现秒级自动识别入账。否则需要联系人工核实。</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="fw-bold mb-1 small">多久到账？</div>
|
|
<p class="small text-muted mb-0">TRC20 网络通常在 1 分钟内。ERC20 视网络拥堵情况，通常在 5-10 分钟。</p>
|
|
</div>
|
|
<div class="mt-5 p-4 bg-primary rounded-4 text-white shadow-lg" style="background: var(--primary-gradient) !important;">
|
|
<h6 class="fw-bold mb-2">需要人工支持？</h6>
|
|
<p class="small opacity-75 mb-3">如果金额支付错误或长时间未到账，请立即联系在线客服。</p>
|
|
<a href="support.php" class="btn btn-white btn-sm w-100 fw-bold py-2 rounded-3" style="background: white; color: var(--primary);">发起咨询 / SUPPORT</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="successModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 rounded-5 overflow-hidden text-center p-5">
|
|
<div class="mb-4">
|
|
<i class="fas fa-check-circle text-success" style="font-size: 5rem;"></i>
|
|
</div>
|
|
<h3 class="fw-bold">充值确认成功!</h3>
|
|
<p class="text-muted mb-4">您的余额已成功更新。欢迎回到工作台继续接码。</p>
|
|
<button class="btn btn-primary btn-lg w-100 py-3 rounded-4 fw-bold" onclick="window.location.href='dashboard.php'">立即前往工作台</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const addresses = { 'TRC20': '<?= $trc20_address ?>', 'ERC20': '<?= $erc20_address ?>' };
|
|
let currentNetwork = 'TRC20';
|
|
let timeLeft = 3600;
|
|
let timerInterval, pollInterval, currentRechargeId = null;
|
|
|
|
function setAmount(val) { document.getElementById('inputAmount').value = val; }
|
|
|
|
async function confirmOrder() {
|
|
const amt = document.getElementById('inputAmount').value;
|
|
if (!amt || amt < 10) { alert('最低充值金额为 10 USDT'); return; }
|
|
|
|
const btn = event.currentTarget;
|
|
const originalText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-circle-notch fa-spin me-2"></i>正在连接区块链网关...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('amount', amt);
|
|
const res = await fetch('ajax_handler.php?action=create_recharge', { method: 'POST', body: formData });
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
currentRechargeId = data.recharge_id;
|
|
document.getElementById('orderIdDisplay').textContent = 'ORDER ID: #RE' + currentRechargeId;
|
|
document.getElementById('displayAmount').textContent = parseFloat(data.amount).toFixed(2);
|
|
document.getElementById('step1').classList.remove('active');
|
|
document.getElementById('step2').classList.add('active');
|
|
updateDisplay();
|
|
startTimer();
|
|
startPollingStatus();
|
|
} else { alert(data.msg); btn.disabled = false; btn.innerHTML = originalText; }
|
|
} catch (e) { btn.disabled = false; btn.innerHTML = originalText; }
|
|
}
|
|
|
|
function startPollingStatus() {
|
|
pollInterval = setInterval(async () => {
|
|
try {
|
|
const res = await fetch(`ajax_handler.php?action=check_recharge_status&recharge_id=${currentRechargeId}`);
|
|
const data = await res.json();
|
|
if (data.code === 0 && data.status === 'completed') {
|
|
clearInterval(pollInterval);
|
|
new bootstrap.Modal(document.getElementById('successModal')).show();
|
|
setTimeout(() => window.location.href = 'dashboard.php', 3000);
|
|
}
|
|
} catch (e) {}
|
|
}, 3000);
|
|
}
|
|
|
|
async function checkStatusManual() {
|
|
const btn = event.currentTarget;
|
|
const old = btn.innerHTML;
|
|
btn.disabled = true; btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
|
|
try {
|
|
const res = await fetch(`ajax_handler.php?action=check_recharge_status&recharge_id=${currentRechargeId}`);
|
|
const data = await res.json();
|
|
if (data.code === 0 && data.status === 'completed') {
|
|
new bootstrap.Modal(document.getElementById('successModal')).show();
|
|
} else { setTimeout(() => { btn.disabled = false; btn.innerHTML = old; }, 1000); }
|
|
} catch (e) { btn.disabled = false; btn.innerHTML = old; }
|
|
}
|
|
|
|
function selectNetwork(net) {
|
|
currentNetwork = net;
|
|
document.getElementById('btnTRC').classList.toggle('active', net === 'TRC20');
|
|
document.getElementById('btnERC').classList.toggle('active', net === 'ERC20');
|
|
updateDisplay();
|
|
}
|
|
|
|
function updateDisplay() {
|
|
const addr = addresses[currentNetwork];
|
|
document.getElementById('addressBox').textContent = addr;
|
|
const qr = qrcode(0, 'M');
|
|
qr.addData(addr); qr.make();
|
|
document.getElementById('qrcode').innerHTML = qr.createImgTag(6, 0);
|
|
}
|
|
|
|
function copyAddress() {
|
|
const addr = document.getElementById('addressBox').textContent;
|
|
navigator.clipboard.writeText(addr).then(() => {
|
|
const btn = document.querySelector('.btn-copy');
|
|
const old = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-check"></i>';
|
|
setTimeout(() => btn.innerHTML = old, 2000);
|
|
});
|
|
}
|
|
|
|
function startTimer() {
|
|
timerInterval = setInterval(() => {
|
|
timeLeft--;
|
|
const m = Math.floor(timeLeft / 60), s = timeLeft % 60;
|
|
document.getElementById('countdown').textContent = `${m}:${s.toString().padStart(2, '0')}`;
|
|
if (timeLeft <= 0) window.location.reload();
|
|
}, 1000);
|
|
}
|
|
|
|
function goBackToStep1() {
|
|
if (!confirm('确定返回修改金额？当前订单将作废。')) return;
|
|
document.getElementById('step2').classList.remove('active');
|
|
document.getElementById('step1').classList.add('active');
|
|
clearInterval(timerInterval); clearInterval(pollInterval);
|
|
document.querySelector('#step1 button.btn-primary-action').disabled = false;
|
|
document.querySelector('#step1 button.btn-primary-action').innerHTML = '生成支付订单 / CONFIRM ORDER <i class="fas fa-chevron-right ms-2"></i>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|