90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
import Image from 'next/image'
|
|
|
|
import { AddToCartOperation, Depot, Icons, ResponsiveImage } from 'components'
|
|
|
|
import { formatNumber } from 'utils'
|
|
|
|
import { useAppSelector } from 'hooks'
|
|
import { siteTitle } from '@/utils'
|
|
|
|
const AddToCart = props => {
|
|
//? Props
|
|
const { second, product } = props
|
|
|
|
//? Store
|
|
const { tempColor, tempSize } = useAppSelector(state => state.cart)
|
|
|
|
//? Render(s)
|
|
return (
|
|
<>
|
|
{/* mobile */}
|
|
<div className="fixed bottom-0 left-0 right-0 z-20 lg:hidden">
|
|
<AddToCartOperation product={product} />
|
|
</div>
|
|
|
|
{/* desktop */}
|
|
<div
|
|
className={`hidden divide-y lg:col-start-8 lg:col-end-10 lg:row-start-2 lg:row-end-5 lg:rounded-lg lg:bg-gray-100 lg:flex lg:flex-col xl:row-end-5 lg:px-3 lg:py-1.5 lg:border lg:border-gray-200 lg:shadow lg:sticky ${
|
|
second ? 'lg:top-4 xl:top-32' : 'lg:top-60 xl:top-[260px]'
|
|
} `}
|
|
>
|
|
<div className="items-center justify-between hidden space-y-2 lg:py-3 lg:flex">
|
|
<span className="text-base text-black">卖方 :</span>
|
|
<div className="flex gap-x-2">
|
|
<Image src="/icons/mini-logo.png" width={24} height={24} alt={siteTitle} />
|
|
<span>{siteTitle}</span>
|
|
</div>
|
|
</div>
|
|
{second && (
|
|
<>
|
|
<div className="flex py-3 gap-x-4 ">
|
|
<ResponsiveImage
|
|
dimensions="w-28 h-28"
|
|
src={product.images[0].url}
|
|
alt={product.title}
|
|
/>
|
|
|
|
<span className="flex-1 text-justify">{product.title}</span>
|
|
</div>
|
|
|
|
{tempColor && (
|
|
<div className="flex items-center gap-x-2 py-3">
|
|
<span
|
|
className="inline-block w-5 h-5 shadow rounded-xl"
|
|
style={{ background: tempColor.hashCode }}
|
|
/>
|
|
<span>{tempColor.name}</span>
|
|
</div>
|
|
)}
|
|
{tempSize && (
|
|
<div className="flex items-center gap-x-2 py-3">
|
|
<Icons.Rule className="icon" />
|
|
<span className="">{tempSize.size}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="py-3 lg:items-center lg:gap-x-2 lg:flex">
|
|
<Icons.ShieldCheck className="icon" />
|
|
<span className="font-light">正品保证和发货保证</span>
|
|
</div>
|
|
|
|
<div className="lg:block lg:py-3 ">
|
|
<Depot inStock={product.inStock} />
|
|
</div>
|
|
|
|
<div className="lg:flex lg:items-center lg:gap-x-1 lg:py-3">
|
|
<Icons.Check className="icon" />
|
|
<span> 销售 :</span>
|
|
<span className="">{formatNumber(product.sold)}</span>
|
|
</div>
|
|
|
|
<AddToCartOperation product={product} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AddToCart
|