97 lines
4.2 KiB
TypeScript
97 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { Display } from '@/components/display';
|
|
import { Empty } from '@/components/empty';
|
|
import { ProList, ProListActions } from '@/components/pro-list';
|
|
import { closeOrder, queryOrderList } from '@/services/user/order';
|
|
import { Button } from '@workspace/airo-ui/components/button';
|
|
import { Card, CardContent } from '@workspace/airo-ui/components/card';
|
|
import { formatDate } from '@workspace/airo-ui/utils';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useRef } from 'react';
|
|
import OrderDetailDialog from './components/OrderDetailDialog';
|
|
|
|
export default function Page() {
|
|
const t = useTranslations('order');
|
|
|
|
const ref = useRef<ProListActions>(null);
|
|
const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
|
|
return (
|
|
<div>
|
|
<ProList<API.OrderDetail, Record<string, unknown>>
|
|
action={ref}
|
|
request={async (pagination, filter) => {
|
|
const response = await queryOrderList({ ...pagination, ...filter });
|
|
return {
|
|
list: response.data.data?.list || [],
|
|
total: response.data.data?.total || 0,
|
|
};
|
|
}}
|
|
renderItem={(item) => {
|
|
return (
|
|
<Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-16 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)]'>
|
|
<div className={'flex justify-between'}>
|
|
<div>
|
|
<div className={'text-[#666]'}>{t('orderNo')}</div>
|
|
<p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
|
|
</div>
|
|
<div>
|
|
{item.status === 1 ? (
|
|
<>
|
|
<Button
|
|
className='min-w-[150px] rounded-full border-[#F8BFD2] bg-[#F8BFD2] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#F8BFD2] hover:bg-[#FF4248] hover:text-white'
|
|
onClick={async () => {
|
|
await closeOrder({ orderNo: item.order_no });
|
|
ref.current?.refresh();
|
|
}}
|
|
>
|
|
{t('cancelOrder')}
|
|
</Button>
|
|
<Button className='ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white'>
|
|
{t('payment')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
|
|
className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
|
|
>
|
|
{t('detail')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<CardContent className='px-0 py-3 text-sm'>
|
|
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
|
|
<li>
|
|
<span className='text-[#225BA9]'>{t('name')}</span>
|
|
<span className={'font-bold text-[#091B33]'}>
|
|
{item.subscribe.name || t(`type.${item.type}`)}
|
|
</span>
|
|
</li>
|
|
<li className='font-semibold'>
|
|
<span className='text-[#225BA9]'>{t('paymentAmount')}</span>
|
|
<span>
|
|
<Display type='currency' value={item.amount} />
|
|
</span>
|
|
</li>
|
|
<li className='font-semibold'>
|
|
<span className='text-[#225BA9]'>{t('status.0')}</span>
|
|
<span>{t(`status.${item.status}`)}</span>
|
|
</li>
|
|
<li className='font-semibold'>
|
|
<span className='text-[#225BA9]'>{t('createdAt')}</span>
|
|
<time>{formatDate(item.created_at)}</time>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}}
|
|
empty={<Empty />}
|
|
/>
|
|
<OrderDetailDialog ref={OrderDetailDialogRef} />
|
|
</div>
|
|
);
|
|
}
|