FSE-Ticket.sys/web/ticket-order.html

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>线上预定|FSE铁路运输票务系统</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=14">
</head>

<body class="public-search jr-order-page">
  <div class="jr-order-shell">
    <header class="jr-topbar">
      <div class="jr-topbar-inner">
        <a href="https://ticket.fse-media.group" id="homeLink" class="jr-top-link">
          <i class="fas fa-arrow-left"></i>
          <span>返回首页</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="https://ticket.fse-media.group" class="jr-brand" id="brandLink">
          <img src="/FSE-ticket.png" alt="FSE Railway" class="jr-brand-logo" />
          <div class="jr-brand-copy">
            <strong>FarSight-T.N.E铁路运输</strong>
            <span>线上预定</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" class="is-active">线上预定</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-main">
      <section class="jr-content-grid">
        <div class="jr-column-main">
          <article class="jr-section-card" id="reservationPanel">
            <div id="normalTicketView">
              <div class="jr-section-head">
                <div>
                  <p class="jr-section-label">Reservation</p>
                  <h2>选择乘车区间</h2>
                </div>
                <p class="jr-section-note">点击下方线路图中的站点，依次选择起点与终点。</p>
              </div>
              <div id="stationMap" class="station-map-container jr-station-map">
                <div class="loading">加载线路图中...</div>
              </div>
              <div class="jr-selection-summary">
                <div class="jr-selection-card jr-selection-start">
                  <span class="jr-selection-tag">出发站</span>
                  <strong id="fromDisplay">请在上方地图选择</strong>
                  <input id="from" type="hidden" />
                </div>
                <div class="jr-selection-arrow">
                  <i class="fas fa-arrow-right"></i>
                </div>
                <div class="jr-selection-card jr-selection-end">
                  <span class="jr-selection-tag">到达站</span>
                  <strong id="toDisplay">请在上方地图选择</strong>
                  <input id="to" type="hidden" />
                </div>
              </div>
            </div>

            <div class="jr-form-grid" style="margin-top: 24px;">
              <div class="jr-form-block">
                <div class="jr-field-head">
                  <span class="jr-field-label">车型</span>
                  <span class="jr-field-note">根据停靠站不同计算票价</span>
                </div>
                <div class="train-type-group jr-train-type-group" id="typeGroup">
                  <label>
                    <input type="radio" name="trainType" value="Local" checked>
                    <div class="type-card jr-type-card">
                      <div class="type-title">普通 Local</div>
                      <div class="type-desc">每站停靠，适合常规出行</div>
                    </div>
                  </label>
                  <label>
                    <input type="radio" name="trainType" value="Express">
                    <div class="type-card jr-type-card">
                      <div class="type-title">特急 Express</div>
                      <div class="type-desc">仅停主要车站，票价更高</div>
                    </div>
                  </label>
                </div>
              </div>
              <div class="jr-form-block jr-trip-block" id="tripsBlock">
                <div class="jr-field-head">
                  <label class="jr-field-label" for="trips">乘次数量</label>
                  <span class="jr-field-note">至少 1 次</span>
                </div>
                <input id="trips" type="number" min="1" value="1" class="input jr-quantity-input" placeholder="请输入乘次数量"
                  title="乘次数量" />
              </div>
            </div>

            <div class="toolbar jr-toolbar">
              <button id="createOrder" class="btn primary jr-submit-btn">
                <i class="fas fa-check-circle"></i>
                <span>生成凭证码</span>
              </button>
            </div>
          </article>
        </div>

        <aside class="jr-column-side">
          <article class="jr-section-card jr-side-card">
            <div class="jr-section-head">
              <div>
                <p class="jr-section-label">Estimate</p>
                <h2>票价与路径</h2>
              </div>
              <p class="jr-section-note">选择完整区间后自动刷新。</p>
            </div>
            <div id="priceBox" class="list jr-price-list">
              <div class="empty-state jr-empty-state">
                <p>请选择起点与终点后查看票价估算。</p>
              </div>
            </div>
          </article>

          <article class="jr-section-card jr-side-card" id="voucherPanel">
            <div class="jr-section-head">
              <div>
                <p class="jr-section-label">Voucher</p>
                <h2>凭证与兑票</h2>
              </div>
              <p class="jr-section-note">生成后即可前往游戏内售票机兑票。</p>
            </div>
            <div id="voucherBox" class="list jr-voucher-list">
              <div class="empty-state jr-empty-state jr-voucher-empty">
                <p>尚未生成凭证码。</p>
              </div>
            </div>
          </article>
        </aside>
      </section>

      <footer class="site-footer jr-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>
    </main>
  </div>

  <script src="/custom-dialog.js?v=11"></script>
  <script src="/ticket-order.js?v=28"></script>
  <script src="/public-status.js?v=14"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const isRemote = location.hostname.includes('fse-media.group');
      const links = {
        home: isRemote ? 'https://ticket.fse-media.group' : '/home.html',
        order: isRemote ? 'https://ticket.fse-media.group/order' : '/ticket-order.html',
        search: isRemote ? 'https://ticket.fse-media.group/search' : '/ticket-search.html',
        'card-search': isRemote ? 'https://ticket.fse-media.group/ic-card/search' : '/ic-card-search.html',
        'card-order': isRemote ? 'https://ticket.fse-media.group/ic-card/order' : '/ic-card-order.html'
      };

      const homeLink = document.getElementById('homeLink');
      const brandLink = document.getElementById('brandLink');
      if (homeLink) homeLink.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>