Chi tiết bài đăng

Trong bài viết này chúng mình sẽ đi qua những phần liên quan đến trang chi tiết bài đăng. Đây là phần khá quan trọng vì ắt hẳn trong một ứng dụng nào cũng có những phần sau.

Về front-end trang Chi tiết bài đăng

Trang chi tiết bài đăng được thể hiện trong file code post-detail.jsx.

Khi đã tạo bài đăng cho một sản phẩm, để người mua có thể xem nó thì cần có một trang chi tiết bài đăng. Trong Bán Lại, phần chi tiết bài đăng gồm những phần chính như sau

Hình ảnh

Chúng ta cần một Swiper để user có được hiệu ứng trượt ảnh. Code

Tiêu đề và giá, nút like

Bạn có thể tham khảo đoạn code này

Thời gian và địa điểm

Được thể hiện trong component Description tham khảo code

Mô tả chi tiết

code

Chia sẻ bài đăng

code

Thông tin người bán

Được thể hiện trong component SellerInfo tham khảo code

Các sản phẩm tương tự

Chúng ta tái sử dụng component PostTray được thể hiện ở đây.

Liên hệ với người bán

Trong mini program Bán Lại, bạn có thể chia sẻ qua Zalo, Facebook hoặc copy link, để chia sẻ qua Zalo, bạn cần phải có quyền truy cập API openShareSheet. Link hướng dẫn chi tiết được đính kèm ở đây

Một tính năng quan trọng của một sàn thương mại điện tử là phần trao đổi giữa người mua và người bán. Trong Bán Lại, để trao đổi thông tin giữa 2 bên, bạn có thể tham khảo cách này

Về các api liên quan đến phần Chi tiết bài đăng

Chúng mình lựa chọn chỉ gọi 1 api để load chi tiết bài đăng khi vào khi vào trang này (tham khảo api). Mỗi khi người dùng vào xem 1 chi tiết bài đăng, client sẽ có 1 gọi api để update lượt xem bài đăng tham khảo api và mỗi lần người dùng nhấn thích bài đăng sẽ có api để gọi api thích bài đăng (tham khảo api (tạo 1 mapping user-post vào bảng carelistmapping)).

Để tránh việc người dùng spam thích và bỏ thích 1 bài liên tục gây nên những cuộc gọi không cần thiết đến server. Tụi mình đã handle việc này bằng cách sử dụng useState. Nếu các bạn để ý dòng này thì chúng mình chỉ gọi api thích/bỏ thích sau mỗi 250ms.

Tham khảo