feat(trade): add on-site pickup order flow

Product flag, ON_SITE_PICKUP delivery, mini confirm/receive pages; pay skips warehouse auto-advance.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-web/src/pages/ProductsPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
   Button, Descriptions, Divider, Drawer, Form, Input, InputNumber, Modal, Popconfirm, Select, Space,
-  Table, Tabs, Tag, Typography, message,
+  Switch, Table, Tabs, Tag, Typography, message,
 } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
@@ -31,6 +31,7 @@ type Row = {
   benefitAmount: number;
   status: string;
   sortOrder: number;
+  allowOnSitePickup?: boolean;
   mainImageUrl?: string | null;
   carouselUrls?: string[];
   detailImageUrls?: string[];
@@ -49,6 +50,7 @@ type ProductFormValues = {
   benefitAmount?: number;
   status?: string;
   sortOrder?: number;
+  allowOnSitePickup?: boolean;
   coverUrl?: string;
   carouselUrls?: string[];
   detailImageUrls?: string[];
@@ -100,6 +102,7 @@ function buildProductPayload(v: ProductFormValues) {
     benefitAmount: v.benefitAmount,
     status: v.status,
     sortOrder: v.sortOrder,
+    allowOnSitePickup: !!v.allowOnSitePickup,
     coverUrl: v.coverUrl,
     carouselUrls,
     detailImageUrls,
@@ -217,6 +220,9 @@ function BaseInfoFields({ mode }: { mode: 'create' | 'edit' }) {
       <Form.Item name="sortOrder" label="排序">
         <InputNumber min={0} style={{ width: '100%' }} />
       </Form.Item>
+      <Form.Item name="allowOnSitePickup" label="允许现场取货" valuePropName="checked">
+        <Switch checkedChildren="开" unCheckedChildren="关" />
+      </Form.Item>
       <Form.Item name="coverUrl" label="封面">
         <OssUpload bizType="COVER" mediaType="IMAGE" />
       </Form.Item>
@@ -266,6 +272,12 @@ export default function ProductsPage() {
     { title: '售价', dataIndex: 'price', width: 80, render: (v) => `¥${v}` },
     { title: '权益额', dataIndex: 'benefitAmount', width: 80, render: (v) => `¥${v}` },
     { title: '状态', dataIndex: 'status', width: 80, render: (s) => <Tag>{PRODUCT_STATUS_LABELS[s] || s}</Tag> },
+    {
+      title: '现场取货',
+      dataIndex: 'allowOnSitePickup',
+      width: 90,
+      render: (v: boolean) => (v ? <Tag color="green">允许</Tag> : <Tag>否</Tag>),
+    },
     { title: '排序', dataIndex: 'sortOrder', width: 60 },
     { title: '创建', dataIndex: 'createdAt', width: 160, render: fmtTime },
     {
@@ -357,7 +369,7 @@ export default function ProductsPage() {
         void reload();
       }} width={720}>
         <Form form={createForm} layout="vertical" initialValues={{
-          aromaType: 'QINGXIANG', status: 'DRAFT', sortOrder: 0,
+          aromaType: 'QINGXIANG', status: 'DRAFT', sortOrder: 0, allowOnSitePickup: false,
           carouselUrls: [''], detailImageUrls: [''],
           features: [{ icon: 'water_drop', title: '', desc: '' }],
         }}>

apps/mini-user/src/app.config.ts

@@ -7,9 +7,11 @@ export default defineAppConfig({
     'pages/product-detail/index',
     'pages/store-detail/index',
     'pages/order-confirm/index',
+    'pages/order-confirm-pickup/index',
     'pages/pay/index',
     'pages/orders/index',
     'pages/order-detail/index',
+    'pages/pickup-receive/index',
     'pages/addresses/index',
     'pages/address-edit/index',
     'pages/customer-service/index',

apps/mini-user/src/pages/home/index.tsx

@@ -6,7 +6,9 @@ import TabMainHeader from '../../components/TabMainHeader';
 import CouponBadge from '../../components/CouponBadge';
 import ProductCarousel from '../../components/ProductCarousel';
 import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
-import { request, toast } from '../../lib/api';
+import { goLogin } from '../../lib/auth-nav';
+import { isLoggedIn, request, toast } from '../../lib/api';
+import { ensurePayReady } from '../../lib/pay-ready';
 import { capturePromoSceneAndTouchScan } from '../../lib/promo';
 import { getProductImages } from '../../lib/product-images';
 import { getCityCodeForCatalog, resolveUserCity } from '../../lib/user-location';
@@ -19,6 +21,7 @@ type Product = {
   mainImageUrl?: string | null;
   carouselUrls?: string[] | null;
   aromaType: string;
+  allowOnSitePickup?: boolean;
 };
 
 const AROMA_TABS = [
@@ -95,6 +98,17 @@ export default function HomePage() {
     Taro.navigateTo({ url: `/pages/product-detail/index?id=${id}` });
   }
 
+  async function goOnSitePickup(productId: string) {
+    const returnPath = `/pages/order-confirm-pickup/index?productId=${productId}&qty=1`;
+    if (!isLoggedIn()) {
+      goLogin(returnPath);
+      return;
+    }
+    const ready = await ensurePayReady(returnPath);
+    if (!ready) return;
+    Taro.navigateTo({ url: returnPath });
+  }
+
   const filtered = products.filter((p) => p.aromaType === tab);
 
   return (
@@ -140,6 +154,16 @@ export default function HomePage() {
                   </View>
                 </View>
                 <View className="home-product-actions">
+                  {p.allowOnSitePickup ? (
+                    <Text
+                      className="home-pickup-btn"
+                      onClick={() => {
+                        void goOnSitePickup(p.id);
+                      }}
+                    >
+                      现场取货
+                    </Text>
+                  ) : null}
                   <Text className="home-buy-btn" onClick={() => openProductDetail(p.id)}>
                     立即购买
                   </Text>

apps/mini-user/src/pages/order-confirm-pickup/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationStyle: 'custom',
+  navigationBarTitleText: '现场取货确认',
+});

apps/mini-user/src/pages/order-confirm-pickup/index.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useRef, useState } from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import PageShell from '../../components/PageShell';
+import SubPageHeader from '../../components/SubPageHeader';
+import { goLogin } from '../../lib/auth-nav';
+import { buildPayUrl } from '../../lib/checkout-nav';
+import { ensurePayReady } from '../../lib/pay-ready';
+import { fetchUserProfile } from '../../lib/pay-wechat';
+import { request } from '../../lib/api';
+import { getProductMainImage } from '../../lib/product-images';
+
+type PreviewProduct = {
+  id: string;
+  name: string;
+  spec?: string;
+  subtitle?: string;
+  price: number;
+  mainImageUrl?: string | null;
+  carouselUrls?: string[] | null;
+};
+
+type OrderPreview = {
+  product: PreviewProduct;
+  quantity: number;
+  deliveryType: string;
+  productAmount: number;
+  payAmount: number;
+  benefitAmount: number;
+  quantityOk?: boolean;
+  quantityMessage?: string | null;
+  minQty?: number;
+};
+
+export default function OrderConfirmPickupPage() {
+  const router = useRouter();
+  const productId = router.params.productId ?? '';
+  const [quantity, setQuantity] = useState(Math.max(1, Number(router.params.qty || 1)));
+  const [preview, setPreview] = useState<OrderPreview | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [msg, setMsg] = useState('');
+  const phonePromptSkipped = useRef(false);
+
+  useEffect(() => {
+    if (!productId) return;
+    let cancelled = false;
+    setPreviewLoading(true);
+    request<OrderPreview>('/trade/orders/preview', {
+      method: 'POST',
+      data: { productId, quantity, onSitePickup: true },
+    })
+      .then((data) => {
+        if (!cancelled) {
+          setPreview(data);
+          setMsg(data.quantityOk === false ? data.quantityMessage || '' : '');
+        }
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setPreview(null);
+          setMsg(e instanceof Error ? e.message : '加载失败');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setPreviewLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [productId, quantity]);
+
+  const minQty = preview?.minQty ?? 1;
+  const quantityOk = preview ? preview.quantityOk !== false && quantity >= minQty : false;
+  const canSubmit = !!preview && quantityOk && !loading && !previewLoading;
+
+  function updateQuantity(next: number) {
+    if (next < 1) return;
+    setQuantity(next);
+  }
+
+  async function doSubmit() {
+    const order = await request<{ id: string }>('/trade/orders', {
+      method: 'POST',
+      data: { productId, quantity, onSitePickup: true },
+    });
+    Taro.redirectTo({
+      url: buildPayUrl({
+        orderId: order.id,
+        productId,
+        qty: String(quantity),
+      }),
+    });
+  }
+
+  async function submit() {
+    if (!canSubmit) {
+      if (!quantityOk) setMsg(`现场取货至少购买 ${minQty} 瓶`);
+      return;
+    }
+
+    const returnPath = `/pages/order-confirm-pickup/index?productId=${productId}&qty=${quantity}`;
+
+    if (!phonePromptSkipped.current) {
+      try {
+        const profile = await fetchUserProfile();
+        const phoneBound =
+          !!profile.phoneVerified ||
+          (!!profile.phone && /^1[3-9]\d{9}$/.test(String(profile.phone)));
+        if (!phoneBound) {
+          const { confirm, cancel } = await Taro.showModal({
+            title: '建议绑定手机号',
+            content: '绑定后便于订单通知与售后联系；也可跳过，不绑定也能继续下单。',
+            confirmText: '去绑定',
+            cancelText: '暂不绑定',
+          });
+          if (confirm) {
+            goLogin(returnPath, { needPhone: '1' });
+            return;
+          }
+          if (cancel) {
+            phonePromptSkipped.current = true;
+          }
+        }
+      } catch {
+        /* 拉取档案失败不阻塞下单 */
+      }
+    }
+
+    const ready = await ensurePayReady(returnPath);
+    if (!ready) return;
+
+    setLoading(true);
+    setMsg('');
+    try {
+      await doSubmit();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '下单失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const productImage = preview?.product ? getProductMainImage(preview.product) : '';
+  const submitLabel = loading
+    ? '提交中…'
+    : !quantityOk
+      ? `至少购买 ${minQty} 瓶`
+      : '提交订单';
+
+  return (
+    <PageShell variant="sub" className="order-confirm-page" hasFixedFooter>
+      <SubPageHeader title="现场取货确认" />
+      <View className="sub-page-body">
+        <View className="order-card">
+          <Text className="order-card-title">取货方式</Text>
+          <Text className="u-muted">现场取货 · 无需填写收货地址 · 免运费</Text>
+        </View>
+
+        {preview ? (
+          <>
+            <View className="order-card">
+              <Text className="order-card-title">商品信息</Text>
+              <View className="order-product-row">
+                <View className="order-product-thumb">
+                  {productImage ? (
+                    <Image
+                      className="order-product-thumb-img"
+                      src={productImage}
+                      mode="aspectFill"
+                    />
+                  ) : null}
+                </View>
+                <View style={{ flex: 1 }}>
+                  <Text className="order-product-name">{preview.product.name}</Text>
+                  {preview.product.spec ? (
+                    <Text className="u-muted">{preview.product.spec}</Text>
+                  ) : null}
+                  <Text className="order-product-price">
+                    ¥{Number(preview.product.price).toFixed(2)}
+                  </Text>
+                </View>
+              </View>
+              <View className="order-qty-row">
+                <Text>购买数量</Text>
+                <View className="order-qty-controls">
+                  <View
+                    className={`order-qty-btn${quantity <= 1 ? ' order-qty-btn--disabled' : ''}`}
+                    onClick={() => updateQuantity(quantity - 1)}
+                  >
+                    <Text>−</Text>
+                  </View>
+                  <Text className="order-qty-value">{quantity}</Text>
+                  <View className="order-qty-btn" onClick={() => updateQuantity(quantity + 1)}>
+                    <Text>＋</Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+
+            <View className="order-card">
+              <Text className="order-card-title">费用明细</Text>
+              <View className="order-row">
+                <Text className="order-row-label">商品金额</Text>
+                <Text className="order-row-value">¥{Number(preview.productAmount).toFixed(2)}</Text>
+              </View>
+              <View className="order-row">
+                <Text className="order-row-label">好客权益</Text>
+                <Text className="order-row-value--price">¥{Number(preview.benefitAmount).toFixed(2)}</Text>
+              </View>
+              <View className="order-row">
+                <Text className="order-row-label">运费</Text>
+                <Text className="order-row-value">免运费</Text>
+              </View>
+            </View>
+          </>
+        ) : previewLoading ? (
+          <View className="u-empty">加载订单信息…</View>
+        ) : null}
+
+        {msg ? (
+          <Text className="u-muted" style={{ display: 'block', marginTop: 8 }}>
+            {msg}
+          </Text>
+        ) : null}
+      </View>
+      <View className="order-confirm-bar">
+        <View className="order-confirm-total">
+          <Text className="order-confirm-total-label">应付合计</Text>
+          <Text className="order-confirm-total-value">
+            ¥{preview ? Number(preview.payAmount).toFixed(2) : '—'}
+          </Text>
+        </View>
+        <View
+          className={`order-confirm-submit${canSubmit ? '' : ' order-confirm-submit--disabled'}`}
+          onClick={() => {
+            if (!canSubmit) return;
+            void submit();
+          }}
+        >
+          <Text>{submitLabel}</Text>
+        </View>
+      </View>
+    </PageShell>
+  );
+}

apps/mini-user/src/pages/order-detail/index.tsx

@@ -56,16 +56,6 @@ const STATUS_LABELS: Record<string, string> = {
   REFUNDED: '已退款',
 };
 
-/** 已付款未完成：可选现场取货并确认收货 */
-const ON_SITE_PICKUP_STATUSES = new Set([
-  'PENDING_SHIP',
-  'OUT_WAREHOUSE',
-  'SHIPPING',
-  'SHIPPED',
-  'PENDING_RECEIVE',
-  'DELIVERED',
-]);
-
 function fullReceiverAddress(order: OrderDetail) {
   const detail = (order.receiverAddress || '').trim();
   const region = [order.receiverProvince, order.receiverCity, order.receiverDistrict]
@@ -80,7 +70,6 @@ export default function OrderDetailPage() {
   const router = useRouter();
   const orderId = router.params.id ?? '';
   const [order, setOrder] = useState<OrderDetail | null>(null);
-  const [onSitePickup, setOnSitePickup] = useState(false);
   const [confirming, setConfirming] = useState(false);
 
   useEffect(() => {
@@ -92,13 +81,8 @@ export default function OrderDetailPage() {
 
   const isReship = !!order?.originOrderId;
   const canPay = !!order && order.status === 'PENDING_PAY' && !isReship;
-  const canOnSitePickup =
-    !!order && !isReship && ON_SITE_PICKUP_STATUSES.has(order.status || '');
   const canConfirmReceive =
-    !!order &&
-    !isReship &&
-    (['PENDING_RECEIVE', 'DELIVERED'].includes(order.status || '') ||
-      (onSitePickup && canOnSitePickup));
+    !!order && !isReship && ['PENDING_RECEIVE', 'DELIVERED'].includes(order.status || '');
 
   const item = order?.items?.[0];
   const productName = item?.productName || order?.productName || '杜康商品';
@@ -137,13 +121,9 @@ export default function OrderDetailPage() {
   async function confirmReceive() {
     if (!order || !canConfirmReceive || confirming) return;
 
-    const useOnSite =
-      onSitePickup || !['PENDING_RECEIVE', 'DELIVERED'].includes(order.status || '');
     const { confirm } = await Taro.showModal({
-      title: useOnSite ? '确认现场取货？' : '确认收货？',
-      content: useOnSite
-        ? '请确认您已在现场拿到商品。确认后订单将完成，好客权益即时可用，无法再安排配送。若尚未取到酒，请勿确认。'
-        : '请确认已收到商品。确认后订单将完成，好客权益可正常使用。',
+      title: '确认收货？',
+      content: '请确认已收到商品。确认后订单将完成，好客权益可正常使用。',
       confirmText: '确认收货',
       cancelText: '再想想',
     });
@@ -153,11 +133,10 @@ export default function OrderDetailPage() {
     try {
       const updated = await request<OrderDetail>(`/trade/orders/${order.id}/confirm-receive`, {
         method: 'POST',
-        data: { onSitePickup: useOnSite },
+        data: {},
       });
       setOrder(updated);
-      setOnSitePickup(false);
-      toast(useOnSite ? '现场取货已确认，订单完成' : '已确认收货');
+      toast('已确认收货');
     } catch (e) {
       toast(e instanceof Error ? e.message : '确认收货失败');
     } finally {
@@ -225,27 +204,6 @@ export default function OrderDetailPage() {
                 <Text className="u-muted">地址信息待完善</Text>
               )}
             </View>
-            {canOnSitePickup ? (
-              <View className="order-card">
-                <Text className="order-card-title">取货方式</Text>
-                <View
-                  className="order-pickup-option"
-                  onClick={() => setOnSitePickup((v) => !v)}
-                >
-                  <View
-                    className={`order-pickup-check${onSitePickup ? ' order-pickup-check--on' : ''}`}
-                  >
-                    {onSitePickup ? <Text className="order-pickup-check-mark">✓</Text> : null}
-                  </View>
-                  <View className="order-pickup-copy">
-                    <Text className="order-pickup-title">现场取货</Text>
-                    <Text className="order-pickup-desc">
-                      已在活动现场或门店拿到商品时勾选，确认后订单直接完成
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            ) : null}
             <View className="order-card">
               <Text className="order-card-title">订单信息</Text>
               <View className="order-row">
@@ -303,7 +261,7 @@ export default function OrderDetailPage() {
               className={`order-confirm-submit${confirming ? ' order-confirm-submit--disabled' : ''}`}
               onClick={confirming ? undefined : () => void confirmReceive()}
             >
-              {confirming ? '提交中…' : onSitePickup ? '确认现场取货' : '确认收货'}
+              {confirming ? '提交中…' : '确认收货'}
             </View>
           ) : null}
         </View>

apps/mini-user/src/pages/pay/index.tsx

@@ -29,6 +29,7 @@ export default function PayPage() {
   const [msg, setMsg] = useState('');
   const [orderNo, setOrderNo] = useState('');
   const [payAmount, setPayAmount] = useState('—');
+  const [deliveryType, setDeliveryType] = useState('');
 
   const returnPath = orderId
     ? `/pages/pay/index?orderId=${orderId}`
@@ -62,11 +63,15 @@ export default function PayPage() {
       setPayAmount('—');
       return;
     }
-    request<{ orderNo?: string; payAmount?: number | string; totalAmount?: number | string }>(
-      `/trade/orders/${orderId}`,
-    )
+    request<{
+      orderNo?: string;
+      payAmount?: number | string;
+      totalAmount?: number | string;
+      deliveryType?: string;
+    }>(`/trade/orders/${orderId}`)
       .then((order) => {
         setOrderNo(order.orderNo || '');
+        setDeliveryType(order.deliveryType || '');
         const amount = Number(order.payAmount ?? order.totalAmount ?? 0);
         if (Number.isFinite(amount) && amount > 0) {
           setPayAmount(amount.toFixed(2));
@@ -74,6 +79,7 @@ export default function PayPage() {
       })
       .catch((e) => {
         setOrderNo('');
+        setDeliveryType('');
         toast(e instanceof Error ? e.message : '加载订单失败');
       });
   }, [orderId]);
@@ -137,7 +143,11 @@ export default function PayPage() {
       } else {
         toast('支付成功', 'success');
       }
-      Taro.redirectTo({ url: '/pages/orders/index?tab=paid' });
+      if (deliveryType === 'ON_SITE_PICKUP') {
+        Taro.redirectTo({ url: `/pages/pickup-receive/index?id=${orderId}` });
+      } else {
+        Taro.redirectTo({ url: '/pages/orders/index?tab=paid' });
+      }
     } catch (e) {
       if (isWechatAuthRequiredError(e)) {
         setNeedsWechatAuth(true);

apps/mini-user/src/pages/pickup-receive/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationStyle: 'custom',
+  navigationBarTitleText: '确认收货',
+});

apps/mini-user/src/pages/pickup-receive/index.tsx

@@ -0,0 +1,137 @@
+import { useCallback, useState } from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import Taro, { useDidShow, useRouter } from '@tarojs/taro';
+import PageShell from '../../components/PageShell';
+import SubPageHeader from '../../components/SubPageHeader';
+import { request, toast } from '../../lib/api';
+import { getProductMainImage } from '../../lib/product-images';
+
+type OrderDetail = {
+  id: string;
+  orderNo?: string;
+  status?: string;
+  payAmount?: number | string;
+  productName?: string;
+  productSpec?: string;
+  quantity?: number;
+  product?: {
+    name?: string;
+    spec?: string;
+    mainImageUrl?: string | null;
+    carouselUrls?: string[] | null;
+  };
+  imageUrl?: string | null;
+  mainImageUrl?: string | null;
+};
+
+export default function PickupReceivePage() {
+  const router = useRouter();
+  const orderId = router.params.id ?? router.params.orderId ?? '';
+  const [order, setOrder] = useState<OrderDetail | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(() => {
+    if (!orderId) return;
+    setLoading(true);
+    request<OrderDetail>(`/trade/orders/${orderId}`)
+      .then((data) => setOrder(data))
+      .catch((e) => toast(e instanceof Error ? e.message : '加载失败'))
+      .finally(() => setLoading(false));
+  }, [orderId]);
+
+  useDidShow(() => {
+    load();
+  });
+
+  async function confirmReceive() {
+    if (!orderId || submitting) return;
+    setSubmitting(true);
+    try {
+      await request(`/trade/orders/${orderId}/confirm-receive`, {
+        method: 'POST',
+        data: {},
+      });
+      toast('确认收货成功', 'success');
+      setTimeout(() => {
+        Taro.redirectTo({ url: '/pages/orders/index?tab=done' });
+      }, 500);
+    } catch (e) {
+      toast(e instanceof Error ? e.message : '确认失败');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const name = order?.productName || order?.product?.name || '商品';
+  const spec = order?.productSpec || order?.product?.spec;
+  const image =
+    order?.mainImageUrl ||
+    order?.imageUrl ||
+    (order?.product ? getProductMainImage(order.product) : '') ||
+    '';
+  const amount = Number(order?.payAmount ?? 0);
+  const canConfirm = order?.status === 'PENDING_RECEIVE' || order?.status === 'DELIVERED';
+
+  return (
+    <PageShell variant="sub" className="order-confirm-page" hasFixedFooter>
+      <SubPageHeader title="确认收货" />
+      <View className="sub-page-body">
+        <View className="order-card">
+          <Text className="order-card-title">现场取货</Text>
+          <Text className="u-muted">请确认已在现场拿到商品后再点击确认收货</Text>
+        </View>
+
+        {loading && !order ? (
+          <View className="order-card">
+            <Text className="u-muted">加载中…</Text>
+          </View>
+        ) : null}
+
+        {order ? (
+          <>
+            <View className="order-card">
+              <View className="order-row">
+                <Text className="order-row-label">订单号</Text>
+                <Text className="order-row-value">{order.orderNo || '—'}</Text>
+              </View>
+              <View className="order-product-row" style={{ marginTop: 12 }}>
+                <View className="order-product-thumb">
+                  {image ? (
+                    <Image className="order-product-thumb-img" src={image} mode="aspectFill" />
+                  ) : null}
+                </View>
+                <View style={{ flex: 1 }}>
+                  <Text className="order-product-name">{name}</Text>
+                  {spec ? <Text className="u-muted">{spec}</Text> : null}
+                  <Text className="u-muted">×{order.quantity ?? 1}</Text>
+                </View>
+              </View>
+            </View>
+
+            <View className="order-card">
+              <View className="order-row">
+                <Text className="order-row-label">实付金额</Text>
+                <Text className="order-row-value order-pay-amount">
+                  ¥{Number.isFinite(amount) ? amount.toFixed(2) : '—'}
+                </Text>
+              </View>
+            </View>
+          </>
+        ) : null}
+      </View>
+      <View className="pay-bar">
+        <View
+          className="order-confirm-submit"
+          style={{ flex: 1, opacity: canConfirm && !submitting ? 1 : 0.6 }}
+          onClick={() => {
+            if (!canConfirm || submitting) return;
+            void confirmReceive();
+          }}
+        >
+          <Text>{submitting ? '提交中…' : canConfirm ? '确认收货' : '订单状态不可确认'}</Text>
+        </View>
+      </View>
+    </PageShell>
+  );
+}

apps/mini-user/src/styles/home.css

@@ -191,6 +191,20 @@
   padding: 0 var(--space-gutter) var(--space-gutter);
   display: flex;
   justify-content: flex-end;
+  gap: 8px;
+}
+
+.home-pickup-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border-radius: var(--radius-full);
+  background: #2e7d32;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
 }
 
 .home-buy-btn {

apps/mini-user/src/styles/order.css

@@ -73,58 +73,6 @@
   pointer-events: none;
 }
 
-.order-pickup-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.order-pickup-check {
-  width: 20px;
-  height: 20px;
-  margin-top: 2px;
-  flex-shrink: 0;
-  border: 1.5px solid var(--color-outline, #c8c4be);
-  border-radius: 4px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-}
-
-.order-pickup-check--on {
-  border-color: var(--color-primary, #8b1a1a);
-  background: var(--color-primary, #8b1a1a);
-}
-
-.order-pickup-check-mark {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.order-pickup-copy {
-  flex: 1;
-  min-width: 0;
-}
-
-.order-pickup-title {
-  display: block;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-on-surface);
-  margin-bottom: 4px;
-}
-
-.order-pickup-desc {
-  display: block;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-on-surface-variant, #78716c);
-}
-
 .order-card {
   background: var(--color-card);
   border-radius: var(--radius-lg);