/** * 商品详情展示组件 */ "use client"; import React from "react"; import { Accordion, AccordionItem, Button, Chip, Image, Link, RadioGroup, ScrollShadow, cn, } from "@heroui/react"; import { Icon } from "@iconify/react"; import type { ProductViewItem } from "../types"; import ColorRadioItem from "./color-radio-item"; import RatingRadioGroup from "./rating-radio-group"; import TagGroupRadioItem from "./tag-group-radio-item"; export type ProductViewInfoProps = Omit, "id"> & { isPopular?: boolean; isLoading?: boolean; removeWrapper?: boolean; } & ProductViewItem; const ProductViewInfo = React.forwardRef( ( { name, images, price, sizes, details, description, availableColors, rating, ratingCount, isPopular, className, ...props }, ref ) => { const [isStarred, setIsStarred] = React.useState(false); const [selectedImage, setSelectedImage] = React.useState(images[0]); return (

{/* 商品图片展示 */}

{isPopular && ( } > 热门 )} {/* 主图 */} {name}

{/* 缩略图 */} {images.map((image, index) => ( ))}

{/* 商品信息 */}

{name}

商品信息

{ratingCount} {ratingCount === 1 ? "条评价" : "条评价"}

¥{price}

商品描述

{description}

{availableColors?.map(({ name, hex }) => ( ))}

免费配送，30天无理由退换

{sizes?.map((size) => ( {size} ))} 尺码指南

{details ? details.map(({ title, items }) => (

{item}

)) : []}

); } ); ProductViewInfo.displayName = "ProductViewInfo"; export default ProductViewInfo;

heroui产品详情组件

代码文件

演示图片

heroui产品详情组件

代码文件

演示图片