Skip to main content

Màn Hình: Chi Tiết Sự Kiện (Event Detail)

Ngày tạo: 01/07/2026
Loại: Giao diện ứng dụng (APP UI) — Chi tiết Sự kiện

Ảnh tham chiếu:

1. Mô Tả Chung​

Màn hình này hiển thị thông tin chi tiết của một sự kiện cụ thể (ví dụ: dịch vụ massage đá nóng). Từ đây, người dùng có thể xem mô tả chi tiết, thời gian diễn ra, địa điểm và trạng thái đăng ký của mình đối với sự kiện đó.

2. Chi Tiết Giao Diện & Thành Phần​

Chi tiết Sự kiện

Thành phầnLoại phần tửChi tiết hiển thị / Hành vi
Ảnh BannerImageHình ảnh đại diện cho sự kiện (massage đá nóng), hiển thị tràn viền ở nửa trên màn hình.
Nút Quay lạiButtonNút tròn màu trắng có icon mũi tên quay lại (<-), nằm ở góc trên bên trái đè lên ảnh banner. Điều hướng về Danh sách Sự kiện.
Trạng tháiBadgeNhãn màu xanh lá cây với chữ trắng "Đang mở" biểu thị sự kiện đang hoạt động và cho phép tham gia.
Tiêu đề Sự kiệnTextTiêu đề sự kiện chữ in đậm nổi bật: “Lorem ipsum non viverra erat eu velit pharetra libero”.
Thời gianInfo RowIcon lịch + Text hiển thị thời gian diễn ra sự kiện: “12:00 SA • 30/12/2026”.
Địa điểmInfo RowIcon ghim vị trí + Text hiển thị địa điểm: “TP. Hồ Chí Minh”.
Chi phíInfo RowIcon chữ G màu vàng + Text hiển thị: “Miễn phí” (hoặc số điểm quy đổi tương ứng).
Nội dung sự kiệnSection CardThẻ bo góc nền trắng chứa văn bản mô tả chi tiết sự kiện được chia thành các mục số thứ tự (1, 2...).
Nút Đăng ký (CTA)ButtonNút cố định ở cuối trang (Bottom CTA) hiển thị trạng thái "Đã đăng ký" với màu xanh teal.

3. Luồng Nghiệp Vụ & Logic Hoạt Động​

  1. Truy cập màn hình: Người dùng nhấn vào một sự kiện bất kỳ từ Danh sách Sự kiện để chuyển hướng tới màn hình này.
  2. Trạng thái đăng ký:
    • Nếu người dùng chưa đăng ký: Nút CTA dưới cùng sẽ có trạng thái kích hoạt (ví dụ: "Đăng ký tham gia").
    • Nếu người dùng đã đăng ký thành công: Nút CTA hiển thị chữ "Đã đăng ký" ở trạng thái disabled hoặc hiển thị dấu tích (như ảnh tham chiếu).
  3. Quay lại: Nhấn vào nút Back ở góc trên bên trái để quay lại Danh sách Sự kiện.