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

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>
   );
 }