Màn Hình: Voucher Của Bạn (My Vouchers List)
Ngày tạo: 01/07/2026
Loại: Giao diện ứng dụng (APP UI) — Quản lý Voucher cá nhân
Ảnh tham chiếu:
- [Ảnh màn hình danh sách voucher cá nhân](./images/My Voucher.png)
1. Mô Tả Chung
Màn hình này là ví voucher cá nhân của người dùng, nơi lưu giữ và phân loại toàn bộ các voucher ưu đãi mà người dùng đang sở hữu. Người dùng có thể lọc danh sách voucher theo trạng thái sử dụng và điều hướng nhanh qua các tính năng chính khác của ứng dụng từ thanh điều hướng dưới cùng.
2. Chi Tiết Giao Diện & Thành Phần
| Thành phần | Loại phần tử | Chi tiết hiển thị / Hành vi |
|---|---|---|
| Thanh Tiêu đề (Header) | Navigation Bar | Màu nâu đậm hiển thị tiêu đề "Voucher của bạn" căn giữa. |
| Thanh Tab Bộ lọc | Tab Bar | Phân loại trạng thái voucher, bao gồm 4 tab: 1. Chưa sử dụng (Đang chọn - active, hiển thị chữ màu cam và thanh gạch chân màu cam). 2. Quà tặng 3. Đã sử dụng 4. Hết hạn |
| Danh sách Voucher | Vertical Scroll | Hiển thị danh sách các voucher thuộc tab bộ lọc hiện tại. |
| Card Voucher | Card | Thẻ voucher màu trắng bo góc nhẹ gồm: - Phía trên: Logo thương hiệu (ô vuông màu đỏ), tên thương hiệu ("Golden Lotus"), tiêu đề ưu đãi ("Golden Lotus: Giảm 50% giá vé Jjim Jil Bang tháng 12"), hình ảnh/logo voucher (ô vuông hồng bên phải). Nhấp vào để xem chi tiết Sử dụng Voucher. - Phía dưới: Ngăn cách bằng đường kẻ đứt nét, hiển thị hạn sử dụng ("HSD: 31/12/2025"). |
| Thanh Điều hướng dưới (Bottom Nav) | Navigation Bar | Thanh điều hướng cố định dưới cùng của ứng dụng gồm 5 tab: 1. Trang chủ 2. Voucher (Đang chọn - active, hiển thị màu cam) 3. Point (Nút tròn nổi màu vàng có chữ G ở trung tâm) 4. Big Fan 5. Tài khoản |
3. Luồng Nghiệp Vụ & Logic Hoạt Động
- Chuyển đổi Tab bộ lọc:
- Khi nhấn sang các tab khác ("Quà tặng", "Đã sử dụng", "Hết hạn"), danh sách voucher phía dưới sẽ tự động thay đổi dựa trên trạng thái của voucher trong cơ sở dữ liệu.
- Sử dụng Voucher:
- Nhấn vào một card voucher trong danh sách "Chưa sử dụng" sẽ điều hướng người dùng tới màn hình Sử dụng Voucher.
- Thanh Bottom Navigation:
- Nhấn vào các tab khác để chuyển đổi màn hình chính tương ứng (Trang chủ, Point, Big Fan, Tài khoản).