Skip to main content

Yêu Cầu Thiết Kế: Template Box BigFan & Logic Lọc Tin Tức Theo Khu Vực

Ngày cập nhật: 30/06/2026
Loại: UI Design Templates & Backend Logic Specification

Ảnh feedback:

1. Thiết Kế Template Sinh Động Cho Box BigFan​

Vấn đề hiện tại​

Box BigFan trên trang chủ hiện tại quá đơn điệu: Nền trắng tinh, chữ đen mặc định, icon tròn nhỏ đơn giản, không tạo được cảm giác không khí lễ hội/nhận thưởng để kích thích người chơi.

Giải pháp: Xây dựng các Color Templates & Typography sẵn​

Thiết kế sẵn 3-4 mẫu template màu sắc (nền gradient nhẹ, icon tương ứng, thiết lập font size/weight) cho từng loại phần thưởng/hoạt động. Khi chạy, hệ thống chỉ việc đổ tên người dùng, tên phần thưởng và thời gian vào khung có sẵn.

Mẫu 1: Nhận Giải Từ Vòng Quay May Mắn (Lucky Wheel Winner)​

  • Màu nền (Background): Gradient vàng nhạt sang cam nhạt (linear-gradient(135deg, #FFF9E6, #FFF0CC))
  • Icon đại diện: Bánh xe vòng quay hoặc vòng quay lấp lánh (màu vàng kim)
  • Badge loại: Màu cam đất thương hiệu (#E5A93C), chữ trắng
  • Typography:
    • Tên user: fontSize: 14, fontWeight: 'bold', màu #664C1A
    • Nội dung: fontSize: 13, màu #805E24

Mẫu 2: Ưu Đãi / Quà Tặng Sinh Nhật (Birthday Reward)​

  • Màu nền (Background): Gradient hồng phấn sang đỏ nhạt (linear-gradient(135deg, #FFF0F2, #FFE0E5))
  • Icon đại diện: Hộp quà sinh nhật (màu đỏ/hồng) hoặc bánh sinh nhật
  • Badge loại: Màu hồng đậm, chữ trắng
  • Typography:
    • Tên user: fontSize: 14, fontWeight: 'bold', màu #801A27
    • Nội dung: fontSize: 13, màu #992233

Mẫu 3: Đăng Ký Thành Viên Mới / Thăng Hạng (Membership Upgrade)​

  • Màu nền (Background): Gradient xanh dương nhạt sang bạc (linear-gradient(135deg, #EBF3FF, #D9E8FF))
  • Icon đại diện: Vương miện hoặc thẻ thành viên lấp lánh
  • Badge loại: Màu xanh Navy, chữ trắng
  • Typography:
    • Tên user: fontSize: 14, fontWeight: 'bold', màu #1A3D80
    • Nội dung: fontSize: 13, màu #244D99

2. Logic Lấy Tin Tức Theo Khu Vực & Fallback Global​

Bố cục hiển thị tin tức​

  • Tin gần nhất (mới nhất): Hiển thị dạng Box to (Hero Card) ở trên cùng.
  • Các tin cũ hơn: Dạng List tin nhỏ xếp hàng dọc ở phía dưới.

Logic lọc dữ liệu (Data Logic)​

Hệ thống không hiển thị tràn lan mà cần tối ưu hóa theo vị trí địa lý của người dùng:

                  Lấy thông tin Vị trí của User (Tỉnh/Thành hoặc Chi nhánh)
                                             ↓
                      Có xác định được khu vực của User không?
                         ├── CÓ: Gửi API lấy tin theo khu vực
                         │       (VD: `GET /news?branch_city=HCM`)
                         │       
                         │       → Có tin tức nào trả về không?
                         │          ├── CÓ → Hiển thị 5 tin mới nhất của khu vực đó
                         │          └── KHÔNG → Chuyển sang Fallback Global
                         │
                         └── KHÔNG (Tắt định vị/Lỗi) → Chuyển sang Fallback Global
                                             ↓
                                    [Fallback Global]
                              Gửi API lấy tin toàn hệ thống
                              (VD: `GET /news?global=true`)
                              Hiển thị 5 tin mới nhất toàn quốc
Trường hợpNguồn tin hiển thịSố lượng hiển thị
Định vị được & Chi nhánh đó có tinTin tức riêng của chi nhánh/khu vực đóTối đa 5 tin mới nhất
Không định vị được OR Chi nhánh không có tinTin tức chung của toàn hệ thống (Global News)Tối đa 5 tin mới nhất

Checklist Kỹ Thuật Cho Lập Trình Viên​

Frontend (React Native)​

  • Khai báo stylesheet các template màu sắc cho BigFan Box (Lucky, Birthday, Upgrade).
  • Gán biến động: {userName}, {rewardName}, {relativeTime} vào template tương ứng dựa trên thuộc tính activityType của record.
  • Lấy vị trí tỉnh thành hiện tại của thiết bị (hoặc tỉnh thành chi nhánh đã lưu trong Profile).
  • Truyền params location hoặc city_id lên API lấy tin tức.
  • Thiết kế Component News List: Dòng đầu tiên check index === 0 render Card lớn, các index từ 1 đến 4 render list nhỏ bên dưới.

Backend / API​

  • Cấu hình API /news nhận tham số lọc theo tỉnh thành / khu vực.
  • Nếu query theo khu vực trả về rỗng (empty array), API tự động truy vấn tin tức Global và trả về kết quả fallback (không để client phải gọi 2 lần).