合伙人 H5 改造

apps/h5-partner/src/pages/OrderListPage.tsx

@@ -29,16 +29,26 @@ const STATUS_FILTERS: { key: StatusFilter; label: string }[] = [
   { key: 'ABNORMAL', label: '异常' },
 ];
 
-export default function OrderListPage() {
+type OrderListPageProps = {
+  /** Tab 根页：无返回顶栏 */
+  tabRoot?: boolean;
+};
+
+export default function OrderListPage({ tabRoot = false }: OrderListPageProps) {
   const navigate = useNavigate();
   const [data, setData] = useState<{ list: Array<Record<string, unknown>> }>({ list: [] });
   const [tab, setTab] = useState<'orders' | 'coupons'>('orders');
   const [dateFilter, setDateFilter] = useState<DateFilter>('today');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL');
+  const [shippingId, setShippingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    document.title = '订单管理';
+  }, []);
 
   useEffect(() => {
     if (!isLoggedIn()) { navigate('/login'); return; }
-    request('PARTNER_H5', '/partner/orders').then(setData);
+    request<{ list: Array<Record<string, unknown>> }>('PARTNER_H5', '/partner/orders').then(setData);
   }, [navigate]);
 
   const filtered = useMemo(() => data.list.filter((o) => {
@@ -51,13 +61,36 @@ export default function OrderListPage() {
     return true;
   }), [data.list, statusFilter]);
 
+  async function handleShip(orderId: string, e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    setShippingId(orderId);
+    try {
+      await request('PARTNER_H5', `/partner/orders/${orderId}/mock-advance-delivery`, {
+        method: 'POST',
+        body: JSON.stringify({ targetStatus: 'OUT_WAREHOUSE' }),
+      });
+      const next = await request<{ list: Array<Record<string, unknown>> }>('PARTNER_H5', '/partner/orders');
+      setData(next);
+    } finally {
+      setShippingId(null);
+    }
+  }
+
+  function canShip(status: string) {
+    const s = status.toUpperCase();
+    return s.includes('PENDING') || s === 'PAID' || s === 'PENDING_SHIP';
+  }
+
   return (
-    <div className="page-no-tab partner-orders-page">
-      <PageHeader title="订单中心" onBack={() => navigate('/')} />
+    <div className={`page partner-orders-page${tabRoot ? '' : ' page-no-tab'}`}>
+      {!tabRoot && <PageHeader title="订单中心" onBack={() => navigate('/')} />}
 
       <div className="partner-segment">
         <button type="button" className={tab === 'orders' ? 'active' : ''} onClick={() => setTab('orders')}>订单列表</button>
-        <button type="button" className={tab === 'coupons' ? 'active' : ''} onClick={() => setTab('coupons')}>权益记录</button>
+        {!tabRoot && (
+          <button type="button" className={tab === 'coupons' ? 'active' : ''} onClick={() => setTab('coupons')}>权益记录</button>
+        )}
       </div>
 
       {tab === 'orders' && (
@@ -82,50 +115,45 @@ export default function OrderListPage() {
           {filtered.map((o) => {
             const st = orderStatusLabel(String(o.status));
             const payAmount = Number(o.payAmount || 0);
+            const orderId = String(o.id);
             return (
-              <Link key={String(o.id)} to={`/orders/${o.id}`} className="partner-order-card">
-                <div className="partner-order-card-top">
-                  <span className="label-md text-muted">NO. {String(o.orderNo)}</span>
-                  <span className="label-md" style={{ color: st.color, fontWeight: 600 }}>{st.label}</span>
-                </div>
-                <div className="partner-order-product">
-                  <div className="partner-order-product-img" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                    <span className="material-symbols-outlined text-muted">liquor</span>
+              <div key={orderId} className="partner-order-card-wrap">
+                <Link to={`/orders/${orderId}`} className="partner-order-card">
+                  <div className="partner-order-card-top">
+                    <span className="label-md text-muted">NO. {String(o.orderNo)}</span>
+                    <span className="label-md" style={{ color: st.color, fontWeight: 600 }}>{st.label}</span>
                   </div>
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <h3 className="headline-md line-2-clamp">{String(o.productName || '杜康好酒')}</h3>
-                    <p className="text-variant body-md" style={{ marginTop: 4 }}>¥{payAmount.toFixed(2)}</p>
-                    <span className="partner-benefit-tag">
-                      <span className="material-symbols-outlined" style={{ fontSize: 14 }}>confirmation_number</span>
-                      ¥{Math.round(payAmount * 0.2)}权益
-                    </span>
+                  <div className="partner-order-product">
+                    <div className="partner-order-product-img" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <span className="material-symbols-outlined text-muted">liquor</span>
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <h3 className="headline-md line-2-clamp">{String(o.productName || '杜康好酒')}</h3>
+                      <p className="text-variant body-md" style={{ marginTop: 4 }}>¥{payAmount.toFixed(2)}</p>
+                    </div>
                   </div>
-                </div>
-                <div className="partner-order-address">
-                  <span className="material-symbols-outlined" style={{ fontSize: 18 }}>location_on</span>
-                  <p className="line-2-clamp">{String(o.receiverAddress || '收货地址')}</p>
-                </div>
-                <div className="partner-order-commission">
-                  <div>
-                    <p className="label-md text-muted">下单佣金</p>
-                    <p className="headline-md text-primary" style={{ marginTop: 4 }}>¥{(payAmount * 0.04).toFixed(2)}</p>
+                  <div className="partner-order-address">
+                    <span className="material-symbols-outlined" style={{ fontSize: 18 }}>location_on</span>
+                    <p className="line-2-clamp">{String(o.receiverAddress || '收货地址')}</p>
                   </div>
-                  <div>
-                    <p className="label-md text-muted">核销佣金</p>
-                    <p className="headline-md text-primary" style={{ marginTop: 4 }}>¥0.00</p>
-                  </div>
-                  <div>
-                    <p className="label-md text-muted">获赠权益</p>
-                    <p className="headline-md" style={{ marginTop: 4, color: 'var(--color-aged-amber)' }}>¥{Math.round(payAmount * 0.2)}</p>
-                  </div>
-                </div>
-              </Link>
+                </Link>
+                {canShip(String(o.status)) && (
+                  <button
+                    type="button"
+                    className="partner-order-ship-btn"
+                    disabled={shippingId === orderId}
+                    onClick={(e) => void handleShip(orderId, e)}
+                  >
+                    {shippingId === orderId ? '发货中…' : '确认发货'}
+                  </button>
+                )}
+              </div>
             );
           })}
         </>
       )}
 
-      {tab === 'coupons' && (
+      {tab === 'coupons' && !tabRoot && (
         <div style={{ padding: '0 20px' }}>
           <div className="partner-revenue-card" style={{ marginBottom: 16 }}>
             <p className="partner-revenue-label">累计已发放权益金额</p>