Màn Hình: Gói Voucher (Voucher Packages Grid)
Ngày tạo: 01/07/2026
Loại: Giao diện ứng dụng (APP UI) — Lưới danh sách gói sản phẩm/voucher đổi thưởng
Ảnh tham chiếu:
- [Ảnh màn hình danh sách gói voucher](./images/My Voucher (1).png)
1. Mô Tả Chung
Màn hình này hiển thị danh sách các sản phẩm, gói voucher hoặc quà tặng khả dụng dưới dạng lưới hai cột (Grid Layout). Người dùng có thể duyệt qua danh sách và xem số điểm (GPoint) cần thiết để đổi từng gói voucher tương ứng.
2. Chi Tiết Giao Diện & Thành Phần
.png)
| 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 chứa nút Back (<-) và tiêu đề chính "Gói voucher" căn giữa. |
| Lưới Danh sách Gói | Grid View | Chia thành bố cục 2 cột cuộn dọc, tối ưu hóa không gian hiển thị cho các sản phẩm. |
| Card Gói Voucher | Card | Thẻ thông tin của từng gói voucher, bao gồm: - Ảnh sản phẩm: Hình ảnh các chai mỹ phẩm/skincare trên nền tone màu kem ấm áp ở nửa trên card. - Tên gói: Tên gói voucher hiển thị bằng chữ in đậm (mẫu là "Name"). Nhấp vào để xem Chi tiết đổi Voucher. - Mô tả ngắn: Dòng văn bản phụ mô tả rút gọn ("Please add your content here. Keep it short and si..."). - Giá trị đổi (GPoint): Hàng cuối hiển thị icon chữ G màu vàng + giá trị điểm cần đổi ("1.500"). |
3. Luồng Nghiệp Vụ & Logic Hoạt Động
- Xem chi tiết đổi:
- Người dùng nhấn vào bất kỳ card gói voucher nào trong danh sách lưới sẽ được chuyển tới màn hình Chi tiết đổi Voucher.
- Quay lại: Nhấn vào nút Back ở góc trên bên trái để quay lại giao diện trước đó.
- Cập nhật dữ liệu lưới: Danh sách các sản phẩm và giá điểm quy đổi của từng gói voucher được tải từ API phía máy chủ để đảm bảo tính cập nhật và chính xác về giá trị.