701 lines
28 KiB
PHP
701 lines
28 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();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>工作台 - 全球接码 (Global SMS)</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">
|
|
<style>
|
|
:root {
|
|
--primary-color: #ff4d94;
|
|
--secondary-color: #ff1a75;
|
|
--bg-light: #fff8f9;
|
|
--surface-light: #ffffff;
|
|
--text-main: #2d1a1e;
|
|
--text-muted: #8a6d71;
|
|
--border-color: #ffd1dc;
|
|
--sidebar-width: 280px;
|
|
}
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background-color: var(--bg-light);
|
|
color: var(--text-main);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: var(--sidebar-width);
|
|
padding: 2rem 3rem;
|
|
}
|
|
.top-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.balance-card {
|
|
background: white;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 8px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-shadow: 4px 4px 0px var(--border-color);
|
|
}
|
|
|
|
.card-neo {
|
|
background: white;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 24px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 6px 6px 0px var(--border-color);
|
|
}
|
|
|
|
.custom-dropdown {
|
|
position: relative;
|
|
}
|
|
.dropdown-menu-custom {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
background: white;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 16px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
margin-top: 8px;
|
|
box-shadow: 0 10px 25px rgba(255, 77, 148, 0.1);
|
|
}
|
|
.dropdown-menu-custom.show { display: block; }
|
|
.dropdown-item-custom {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--bg-light);
|
|
}
|
|
.dropdown-item-custom:hover { background: rgba(255, 77, 148, 0.05); color: var(--primary-color); }
|
|
.dropdown-item-custom:last-child { border-bottom: none; }
|
|
|
|
.section-label {
|
|
padding: 10px 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
color: var(--text-muted);
|
|
background: var(--bg-light);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.country-item-small {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.country-item-small .name-zh { font-weight: 700; }
|
|
.country-item-small .name-en { font-size: 0.75rem; color: var(--text-muted); }
|
|
|
|
.service-card {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
transition: all 0.2s;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1.5fr;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.service-card:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 5px 15px rgba(255, 77, 148, 0.1);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 10px 20px;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 12px rgba(255, 77, 148, 0.2);
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: var(--secondary-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.form-control {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 12px 15px;
|
|
}
|
|
.form-control:focus {
|
|
box-shadow: none;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.table-neo {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 10px;
|
|
}
|
|
.table-neo tr { background: white; border-radius: 12px; }
|
|
.table-neo td, .table-neo th {
|
|
padding: 15px;
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
vertical-align: middle;
|
|
}
|
|
.table-neo th { border-top: none; border-bottom: 2px solid var(--border-color); font-weight: 800; color: var(--text-main); }
|
|
.table-neo td:first-child { border-left: 1px solid var(--border-color); border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
|
|
.table-neo td:last-child { border-right: 1px solid var(--border-color); border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
|
|
|
|
.timer-badge {
|
|
background: rgba(255, 77, 148, 0.1);
|
|
color: var(--primary-color);
|
|
font-weight: 700;
|
|
padding: 5px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.scroll-area {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
padding-right: 5px;
|
|
}
|
|
.scroll-area::-webkit-scrollbar { width: 4px; }
|
|
.scroll-area::-webkit-scrollbar-track { background: transparent; }
|
|
.scroll-area::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
|
|
|
|
.service-header {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1.5fr;
|
|
padding: 0 20px 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.stock-badge {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
padding: 4px 10px;
|
|
border-radius: 8px;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.main-content { margin-left: 80px; padding: 1.5rem; }
|
|
.service-card, .service-header { grid-template-columns: 1fr 1fr; }
|
|
.service-header { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<?php include 'includes/sidebar.php'; ?>
|
|
|
|
<div class="main-content">
|
|
<div class="top-header">
|
|
<div>
|
|
<h2 class="fw-bold mb-1">取号预约工作台 <span class="badge bg-primary fs-6 align-middle ms-2">LIVE</span></h2>
|
|
<p class="text-muted mb-0">选择地区和项目，即刻开启您的业务验证</p>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="balance-card">
|
|
<i class="fas fa-coins text-warning"></i>
|
|
<div class="d-flex flex-column">
|
|
<span class="small text-muted fw-bold" style="font-size: 0.7rem; line-height: 1;">当前余额 (Balance)</span>
|
|
<span class="h5 mb-0 fw-bold" id="userBalance">$<?= number_format($user['balance'], 2) ?></span>
|
|
</div>
|
|
</div>
|
|
<a href="recharge.php" class="btn btn-primary">
|
|
<i class="fas fa-plus-circle me-1"></i> 快速充值
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Center Section -->
|
|
<div class="card-neo mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="fw-bold mb-0"><i class="fas fa-bolt me-2 text-primary"></i> 活动任务中心 (Activity Center)</h5>
|
|
<div class="d-flex gap-2">
|
|
<span class="badge bg-light text-primary border rounded-pill px-3 py-2 fw-bold">数据同步中...</span>
|
|
<button class="btn btn-outline-primary btn-sm rounded-pill px-3" onclick="loadActiveOrders()">
|
|
<i class="fas fa-sync-alt"></i> 手动刷新
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table-neo">
|
|
<thead>
|
|
<tr>
|
|
<th>项目/国家 (Project/Country)</th>
|
|
<th>临时号码 (Phone Number)</th>
|
|
<th>验证码内容 (SMS Code)</th>
|
|
<th>剩余时长 (Time Left)</th>
|
|
<th class="text-end">管理操作 (Action)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="activeTasksBody">
|
|
<tr><td colspan="5" class="text-center py-5 text-muted">
|
|
<div class="spinner-border text-primary spinner-border-sm me-2"></div>
|
|
正在加载活跃任务...
|
|
</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-neo">
|
|
<div class="row g-4 align-items-end mb-4">
|
|
<div class="col-md-5">
|
|
<label class="form-label fw-bold"><i class="fas fa-globe me-2 text-primary"></i> 1. 选择国家 (Select Country)</label>
|
|
<div class="custom-dropdown">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0"><i class="fas fa-flag text-muted"></i></span>
|
|
<input type="text" id="countryInput" class="form-control border-start-0" placeholder="点击查看热门国家..." autocomplete="off" onfocus="showCountriesDropdown()" oninput="filterCountriesDropdown()">
|
|
</div>
|
|
<div id="countriesDropdown" class="dropdown-menu-custom">
|
|
<!-- Countries list will be here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label fw-bold"><i class="fas fa-rocket me-2 text-primary"></i> 2. 选择软件项目 (Select Service)</label>
|
|
<div class="custom-dropdown">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
|
|
<input type="text" id="serviceInput" class="form-control border-start-0" placeholder="点击查看热门项目..." autocomplete="off" onfocus="showServicesDropdown()" oninput="filterServicesDropdown()">
|
|
</div>
|
|
<div id="servicesDropdown" class="dropdown-menu-custom">
|
|
<!-- Services list will be here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button class="btn btn-primary w-100 py-3 rounded-4" onclick="loadServicesQuotation()">
|
|
<i class="fas fa-search me-1"></i> 查询报价
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="quotationArea" style="display: none;">
|
|
<div class="service-header mt-4">
|
|
<div>项目名称 (Project Name)</div>
|
|
<div>实时库存 (Stock)</div>
|
|
<div>价格区间 (Price)</div>
|
|
<div class="text-end">操作 (Action)</div>
|
|
</div>
|
|
|
|
<div class="scroll-area" id="serviceList">
|
|
<div class="text-center py-5 text-muted">
|
|
<div class="spinner-border text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="welcomeArea" class="text-center py-5">
|
|
<i class="fas fa-map-location-dot mb-3 d-block" style="font-size: 4rem; opacity: 0.1; color: var(--primary-color);"></i>
|
|
<h5 class="fw-bold">开始您的预约之旅</h5>
|
|
<p class="text-muted small">首先在上方选择一个国家和软件项目，点击“查询报价”获取最新实时库存</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMS Modal -->
|
|
<div class="modal fade" id="smsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 rounded-4 shadow-lg">
|
|
<div class="modal-body text-center p-5">
|
|
<div class="mb-4"><i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i></div>
|
|
<h3 class="fw-bold mb-2">验证码已送达!</h3>
|
|
<p class="text-muted mb-4">系统已自动为您复制验证码</p>
|
|
<div class="bg-light p-4 rounded-3 mb-4">
|
|
<h1 class="display-4 fw-bold text-primary mb-0" id="modalSmsCode">------</h1>
|
|
</div>
|
|
<button class="btn btn-primary w-100 py-3 rounded-3" data-bs-dismiss="modal">确定并关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const apiHandler = 'ajax_handler.php';
|
|
let allCountries = [];
|
|
let currentCountry = null;
|
|
let currentService = null;
|
|
let activePolls = {};
|
|
let activeTimers = {};
|
|
|
|
const popularCountries = ['中国', '香港', '台湾', '美国', '英国', '俄罗斯', '印度', '印尼', '越南', '泰国', '韩国', '日本'];
|
|
const popularServices = ['Telegram', 'WhatsApp', 'OpenAI', 'Google', 'Facebook', 'Instagram', 'Twitter', 'TikTok', 'Amazon', 'Apple'];
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadCountries();
|
|
loadActiveOrders();
|
|
setInterval(loadActiveOrders, 30000);
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.custom-dropdown')) {
|
|
hideDropdowns();
|
|
}
|
|
});
|
|
});
|
|
|
|
async function loadCountries() {
|
|
try {
|
|
const res = await fetch(`${apiHandler}?action=get_countries`);
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
allCountries = data.data;
|
|
renderCountriesDropdown();
|
|
renderServicesDropdown();
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
function renderCountriesDropdown(filter = '') {
|
|
const container = document.getElementById('countriesDropdown');
|
|
container.innerHTML = '';
|
|
|
|
let filtered = allCountries;
|
|
if (filter) {
|
|
filtered = allCountries.filter(c =>
|
|
c.name_zh.includes(filter) ||
|
|
c.name_en.toLowerCase().includes(filter)
|
|
);
|
|
}
|
|
|
|
if (!filter) {
|
|
const popularLabel = document.createElement('div');
|
|
popularLabel.className = 'section-label';
|
|
popularLabel.textContent = '热门国家 / Popular';
|
|
container.appendChild(popularLabel);
|
|
|
|
allCountries.filter(c => popularCountries.includes(c.name_zh)).forEach(c => {
|
|
container.appendChild(createCountryItem(c));
|
|
});
|
|
|
|
const allLabel = document.createElement('div');
|
|
allLabel.className = 'section-label';
|
|
allLabel.textContent = '全部国家 / All Countries';
|
|
container.appendChild(allLabel);
|
|
}
|
|
|
|
filtered.forEach(c => {
|
|
container.appendChild(createCountryItem(c));
|
|
});
|
|
|
|
if (filtered.length === 0) {
|
|
container.innerHTML = '<div class="p-4 text-center text-muted small">未找到相关国家</div>';
|
|
}
|
|
}
|
|
|
|
function createCountryItem(c) {
|
|
const div = document.createElement('div');
|
|
div.className = 'dropdown-item-custom';
|
|
div.onclick = () => selectCountry(c);
|
|
div.innerHTML = `
|
|
<div class="country-item-small">
|
|
<span class="flag"><i class="fas fa-flag text-muted opacity-25"></i></span>
|
|
<div class="d-flex flex-column">
|
|
<span class="name-zh">${c.name_zh}</span>
|
|
<span class="name-en">${c.name_en}</span>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-check text-primary d-none" id="check-${c.name_zh}"></i>
|
|
`;
|
|
return div;
|
|
}
|
|
|
|
function renderServicesDropdown(filter = '') {
|
|
const container = document.getElementById('servicesDropdown');
|
|
container.innerHTML = '';
|
|
|
|
if (!filter) {
|
|
const popularLabel = document.createElement('div');
|
|
popularLabel.className = 'section-label';
|
|
popularLabel.textContent = '热门项目 / Popular Services';
|
|
container.appendChild(popularLabel);
|
|
|
|
popularServices.forEach(s => {
|
|
container.appendChild(createServiceItem(s));
|
|
});
|
|
} else {
|
|
container.appendChild(createServiceItem(filter));
|
|
}
|
|
}
|
|
|
|
function createServiceItem(name) {
|
|
const div = document.createElement('div');
|
|
div.className = 'dropdown-item-custom';
|
|
div.onclick = () => selectService(name);
|
|
div.innerHTML = `
|
|
<div class="d-flex align-items-center gap-3">
|
|
<i class="fas fa-mobile-screen-button text-muted opacity-50"></i>
|
|
<span class="fw-bold">${name}</span>
|
|
</div>
|
|
<i class="fas fa-chevron-right small opacity-25"></i>
|
|
`;
|
|
return div;
|
|
}
|
|
|
|
function showCountriesDropdown() {
|
|
hideDropdowns();
|
|
document.getElementById('countriesDropdown').classList.add('show');
|
|
}
|
|
|
|
function filterCountriesDropdown() {
|
|
const val = document.getElementById('countryInput').value;
|
|
renderCountriesDropdown(val);
|
|
}
|
|
|
|
function selectCountry(c) {
|
|
currentCountry = c;
|
|
document.getElementById('countryInput').value = c.name_zh;
|
|
hideDropdowns();
|
|
if (currentService) loadServicesQuotation();
|
|
}
|
|
|
|
function showServicesDropdown() {
|
|
hideDropdowns();
|
|
document.getElementById('servicesDropdown').classList.add('show');
|
|
}
|
|
|
|
function filterServicesDropdown() {
|
|
const val = document.getElementById('serviceInput').value;
|
|
renderServicesDropdown(val);
|
|
}
|
|
|
|
function selectService(name) {
|
|
currentService = name;
|
|
document.getElementById('serviceInput').value = name;
|
|
hideDropdowns();
|
|
if (currentCountry) loadServicesQuotation();
|
|
}
|
|
|
|
function hideDropdowns() {
|
|
document.querySelectorAll('.dropdown-menu-custom').forEach(d => d.classList.remove('show'));
|
|
}
|
|
|
|
async function loadServicesQuotation() {
|
|
if (!currentCountry) return;
|
|
|
|
document.getElementById('welcomeArea').style.display = 'none';
|
|
document.getElementById('quotationArea').style.display = 'block';
|
|
|
|
const service = document.getElementById('serviceInput').value;
|
|
const container = document.getElementById('serviceList');
|
|
container.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary"></div><p class="mt-2 small text-muted">正在获取实时报价单...</p></div>';
|
|
|
|
try {
|
|
const res = await fetch(`${apiHandler}?action=get_services&country=${encodeURIComponent(currentCountry.name_zh)}&service=${encodeURIComponent(service)}`);
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
container.innerHTML = '';
|
|
if (data.data.length === 0) {
|
|
container.innerHTML = '<div class="text-center py-5 text-muted">当前国家暂无该项目报价，请尝试搜索其他项目</div>';
|
|
return;
|
|
}
|
|
data.data.forEach(s => {
|
|
const card = document.createElement('div');
|
|
card.className = 'service-card';
|
|
card.innerHTML = `
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-light p-3 rounded-3 me-3 text-primary"><i class="fas fa-mobile-screen-button"></i></div>
|
|
<div class="fw-bold">${s.service_name}</div>
|
|
</div>
|
|
<div><span class="stock-badge">${s.count}+</span></div>
|
|
<div class="fw-bold text-primary h5 mb-0">$${s.cost}</div>
|
|
<div class="text-end">
|
|
<button class="btn btn-primary w-100 py-2 rounded-pill fw-bold" onclick="getNumber('${s.service_id}', '${s.service_name}', ${s.cost}, this)">
|
|
立即预约 (Reserve)
|
|
</button>
|
|
</div>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
async function getNumber(service_id, service_name, price, btn) {
|
|
btn.disabled = true;
|
|
const oldHtml = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在预约...';
|
|
|
|
try {
|
|
const res = await fetch(`${apiHandler}?action=get_number&service_id=${service_id}&service_name=${encodeURIComponent(service_name)}&country_name=${encodeURIComponent(currentCountry.name_zh)}&price=${price}`);
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
loadActiveOrders();
|
|
updateBalance();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} else {
|
|
alert('预约失败: ' + (data.msg || '余额不足或库存不足'));
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
btn.disabled = false;
|
|
btn.innerHTML = oldHtml;
|
|
}
|
|
|
|
async function updateBalance() {
|
|
const res = await fetch(`${apiHandler}?action=get_balance`);
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
document.getElementById('userBalance').textContent = '$' + data.balance;
|
|
}
|
|
}
|
|
|
|
async function loadActiveOrders() {
|
|
try {
|
|
const res = await fetch(`${apiHandler}?action=get_active_orders`);
|
|
const data = await res.json();
|
|
const body = document.getElementById('activeTasksBody');
|
|
|
|
Object.values(activeTimers).forEach(t => clearInterval(t));
|
|
activeTimers = {};
|
|
|
|
if (data.code === 0) {
|
|
if (data.data.length === 0) {
|
|
body.innerHTML = '<tr><td colspan="5" class="text-center py-5 text-muted small">暂无进行中的预约任务<br><span class="opacity-50">请在上方选择项目点击“立即预约”</span></td></tr>';
|
|
return;
|
|
}
|
|
body.innerHTML = '';
|
|
data.data.forEach(order => {
|
|
const row = document.createElement('tr');
|
|
const expireAt = new Date(order.expire_at.replace(/-/g, "/")).getTime();
|
|
const now = new Date().getTime();
|
|
let timeLeft = Math.floor((expireAt - now) / 1000);
|
|
|
|
row.innerHTML = `
|
|
<td>
|
|
<div class="fw-bold text-primary">${order.service_name}</div>
|
|
<div class="small text-muted"><i class="fas fa-map-marker-alt me-1"></i>${order.country_name}</div>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold h5 mb-0 text-dark">${order.number}</div>
|
|
<div class="small text-muted">Request ID: ${order.request_id}</div>
|
|
</td>
|
|
<td id="sms-${order.request_id}">
|
|
<div class="d-flex align-items-center">
|
|
<span class="spinner-grow spinner-grow-sm text-primary me-2"></span>
|
|
<span class="small text-primary fw-bold">监听短信中...</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="timer-badge" id="timer-${order.request_id}">${formatTime(timeLeft)}</span></td>
|
|
<td class="text-end">
|
|
<button class="btn btn-sm btn-outline-danger border-0 rounded-pill px-3" onclick="releaseNumber('${order.request_id}')" title="释放号码">
|
|
<i class="fas fa-trash-alt me-1"></i> 释放号码
|
|
</button>
|
|
</td>
|
|
`;
|
|
body.appendChild(row);
|
|
startPolling(order.request_id);
|
|
startTimer(order.request_id, timeLeft);
|
|
});
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
function startPolling(request_id) {
|
|
if (activePolls[request_id]) return;
|
|
activePolls[request_id] = setInterval(async () => {
|
|
const res = await fetch(`${apiHandler}?action=check_sms&request_id=${request_id}`);
|
|
const data = await res.json();
|
|
if (data.code === 0 && data.msg === 'success') {
|
|
const smsEl = document.getElementById(`sms-${request_id}`);
|
|
if (smsEl) {
|
|
smsEl.innerHTML = `
|
|
<div class="bg-success-subtle p-2 rounded border border-success d-flex align-items-center justify-content-between">
|
|
<span class="fw-bold text-success h5 mb-0">${data.sms_code}</span>
|
|
<button class="btn btn-sm btn-link text-success p-0" onclick="navigator.clipboard.writeText('${data.sms_code}')"><i class="fas fa-copy"></i></button>
|
|
</div>
|
|
`;
|
|
}
|
|
clearInterval(activePolls[request_id]);
|
|
delete activePolls[request_id];
|
|
showSmsModal(data.sms_code);
|
|
} else if (data.code === 400) {
|
|
clearInterval(activePolls[request_id]);
|
|
delete activePolls[request_id];
|
|
loadActiveOrders();
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
function startTimer(id, seconds) {
|
|
const el = document.getElementById(`timer-${id}`);
|
|
activeTimers[id] = setInterval(() => {
|
|
seconds--;
|
|
if (seconds <= 0) {
|
|
clearInterval(activeTimers[id]);
|
|
if (el) el.textContent = '已过期';
|
|
setTimeout(() => loadActiveOrders(), 1000);
|
|
} else {
|
|
if (el) el.textContent = formatTime(seconds);
|
|
if (seconds < 60) {
|
|
el.classList.add('bg-danger', 'text-white');
|
|
}
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
async function releaseNumber(id) {
|
|
if (!confirm('释放后将无法接收该号码的验证码。确定释放吗？')) return;
|
|
try {
|
|
const res = await fetch(`${apiHandler}?action=release_number&request_id=${id}`);
|
|
const data = await res.json();
|
|
if (data.code === 0) {
|
|
loadActiveOrders();
|
|
updateBalance();
|
|
} else {
|
|
alert(data.msg || '操作失败');
|
|
}
|
|
} catch (e) { alert('网络请求失败'); }
|
|
}
|
|
|
|
function formatTime(s) {
|
|
if (s <= 0) return "00:00";
|
|
const m = Math.floor(s / 60);
|
|
const sec = s % 60;
|
|
return `${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function showSmsModal(code) {
|
|
document.getElementById('modalSmsCode').textContent = code;
|
|
const modal = new bootstrap.Modal(document.getElementById('smsModal'));
|
|
modal.show();
|
|
navigator.clipboard.writeText(code).catch(e => {});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|