124 lines
3.9 KiB
JavaScript
124 lines
3.9 KiB
JavaScript
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
import 'swiper/css'
|
|
|
|
import { DiscountProduct, ProductPrice, ResponsiveImage, Skeleton } from 'components'
|
|
import { useGetProductsQuery } from '@/store/services'
|
|
|
|
const DiscountSlider = props => {
|
|
//? Props
|
|
const { currentCategory } = props
|
|
|
|
const { products, isLoading } = useGetProductsQuery(
|
|
{
|
|
sort: 6,
|
|
category: currentCategory?.slug,
|
|
page_size: 15,
|
|
discount: true,
|
|
},
|
|
{
|
|
selectFromResult: ({ data, isLoading }) => ({
|
|
products: data?.data?.products,
|
|
isLoading,
|
|
}),
|
|
}
|
|
)
|
|
|
|
//? Render(s)
|
|
|
|
if (currentCategory) {
|
|
return (
|
|
<section
|
|
className="lg:rounded-xl lg:mx-3 py-2.5 flex lg:px-1"
|
|
style={{
|
|
background: `linear-gradient(${`${currentCategory.colors?.start},${currentCategory.colors?.end}`})`,
|
|
}}
|
|
>
|
|
<Swiper
|
|
watchSlidesProgress={true}
|
|
slidesPerView={2}
|
|
breakpoints={{
|
|
490: { width: 490, slidesPerView: 3 },
|
|
}}
|
|
>
|
|
{isLoading
|
|
? Array(10)
|
|
.fill('_')
|
|
.map((_, index) => (
|
|
<SwiperSlide
|
|
key={index}
|
|
className={`w-fit bg-white mx-0.5 py-6 ${
|
|
index === 0 ? 'rounded-l-lg' : index === 9 ? 'rounded-r-lg' : ''
|
|
} `}
|
|
>
|
|
<Skeleton.Items>
|
|
<Skeleton.Item
|
|
height=" h-32 lg:h-36"
|
|
width="w-32 lg:w-36"
|
|
animated="background"
|
|
className="rounded-md mx-auto"
|
|
/>
|
|
<Skeleton.Item
|
|
height="h-5"
|
|
width="w-32"
|
|
animated="background"
|
|
className="mt-4 mx-auto"
|
|
/>
|
|
<Skeleton.Item
|
|
height="h-5"
|
|
width="w-20"
|
|
animated="background"
|
|
className="mt-4 mx-auto"
|
|
/>
|
|
</Skeleton.Items>
|
|
</SwiperSlide>
|
|
))
|
|
: products?.map((product, index) => (
|
|
<SwiperSlide
|
|
key={product._id}
|
|
className={`w-fit bg-white mx-0.5 py-6 ${
|
|
index === 0 ? 'rounded-l-lg' : index === 9 ? 'rounded-r-lg' : ''
|
|
} `}
|
|
>
|
|
<Link href={`/products/${product._id}`}>
|
|
<article>
|
|
<ResponsiveImage
|
|
dimensions="w-32 h-32 lg:w-36 lg:h-36"
|
|
className=" mx-auto"
|
|
src={product.images[0].url}
|
|
alt={product.title}
|
|
/>
|
|
|
|
<div className="flex px-2 mt-1.5 justify-evenly gap-x-2 ">
|
|
<div>
|
|
<DiscountProduct discount={product.discount} />
|
|
</div>
|
|
<ProductPrice
|
|
inStock={product.inStock}
|
|
discount={product.discount}
|
|
price={product.price}
|
|
/>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
<SwiperSlide className="py-10 flex-center flex-col">
|
|
<Image
|
|
src={currentCategory.image}
|
|
alt={currentCategory.name}
|
|
width={96}
|
|
height={96}
|
|
priority
|
|
/>
|
|
<div className=" text-white text-sm">查看全部</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</section>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default DiscountSlider
|