110 lines
3.7 KiB
JavaScript
110 lines
3.7 KiB
JavaScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
import { useGetOrdersQuery } from '@/store/services'
|
|
|
|
import { formatNumber } from 'utils'
|
|
|
|
import { ArrowLink, Skeleton } from 'components'
|
|
|
|
export default function Orders() {
|
|
//? States
|
|
const [pendingOrder, setPendingOrder] = useState(0)
|
|
const [successOrder, setSuccessOrder] = useState(0)
|
|
|
|
//? Get Order Query
|
|
const { data, isLoading } = useGetOrdersQuery({ page: 1, pageSize: 100 })
|
|
|
|
//? Handle Get Order Response
|
|
useEffect(() => {
|
|
if (data) {
|
|
const pending = data?.data?.orders.filter(item => item.delivered === false)
|
|
const success = data?.data?.orders.filter(item => item.delivered === true)
|
|
|
|
setPendingOrder(pending.length)
|
|
setSuccessOrder(success.length)
|
|
}
|
|
}, [data])
|
|
|
|
//? Local Components
|
|
const StatusSkeleton = () => (
|
|
<Skeleton.Item
|
|
animated="background"
|
|
height=" h-16 lg:h-14"
|
|
width="w-12 lg:w-28"
|
|
className="rounded-sm"
|
|
/>
|
|
)
|
|
|
|
//? Render(s)
|
|
return (
|
|
<section>
|
|
<div className="py-6 lg:py-0">
|
|
<div className="flex justify-between px-5 mb-7">
|
|
<h4 className="inline-block py-1 text-sm border-b-2 border-red-500 md:text-base">
|
|
我的订单
|
|
</h4>
|
|
<ArrowLink path="profile/orders">查看全部</ArrowLink>
|
|
</div>
|
|
<div className="flex justify-evenly lg:py-20">
|
|
{isLoading ? (
|
|
<StatusSkeleton />
|
|
) : (
|
|
<div className="flex flex-col items-center lg:flex-row lg:gap-x-2">
|
|
<div className="relative w-12 h-12 lg:w-14 lg:h-14">
|
|
<Image src="/icons/status-processing.svg" fill alt="当前订单" />
|
|
<span className="absolute order-badge">{formatNumber(pendingOrder)}</span>
|
|
</div>
|
|
<div className="text-gray-700">
|
|
<span className="hidden lg:block lg:text-black lg:text-md">
|
|
{formatNumber(pendingOrder)} 条记录
|
|
</span>
|
|
<span className="text-xs lg:text-sm">当前订单</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="section-divide-x" />
|
|
|
|
{isLoading ? (
|
|
<StatusSkeleton />
|
|
) : (
|
|
<div className="flex flex-col items-center lg:flex-row lg:gap-x-2">
|
|
<div className="relative w-12 h-12 lg:w-14 lg:h-14">
|
|
<Image src="/icons/status-delivered.svg" fill alt="成功订单" />
|
|
<span className="absolute order-badge">{formatNumber(successOrder)}</span>
|
|
</div>
|
|
<div className="text-gray-700">
|
|
<span className="hidden lg:block lg:text-black lg:text-md">
|
|
{formatNumber(successOrder)} 条记录
|
|
</span>
|
|
<span className="text-xs lg:text-sm">成功订单</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="section-divide-x" />
|
|
|
|
{isLoading ? (
|
|
<StatusSkeleton />
|
|
) : (
|
|
<div className="flex flex-col items-center lg:flex-row lg:gap-x-2">
|
|
<div className="relative w-12 h-12 lg:w-14 lg:h-14">
|
|
<Image src="/icons/status-returned.svg" fill alt="退款订单" />
|
|
<span className="absolute order-badge">0</span>
|
|
</div>
|
|
<div className="text-gray-700">
|
|
<span className="hidden lg:block lg:text-black lg:text-md">0 条记录</span>
|
|
<span className="text-xs lg:text-sm">退款订单</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="section-divide-y" />
|
|
</section>
|
|
)
|
|
}
|