Henry_Du/FSE-Ticket.sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 优化票务与IC卡查询页面的功能与UI

Browse Source 
- 更新静态资源版本以清理浏览器缓存
- 新增查询概览模块与搜索辅助提示文字
- 添加XSS内容转义防护，优化列表项选中样式
- 重构IC卡查询页面布局，拆分详情与事件记录区域
- 优化移动端响应式展示效果
This commit is contained in:
HenryDu8133
2026-06-28 11:20:57 +08:00
parent 042720d812
commit d6aa03d3a7
5 changed files with 314 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/ic-card-search.html
+81 -7
View File
@@ -7,7 +7,7 @@
<title>IC 卡查询</title> <title>IC 卡查询</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png"> <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=13"> <link rel="stylesheet" href="/style.css?v=14">
</head> </head>
<body class="public-search jr-public-page"> <body class="public-search jr-public-page">
@@ -49,6 +49,23 @@
<h1>按卡号或凭证码查询 IC 卡状态</h1> <h1>按卡号或凭证码查询 IC 卡状态</h1>
<p>支持检索 IC 卡当前状态、余额和最近操作记录；输入线上购卡生成的凭证码，也能反查对应卡片。</p> <p>支持检索 IC 卡当前状态、余额和最近操作记录；输入线上购卡生成的凭证码，也能反查对应卡片。</p>
</section> </section>
<section class="jr-query-overview jr-grid-three" aria-label="IC 卡查询摘要">
<article class="jr-query-stat">
<span class="jr-query-stat-label">检索方式</span>
<strong>卡号 / 凭证码</strong>
<p>支持凭证码反查对应卡片，也支持直接输入卡号查看当前状态与余额。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">结果浏览</span>
<strong>列表与详情并排</strong>
<p>左侧浏览卡片列表，右侧查看卡片详情、状态提示和最近操作记录。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">移动端</span>
<strong>触达区更大</strong>
<p>手机端自动切换为单列阅读，卡片点击区域与按钮尺寸都更适合触屏操作。</p>
</article>
</section>
<section class="jr-panel-card" style="margin-bottom:24px;"> <section class="jr-panel-card" style="margin-bottom:24px;">
<div class="jr-panel-headline"> <div class="jr-panel-headline">
<h2>检索条件</h2> <h2>检索条件</h2>
@@ -62,15 +79,30 @@
查询 IC 卡 查询 IC 卡
</button> </button>
</div> </div>
<p class="jr-search-helper">留空可浏览全部 IC 卡；输入卡号或凭证码后，可直接定位到对应卡片详情。</p>
</section> </section>
<section class="jr-grid-two"> <section class="jr-search-results">
<article class="jr-panel-card"> <article class="jr-panel-card">
<div class="jr-panel-headline"> <div class="jr-panel-headline">
<h3>卡片概览</h3> <h3>结果列表</h3>
<span class="jr-panel-note">Card Results</span>
</div>
<div id="summaryBox" class="jr-scroll-box">
<div class="jr-center-empty" style="min-height:180px;">
<p>请输入卡号或凭证码开始查询。</p>
</div>
</div>
</article>
<section class="jr-detail-stack">
<article class="jr-panel-card">
<div class="jr-panel-headline">
<h3>卡片详情</h3>
<span class="jr-panel-note">Card Overview</span> <span class="jr-panel-note">Card Overview</span>
</div> </div>
<div id="summaryBox" class="jr-center-empty"> <div id="detailBox">
<p>请输入卡号或凭证码开始查询。</p> <div class="jr-center-empty" style="min-height:180px;">
<p>从左侧选择一张 IC 卡以查看详情。</p>
</div>
</div> </div>
</article> </article>
<article class="jr-panel-card"> <article class="jr-panel-card">
@@ -84,6 +116,49 @@
</div> </div>
</div> </div>
</article> </article>
<div class="jr-grid-two">
<article class="jr-panel-card jr-guide-card">
<div class="jr-panel-headline">
<h3>状态说明</h3>
<span class="jr-panel-note">Card Status</span>
</div>
<div class="jr-guide-list">
<div class="jr-guide-item">
<strong>正常</strong>
<span>卡片已启用，可在检票设备直接刷卡进出站。</span>
</div>
<div class="jr-guide-item">
<strong>待领卡</strong>
<span>请持购卡凭证码前往站内售票机完成领卡后再使用。</span>
</div>
<div class="jr-guide-item">
<strong>不可用</strong>
<span>卡片已停用、挂失或退款，建议联系站务进行处理。</span>
</div>
</div>
</article>
<article class="jr-panel-card jr-guide-card">
<div class="jr-panel-headline">
<h3>查询提示</h3>
<span class="jr-panel-note">Search Guide</span>
</div>
<div class="jr-guide-list">
<div class="jr-guide-item">
<strong>留空查询</strong>
<span>不输入关键字时，会按建卡时间倒序展示全部 IC 卡记录。</span>
</div>
<div class="jr-guide-item">
<strong>凭证反查</strong>
<span>购卡后若未领卡，可直接使用凭证码快速定位对应卡片。</span>
</div>
<div class="jr-guide-item">
<strong>手机查看</strong>
<span>移动端会把结果列表、详情和事件记录按顺序折叠为单列阅读。</span>
</div>
</div>
</article>
</div>
</section>
</section> </section>
<footer class="site-footer jr-footer-space"> <footer class="site-footer jr-footer-space">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025450093号</a> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025450093号</a>
@@ -92,7 +167,7 @@
</main> </main>
</div> </div>
<script src="/custom-dialog.js?v=12"></script> <script src="/custom-dialog.js?v=12"></script>
<script src="/ic-card-search.js?v=2"></script> <script src="/ic-card-search.js?v=3"></script>
<script src="/public-status.js?v=13"></script> <script src="/public-status.js?v=13"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -120,4 +195,3 @@
</body> </body>
</html> </html>
web/ic-card-search.js
+38 -17
View File
@@ -3,6 +3,7 @@
const inputEl = $('#queryInput'); const inputEl = $('#queryInput');
const queryBtn = $('#queryBtn'); const queryBtn = $('#queryBtn');
const summaryBoxEl = $('#summaryBox'); const summaryBoxEl = $('#summaryBox');
const detailBoxEl = $('#detailBox');
const eventBoxEl = $('#eventBox'); const eventBoxEl = $('#eventBox');
const state = { const state = {
cards: [], cards: [],
@@ -59,6 +60,9 @@
const buildCardPreview = (card) => { const buildCardPreview = (card) => {
const shownCardId = card.display_card_id || card.card_id || '---'; const shownCardId = card.display_card_id || card.card_id || '---';
const detailHref = window.location.hostname.includes('fse-media.group')
? `https://ticket.fse-media.group/ic/${encodeURIComponent(card.card_id || shownCardId)}`
: `/ic/${encodeURIComponent(card.card_id || shownCardId)}`;
return ` return `
<div class="jr-ticket-preview"> <div class="jr-ticket-preview">
<div class="jr-ticket-row-head"> <div class="jr-ticket-row-head">
@@ -73,6 +77,12 @@
<div class="jr-meta-item"><span>凭证码</span><strong>${escapeHtml(card.voucher_code || card.code || card.order_code || '---')}</strong></div> <div class="jr-meta-item"><span>凭证码</span><strong>${escapeHtml(card.voucher_code || card.code || card.order_code || '---')}</strong></div>
<div class="jr-meta-item"><span>购卡时间</span><strong>${escapeHtml(formatTime(card.created_ts))}</strong></div> <div class="jr-meta-item"><span>购卡时间</span><strong>${escapeHtml(formatTime(card.created_ts))}</strong></div>
</div> </div>
<div class="jr-action-row">
<a href="${detailHref}" class="btn jr-secondary-btn" target="_blank" rel="noopener noreferrer">
<i class="fas fa-id-card"></i>
打开卡片页
</a>
</div>
</div> </div>
`; `;
}; };
@@ -92,23 +102,22 @@
`).join(''); `).join('');
}; };
const renderDetailPrompt = (message) => {
detailBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`;
};
const renderEventPrompt = (message) => { const renderEventPrompt = (message) => {
eventBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`; eventBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`;
}; };
const renderSelectedCard = (card, events) => { const renderSelectedCard = (card, events) => {
if (!card) { if (!card) {
renderDetailPrompt('请选择左侧卡片查看详情。');
renderEventPrompt('请选择左侧卡片查看详情与事件记录。'); renderEventPrompt('请选择左侧卡片查看详情与事件记录。');
return; return;
} }
eventBoxEl.innerHTML = ` detailBoxEl.innerHTML = buildCardPreview(card);
${buildCardPreview(card)} eventBoxEl.innerHTML = buildEventsHtml(events);
<div class="jr-panel-headline" style="margin:20px 0 14px;">
<h3>事件记录</h3>
<span class="jr-panel-note">Recent Events</span>
</div>
<div class="jr-history-list">${buildEventsHtml(events)}</div>
`;
}; };
const renderCardList = () => { const renderCardList = () => {
@@ -125,13 +134,13 @@
const voucherCode = card.voucher_code || card.code || card.order_code || '---'; const voucherCode = card.voucher_code || card.code || card.order_code || '---';
const isSelected = lookupKey && state.selectedQuery === lookupKey; const isSelected = lookupKey && state.selectedQuery === lookupKey;
return ` return `
<div class="jr-ticket-row" data-card-query="${escapeHtml(lookupKey)}" style="${isSelected ? 'background:#f7faf7;border-left:4px solid #0b6b3a;padding-left:12px;padding-right:12px;' : ''}"> <div class="jr-ticket-row${isSelected ? ' is-active' : ''}" data-card-query="${escapeHtml(lookupKey)}">
<div class="jr-ticket-row-head"> <div class="jr-ticket-row-head">
<span class="jr-ticket-id mono">${escapeHtml(shownCardId)}</span> <span class="jr-ticket-id mono">${escapeHtml(shownCardId)}</span>
<span class="jr-status-pill ${getStatusClass(card.status)}">${escapeHtml(card.status_label || card.status || '未知')}</span> <span class="jr-status-pill ${getStatusClass(card.status)}">${escapeHtml(card.status_label || card.status || '未知')}</span>
</div> </div>
<div class="jr-ticket-route">${escapeHtml(card.holder_name || '未登记持卡人')}</div> <div class="jr-ticket-route">${escapeHtml(card.holder_name || '未登记持卡人')}</div>
<div class="text-muted" style="margin-top:6px; font-size:0.9rem;"> <div class="jr-list-meta">
余额 ${escapeHtml(card.balance ?? 0)} · 凭证码 ${escapeHtml(voucherCode)} 余额 ${escapeHtml(card.balance ?? 0)} · 凭证码 ${escapeHtml(voucherCode)}
</div> </div>
</div> </div>
@@ -143,7 +152,7 @@
const q = item.getAttribute('data-card-query'); const q = item.getAttribute('data-card-query');
if (q) { if (q) {
loadCardDetail(q).catch((error) => { loadCardDetail(q).catch((error) => {
renderEventPrompt(error.message || String(error)); renderQueryError(error.message || String(error));
}); });
} }
}); });
@@ -152,7 +161,8 @@
const loadCardDetail = async (q, options = {}) => { const loadCardDetail = async (q, options = {}) => {
const { updateUrl = true } = options; const { updateUrl = true } = options;
eventBoxEl.innerHTML = '<div class="jr-center-empty" style="min-height:180px;"><p>正在加载卡片详情...</p></div>'; renderDetailPrompt('正在加载卡片详情...');
renderEventPrompt('正在加载事件记录...');
const data = await api.query(q); const data = await api.query(q);
const card = data.card || null; const card = data.card || null;
const events = data.events || []; const events = data.events || [];
@@ -174,13 +184,15 @@
const loadAllCards = async () => { const loadAllCards = async () => {
summaryBoxEl.className = 'jr-center-empty'; summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = '<p>正在加载全部 IC 卡...</p>'; summaryBoxEl.innerHTML = '<p>正在加载全部 IC 卡...</p>';
renderEventPrompt('正在准备卡片详情...'); renderDetailPrompt('正在准备卡片详情...');
renderEventPrompt('正在准备事件记录...');
const data = await api.query(''); const data = await api.query('');
state.cards = Array.isArray(data.cards) ? data.cards : []; state.cards = Array.isArray(data.cards) ? data.cards : [];
state.selectedQuery = ''; state.selectedQuery = '';
renderCardList(); renderCardList();
if (!state.cards.length) { if (!state.cards.length) {
renderDetailPrompt('当前暂无 IC 卡记录。');
renderEventPrompt('当前暂无 IC 卡记录。'); renderEventPrompt('当前暂无 IC 卡记录。');
const newUrl = `${window.location.origin}${window.location.pathname}`; const newUrl = `${window.location.origin}${window.location.pathname}`;
window.history.replaceState({ path: newUrl }, '', newUrl); window.history.replaceState({ path: newUrl }, '', newUrl);
@@ -200,21 +212,30 @@
} }
summaryBoxEl.className = 'jr-center-empty'; summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = '<p>正在查询 IC 卡...</p>'; summaryBoxEl.innerHTML = '<p>正在查询 IC 卡...</p>';
renderDetailPrompt('正在查询卡片详情...');
renderEventPrompt('正在查询事件记录...');
state.cards = []; state.cards = [];
await loadCardDetail(q); await loadCardDetail(q);
}; };
queryBtn.addEventListener('click', () => doQuery().catch((error) => renderEventPrompt(error.message || String(error)))); const renderQueryError = (message) => {
summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = `<p>${escapeHtml(message)}</p>`;
renderDetailPrompt(message);
renderEventPrompt(message);
};
queryBtn.addEventListener('click', () => doQuery().catch((error) => renderQueryError(error.message || String(error))));
inputEl.addEventListener('keydown', (event) => { inputEl.addEventListener('keydown', (event) => {
if (event.key === 'Enter') doQuery().catch((error) => renderEventPrompt(error.message || String(error))); if (event.key === 'Enter') doQuery().catch((error) => renderQueryError(error.message || String(error)));
}); });
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const q = params.get('q'); const q = params.get('q');
if (q) { if (q) {
inputEl.value = q; inputEl.value = q;
doQuery().catch((error) => renderEventPrompt(error.message || String(error))); doQuery().catch((error) => renderQueryError(error.message || String(error)));
} else { } else {
loadAllCards().catch((error) => renderEventPrompt(error.message || String(error))); loadAllCards().catch((error) => renderQueryError(error.message || String(error)));
} }
})(); })();
web/style.css
+126 -2
View File
@@ -2590,6 +2590,39 @@ body.jr-public-page {
font-size: 0.86rem; font-size: 0.86rem;
} }
.jr-query-overview {
margin-bottom: 24px;
}
.jr-query-stat {
padding: 18px 20px;
background: linear-gradient(180deg, #f7faf7 0, #ffffff 100%);
border: 1px solid #d7e0d3;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}
.jr-query-stat-label {
display: inline-block;
margin-bottom: 8px;
color: #6a786d;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.jr-query-stat strong {
display: block;
color: #163024;
font-size: 1.08rem;
font-weight: 800;
}
.jr-query-stat p {
margin: 10px 0 0;
color: #647266;
line-height: 1.7;
}
.jr-grid-two { .jr-grid-two {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2693,6 +2726,13 @@ body.jr-public-page {
align-items: stretch; align-items: stretch;
} }
.jr-search-helper {
margin: 12px 0 0;
color: #66756a;
line-height: 1.7;
font-size: 0.92rem;
}
.jr-search-input, .jr-search-input,
body.jr-public-page .jr-search-input { body.jr-public-page .jr-search-input {
width: 100%; width: 100%;
@@ -2752,16 +2792,22 @@ body.jr-public-page .jr-search-button:hover {
} }
.jr-ticket-row { .jr-ticket-row {
padding: 18px 0; padding: 18px 14px;
border-bottom: 1px solid #e4ece2; border-bottom: 1px solid #e4ece2;
border-left: 4px solid transparent;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
} }
.jr-ticket-row:hover { .jr-ticket-row:hover {
background: #f7faf7; background: #f7faf7;
} }
.jr-ticket-row.is-active {
background: linear-gradient(180deg, #f4f8f4 0, #ffffff 100%);
border-left-color: #0b6b3a;
}
.jr-ticket-row:last-child { .jr-ticket-row:last-child {
border-bottom: none; border-bottom: none;
} }
@@ -2779,6 +2825,13 @@ body.jr-public-page .jr-search-button:hover {
line-height: 1.7; line-height: 1.7;
} }
.jr-list-meta {
margin-top: 8px;
color: #728077;
font-size: 0.88rem;
line-height: 1.6;
}
.jr-ticket-id { .jr-ticket-id {
color: #1b3022; color: #1b3022;
font-weight: 800; font-weight: 800;
@@ -2920,6 +2973,12 @@ body.jr-public-page .jr-search-button:hover {
gap: 10px; gap: 10px;
} }
.jr-detail-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.jr-popular-item { .jr-popular-item {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -3173,6 +3232,35 @@ body.jr-public-page .jr-secondary-btn:hover {
line-height: 1.7; line-height: 1.7;
} }
.jr-guide-card {
min-height: 100%;
}
.jr-guide-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.jr-guide-item {
padding: 14px 16px;
background: #f7faf7;
border: 1px solid #dfe8dd;
}
.jr-guide-item strong {
display: block;
color: #173225;
font-size: 0.98rem;
}
.jr-guide-item span {
display: block;
margin-top: 6px;
color: #647266;
line-height: 1.7;
}
body.jr-ticket-board-page, body.jr-ticket-board-page,
body.jr-ticket-board-page #app, body.jr-ticket-board-page #app,
body.jr-ticket-board-page .jr-public-shell { body.jr-ticket-board-page .jr-public-shell {
@@ -3584,6 +3672,37 @@ body.jr-ticket-board-page .jr-board-card:last-child {
min-width: 0; min-width: 0;
} }
.jr-page-intro h1 {
font-size: clamp(1.75rem, 7vw, 2.35rem);
}
.jr-panel-headline {
flex-direction: column;
align-items: flex-start;
}
.jr-query-stat,
.jr-ticket-preview,
.jr-history-item,
.jr-popular-item,
.jr-guide-item {
padding-left: 16px;
padding-right: 16px;
}
.jr-ticket-row {
padding: 16px 12px;
}
.jr-scroll-box {
min-height: 260px;
max-height: none;
}
.jr-center-empty {
min-height: 180px;
}
.jr-order-info-grid { .jr-order-info-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -3610,6 +3729,11 @@ body.jr-ticket-board-page .jr-board-card:last-child {
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
.jr-action-row .btn,
.jr-action-row button {
width: 100%;
}
.jr-home-alert { .jr-home-alert {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
web/ticket-search.html
+23 -5
View File
@@ -1,4 +1,4 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
@@ -7,7 +7,7 @@
<title>票务查询</title> <title>票务查询</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png"> <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=13" /> <link rel="stylesheet" href="/style.css?v=14" />
</head> </head>
<body class="public-search jr-public-page"> <body class="public-search jr-public-page">
@@ -52,6 +52,24 @@
<p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p> <p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p>
</section> </section>
<section class="jr-query-overview jr-grid-three" aria-label="车票查询摘要">
<article class="jr-query-stat">
<span class="jr-query-stat-label">检索方式</span>
<strong>票号 / 站点 / 日期</strong>
<p>支持完整票号与站点关键词联合查询，适合快速反查近期票据。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">结果浏览</span>
<strong>列表与详情并排</strong>
<p>左侧先筛选票据，右侧立即查看电子票概览与最近流转记录。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">移动端</span>
<strong>单列阅读更顺手</strong>
<p>手机端自动切为单列，查询、结果与详情会按操作顺序依次展开。</p>
</article>
</section>
<section class="jr-panel-card" style="margin-bottom:24px;"> <section class="jr-panel-card" style="margin-bottom:24px;">
<div class="jr-panel-headline"> <div class="jr-panel-headline">
<h2>检索条件</h2> <h2>检索条件</h2>
@@ -63,6 +81,7 @@
<button id="searchBtn" class="btn primary jr-search-button"><i class="fas fa-search"></i> <button id="searchBtn" class="btn primary jr-search-button"><i class="fas fa-search"></i>
立即搜索</button> 立即搜索</button>
</div> </div>
<p class="jr-search-helper">可直接输入完整票号，也可输入起点、终点或日期关键字进行模糊检索。</p>
</section> </section>
<section class="jr-search-results"> <section class="jr-search-results">
@@ -78,7 +97,7 @@
</div> </div>
</article> </article>
<section id="detail-section"> <section id="detail-section" class="jr-detail-stack">
<article class="jr-panel-card" style="margin-bottom:20px;"> <article class="jr-panel-card" style="margin-bottom:20px;">
<div class="jr-panel-headline"> <div class="jr-panel-headline">
<h3>车票详情</h3> <h3>车票详情</h3>
@@ -118,7 +137,7 @@
</div> </div>
<script src="/custom-dialog.js?v=12"></script> <script src="/custom-dialog.js?v=12"></script>
<script src="/ticket-search.js?v=11"></script> <script src="/ticket-search.js?v=12"></script>
<script src="/public-status.js?v=13"></script> <script src="/public-status.js?v=13"></script>
<script src="/ai-assistant.js?v=6"></script> <script src="/ai-assistant.js?v=6"></script>
<script> <script>
@@ -146,4 +165,3 @@
</body> </body>
</html> </html>
web/ticket-search.js
+33 -5
View File
@@ -4,6 +4,10 @@
const detailEl = $('#detail'); const detailEl = $('#detail');
const qEl = $('#q'); const qEl = $('#q');
const btn = $('#searchBtn'); const btn = $('#searchBtn');
const state = {
items: [],
selectedId: ''
};
const api = { const api = {
searchTickets: async (q) => { searchTickets: async (q) => {
@@ -52,6 +56,13 @@
return type; return type;
}; };
const escapeHtml = (value) => String(value == null ? '' : value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
const getTicketId = (obj) => (obj && (obj.ticket_id || obj["车票编号"] || obj.id)) || ''; const getTicketId = (obj) => (obj && (obj.ticket_id || obj["车票编号"] || obj.id)) || '';
const isValidStatus = (status) => { const isValidStatus = (status) => {
@@ -111,6 +122,7 @@
}; };
function renderList(items) { function renderList(items) {
state.items = items;
listEl.innerHTML = ''; listEl.innerHTML = '';
if (items.length === 0) { if (items.length === 0) {
listEl.innerHTML = '<div class="jr-center-empty"><p>未找到匹配结果。</p></div>'; listEl.innerHTML = '<div class="jr-center-empty"><p>未找到匹配结果。</p></div>';
@@ -119,22 +131,35 @@
items.forEach(it => { items.forEach(it => {
const id = it.ticket_id || it["车票编号"] || ''; const id = it.ticket_id || it["车票编号"] || '';
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'jr-ticket-row'; const statusText = formatStatusText(it.status || it["状态"] || '');
const isSelected = state.selectedId === id;
row.className = `jr-ticket-row${isSelected ? ' is-active' : ''}`;
const overview = it.overview || it["概览"] || null; const overview = it.overview || it["概览"] || null;
const startName = overview ? (overview.start_name || overview["起点"]) : (it.start_name || it["起点"] || '---'); const startName = overview ? (overview.start_name || overview["起点"]) : (it.start_name || it["起点"] || '---');
const terminalName = overview ? (overview.terminal_name || overview["终点"]) : (it.terminal_name || it["终点"] || '---'); const terminalName = overview ? (overview.terminal_name || overview["终点"]) : (it.terminal_name || it["终点"] || '---');
const updateTime = formatTime(
(overview && (overview.last_update_ts || overview["上次更新时间"])) ||
it.last_update_ts ||
it["上次更新时间"] ||
''
);
row.innerHTML = ` row.innerHTML = `
<div class="jr-ticket-row-head"> <div class="jr-ticket-row-head">
<span class="jr-ticket-id mono">${id}</span> <span class="jr-ticket-id mono">${escapeHtml(id)}</span>
<i class="fas fa-chevron-right text-muted"></i> <span class="jr-status-pill ${isValidStatus(statusText) ? 'jr-status-valid' : (statusText === '已使用' ? 'jr-status-used' : 'jr-status-expired')}">${escapeHtml(statusText)}</span>
</div> </div>
<div class="jr-ticket-route"> <div class="jr-ticket-route">
${startName} → ${terminalName} ${escapeHtml(startName)} → ${escapeHtml(terminalName)}
</div> </div>
<div class="jr-list-meta">最近更新 ${escapeHtml(updateTime)}</div>
`; `;
row.onclick = () => loadDetail(id); row.onclick = () => {
state.selectedId = id;
renderList(state.items);
loadDetail(id);
};
listEl.appendChild(row); listEl.appendChild(row);
}); });
} }
@@ -208,6 +233,8 @@
} }
async function loadDetail(id) { async function loadDetail(id) {
state.selectedId = id;
renderList(state.items);
detailEl.innerHTML = '<div class="jr-center-empty"><p>正在加载详情...</p></div>'; detailEl.innerHTML = '<div class="jr-center-empty"><p>正在加载详情...</p></div>';
try { try {
const d = await api.ticketDetail(id); const d = await api.ticketDetail(id);
@@ -229,6 +256,7 @@
listEl.innerHTML = '<div class="jr-center-empty"><p>正在搜索...</p></div>'; listEl.innerHTML = '<div class="jr-center-empty"><p>正在搜索...</p></div>';
try { try {
const d = await api.searchTickets(q); const d = await api.searchTickets(q);
state.selectedId = state.selectedId && d.some((item) => getTicketId(item) === state.selectedId) ? state.selectedId : '';
renderList(d); renderList(d);
} catch (e) { } catch (e) {
listEl.innerHTML = '<div class="jr-center-empty"><p>搜索失败。</p></div>'; listEl.innerHTML = '<div class="jr-center-empty"><p>搜索失败。</p></div>';