頁面路徑
用麵包屑標示「權益管理／顧客查詢」，讓使用者知道所在位置並可返回前層。
查看麵包屑規範 →本頁使用虛構資料示範介面互動，未串接銀行系統。輸入請使用 DEMO001 等示例代碼；正式識別碼格式、權限、遮蔽及結果欄位依專案確認。
操作預覽
示範查詢結果
選擇後按「查詢」體驗對應狀態。
A 顧客權益查詢
B 查詢結果列表
請先輸入示例代碼，再按查詢。
查詢條件已變更；下方仍為上次查詢結果，請重新查詢更新。
顧客資料示例（相同 ID 可有不同姓名）
| 顧客姓名 | 顧客 ID | 開戶分行 | 負責理專姓名 | 操作 |
|---|---|---|---|---|
| DEMO001 | 示範分行 A | 理專甲 | ||
| DEMO001 | 示範分行 B | 理專乙 | ||
| DEMO001 | 示範分行 C | 理專丙 |
顧客權益列表
虛構顧客與額度，僅供體驗介面；未串接銀行系統。
A 顧客基本資料
- 顧客姓名
- 顧客甲
- 顧客 ID
- DEMO001
- 聯絡電話
- 09XX-XXX-XXX
- 財富會員等級
- 待確認
- 開戶分行
- 示範分行 A
- 理財分行
- 示範理財分行 A
- 負責理專姓名
- 理專甲
- 地址
- 示例地址，依資料顯示權限呈現
- 顧客特殊註記
- 無
B 附加權益資訊
示範權益結果
附加權益統計（示例資料）
權益項目消費門檻／認列期間達標狀態權益額度已用／剩餘
區域與元件指引
A 查詢條件與操作
文字輸入欄提供可見標籤及格式說明；查詢為主要操作，清除為次要操作。錯誤訊息緊鄰欄位。
文字輸入欄 · 按鈕B 查詢結果列表
依序呈現顧客姓名、顧客 ID、開戶分行、負責理專姓名與操作。相同 ID 的不同姓名分別保留，各列查看入口對應該筆顧客資料。
資訊列表／表單類型 · LoadingC 結果分頁
資料較多時分頁；切換頁碼沿用已送出的條件。重新查詢回到第一頁，不沿用前次頁碼。
查看分頁器規範 →顧客基本資料
由所選顧客列帶入唯讀資料；同 ID 的不同顧客仍以所選列區分。標籤與內容緊密對齊，長文字可換行。
資訊列表／表單類型顧客權益統計
以五欄表格呈現單一門檻值、達標狀態、可用次數及已用／剩餘；可體驗無資料、載入失敗與重試。返回查詢保留原頁碼。列表底色為未讀／選取狀態示例，消費達標結果以欄位文字為準。
資訊列表／表單類型 · Loading互動規則與適用範圍
- 查詢前：顯示操作引導，不先顯示空表格或「查無資料」。
- 未填寫：顯示欄位錯誤並將焦點移回輸入欄；Enter 可送出查詢。
- 處理中：顯示文字回饋、停用查詢及重試操作；清除可取消本次示範並回到初始狀態。
- 有結果：顯示本次查詢條件、筆數及目前頁碼；點擊顧客姓名或查看，切換至該列顧客的權益列表；返回或 Escape 恢復查詢條件、頁碼及原操作焦點。
- 無結果：保留條件，提供調整入口；查詢失敗則保留條件並提供重試。
- 清除：清空條件、結果與明細，回到查詢前；修改輸入不會自動替換上次查詢結果。
樣板可沿用與待確認的部分
可參考：條件區、主要／次要操作、列表、分頁及結果回饋的組合方式。本頁是 Portal 互動示範，並非已封裝的 Vue 整頁元件。
待確認：正式顧客識別格式、資料欄位、個資呈現、查詢權限、權益計算與正式資料介接。這些內容不由設計樣板代替業務定義。