Henry_Du
042720d812
统一替换全站所有HTML页面的品牌标题为FarSight-T.N.E铁路运输，调整部分页面的中文显示文案，例如删除ticket-board.html中的冗余说明文字。格式化重构blog.html的代码结构与缩进，修复末尾无换行的问题。 后端完善/ic-cards/query接口：支持空查询返回全部IC卡列表，按创建时间倒序排序，添加卡片状态和类型的标准化标签，优化请求日志记录。 全面重构IC卡搜索页面的前端逻辑，新增批量查看所有IC卡功能，支持点击卡片查看详情与操作历史，优化状态管理与渲染流程。
212 lines
12 KiB
HTML
212 lines
12 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>FSE 铁路票务系统 - IC 卡管理</title>
|
|
<link rel="icon" type="image/png" href="/FSE-ticket.png">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/style.css?v=13">
|
|
</head>
|
|
|
|
<body class="jr-admin-page jr-admin-ic-page jr-public-page">
|
|
<div class="jr-public-shell">
|
|
<header class="jr-topbar">
|
|
<div class="jr-topbar-inner">
|
|
<a href="/" class="jr-top-link" id="icTopLink">
|
|
<i class="fas fa-train"></i>
|
|
<span>FSE 铁路运输后台系统</span>
|
|
</a>
|
|
<div class="jr-top-status is-checking" data-server-status-root>
|
|
<span class="jr-top-status-label">服务器状态</span>
|
|
<span class="jr-top-status-dot"></span>
|
|
<span class="jr-top-status-value" data-server-status-value>检测中</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="jr-brandbar">
|
|
<div class="jr-brandbar-inner">
|
|
<a href="/" class="jr-brand" id="icBrandLink">
|
|
<img src="/FSE-ticket.png" alt="FSE Railway" class="jr-brand-logo" />
|
|
<div class="jr-brand-copy">
|
|
<strong>FarSight-T.N.E铁路运输</strong>
|
|
<span>IC 卡管理后台</span>
|
|
</div>
|
|
</a>
|
|
<nav class="jr-nav" aria-label="站点导航">
|
|
<a href="https://ticket.fse-media.group/home.html" data-link="home">首页</a>
|
|
<a href="https://ticket.fse-media.group/order" data-link="order">线上预定</a>
|
|
<a href="https://ticket.fse-media.group/search" data-link="search">车票查询</a>
|
|
<a href="https://ticket.fse-media.group/ic-card/search" data-link="card-search">IC 卡查询</a>
|
|
<a href="https://ticket.fse-media.group/ic-card/order" data-link="card-order">线上购卡</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<main class="jr-public-main jr-admin-main-shell">
|
|
<div id="app" class="jr-admin-app">
|
|
<div class="sidebar">
|
|
<div class="jr-admin-sidebar-head">
|
|
<span class="jr-kicker">IC CARD CONSOLE</span>
|
|
<div class="brand">FSE 铁路票务系统控制台</div>
|
|
<p class="jr-admin-sidebar-copy">统一管理 IC 卡发卡、充值、持卡人信息以及历史操作记录。</p>
|
|
</div>
|
|
<div class="nav">
|
|
<a href="/" class="nav-item" style="text-decoration:none;">
|
|
<span class="nav-icon"><i class="fas fa-home"></i></span>
|
|
返回首页
|
|
</a>
|
|
<a href="/admin" class="nav-item" style="text-decoration:none;">
|
|
<span class="nav-icon"><i class="fas fa-chart-pie"></i></span>
|
|
主控制台
|
|
</a>
|
|
<a href="/admin/ic-card" class="nav-item active" style="text-decoration:none;">
|
|
<span class="nav-icon"><i class="fas fa-credit-card"></i></span>
|
|
IC 卡管理
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-footer jr-admin-sidebar-status">
|
|
<div>IC Card Console</div>
|
|
<div id="serverStatusText" style="margin-top:6px;">正在检测服务状态...</div>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="header">
|
|
<div class="jr-admin-header-copy">
|
|
<div class="flex" style="gap: 12px;">
|
|
<div>
|
|
<span class="jr-kicker">JR STYLE ADMIN</span>
|
|
<h3 style="margin: 0;">IC 卡管理</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<button id="refreshBtn"><i class="fas fa-sync-alt"></i> 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<section class="jr-page-intro jr-admin-intro">
|
|
<span class="jr-kicker">IC MANAGEMENT</span>
|
|
<h1>IC 卡发行与状态管理</h1>
|
|
<p>延续公共页面的白底门户风格，让发卡、储值与事件记录在同一块工作区域中保持清晰易读。</p>
|
|
</section>
|
|
<section class="jr-home-alert jr-admin-alert">
|
|
<div class="jr-alert-title">
|
|
<i class="fas fa-circle-info"></i>
|
|
<span>业务范围</span>
|
|
</div>
|
|
<p>当前页面用于处理 IC 卡创建、余额管理、持卡人资料和事件流查看，适合作为后台卡务管理的单独入口。</p>
|
|
</section>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="stat-label">IC 卡总数</div>
|
|
<div class="stat-value" id="statTotal">0</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="stat-label">待领卡</div>
|
|
<div class="stat-value" id="statPending">0</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="stat-label">正常启用</div>
|
|
<div class="stat-value" id="statActive">0</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="stat-label">储值总额</div>
|
|
<div class="stat-value" id="statBalance">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="management-container ic-admin-layout">
|
|
<div class="management-sidebar">
|
|
<div class="card">
|
|
<div class="flex between mb-4">
|
|
<h4>快速建卡</h4>
|
|
</div>
|
|
<div class="ic-form-grid">
|
|
<input id="createHolder" placeholder="持卡人姓名，仅支持英文与常用符号">
|
|
<input id="createBalance" type="number" min="0" step="1" value="50" placeholder="初始余额">
|
|
</div>
|
|
<div class="text-muted" style="margin-top:12px;">后台建卡统一创建为 IC 储值卡，持卡人姓名仅支持英文与常用符号。</div>
|
|
<div class="toolbar" style="margin-top: 14px;">
|
|
<button id="createBtn" class="btn primary"><i class="fas fa-plus"></i> 创建 IC 卡</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="margin-bottom:0; display:flex; flex-direction:column; min-height: 520px;">
|
|
<div class="flex between mb-4">
|
|
<h4>卡片列表</h4>
|
|
<span class="badge" id="listCountBadge">0</span>
|
|
</div>
|
|
<div class="flex mb-4" style="flex-wrap:wrap;">
|
|
<input id="searchInput" placeholder="搜索卡号 / 订单号 / 姓名" style="flex:1;">
|
|
</div>
|
|
<div id="cardList" class="list-lines" style="flex:1; overflow-y:auto;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="management-main">
|
|
<div class="card">
|
|
<div class="flex between mb-4">
|
|
<h4>卡片详情</h4>
|
|
<div class="flex" style="gap:8px;">
|
|
<button id="topupBtn" class="btn"><i class="fas fa-wallet"></i> 充值</button>
|
|
<button id="saveBtn" class="btn primary"><i class="fas fa-save"></i> 保存</button>
|
|
</div>
|
|
</div>
|
|
<div id="detailPanel" class="empty-state">
|
|
<i class="fas fa-credit-card" style="font-size:48px; opacity:0.3;"></i>
|
|
<p>从左侧选择一张 IC 卡以查看详情。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="flex between mb-4">
|
|
<h4>操作记录</h4>
|
|
</div>
|
|
<div id="eventList" class="timeline">
|
|
<div class="loading">选择卡片后显示事件流。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025450093号</a>
|
|
<span class="version">v1.0.12</span>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/custom-dialog.js?v=12"></script>
|
|
<script src="/public-status.js?v=13"></script>
|
|
<script src="/ic-card-admin.js?v=2"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const isDomain = location.hostname.includes('fse-media.group');
|
|
const links = {
|
|
home: isDomain ? 'https://ticket.fse-media.group' : '/home.html',
|
|
order: isDomain ? 'https://ticket.fse-media.group/order' : '/ticket-order.html',
|
|
search: isDomain ? 'https://ticket.fse-media.group/search' : '/ticket-search.html',
|
|
'card-search': isDomain ? 'https://ticket.fse-media.group/ic-card/search' : '/ic-card-search.html',
|
|
'card-order': isDomain ? 'https://ticket.fse-media.group/ic-card/order' : '/ic-card-order.html'
|
|
};
|
|
|
|
const topLink = document.getElementById('icTopLink');
|
|
const brandLink = document.getElementById('icBrandLink');
|
|
|
|
if (topLink) topLink.href = links.home;
|
|
if (brandLink) brandLink.href = links.home;
|
|
|
|
document.querySelectorAll('[data-link]').forEach((el) => {
|
|
const key = el.getAttribute('data-link');
|
|
if (links[key]) el.href = links[key];
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|