合伙人 H5 改造

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import PageHeader from '@dukang/shared-ui/PageHeader';
 import { request } from '../lib/api';
+import { toastError, toastSuccess } from '../lib/toast';
 
 const TIMELINE = [
   { key: 'confirm', label: '待确认' },
@@ -28,21 +29,55 @@ function statusBanner(status: string) {
   return { title: status, desc: '', icon: 'receipt_long' };
 }
 
+function canShip(status: string) {
+  const s = status.toUpperCase();
+  return s.includes('PENDING') || s === 'PAID' || s === 'PENDING_SHIP';
+}
+
 export default function OrderDetailPage() {
   const { id } = useParams();
   const navigate = useNavigate();
   const [order, setOrder] = useState<Record<string, unknown> | null>(null);
+  const [shipping, setShipping] = useState(false);
 
   useEffect(() => {
-    if (id) request('PARTNER_H5', `/partner/orders/${id}`).then(setOrder);
+    document.title = '订单详情';
+  }, []);
+
+  useEffect(() => {
+    if (id) void request<Record<string, unknown>>('PARTNER_H5', `/partner/orders/${id}`).then(setOrder);
   }, [id]);
 
+  async function reload() {
+    if (!id) return;
+    const next = await request<Record<string, unknown>>('PARTNER_H5', `/partner/orders/${id}`);
+    setOrder(next);
+  }
+
   async function advance(status: string) {
-    await request('PARTNER_H5', `/partner/orders/${id}/mock-advance-delivery`, {
-      method: 'POST',
-      body: JSON.stringify({ targetStatus: status }),
-    });
-    if (id) request('PARTNER_H5', `/partner/orders/${id}`).then(setOrder);
+    if (!id) return;
+    setShipping(true);
+    try {
+      await request('PARTNER_H5', `/partner/orders/${id}/mock-advance-delivery`, {
+        method: 'POST',
+        body: JSON.stringify({ targetStatus: status }),
+      });
+      await reload();
+      toastSuccess('已更新配送状态');
+    } finally {
+      setShipping(false);
+    }
+  }
+
+  function handleContactCourier() {
+    const delivery = order?.delivery as Record<string, unknown> | undefined;
+    const trackingNo = String(delivery?.trackingNo || delivery?.providerOrderNo || '').trim();
+    if (trackingNo) {
+      void navigator.clipboard?.writeText(trackingNo);
+      toastSuccess(`运单号已复制：${trackingNo}`);
+      return;
+    }
+    toastError('暂无配送员联系方式');
   }
 
   if (!order) return <div className="empty">加载中...</div>;
@@ -50,6 +85,7 @@ export default function OrderDetailPage() {
   const banner = statusBanner(String(order.status));
   const currentIdx = statusIndex(String(order.status));
   const payAmount = Number(order.payAmount || 0);
+  const showShip = canShip(String(order.status));
 
   return (
     <div className="partner-order-detail">
@@ -91,9 +127,6 @@ export default function OrderDetailPage() {
             <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--color-surface-container)' }}>
               <span className="material-symbols-outlined text-muted" style={{ fontSize: 32 }}>liquor</span>
             </div>
-            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(166,29,36,0.8)', textAlign: 'center', padding: '2px 0' }}>
-              <span className="label-md" style={{ color: '#fff', fontSize: 10 }}>正品保证</span>
-            </div>
           </div>
           <div style={{ flex: 1 }}>
             <h3 className="headline-md">{String(order.productName || '杜康好酒')}</h3>
@@ -106,39 +139,6 @@ export default function OrderDetailPage() {
         </div>
       </section>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, margin: '0 20px' }}>
-        <div className="partner-detail-section" style={{ margin: 0, borderTop: '2px solid var(--color-heritage-red)' }}>
-          <p className="label-md text-muted" style={{ marginBottom: 8 }}>佣金明细</p>
-          <div className="partner-info-row">
-            <span className="label-md text-muted">订单佣金</span>
-            <span className="text-primary" style={{ fontWeight: 700, fontSize: 12 }}>¥{(payAmount * 0.04).toFixed(2)}</span>
-          </div>
-          <div className="partner-info-row">
-            <span className="label-md text-muted">权益核销</span>
-            <span className="text-primary" style={{ fontWeight: 700, fontSize: 12 }}>¥{(payAmount * 0.04).toFixed(2)}</span>
-          </div>
-        </div>
-        <div className="partner-detail-section" style={{ margin: 0, borderTop: '2px solid var(--color-aged-amber)' }}>
-          <p className="label-md text-muted" style={{ marginBottom: 4 }}>赠送好客权益</p>
-          <span className="amount-lg" style={{ color: 'var(--color-aged-amber)' }}>¥{Math.round(payAmount * 0.2)}</span>
-        </div>
-      </div>
-
-      <section className="partner-detail-section">
-        <h4 className="headline-md" style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ width: 4, height: 16, background: 'var(--color-heritage-red)', borderRadius: 2 }} />
-          订单信息
-        </h4>
-        <div className="partner-info-row">
-          <span className="text-muted body-md">订单编号</span>
-          <span className="body-md">{String(order.orderNo)}</span>
-        </div>
-        <div className="partner-info-row">
-          <span className="text-muted body-md">订单状态</span>
-          <span className="body-md">{String(order.status)}</span>
-        </div>
-      </section>
-
       <section className="partner-detail-section">
         <h4 className="headline-md" style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
           <span style={{ width: 4, height: 16, background: 'var(--color-heritage-red)', borderRadius: 2 }} />
@@ -156,21 +156,34 @@ export default function OrderDetailPage() {
       </section>
 
       <footer className="partner-order-footer">
-        <div>
-          <span className="label-md text-muted">佣金合计</span>
-          <p className="headline-md text-primary" style={{ fontWeight: 700 }}>¥{(payAmount * 0.08).toFixed(2)}</p>
+        <div className="partner-order-footer-actions">
+          {showShip && (
+            <button
+              type="button"
+              className="btn btn-primary partner-order-ship-btn--footer"
+              disabled={shipping}
+              onClick={() => void advance('OUT_WAREHOUSE')}
+            >
+              {shipping ? '发货中…' : '确认发货'}
+            </button>
+          )}
+          <button
+            type="button"
+            className="btn btn-outline"
+            style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 24px' }}
+            onClick={handleContactCourier}
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>support_agent</span>
+            联系配送员
+          </button>
         </div>
-        <button type="button" className="btn btn-outline" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 24px' }}>
-          <span className="material-symbols-outlined" style={{ fontSize: 18 }}>support_agent</span>
-          联系配送员
-        </button>
       </footer>
 
       {import.meta.env.DEV && (
         <details className="partner-dev-tools">
           <summary>Dev: Mock 推进配送</summary>
           {['OUT_WAREHOUSE', 'SHIPPING', 'PENDING_RECEIVE', 'COMPLETED'].map((s) => (
-            <button key={s} type="button" onClick={() => advance(s)}>{s}</button>
+            <button key={s} type="button" onClick={() => void advance(s)}>{s}</button>
           ))}
         </details>
       )}