确定订单页修改

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

@@ -70,6 +70,7 @@ export default function OrderConfirmPage() {
   const [addresses, setAddresses] = useState<Address[]>([]);
   const [addressId, setAddressId] = useState(params.get('addressId') || '');
   const [preview, setPreview] = useState<OrderPreview | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
   const [loading, setLoading] = useState(false);
   const [msg, setMsg] = useState('');
 
@@ -104,13 +105,35 @@ export default function OrderConfirmPage() {
   }, [refreshProfile]);
 
   useEffect(() => {
-    if (!productId || !addressId) return;
+    if (!productId) return;
+    let cancelled = false;
+    setPreviewLoading(true);
+    const body: { productId: string; quantity: number; addressId?: string } = {
+      productId,
+      quantity,
+    };
+    if (addressId) body.addressId = addressId;
+
     request<OrderPreview>('USER_H5', '/trade/orders/preview', {
       method: 'POST',
-      body: JSON.stringify({ productId, quantity, addressId }),
+      body: JSON.stringify(body),
     })
-      .then(setPreview)
-      .catch((e) => setMsg(e instanceof Error ? e.message : String(e)));
+      .then((data) => {
+        if (!cancelled) setPreview(data);
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setPreview(null);
+          setMsg(e instanceof Error ? e.message : String(e));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setPreviewLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
   }, [productId, quantity, addressId]);
 
   function updateQuantity(next: number) {
@@ -331,9 +354,13 @@ export default function OrderConfirmPage() {
               <span className="order-confirm-row-label">配送方式</span>
               <div className="order-confirm-delivery-value">
                 <p className="order-confirm-row-value">
-                  {isCross ? '物流配送' : '小飞侠配送'}
+                  {!addressId
+                    ? '选择地址后确认'
+                    : isCross
+                      ? '物流配送'
+                      : '小飞侠配送'}
                 </p>
-                {!isCross && (
+                {addressId && !isCross && (
                   <p className="order-confirm-delivery-hint">预计24小时内送达</p>
                 )}
               </div>
@@ -358,10 +385,14 @@ export default function OrderConfirmPage() {
           </>
         )}
 
-        {!preview && productId && addressId && (
+        {previewLoading && !preview && productId && (
           <div className="order-confirm-loading">加载订单信息...</div>
         )}
 
+        {!previewLoading && !preview && productId && (
+          <div className="order-confirm-loading">无法加载商品信息</div>
+        )}
+
         {msg && <p className="order-confirm-msg">{msg}</p>}
       </main>
 
@@ -376,10 +407,10 @@ export default function OrderConfirmPage() {
           <button
             type="button"
             className="order-confirm-pay-btn"
-            disabled={loading || !preview}
+            disabled={loading || !preview || !addressId}
             onClick={submit}
           >
-            {loading ? '支付中...' : '微信支付'}
+            {loading ? '支付中...' : !addressId ? '请选择地址' : '微信支付'}
           </button>
         </div>
       </footer>