118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import type { Locale } from '@/lib/locale';
|
|
import {
|
|
formatStatus,
|
|
formatCreatedAt,
|
|
getStatusBadgeClass,
|
|
getPaymentDisplayInfo,
|
|
type MyOrder,
|
|
} from '@/lib/pay-utils';
|
|
|
|
interface OrderTableProps {
|
|
isDark: boolean;
|
|
locale: Locale;
|
|
loading: boolean;
|
|
error: string;
|
|
orders: MyOrder[];
|
|
}
|
|
|
|
export default function OrderTable({ isDark, locale, loading, error, orders }: OrderTableProps) {
|
|
const text =
|
|
locale === 'en'
|
|
? {
|
|
empty: 'No matching orders found',
|
|
orderId: 'Order ID',
|
|
amount: 'Amount',
|
|
payment: 'Payment Method',
|
|
status: 'Status',
|
|
createdAt: 'Created At',
|
|
}
|
|
: {
|
|
empty: '暂无符合条件的订单记录',
|
|
orderId: '订单号',
|
|
amount: '金额',
|
|
payment: '支付方式',
|
|
status: '状态',
|
|
createdAt: '创建时间',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
'rounded-2xl border p-3 sm:p-4',
|
|
isDark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-slate-50/80',
|
|
].join(' ')}
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-10">
|
|
<div
|
|
className={[
|
|
'h-6 w-6 animate-spin rounded-full border-2 border-t-transparent',
|
|
isDark ? 'border-slate-400' : 'border-slate-500',
|
|
].join(' ')}
|
|
/>
|
|
</div>
|
|
) : error ? (
|
|
<div
|
|
className={[
|
|
'rounded-xl border border-dashed px-4 py-10 text-center text-sm',
|
|
isDark ? 'border-amber-500/40 text-amber-200' : 'border-amber-300 text-amber-700',
|
|
].join(' ')}
|
|
>
|
|
{error}
|
|
</div>
|
|
) : orders.length === 0 ? (
|
|
<div
|
|
className={[
|
|
'rounded-xl border border-dashed px-4 py-10 text-center text-sm',
|
|
isDark ? 'border-slate-600 text-slate-400' : 'border-slate-300 text-slate-500',
|
|
].join(' ')}
|
|
>
|
|
{text.empty}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
className={[
|
|
'hidden rounded-xl px-4 py-2 text-xs font-medium md:grid md:grid-cols-[1.2fr_0.6fr_0.8fr_0.8fr_1fr]',
|
|
isDark ? 'text-slate-300' : 'text-slate-600',
|
|
].join(' ')}
|
|
>
|
|
<span>{text.orderId}</span>
|
|
<span>{text.amount}</span>
|
|
<span>{text.payment}</span>
|
|
<span>{text.status}</span>
|
|
<span>{text.createdAt}</span>
|
|
</div>
|
|
<div className="space-y-2 md:space-y-0">
|
|
{orders.map((order) => (
|
|
<div
|
|
key={order.id}
|
|
className={[
|
|
'border-t px-4 py-3 first:border-t-0 md:grid md:grid-cols-[1.2fr_0.6fr_0.8fr_0.8fr_1fr] md:items-center',
|
|
isDark ? 'border-slate-700 text-slate-200' : 'border-slate-200 text-slate-700',
|
|
].join(' ')}
|
|
>
|
|
<div className="font-medium">#{order.id.slice(0, 12)}</div>
|
|
<div className="font-semibold">¥{order.amount.toFixed(2)}</div>
|
|
<div>{getPaymentDisplayInfo(order.paymentType, locale).channel}</div>
|
|
<div>
|
|
<span
|
|
className={['rounded-full px-2 py-0.5 text-xs', getStatusBadgeClass(order.status, isDark)].join(
|
|
' ',
|
|
)}
|
|
>
|
|
{formatStatus(order.status, locale)}
|
|
</span>
|
|
</div>
|
|
<div className={isDark ? 'text-slate-300' : 'text-slate-600'}>
|
|
{formatCreatedAt(order.createdAt, locale)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|