init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,79 @@
+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: 'pending_ship', label: '待发货' },
+  { key: 'pending_receive', label: '待收货' },
+  { key: 'completed', label: '已完成' },
+];
+
+const STATUS_LABEL: Record<string, string> = {
+  PENDING_PAY: '待付款',
+  PENDING_SHIP: '待发货',
+  OUT_WAREHOUSE: '出库中',
+  SHIPPING: '配送中',
+  PENDING_RECEIVE: '待收货',
+  COMPLETED: '已完成',
+  RESHIP: '补发中',
+};
+
+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, i) => {
+        const items = (o.items as Array<Record<string, unknown>>) || [];
+        const item = items[0];
+        const isReshipDemo = i === 0 && tab === 'all';
+        return (
+          <div key={String(o.id)} className="card">
+            <div className="card-row" style={{ marginBottom: 8 }}>
+              <span className="label-md text-muted">订单号: {String(o.orderNo)}</span>
+              <span className="status-tag">{STATUS_LABEL[String(o.status)] || String(o.status)}</span>
+            </div>
+            {isReshipDemo && <span className="tag-reship" style={{ marginBottom: 8, display: 'inline-block' }}>补发示例</span>}
+            {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 }}>
+              <Link
+                to={`/orders/${o.id}${isReshipDemo ? '?type=reship' : ''}`}
+                className="btn btn-outline btn-pill"
+              >
+                {isReshipDemo ? '查看进度' : '查看详情'}
+              </Link>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}