100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
|
import PageHeader from '@dukang/shared-ui/PageHeader';
|
|
import AppImage from '@dukang/shared-ui/AppImage';
|
|
import OrderStatusTabs from '@dukang/shared-ui/OrderStatusTabs';
|
|
import { request } from '../lib/api';
|
|
|
|
const TABS = [
|
|
{ key: 'all', label: '全部' },
|
|
{ key: 'pending_pay', label: '待付款' },
|
|
{ key: 'paid', label: '已付款' },
|
|
{ key: 'completed', label: '已完成' },
|
|
];
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
PENDING_PAY: '待付款',
|
|
PENDING_SHIP: '已付款',
|
|
OUT_WAREHOUSE: '已付款',
|
|
SHIPPING: '已付款',
|
|
PENDING_RECEIVE: '已付款',
|
|
COMPLETED: '已完成',
|
|
};
|
|
|
|
function isReshipOrder(order: Record<string, unknown>) {
|
|
return String(order.orderType) === 'RESHIPMENT';
|
|
}
|
|
|
|
function orderStatusLabel(order: Record<string, unknown>) {
|
|
if (isReshipOrder(order)) return '补发中';
|
|
return STATUS_LABEL[String(order.status)] || String(order.status);
|
|
}
|
|
|
|
export default function OrderListPage() {
|
|
const [params, setParams] = useSearchParams();
|
|
const tab = params.get('tab') || 'all';
|
|
const [data, setData] = useState<{ list: Array<Record<string, unknown>> }>({ list: [] });
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
request<{ list: Array<Record<string, unknown>> }>('USER_H5', `/trade/orders?tab=${tab}`).then(setData);
|
|
}, [tab]);
|
|
|
|
return (
|
|
<div className="page-no-tab">
|
|
<PageHeader title="我的订单" onBack={() => navigate('/mine')} />
|
|
<OrderStatusTabs tabs={TABS} active={tab} onChange={(key) => setParams({ tab: key })} />
|
|
{data.list.length === 0 && <div className="empty">暂无订单</div>}
|
|
{data.list.map((o) => {
|
|
const items = (o.items as Array<Record<string, unknown>>) || [];
|
|
const item = items[0];
|
|
const isReship = isReshipOrder(o);
|
|
const isPendingPay = String(o.status) === 'PENDING_PAY';
|
|
return (
|
|
<div key={String(o.id)} className="card">
|
|
<div className="card-row" style={{ marginBottom: 8 }}>
|
|
<span className="label-md text-muted">
|
|
订单号: {String(o.orderNo)}
|
|
{isReship && (
|
|
<span className="tag-reship" style={{ marginLeft: 8 }}>
|
|
补发单
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="status-tag">{orderStatusLabel(o)}</span>
|
|
</div>
|
|
{item && (
|
|
<div className="card-row">
|
|
<AppImage
|
|
src={String(item.productImage)}
|
|
alt={String(item.productName || '')}
|
|
wrapperClassName="order-list-thumb"
|
|
/>
|
|
<div style={{ flex: 1 }}>
|
|
<div className="headline-md">{String(item.productName)}</div>
|
|
<div className="text-muted body-md">{String(item.productSpec)} x{Number(item.quantity)}</div>
|
|
</div>
|
|
<div className="amount-lg">¥{Number(o.payAmount)}</div>
|
|
</div>
|
|
)}
|
|
<div style={{ textAlign: 'right', marginTop: 12, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
|
{isPendingPay && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-pill"
|
|
onClick={() => navigate(`/pay?orderId=${o.id}`)}
|
|
>
|
|
去付款
|
|
</button>
|
|
)}
|
|
<Link to={`/orders/${o.id}`} className="btn btn-outline btn-pill">
|
|
查看详情
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|