畫面示意 DEMO

悠遊卡(綁定、消費紀錄、社福點數)

依美術切版 pelin/card/easycard-*.html 組成的可點擊流程,視覺以新竹通現行設計為準。

⚠
此為純靜態畫面示意,不連接任何 API、不會寫入或傳送任何資料; 卡號、餘額、消費紀錄、點數與店家名稱皆為虛構示意值,綁定與解綁只存在這個瀏覽器裡。

狀態設定

每一個維度都會寫進網址,可以把特定狀態的連結直接寄出。

畫面清單

點選會一併套用該畫面所需的狀態;帶英文字母的是同一頁上的彈窗或另一種狀態。

個人卡:01 卡證 ──悠遊卡查詢──▶ 02 列表 ──新增──▶ 03 綁定 ──▶ 04 成功(滿 5 張 ──▶ 05 上限)
    02 列表 ──點卡片──▶ 07 消費紀錄;──長按──▶ 02a 選單 ──解除綁定──▶ 02b 確認 ──▶ 06 解綁完成
社福卡:01 卡證 ──悠遊卡──▶ 08 設定 ──查看消費紀錄──▶ 07;──查看使用紀錄──▶ 09 社福點數

示意的操作方式

  • 綁定頁的卡號會自動四碼一組,不滿 16 碼按「完成綁定」會標紅提示。
  • 自訂名稱沒填,依列表順序自動命名「悠遊卡 N」。
  • 列表上的卡片長按(電腦用滑鼠右鍵)開「單卡操作選單」。
  • 消費紀錄預設最近 10 筆;右上角篩選選區間後出現「篩選中」標籤,點 ✕ 回到預設。
  • 「今天」固定為 2026/08/17,與切版的日期一致。

待確認

  • 「單卡操作選單」在列表上怎麼叫出來,切版沒有畫(示意暫用長按)。
  • 綁定頁的步驟條,切版在填寫時就標成「02 完成綁定」,示意照切版。
  • 社福卡變更綁定後,結果頁按鈕仍是「返回悠遊卡列表」,示意實際回到「悠遊卡設定」。
  • 消費紀錄只有「近 6 個月」的查無資料畫面;全部、近 1/3 個月查無資料的文案未定。
  • 社福卡的消費紀錄標題,示意用「卡別名稱.卡號末四碼」。

畫面依美術切版 pelin/card/easycard-*.html(10 頁)、pelin/card/card-page.html 與 pelin/modal/modal-page.html 的四個悠遊卡彈窗製作。內部備註見 easycard-demo/README.md,該檔不隨客戶包寄出。