77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import PageHeader from '@dukang/shared-ui/PageHeader';
|
|
|
|
type ReshipStatus = 'ALL' | 'PENDING' | 'SHIPPING' | 'DONE';
|
|
|
|
const MOCK_ITEMS = [
|
|
{ id: '1', orderNo: 'DK20260301001', status: 'PENDING' as const, productName: '杜康窖藏', originalOrderNo: 'DK20260228088', address: '郑州市金水区花园路 88 号' },
|
|
{ id: '2', orderNo: 'DK20260302002', status: 'SHIPPING' as const, productName: '杜康特曲', originalOrderNo: 'DK20260215012', address: '郑州市二七区大学路 12 号' },
|
|
];
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
PENDING: '待配送',
|
|
SHIPPING: '配送中',
|
|
DONE: '已完成',
|
|
};
|
|
|
|
const FILTERS: { key: ReshipStatus; label: string }[] = [
|
|
{ key: 'ALL', label: '全部' },
|
|
{ key: 'PENDING', label: '待配送' },
|
|
{ key: 'SHIPPING', label: '配送中' },
|
|
{ key: 'DONE', label: '已完成' },
|
|
];
|
|
|
|
/** BUWR-23：补发处理 */
|
|
export default function ReshipPage() {
|
|
const navigate = useNavigate();
|
|
const [filter, setFilter] = useState<ReshipStatus>('ALL');
|
|
|
|
const list = MOCK_ITEMS.filter((item) => filter === 'ALL' || item.status === filter);
|
|
|
|
return (
|
|
<div className="page-no-tab partner-orders-page">
|
|
<PageHeader title="补发处理" onBack={() => navigate('/')} />
|
|
|
|
<p className="label-md text-muted" style={{ padding: '0 20px 8px' }}>
|
|
总部下达的补发工单，确认后可推进配送
|
|
</p>
|
|
|
|
<div className="partner-filter-row" style={{ padding: '0 20px 12px' }}>
|
|
{FILTERS.map((f) => (
|
|
<button
|
|
key={f.key}
|
|
type="button"
|
|
className={`partner-chip${filter === f.key ? ' active' : ''}`}
|
|
onClick={() => setFilter(f.key)}
|
|
>
|
|
{f.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{list.length === 0 && <div className="empty">暂无补发工单</div>}
|
|
|
|
{list.map((item) => (
|
|
<div key={item.id} className="partner-order-card" style={{ margin: '0 20px 12px' }}>
|
|
<div className="partner-order-card-top">
|
|
<span className="label-md text-muted">原单 {item.originalOrderNo}</span>
|
|
<span className="label-md text-primary" style={{ fontWeight: 600 }}>{STATUS_LABEL[item.status]}</span>
|
|
</div>
|
|
<h3 className="headline-md" style={{ marginTop: 8 }}>{item.productName}</h3>
|
|
<p className="label-md text-muted" style={{ marginTop: 4 }}>补发单号 {item.orderNo}</p>
|
|
<div className="partner-order-address" style={{ marginTop: 12 }}>
|
|
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>location_on</span>
|
|
<p className="line-2-clamp">{item.address}</p>
|
|
</div>
|
|
{item.status === 'PENDING' && (
|
|
<button type="button" className="partner-btn-primary" style={{ marginTop: 16, width: '100%' }}>
|
|
开始配送
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|