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

fix(ticket-order): 修复无法正常切换路线的问题，优化移动端及主题适配

Browse Source
This commit is contained in:
Henry_Du
2026-07-14 00:50:19 +08:00
parent 139a65f24c
commit a79142660f
1 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/ticket-order.js
+26 -25
View File
@@ -107,13 +107,13 @@
} }
// 1. Render Line Tabs // 1. Render Line Tabs
let tabsHtml = `<div class="tvm-lines-nav" style="display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; border-radius: 12px 12px 0 0;">`; let tabsHtml = `<div class="tvm-lines-nav" style="display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: var(--surface-color, #f8fafc); border-bottom: 1px solid var(--border-color, #e2e8f0); border-radius: 12px 12px 0 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;">`;
allLinesData.forEach(line => { allLinesData.forEach(line => {
const color = line.color || '#94a3b8'; const color = line.color || '#94a3b8';
const isActive = line.id === activeLineId; const isActive = String(line.id) === String(activeLineId);
const bg = isActive ? color : '#ffffff'; const bg = isActive ? color : 'var(--bg-color, #ffffff)';
const fg = isActive ? '#ffffff' : '#334155'; const fg = isActive ? '#ffffff' : 'var(--text-color, #334155)';
const border = isActive ? color : '#cbd5e1'; const border = isActive ? color : 'var(--border-color, #cbd5e1)';
tabsHtml += ` tabsHtml += `
<button class="tvm-line-tab" onclick="window.switchTvmLine('${line.id}')" style=" <button class="tvm-line-tab" onclick="window.switchTvmLine('${line.id}')" style="
flex-shrink: 0; flex-shrink: 0;
@@ -125,13 +125,14 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
box-shadow: ${isActive ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'}; box-shadow: ${isActive ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'};
"> white-space: nowrap;
<span style="width: 10px; height: 10px; border-radius: 50%; background: ${isActive ? '#fff' : color};"></span> " onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
<span style="width: 10px; height: 10px; border-radius: 50%; background: ${isActive ? 'var(--bg-color, #fff)' : color}; display: inline-block;"></span>
${line.name || line.线路名称 || '未知线路'} ${line.name || line.线路名称 || '未知线路'}
</button> </button>
`; `;
@@ -139,11 +140,11 @@
tabsHtml += `</div>`; tabsHtml += `</div>`;
// 2. Render Stations for Active Line // 2. Render Stations for Active Line
const activeLine = allLinesData.find(l => l.id === activeLineId) || allLinesData[0]; const activeLine = allLinesData.find(l => String(l.id) === String(activeLineId)) || allLinesData[0];
const stopsRaw = Array.isArray(activeLine.stops) ? activeLine.stops : (Array.isArray(activeLine.站点列表) ? activeLine.站点列表 : []); const stopsRaw = Array.isArray(activeLine.stops) ? activeLine.stops : (Array.isArray(activeLine.站点列表) ? activeLine.站点列表 : []);
const stops = stopsRaw.map(c => String(c || '').trim()).filter(Boolean); const stops = stopsRaw.map(c => String(c || '').trim()).filter(Boolean);
let stationsHtml = `<div class="tvm-stations-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 20px; background: #ffffff; border-radius: 0 0 12px 12px; max-height: 400px; overflow-y: auto;">`; let stationsHtml = `<div class="tvm-stations-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 20px; background: var(--bg-color, #ffffff); border-radius: 0 0 12px 12px; max-height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch;">`;
let hasStations = false; let hasStations = false;
stops.forEach(code => { stops.forEach(code => {
@@ -168,7 +169,7 @@
}); });
}); });
const transferLines = Array.from(linesForThisStation).filter(l => l.id !== activeLineId); const transferLines = Array.from(linesForThisStation).filter(l => String(l.id) !== String(activeLineId));
let transferIcons = ''; let transferIcons = '';
if (transferLines.length > 0) { if (transferLines.length > 0) {
@@ -180,25 +181,25 @@
} }
let badgeHtml = ''; let badgeHtml = '';
let borderColor = '#e2e8f0'; let borderColor = 'var(--border-color, #e2e8f0)';
let bgColor = '#f8fafc'; let bgColor = 'var(--surface-color, #f8fafc)';
let shadow = 'none'; let shadow = 'none';
if (isSelectedFrom) { if (isSelectedFrom) {
badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: #16a34a; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">起点</div>`; badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--success, #16a34a); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">起点</div>`;
borderColor = '#16a34a'; borderColor = 'var(--success, #16a34a)';
bgColor = '#f0fdf4'; bgColor = '#f0fdf4';
shadow = '0 4px 6px rgba(0,0,0,0.1)'; shadow = '0 4px 6px rgba(0,0,0,0.1)';
} else if (isSelectedTo) { } else if (isSelectedTo) {
badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: #dc2626; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">终点</div>`; badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--danger, #dc2626); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">终点</div>`;
borderColor = '#dc2626'; borderColor = 'var(--danger, #dc2626)';
bgColor = '#fef2f2'; bgColor = '#fef2f2';
shadow = '0 4px 6px rgba(0,0,0,0.1)'; shadow = '0 4px 6px rgba(0,0,0,0.1)';
} else if (Array.isArray(currentRoute) && currentRoute.includes(code)) { } else if (Array.isArray(currentRoute) && currentRoute.includes(code)) {
borderColor = '#facc15'; borderColor = 'var(--primary, #facc15)';
bgColor = '#fefce8'; bgColor = '#fefce8';
if (Array.isArray(currentRouteTransfers) && currentRouteTransfers.includes(code)) { if (Array.isArray(currentRouteTransfers) && currentRouteTransfers.includes(code)) {
badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: #ca8a04; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">换乘</div>`; badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--warning, #ca8a04); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">换乘</div>`;
} }
} }
@@ -210,22 +211,22 @@
border: 2px solid ${borderColor}; border: 2px solid ${borderColor};
background: ${bgColor}; background: ${bgColor};
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: ${shadow}; box-shadow: ${shadow};
"> " onmouseover="this.style.borderColor='var(--primary, #facc15)'" onmouseout="this.style.borderColor='${borderColor}'">
${badgeHtml} ${badgeHtml}
<div style="font-size: 11px; color: #64748b; font-weight: 700; margin-bottom: 4px;">${code}</div> <div style="font-size: 11px; color: var(--text-muted, #64748b); font-weight: 700; margin-bottom: 4px;">${code}</div>
<div style="font-size: 16px; font-weight: 800; color: #0f172a;">${name}</div> <div style="font-size: 16px; font-weight: 800; color: var(--text-color, #0f172a);">${name}</div>
${enName ? `<div style="font-size: 10px; color: #64748b; font-weight: 600; margin-top: 2px;">${enName}</div>` : ''} ${enName ? `<div style="font-size: 10px; color: var(--text-muted, #64748b); font-weight: 600; margin-top: 2px;">${enName}</div>` : ''}
${transferIcons} ${transferIcons}
</div> </div>
`; `;
}); });
if (!hasStations) { if (!hasStations) {
stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #64748b;">该线路暂无站点</div>`; stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted, #64748b);">该线路暂无站点</div>`;
} }
stationsHtml += `</div>`; stationsHtml += `</div>`;