订单详情页内容调整（增加配送方式、订单号等）

apps/h5-user/src/lib/navigation.ts

@@ -53,6 +53,10 @@ export function buildProductDetailUrl(productId?: string | null) {
   return productId ? `/product/${productId}` : '/';
 }
 
+export function buildOrderAddressSelectUrl(orderId: string) {
+  return `/addresses?orderId=${orderId}&select=1`;
+}
+
 export function hasCheckoutContext(ctx: CheckoutContext) {
   return Boolean(ctx.productId || ctx.select === true || ctx.select === '1');
 }

apps/h5-user/src/pages/AddressListPage.tsx

@@ -24,10 +24,12 @@ function formatAddress(a: Address) {
 }
 
 export default function AddressListPage() {
-  const [list, setList] = useState<Address[]>([]);
+  const [pendingAddress, setPendingAddress] = useState<Address | null>(null);
+  const [savingOrderAddress, setSavingOrderAddress] = useState(false);
   const [params] = useSearchParams();
   const navigate = useNavigate();
   const selectMode = params.get('select') === '1';
+  const orderId = params.get('orderId') || '';
   const productId = params.get('productId') || '';
   const qty = params.get('qty') || '';
   const cross = params.get('cross') === '1';
@@ -41,16 +43,44 @@ export default function AddressListPage() {
     loadList();
   }, [loadList]);
 
-  function selectAddress(id: string) {
+  function selectAddress(addr: Address) {
     if (!selectMode) return;
+    if (orderId) {
+      setPendingAddress(addr);
+      return;
+    }
     const qs = new URLSearchParams();
     if (productId) qs.set('productId', productId);
     if (qty) qs.set('qty', qty);
     if (cross) qs.set('cross', '1');
-    qs.set('addressId', id);
+    qs.set('addressId', addr.id);
     navigate(`/order/confirm?${qs.toString()}`);
   }
 
+  async function confirmOrderAddress() {
+    if (!orderId || !pendingAddress) return;
+    setSavingOrderAddress(true);
+    try {
+      await request('USER_H5', `/trade/orders/${orderId}/address`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          receiverName: pendingAddress.receiverName,
+          receiverPhone: pendingAddress.phone,
+          receiverProvince: pendingAddress.province,
+          receiverCity: pendingAddress.city,
+          receiverDistrict: pendingAddress.district,
+          receiverAddress: `${pendingAddress.province}${pendingAddress.city}${pendingAddress.district}${pendingAddress.detail}`,
+        }),
+      });
+      navigate(`/orders/${orderId}`);
+    } catch (e) {
+      window.alert(e instanceof Error ? e.message : '修改地址失败');
+    } finally {
+      setSavingOrderAddress(false);
+      setPendingAddress(null);
+    }
+  }
+
   async function setDefault(addr: Address, e: React.MouseEvent) {
     e.stopPropagation();
     if (addr.isDefault === 1) return;
@@ -84,6 +114,10 @@ export default function AddressListPage() {
   }
 
   function goBack() {
+    if (orderId) {
+      navigate(`/orders/${orderId}`);
+      return;
+    }
     if (hasCheckoutContext(checkoutCtx)) {
       navigate(buildOrderConfirmUrl(checkoutCtx));
       return;
@@ -93,7 +127,7 @@ export default function AddressListPage() {
 
   return (
     <div className="address-list-page">
-      <SubPageHeader title="我的地址" onBack={goBack} />
+      <SubPageHeader title={orderId ? '选择收货地址' : '我的地址'} onBack={goBack} />
 
       <main className="address-list-main sub-page-body">
         {list.length === 0 && (
@@ -108,11 +142,11 @@ export default function AddressListPage() {
               <article
                 key={a.id}
                 className={`address-list-card${isDefault ? ' is-default' : ''}${isSelected ? ' is-selected' : ''}${selectMode ? ' is-selectable' : ''}`}
-                onClick={() => selectAddress(String(a.id))}
+                onClick={() => selectAddress(a)}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    selectAddress(String(a.id));
+                    selectAddress(a);
                   }
                 }}
                 role={selectMode ? 'button' : undefined}
@@ -187,6 +221,38 @@ export default function AddressListPage() {
           <span>新增收货地址</span>
         </Link>
       </footer>
+
+      {pendingAddress && (
+        <div className="order-address-modal-overlay" onClick={() => setPendingAddress(null)}>
+          <div className="order-address-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="order-address-modal-head">
+              <span className="material-symbols-outlined">location_on</span>
+              <h3>修改收货地址</h3>
+            </div>
+            <div className="order-address-modal-body">
+              <p>确认将订单收货地址修改为：</p>
+              <p className="order-address-modal-target">
+                {pendingAddress.receiverName} {maskPhone(pendingAddress.phone)}
+                <br />
+                {formatAddress(pendingAddress)}
+              </p>
+            </div>
+            <div className="order-address-modal-actions">
+              <button type="button" onClick={() => setPendingAddress(null)}>
+                取消
+              </button>
+              <button
+                type="button"
+                className="primary"
+                disabled={savingOrderAddress}
+                onClick={confirmOrderAddress}
+              >
+                {savingOrderAddress ? '保存中...' : '确认修改'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import SubPageHeader from '../components/SubPageHeader';
 import AppImage from '@dukang/shared-ui/AppImage';
 import { request } from '../lib/api';
+import { buildOrderAddressSelectUrl } from '../lib/navigation';
 import { STITCH_ORDER_PRODUCT_IMAGE } from '../lib/order-images';
 
 type OrderItem = {
@@ -13,10 +13,12 @@ type OrderItem = {
   quantity: number;
 };
 
-type StatusLog = {
+type OrderDelivery = {
-  toStatus: string;
+  provider?: string;
-  createdAt: string;
+};
-  remark?: string;
+
+type OrderPayment = {
+  status?: string;
 };
 
 type Order = {
@@ -28,34 +30,48 @@ type Order = {
   remark?: string | null;
   receiverName: string;
   receiverPhone: string;
+  receiverProvince?: string;
+  receiverCity?: string;
+  receiverDistrict?: string;
   receiverAddress: string;
+  productAmount?: number;
+  freightAmount?: number;
   payAmount: number;
   benefitAmount: number;
   createdAt: string;
   items?: OrderItem[];
-  statusLogs?: StatusLog[];
+  delivery?: OrderDelivery | null;
+  payment?: OrderPayment | null;
 };
 
-const RESHIP_TIMELINE = [
+const PROGRESS_STEPS = [
-  { key: 'placed', title: '补发单已下达', desc: '' },
+  { label: '下单成功' },
-  { key: 'pickup', title: '包裹揽收中', desc: '包裹正由物流网点揽收处理' },
+  { label: '出库中' },
-  { key: 'transit', title: '运输中', desc: '暂无物流信息' },
+  { label: '配送中' },
+  { label: '待签收' },
+  { label: '完成' },
 ] as const;
 
 const STATUS_BANNER: Record<string, { title: string; subtitle: string }> = {
   PENDING_PAY: { title: '待付款', subtitle: '请尽快完成支付' },
-  PENDING_SHIP: { title: '待发货', subtitle: '商家正在备货' },
+  PENDING_SHIP: { title: '待发货', subtitle: '商家正在备货，请耐心等待' },
-  OUT_WAREHOUSE: { title: '出库中', subtitle: '商品正在出库' },
+  OUT_WAREHOUSE: { title: '出库中', subtitle: '商品正在出库打包' },
-  SHIPPING: { title: '配送中', subtitle: '包裹正在配送途中' },
+  SHIPPING: { title: '配送中', subtitle: '您的佳酿正在赶往您的餐桌，请保持电话畅通' },
-  PENDING_RECEIVE: { title: '待收货', subtitle: '请注意查收' },
+  PENDING_RECEIVE: { title: '待签收', subtitle: '包裹已送达，请确认签收' },
-  COMPLETED: { title: '已完成', subtitle: '感谢您的购买' },
+  COMPLETED: { title: '已完成', subtitle: '感谢您的购买，期待再次光临' },
   RESHIP: { title: '补发中', subtitle: '包裹正在揽收，请耐心等待' },
 };
 
+const EDITABLE_STATUSES = new Set(['PENDING_PAY', 'PENDING_SHIP', 'OUT_WAREHOUSE']);
+
 function maskPhone(phone: string) {
   return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
 }
 
+function formatMoney(amount: number) {
+  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
 function formatDateTime(value: string) {
   const d = new Date(value);
   if (Number.isNaN(d.getTime())) return value;
@@ -63,13 +79,38 @@ function formatDateTime(value: string) {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 }
 
-function reshipTimelineStep(status: string, index: number): 'done' | 'active' | 'pending' {
+function progressActiveIndex(status: string) {
-  if (status === 'COMPLETED') return 'done';
+  switch (status) {
-  let activeIndex = 1;
+    case 'PENDING_PAY':
-  if (['SHIPPING', 'PENDING_RECEIVE'].includes(status)) activeIndex = 2;
+      return 0;
-  if (index < activeIndex) return 'done';
+    case 'PENDING_SHIP':
-  if (index === activeIndex) return 'active';
+      return 1;
-  return 'pending';
+    case 'OUT_WAREHOUSE':
+      return 1;
+    case 'SHIPPING':
+      return 2;
+    case 'PENDING_RECEIVE':
+      return 3;
+    case 'COMPLETED':
+      return 4;
+    default:
+      return 0;
+  }
+}
+
+function deliveryProviderLabel(provider?: string) {
+  if (!provider || provider === 'MOCK' || provider === 'XIAOFEIXIA') return '小飞侠配送';
+  return provider;
+}
+
+function fullReceiverAddress(order: Order) {
+  const region = [order.receiverProvince, order.receiverCity, order.receiverDistrict]
+    .filter(Boolean)
+    .join('');
+  if (region && order.receiverAddress.startsWith(region)) {
+    return order.receiverAddress;
+  }
+  return `${region}${order.receiverAddress}`;
 }
 
 export default function OrderDetailPage() {
@@ -78,168 +119,278 @@ export default function OrderDetailPage() {
   const navigate = useNavigate();
   const [order, setOrder] = useState<Order | null>(null);
   const [showCs, setShowCs] = useState(false);
-
+  const [copyHint, setCopyHint] = useState('');
-  useEffect(() => {
+  const [confirming, setConfirming] = useState(false);
-    if (id) request<Order>('USER_H5', `/trade/orders/${id}`).then(setOrder);
-  }, [id]);
 
   const isReship = order?.orderType === 'RESHIPMENT' || params.get('type') === 'reship';
 
+  async function loadOrder() {
+    if (!id) return;
+    const data = await request<Order>('USER_H5', `/trade/orders/${id}`);
+    setOrder(data);
+  }
+
+  useEffect(() => {
+    loadOrder().catch(() => {});
+  }, [id]);
+
   const banner = useMemo(() => {
     if (!order) return { title: '', subtitle: '' };
     if (isReship) return STATUS_BANNER.RESHIP;
     return STATUS_BANNER[order.status] ?? { title: order.status, subtitle: '' };
   }, [order, isReship]);
 
+  const activeProgress = order ? progressActiveIndex(order.status) : 0;
   const item = order?.items?.[0];
   const productImage = item?.productImage || STITCH_ORDER_PRODUCT_IMAGE;
-  const placedAt = order?.statusLogs?.find((l) => l.toStatus === 'PENDING_SHIP')?.createdAt
+  const canEditAddress = order ? EDITABLE_STATUSES.has(order.status) : false;
-    ?? order?.createdAt
+  const canConfirmReceive = order?.status === 'PENDING_RECEIVE' && !isReship;
-    ?? '';
+  const productTotal = Number(order?.productAmount ?? order?.payAmount ?? 0);
+  const freightTotal = Number(order?.freightAmount ?? 0);
+
+  async function copyOrderNo() {
+    if (!order) return;
+    try {
+      await navigator.clipboard.writeText(order.orderNo);
+      setCopyHint('已复制');
+      window.setTimeout(() => setCopyHint(''), 2000);
+    } catch {
+      setCopyHint('复制失败');
+    }
+  }
+
+  async function confirmReceive() {
+    if (!id || !canConfirmReceive) return;
+    setConfirming(true);
+    try {
+      const updated = await request<Order>('USER_H5', `/trade/orders/${id}/confirm-receive`, {
+        method: 'POST',
+      });
+      setOrder(updated);
+    } catch (e) {
+      window.alert(e instanceof Error ? e.message : '确认收货失败');
+    } finally {
+      setConfirming(false);
+    }
+  }
 
   if (!order) return <div className="empty">加载中...</div>;
 
   return (
-    <div className="order-detail-page">
+    <div className="order-detail-page order-detail-page--stitch">
-      <SubPageHeader title="我的订单" onBack={() => navigate(-1)} />
+      <header className="order-detail-topbar">
+        <button type="button" className="order-detail-topbar-btn" aria-label="返回" onClick={() => navigate(-1)}>
+          <span className="material-symbols-outlined">arrow_back_ios</span>
+        </button>
+        <h1 className="order-detail-topbar-title">杜康好客</h1>
+        <div className="order-detail-topbar-actions">
+          <button type="button" className="order-detail-topbar-btn" aria-label="分享" onClick={() => {}}>
+            <span className="material-symbols-outlined">share</span>
+          </button>
+          <button type="button" className="order-detail-topbar-btn" aria-label="更多" onClick={() => {}}>
+            <span className="material-symbols-outlined">more_horiz</span>
+          </button>
+        </div>
+      </header>
 
-      <main className="order-detail-main sub-page-body">
+      <main className="order-detail-main order-detail-main--stitch">
-        <section className="order-detail-banner">
+        <section className="order-detail-status-card">
-          <div className="order-detail-banner-text">
+          <div className="order-detail-status-deco" aria-hidden>
-            <h2>{banner.title}</h2>
+            <span className="material-symbols-outlined">local_shipping</span>
+          </div>
+          <div className="order-detail-status-body">
+            <div className="order-detail-status-head">
+              <span className="material-symbols-outlined filled">local_shipping</span>
+              <h2>{banner.title}</h2>
+            </div>
             <p>{banner.subtitle}</p>
           </div>
-          <span className="material-symbols-outlined order-detail-banner-icon">local_shipping</span>
         </section>
 
-        <div className="order-detail-cards">
+        {!isReship && (
-          {isReship && (
+          <section className="order-detail-card order-detail-progress-card">
-            <section className="order-detail-card">
+            <div className="order-detail-progress">
-              <h3 className="order-detail-section-title">物流动态</h3>
+              {PROGRESS_STEPS.map((step, index) => {
-              <div className="order-detail-timeline">
+                const done = index < activeProgress;
-                {RESHIP_TIMELINE.map((step, index) => {
+                const active = index === activeProgress;
-                  const state = reshipTimelineStep(order.status, index);
+                const pending = index > activeProgress;
-                  return (
+                return (
-                    <div
+                  <div
-                      key={step.key}
+                    key={step.label}
-                      className={`order-detail-step order-detail-step--${state}`}
+                    className={`order-detail-progress-step${active ? ' active' : ''}${done ? ' done' : ''}${pending ? ' pending' : ''}`}
-                    >
+                  >
-                      <div className="order-detail-step-dot">
+                    {index < PROGRESS_STEPS.length - 1 && (
-                        {state === 'done' && (
+                      <span className={`order-detail-progress-line${done ? ' done' : ''}`} aria-hidden />
-                          <span className="material-symbols-outlined">check</span>
+                    )}
-                        )}
+                    <div className="order-detail-progress-dot">
-                        {state === 'active' && <span className="order-detail-step-pulse" />}
+                      {done && <span className="material-symbols-outlined">check</span>}
-                        {state === 'pending' && <span className="order-detail-step-idle" />}
+                      {active && <span className="order-detail-progress-pulse" />}
-                      </div>
+                      {pending && <span className="order-detail-progress-idle" />}
-                      <div className="order-detail-step-body">
-                        <p className="order-detail-step-title">{step.title}</p>
-                        {index === 0 && placedAt && (
-                          <p className="order-detail-step-time">{formatDateTime(placedAt)}</p>
-                        )}
-                        {step.desc && state !== 'pending' && (
-                          <p className="order-detail-step-desc">{step.desc}</p>
-                        )}
-                        {step.desc && state === 'pending' && (
-                          <p className="order-detail-step-desc">{step.desc}</p>
-                        )}
-                      </div>
                     </div>
-                  );
+                    <span className="order-detail-progress-label">{step.label}</span>
-                })}
-              </div>
-            </section>
-          )}
-
-          {isReship && (
-            <section className="order-detail-card order-detail-reship-info">
-              <div className="order-detail-info-row">
-                <span>补发原因</span>
-                <span>{order.remark || '商品破损'}</span>
-              </div>
-              <div className="order-detail-info-row">
-                <span>关联原订单</span>
-                {order.originOrderId ? (
-                  <Link to={`/orders/${order.originOrderId}`} className="order-detail-origin-link">
-                    查看原订单
-                  </Link>
-                ) : (
-                  <span className="order-detail-origin-link">DK20231005002</span>
-                )}
-              </div>
-            </section>
-          )}
-
-          {item && (
-            <section className="order-detail-card">
-              <div className="order-detail-product">
-                <div className="order-detail-product-thumb">
-                  <AppImage
-                    src={productImage}
-                    alt={item.productName}
-                    wrapperClassName="app-image--fill"
-                  />
-                </div>
-                <div className="order-detail-product-info">
-                  <div>
-                    <h4 className="order-detail-product-name">{item.productName}</h4>
-                    <p className="order-detail-product-spec">{item.productSpec}</p>
                   </div>
-                  <div className="order-detail-product-meta">
+                );
-                    <span className="order-detail-product-price">
+              })}
-                      ¥{isReship ? '0.00' : Number(item.unitPrice).toFixed(2)}
-                    </span>
-                    <span className="order-detail-product-qty">x{item.quantity}</span>
-                  </div>
-                </div>
-              </div>
-              {Number(order.benefitAmount) > 0 && (
-                <div className="order-detail-benefit-row">
-                  <div className="order-detail-benefit-left">
-                    <span className="order-detail-benefit-badge">
-                      ¥{order.benefitAmount}好客权益
-                    </span>
-                    <span className="order-detail-benefit-note">随单赠送</span>
-                  </div>
-                  <span className="material-symbols-outlined order-detail-benefit-info">info</span>
-                </div>
-              )}
-            </section>
-          )}
-
-          <section className="order-detail-card">
-            <div className="order-detail-address-head">
-              <span className="material-symbols-outlined fill-icon">location_on</span>
-              <h3>收货信息</h3>
-            </div>
-            <div className="order-detail-address-body">
-              <div className="order-detail-address-row">
-                <span className="order-detail-address-name">{order.receiverName}</span>
-                <span>{maskPhone(order.receiverPhone)}</span>
-              </div>
-              <p>{order.receiverAddress}</p>
             </div>
           </section>
+        )}
 
-          {!isReship && (
+        {isReship && (
-            <section className="order-detail-card order-detail-meta">
+          <section className="order-detail-card order-detail-reship-info">
-              <div className="order-detail-info-row">
+            <div className="order-detail-kv">
-                <span>订单号</span>
+              <span>补发原因</span>
-                <span className="order-detail-order-no">{order.orderNo}</span>
+              <span>{order.remark || '商品破损'}</span>
+            </div>
+            <div className="order-detail-kv">
+              <span>关联原订单</span>
+              {order.originOrderId ? (
+                <Link to={`/orders/${order.originOrderId}`} className="order-detail-link">
+                  查看原订单
+                </Link>
+              ) : (
+                <span>—</span>
+              )}
+            </div>
+          </section>
+        )}
+
+        {item && (
+          <section className="order-detail-card">
+            <div className="order-detail-product">
+              <div className="order-detail-product-thumb">
+                <AppImage src={productImage} alt={item.productName} wrapperClassName="app-image--fill" />
               </div>
-              <div className="order-detail-info-row">
+              <div className="order-detail-product-info">
+                <div>
+                  <h3 className="order-detail-product-name">{item.productName}</h3>
+                  <p className="order-detail-product-spec">规格：{item.productSpec}</p>
+                </div>
+                <div className="order-detail-product-meta">
+                  <span className="order-detail-product-price">
+                    <small>¥</small>
+                    {formatMoney(isReship ? 0 : Number(item.unitPrice)).replace('.00', '')}
+                  </span>
+                  <span className="order-detail-product-qty">x{item.quantity}</span>
+                </div>
+              </div>
+            </div>
+
+            {Number(order.benefitAmount) > 0 && !isReship && (
+              <div className="order-detail-benefit-panel">
+                <div className="order-detail-benefit-panel-left">
+                  <div className="order-detail-benefit-icon">
+                    <span className="material-symbols-outlined filled">confirmation_number</span>
+                  </div>
+                  <div>
+                    <div className="order-detail-benefit-amount">
+                      <span>¥{Math.round(Number(order.benefitAmount))}</span>
+                      <span>好客权益</span>
+                    </div>
+                    <p className="order-detail-benefit-sub">全城100+餐厅通用</p>
+                  </div>
+                </div>
+                <button type="button" className="order-detail-benefit-use" onClick={() => navigate('/redeem')}>
+                  去使用
+                </button>
+              </div>
+            )}
+          </section>
+        )}
+
+        <section className="order-detail-card">
+          <div className="order-detail-card-head">
+            <h3>
+              <span className="material-symbols-outlined">location_on</span>
+              收货信息
+            </h3>
+            {canEditAddress && id && (
+              <button
+                type="button"
+                className="order-detail-edit-btn"
+                onClick={() => navigate(buildOrderAddressSelectUrl(id))}
+              >
+                <span className="material-symbols-outlined">edit</span>
+                修改
+              </button>
+            )}
+          </div>
+          <div className="order-detail-kv-list">
+            <div className="order-detail-kv">
+              <span>收货人</span>
+              <span>
+                {order.receiverName} {maskPhone(order.receiverPhone)}
+              </span>
+            </div>
+            <div className="order-detail-kv order-detail-kv--address">
+              <span>收货地址</span>
+              <span>{fullReceiverAddress(order)}</span>
+            </div>
+            <div className="order-detail-kv">
+              <span>配送方式</span>
+              <span>{deliveryProviderLabel(order.delivery?.provider)}</span>
+            </div>
+          </div>
+        </section>
+
+        {!isReship && (
+          <section className="order-detail-card">
+            <h3 className="order-detail-card-title">
+              <span className="material-symbols-outlined">info</span>
+              订单信息
+            </h3>
+            <div className="order-detail-kv-list order-detail-kv-list--bordered">
+              <div className="order-detail-kv">
+                <span>订单编号</span>
+                <span className="order-detail-kv-inline">
+                  <span className="order-detail-order-no">{order.orderNo}</span>
+                  <button type="button" className="order-detail-copy-btn" onClick={copyOrderNo}>
+                    {copyHint || '复制'}
+                  </button>
+                </span>
+              </div>
+              <div className="order-detail-kv">
+                <span>创建时间</span>
+                <span>{formatDateTime(order.createdAt)}</span>
+              </div>
+              <div className="order-detail-kv">
+                <span>支付方式</span>
+                <span>{order.payment?.status === 'SUCCESS' ? '微信支付' : '—'}</span>
+              </div>
+            </div>
+            <div className="order-detail-summary">
+              <div className="order-detail-kv order-detail-kv--muted">
+                <span>商品总额</span>
+                <span>¥{formatMoney(productTotal)}</span>
+              </div>
+              <div className="order-detail-kv order-detail-kv--muted">
+                <span>运费</span>
+                <span>¥{formatMoney(freightTotal)}</span>
+              </div>
+              <div className="order-detail-kv order-detail-kv--total">
                 <span>实付金额</span>
-                <span className="order-detail-pay-amount">¥{order.payAmount}</span>
+                <span className="order-detail-pay-total">¥{formatMoney(Number(order.payAmount))}</span>
               </div>
-            </section>
+            </div>
-          )}
+          </section>
-        </div>
+        )}
       </main>
 
-      <footer className="order-detail-footer">
+      <footer className="order-detail-actionbar">
-        <button type="button" className="order-detail-cs-btn" onClick={() => setShowCs(true)}>
+        <button type="button" className="order-detail-action-outline" onClick={() => setShowCs(true)}>
-          <span className="material-symbols-outlined">support_agent</span>
+          <span className="material-symbols-outlined">headset_mic</span>
           联系客服
         </button>
+        {canConfirmReceive && (
+          <button
+            type="button"
+            className="order-detail-action-primary"
+            disabled={confirming}
+            onClick={confirmReceive}
+          >
+            <span className="material-symbols-outlined">inventory</span>
+            {confirming ? '提交中...' : '确认收货'}
+          </button>
+        )}
       </footer>
 
       {showCs && (

apps/h5-user/src/styles.css

@@ -3678,6 +3678,530 @@
   font-size: 20px;
 }
 
+/* ── 订单详情 Stitch 版（user/40 支持修改地址） ── */
+.order-detail-page--stitch {
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
+}
+
+.order-detail-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: 64px;
+  padding: 0 var(--space-page);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-surface);
+  box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
+}
+
+.order-detail-topbar-title {
+  flex: 1;
+  margin-left: 8px;
+  font-family: var(--font-headline);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-heritage-red);
+}
+
+.order-detail-topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.order-detail-topbar-btn {
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--color-on-surface-variant);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.order-detail-topbar-btn .material-symbols-outlined {
+  font-size: 22px;
+}
+
+.order-detail-main--stitch {
+  padding: var(--space-md) var(--space-page) 24px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.order-detail-status-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  background: var(--color-heritage-red);
+  padding: 24px;
+  color: var(--color-on-primary);
+  box-shadow: 0 8px 24px rgba(166, 29, 36, 0.15);
+}
+
+.order-detail-status-deco {
+  position: absolute;
+  right: -40px;
+  top: -40px;
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.order-detail-status-deco .material-symbols-outlined {
+  font-size: 120px;
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+.order-detail-status-body {
+  position: relative;
+  z-index: 1;
+}
+
+.order-detail-status-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.order-detail-status-head h2 {
+  font-family: var(--font-headline);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.order-detail-status-body p {
+  font-size: 14px;
+  line-height: 20px;
+  opacity: 0.9;
+}
+
+.order-detail-progress-card {
+  padding: 16px 8px 12px !important;
+}
+
+.order-detail-progress {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.order-detail-progress-step {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+}
+
+.order-detail-progress-line {
+  position: absolute;
+  top: 14px;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--color-surface-container-highest);
+  z-index: 0;
+}
+
+.order-detail-progress-line.done {
+  background: var(--color-heritage-red);
+}
+
+.order-detail-progress-dot {
+  position: relative;
+  z-index: 1;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-container-highest);
+}
+
+.order-detail-progress-step.done .order-detail-progress-dot {
+  background: var(--color-heritage-red);
+  color: var(--color-on-primary);
+}
+
+.order-detail-progress-step.done .order-detail-progress-dot .material-symbols-outlined {
+  font-size: 16px;
+  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
+}
+
+.order-detail-progress-step.active .order-detail-progress-dot {
+  background: var(--color-heritage-red);
+  box-shadow: 0 0 0 4px var(--color-primary-fixed, #ffdad7);
+}
+
+.order-detail-progress-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #fff;
+  animation: order-step-pulse 1.5s ease-in-out infinite;
+}
+
+.order-detail-progress-idle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-subtle-gray);
+}
+
+.order-detail-progress-label {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--color-subtle-gray);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.order-detail-progress-step.done .order-detail-progress-label,
+.order-detail-progress-step.active .order-detail-progress-label {
+  color: var(--color-on-surface);
+}
+
+.order-detail-progress-step.active .order-detail-progress-label {
+  color: var(--color-heritage-red);
+  font-weight: 600;
+}
+
+.order-detail-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.order-detail-card-head h3,
+.order-detail-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-headline);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-on-surface);
+  margin: 0 0 16px;
+}
+
+.order-detail-card-head h3 {
+  margin-bottom: 0;
+}
+
+.order-detail-card-head .material-symbols-outlined,
+.order-detail-card-title .material-symbols-outlined {
+  font-size: 20px;
+  color: var(--color-on-surface-variant);
+}
+
+.order-detail-edit-btn {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-heritage-red);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.order-detail-edit-btn .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.order-detail-kv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.order-detail-kv-list--bordered {
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(227, 226, 224, 0.6);
+}
+
+.order-detail-kv {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.order-detail-kv > span:first-child {
+  color: var(--color-on-surface-variant);
+  flex-shrink: 0;
+}
+
+.order-detail-kv > span:last-child,
+.order-detail-kv > a {
+  font-weight: 500;
+  color: var(--color-on-surface);
+  text-align: right;
+}
+
+.order-detail-kv--address > span:last-child {
+  max-width: 68%;
+}
+
+.order-detail-kv--muted {
+  font-size: 12px;
+}
+
+.order-detail-kv--muted > span {
+  color: var(--color-on-surface-variant) !important;
+  font-weight: 400 !important;
+}
+
+.order-detail-kv--total {
+  padding-top: 8px;
+  align-items: baseline;
+}
+
+.order-detail-kv--total > span:first-child {
+  font-weight: 700;
+  color: var(--color-on-surface);
+}
+
+.order-detail-kv-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.order-detail-copy-btn {
+  border: 1px solid rgba(166, 29, 36, 0.3);
+  background: none;
+  color: var(--color-heritage-red);
+  font-size: 10px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.order-detail-summary {
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.order-detail-pay-total {
+  font-family: var(--font-headline);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-heritage-red) !important;
+}
+
+.order-detail-benefit-panel {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: rgba(255, 191, 0, 0.1);
+  border: 1px solid rgba(255, 191, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.order-detail-benefit-panel-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.order-detail-benefit-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-aged-amber, #ffbf00);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.order-detail-benefit-amount {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  font-family: var(--font-headline);
+  font-weight: 600;
+  color: var(--color-on-secondary-fixed-variant, #574500);
+}
+
+.order-detail-benefit-amount span:first-child {
+  font-size: 18px;
+}
+
+.order-detail-benefit-amount span:last-child {
+  font-size: 12px;
+}
+
+.order-detail-benefit-sub {
+  margin-top: 2px;
+  font-size: 10px;
+  color: var(--color-on-secondary-fixed-variant, #574500);
+  opacity: 0.7;
+}
+
+.order-detail-benefit-use {
+  border: none;
+  background: var(--color-aged-amber, #ffbf00);
+  color: var(--color-on-secondary-fixed-variant, #574500);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 8px 16px;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.order-detail-link {
+  color: var(--color-heritage-red);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.order-detail-actionbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  gap: 16px;
+  padding: 16px var(--space-page) calc(env(safe-area-inset-bottom, 0px) + 16px);
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 -4px 20px rgba(166, 29, 36, 0.05);
+}
+
+.order-detail-action-outline,
+.order-detail-action-primary {
+  height: 48px;
+  border-radius: var(--radius-lg);
+  font-family: var(--font-headline);
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.order-detail-action-outline {
+  flex: 1;
+  border: 1px solid var(--color-heritage-red);
+  background: transparent;
+  color: var(--color-heritage-red);
+}
+
+.order-detail-action-primary {
+  flex: 1.5;
+  border: none;
+  background: var(--color-heritage-red);
+  color: var(--color-on-primary);
+  box-shadow: 0 4px 12px rgba(166, 29, 36, 0.2);
+}
+
+.order-detail-action-primary:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.order-address-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  background: rgba(26, 26, 26, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-page);
+}
+
+.order-address-modal {
+  width: 100%;
+  max-width: 400px;
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--shadow-card);
+}
+
+.order-address-modal-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-heritage-red);
+  margin-bottom: 16px;
+}
+
+.order-address-modal-head h3 {
+  font-family: var(--font-headline);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.order-address-modal-body {
+  background: var(--color-surface-container);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-on-surface-variant);
+}
+
+.order-address-modal-target {
+  margin-top: 8px;
+  color: var(--color-on-surface);
+  font-weight: 500;
+}
+
+.order-address-modal-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.order-address-modal-actions button {
+  flex: 1;
+  height: 44px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-outline-variant);
+  background: var(--color-card);
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.order-address-modal-actions button.primary {
+  border: none;
+  background: var(--color-heritage-red);
+  color: var(--color-on-primary);
+  font-weight: 600;
+}
+
 /* ── 我的 - 个人中心（stitch user/18） ── */
 .mine-page {
   min-height: 100vh;

server/dukang-api/src/modules/trade/trade.controller.ts

@@ -46,6 +46,11 @@ export class TradeController {
   ) {
     return this.tradeService.updateAddress(user.actorId, BigInt(id), body);
   }
+
+  @Post(':id/confirm-receive')
+  confirmReceive(@CurrentUser() user: AuthUser, @Param('id') id: string) {
+    return this.tradeService.confirmReceive(user.actorId, BigInt(id));
+  }
 }
 
 @Controller('partner/orders')

server/dukang-api/src/modules/trade/trade.service.ts

@@ -247,6 +247,16 @@ export class TradeService {
     return serializeBigInt(updated);
   }
 
+  async confirmReceive(userId: bigint, orderId: bigint) {
+    const order = await this.prisma.order.findFirst({ where: { id: orderId, userId } });
+    if (!order) throw new NotFoundException('订单不存在');
+    if (order.status !== 'PENDING_RECEIVE') {
+      throw new BadRequestException('当前状态不可确认收货');
+    }
+    await this.applyStatusTransition(order.id, order.status, 'COMPLETED', 'USER');
+    return this.getOrder(userId, orderId);
+  }
+
   async listPartnerOrders(partnerAccountId: bigint, page = 1, pageSize = 20) {
     const account = await this.prisma.partnerAccount.findUniqueOrThrow({
       where: { id: partnerAccountId },
@@ -296,7 +306,12 @@ export class TradeService {
     return this.getPartnerOrder(partnerAccountId, orderId);
   }
 
-  async applyStatusTransition(orderId: bigint, fromStatus: string, targetStatus: string) {
+  async applyStatusTransition(
+    orderId: bigint,
+    fromStatus: string,
+    targetStatus: string,
+    operator = 'MOCK',
+  ) {
     const order = await this.prisma.order.findUnique({ where: { id: orderId } });
     if (!order) return;
     const currentStatus = fromStatus || order.status;
@@ -324,7 +339,7 @@ export class TradeService {
           orderId,
           fromStatus: currentStatus,
           toStatus: targetStatus,
-          operator: 'MOCK',
+          operator,
         },
       });
     });