|
|
@@ -12,6 +12,13 @@ interface GalleryModalProps {
|
|
|
onClose: () => void;
|
|
|
galleryList: GalleryItem[];
|
|
|
initialSlide: number;
|
|
|
+ // 新增:父组件传进来点赞回调
|
|
|
+ onLike: (reviewItem: any) => Promise<void>;
|
|
|
+ // 新增:读取点赞缓存状态
|
|
|
+ getCurrentLike: (reviewItem: any) => {
|
|
|
+ liked: boolean;
|
|
|
+ like_count: number;
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
export default function ReviewImageGalleryModal({
|
|
|
@@ -19,6 +26,8 @@ export default function ReviewImageGalleryModal({
|
|
|
onClose,
|
|
|
galleryList,
|
|
|
initialSlide,
|
|
|
+ onLike,
|
|
|
+ getCurrentLike,
|
|
|
}: GalleryModalProps) {
|
|
|
const swiperRef = useRef<any>(null);
|
|
|
// 新增状态存储当前下标,初始值传入initialSlide
|
|
|
@@ -51,45 +60,79 @@ export default function ReviewImageGalleryModal({
|
|
|
// 滑动切换时更新下标
|
|
|
onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
|
|
|
>
|
|
|
- {galleryList.map((item, idx) => (
|
|
|
- <SwiperSlide
|
|
|
- key={idx}
|
|
|
- className="flex flex-col justify-between h-full py-4"
|
|
|
- >
|
|
|
- {/* 大图 */}
|
|
|
- <div className="flex-1 flex items-center justify-center px-2">
|
|
|
- <Image
|
|
|
- src={item.imageUrl}
|
|
|
- alt={`gallery-${idx}`}
|
|
|
- width={600}
|
|
|
- height={800}
|
|
|
- className="max-w-full max-h-[70vh] object-contain"
|
|
|
- />
|
|
|
- </div>
|
|
|
- {/* 底部用户评论信息 */}
|
|
|
- <div className="bg-black/80 text-white p-4 mt-4">
|
|
|
- <div className="flex items-center gap-2 mb-2">
|
|
|
- <div className="w-10 h-10 rounded-full bg-gray-300"></div>
|
|
|
- <span className="font-medium">{item.review.name}</span>
|
|
|
- <span className="ml-auto">{item.review.likeCount} 👍</span>
|
|
|
+ {galleryList.map((item, idx) => {
|
|
|
+ const likeInfo = getCurrentLike(item.review);
|
|
|
+ return (
|
|
|
+ <SwiperSlide
|
|
|
+ key={idx}
|
|
|
+ className="flex flex-col justify-between h-full py-4"
|
|
|
+ >
|
|
|
+ {/* 大图 */}
|
|
|
+ <div className="flex-1 flex items-center justify-center px-2">
|
|
|
+ <Image
|
|
|
+ src={item.imageUrl}
|
|
|
+ alt={`gallery-${idx}`}
|
|
|
+ width={600}
|
|
|
+ height={800}
|
|
|
+ className="max-w-full max-h-[70vh] object-contain"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div className="flex gap-0.5 mb-2">
|
|
|
- {Array.from({ length: 5 }).map((_, i) => (
|
|
|
- <svg
|
|
|
- key={i}
|
|
|
- width="14"
|
|
|
- height="14"
|
|
|
- fill={i < item.review.rating ? "#fff" : "#666"}
|
|
|
- viewBox="0 0 24 24"
|
|
|
+ {/* 底部用户评论信息 */}
|
|
|
+ <div className="bg-black/80 text-white p-4 mt-4">
|
|
|
+ <div className="flex items-center gap-2 mb-2">
|
|
|
+ <div className="w-10 h-10 rounded-full bg-gray-300"></div>
|
|
|
+ <span className="font-medium">{item.review.name}</span>
|
|
|
+ <div
|
|
|
+ className="ml-auto flex items-center gap-1 cursor-pointer"
|
|
|
+ onClick={() => onLike(item.review)}
|
|
|
>
|
|
|
- <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
|
- </svg>
|
|
|
- ))}
|
|
|
+ <span
|
|
|
+ className={likeInfo.liked ? "text-[#036141FF]" : ""}
|
|
|
+ >
|
|
|
+ {likeInfo.like_count}
|
|
|
+ </span>
|
|
|
+ {likeInfo.liked ? (
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="#036141FF"
|
|
|
+ >
|
|
|
+ <path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
|
|
|
+ </svg>
|
|
|
+ ) : (
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="white"
|
|
|
+ >
|
|
|
+ <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.981 6.186 6.362 3.352-2.38 5.265-4.547 6.186-6.362.955-1.884.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
|
|
|
+ </svg>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {/* <span className="ml-auto">{item.review.like_count} 👍</span> */}
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-0.5 mb-2">
|
|
|
+ {Array.from({ length: 5 }).map((_, i) => (
|
|
|
+ <svg
|
|
|
+ key={i}
|
|
|
+ width="14"
|
|
|
+ height="14"
|
|
|
+ fill={i < item.review.rating ? "#fff" : "#666"}
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ >
|
|
|
+ <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
|
+ </svg>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <p className="text-sm text-gray-200">{item.review.comment}</p>
|
|
|
</div>
|
|
|
- <p className="text-sm text-gray-200">{item.review.comment}</p>
|
|
|
- </div>
|
|
|
- </SwiperSlide>
|
|
|
- ))}
|
|
|
+ </SwiperSlide>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</Swiper>
|
|
|
</div>
|
|
|
</div>
|