feat(web): 优化票务与IC卡查询页面的功能与UI
- 更新静态资源版本以清理浏览器缓存 - 新增查询概览模块与搜索辅助提示文字 - 添加XSS内容转义防护，优化列表项选中样式 - 重构IC卡查询页面布局，拆分详情与事件记录区域 - 优化移动端响应式展示效果
This commit is contained in:
+91
-17
@@ -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,28 +79,86 @@
|
|||||||
查询 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 Overview</span>
|
<span class="jr-panel-note">Card Results</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="summaryBox" class="jr-center-empty">
|
<div id="summaryBox" class="jr-scroll-box">
|
||||||
<p>请输入卡号或凭证码开始查询。</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="jr-panel-card">
|
|
||||||
<div class="jr-panel-headline">
|
|
||||||
<h3>事件记录</h3>
|
|
||||||
<span class="jr-panel-note">Recent Events</span>
|
|
||||||
</div>
|
|
||||||
<div id="eventBox" class="jr-history-list">
|
|
||||||
<div class="jr-center-empty" style="min-height:180px;">
|
<div class="jr-center-empty" style="min-height:180px;">
|
||||||
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
|
<p>请输入卡号或凭证码开始查询。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</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>
|
||||||
|
</div>
|
||||||
|
<div id="detailBox">
|
||||||
|
<div class="jr-center-empty" style="min-height:180px;">
|
||||||
|
<p>从左侧选择一张 IC 卡以查看详情。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="jr-panel-card">
|
||||||
|
<div class="jr-panel-headline">
|
||||||
|
<h3>事件记录</h3>
|
||||||
|
<span class="jr-panel-note">Recent Events</span>
|
||||||
|
</div>
|
||||||
|
<div id="eventBox" class="jr-history-list">
|
||||||
|
<div class="jr-center-empty" style="min-height:180px;">
|
||||||
|
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|||||||
+38
-17
@@ -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)));
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|||||||
+126
-2
@@ -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;
|
||||||
|
|||||||
+25
-7
@@ -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">
|
||||||
@@ -49,13 +49,31 @@
|
|||||||
<section class="jr-page-intro">
|
<section class="jr-page-intro">
|
||||||
<span class="jr-kicker">TICKET SEARCH</span>
|
<span class="jr-kicker">TICKET SEARCH</span>
|
||||||
<h1>按票号、站点或日期快速查询票据</h1>
|
<h1>按票号、站点或日期快速查询票据</h1>
|
||||||
<p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p>
|
<p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p>
|
||||||
|
</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>
|
||||||
|
|
||||||
<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>
|
||||||
<span class="jr-panel-note">Ticket ID / Station / Date</span>
|
<span class="jr-panel-note">Ticket ID / Station / Date</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="jr-search-form">
|
<div class="jr-search-form">
|
||||||
<input id="q" class="jr-search-input" type="text"
|
<input id="q" class="jr-search-input" type="text"
|
||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
+34
-6
@@ -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, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''');
|
||||||
|
|
||||||
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>';
|
||||||
|
|||||||
Reference in New Issue
Block a user