微信JSSDK对接，代下单支付

2026-08-02 11:49:35 +08:00
parent 50ba6e9c56
commit 09e732bfa3
32 changed files with 1223 additions and 218 deletions
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
  Alert,
  Button,
@@ -7,6 +7,7 @@ import {
  Input,
  InputNumber,
  Modal,
+  QRCode,
  Radio,
  Select,
  Space,
@@ -18,6 +19,8 @@ import type {
  PartnerProxyDeliveryMode,
  PartnerProxyOrderOptions,
  PartnerProxyOrderPreviewResult,
+  ProxyOrderCreateResponse,
+  ProxyOrderPayResponse,
 } from '@dukang/shared-types';
 import ChinaRegionCascader from './ChinaRegionCascader';
 import { parseRegionCodes } from '../lib/china-region';
@@ -29,6 +32,13 @@ type ProxyOrderModalProps = {
  onSuccess: (order: { id: string; orderNo: string }) => void;
 };

+type PayStatus = {
+  id: string;
+  orderNo: string;
+  status: string;
+  payStatus: string;
+};
+
 function fmtMoney(n: number) {
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
@@ -49,8 +59,22 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
  const [previewLoading, setPreviewLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);

+  const [step, setStep] = useState<'form' | 'pay'>('form');
+  const [created, setCreated] = useState<ProxyOrderCreateResponse | null>(null);
+  const [codeUrl, setCodeUrl] = useState<string | null>(null);
+  const [payLoading, setPayLoading] = useState(false);
+  const [mockConfirming, setMockConfirming] = useState(false);
+  const pollRef = useRef<number | null>(null);
+
  const region = useMemo(() => parseRegionCodes(regionCodes), [regionCodes]);

+  function stopPoll() {
+    if (pollRef.current != null) {
+      window.clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }
+
  useEffect(() => {
    if (!open) return;
    setLoadingOptions(true);
@@ -64,8 +88,8 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
  }, [open]);

  useEffect(() => {
-    if (!open || !productId || quantity < 1) {
-      setPreview(null);
+    if (!open || !productId || quantity < 1 || step !== 'form') {
+      if (step === 'form') setPreview(null);
      return;
    }
    const timer = window.setTimeout(() => {
@@ -85,9 +109,12 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
        .finally(() => setPreviewLoading(false));
    }, 300);
    return () => window.clearTimeout(timer);
-  }, [open, productId, quantity, deliveryMode, region?.city, region?.district]);
+  }, [open, productId, quantity, deliveryMode, region?.city, region?.district, step]);
+
+  useEffect(() => () => stopPoll(), []);

  function resetForm() {
+    stopPoll();
    setPhone('');
    setReceiverName('');
    setRegionCodes([]);
@@ -98,6 +125,11 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
    setAutoReceive(false);
    setPreview(null);
    setProductId(options?.products[0]?.id);
+    setStep('form');
+    setCreated(null);
+    setCodeUrl(null);
+    setPayLoading(false);
+    setMockConfirming(false);
  }

  function handleClose() {
@@ -120,6 +152,23 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
    return null;
  }

+  function startPoll(orderId: string) {
+    stopPoll();
+    pollRef.current = window.setInterval(() => {
+      void request<PayStatus>(`/admin/proxy-orders/${orderId}/pay-status`)
+        .then((st) => {
+          if (st.payStatus === 'PAID') {
+            stopPoll();
+            message.success(`支付成功：${st.orderNo}`);
+            const payload = { id: st.id, orderNo: st.orderNo };
+            resetForm();
+            onSuccess(payload);
+          }
+        })
+        .catch(() => undefined);
+    }, 2000);
+  }
+
  async function submit() {
    const err = validateForm();
    if (err) {
@@ -143,17 +192,46 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder

    setSubmitting(true);
    try {
-      const order = await request<{ id: string; orderNo: string }>('/admin/proxy-orders', {
+      const order = await request<ProxyOrderCreateResponse>('/admin/proxy-orders', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
-      message.success(`代下单成功：${order.orderNo}`);
-      resetForm();
-      onSuccess(order);
+      setCreated(order);
+      setStep('pay');
+      setPayLoading(true);
+      const pay = await request<ProxyOrderPayResponse>(`/admin/proxy-orders/${order.id}/pay`, {
+        method: 'POST',
+        body: JSON.stringify({ payMethod: 'NATIVE' }),
+      });
+      setCodeUrl(pay.codeUrl ?? null);
+      startPoll(order.id);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '下单失败');
+      setStep('form');
+      setCreated(null);
    } finally {
      setSubmitting(false);
+      setPayLoading(false);
+    }
+  }
+
+  async function handleMockConfirm() {
+    if (!created) return;
+    setMockConfirming(true);
+    try {
+      const st = await request<PayStatus>(`/admin/proxy-orders/${created.id}/pay/mock-confirm`, {
+        method: 'POST',
+        body: '{}',
+      });
+      stopPoll();
+      message.success(`支付成功：${st.orderNo}`);
+      const payload = { id: st.id, orderNo: st.orderNo };
+      resetForm();
+      onSuccess(payload);
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '模拟支付失败');
+    } finally {
+      setMockConfirming(false);
    }
  }

@@ -166,138 +244,178 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder

  return (
    <Modal
-      title="代下单"
+      title={step === 'pay' ? '代下单 · 待支付' : '代下单'}
      open={open}
      onCancel={handleClose}
      width={640}
      destroyOnClose
      footer={
-        <Space>
-          <Button onClick={handleClose}>取消</Button>
-          <Button type="primary" loading={submitting || loadingOptions} onClick={() => void submit()}>
-            确认代下单
-          </Button>
-        </Space>
+        step === 'pay' ? (
+          <Space>
+            <Button onClick={handleClose}>关闭</Button>
+            <Button type="primary" loading={mockConfirming} onClick={() => void handleMockConfirm()}>
+              模拟支付成功
+            </Button>
+          </Space>
+        ) : (
+          <Space>
+            <Button onClick={handleClose}>取消</Button>
+            <Button type="primary" loading={submitting || loadingOptions} onClick={() => void submit()}>
+              提交并收款
+            </Button>
+          </Space>
+        )
      }
    >
-      <Alert
-        type="info"
-        showIcon
-        style={{ marginBottom: 16 }}
-        message="线下已收款：提交后订单直接完成并发放好客权益"
-      />
-
-      <Form layout="vertical">
-        <Form.Item label="用户手机号" required>
-          <Input
-            placeholder="11 位手机号"
-            value={phone}
-            maxLength={11}
-            onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))}
+      {step === 'pay' && created ? (
+        <div style={{ textAlign: 'center' }}>
+          <Alert
+            type="info"
+            showIcon
+            style={{ marginBottom: 16, textAlign: 'left' }}
+            message={`订单 ${created.orderNo} 待支付 ¥${fmtMoney(created.payAmount)}，请扫码支付`}
+            description={
+              created.deliveryType === 'ON_SITE_PICKUP'
+                ? '支付完成后将进入现场提货闭环'
+                : '支付完成后将进入待发货，由总部履约发货'
+            }
          />
-        </Form.Item>
-
-        <Form.Item label="酒品" required>
-          <Select
-            showSearch
-            optionFilterProp="label"
-            loading={loadingOptions}
-            placeholder="选择商品"
-            value={productId}
-            onChange={setProductId}
-            options={(options?.products ?? []).map((p) => ({
-              value: p.id,
-              label: `${p.name} · ${p.spec} · ¥${fmtMoney(p.price)}`,
-            }))}
-          />
-        </Form.Item>
-
-        <Form.Item label="数量" required>
-          <InputNumber
-            min={1}
-            value={quantity}
-            onChange={(v) => setQuantity(Math.max(1, Number(v) || 1))}
-            style={{ width: '100%' }}
-          />
-        </Form.Item>
-
-        {(options?.promoCodes.length ?? 0) > 0 ? (
-          <Form.Item label="绑定推广码（选填）">
-            <Select
-              allowClear
-              placeholder="不绑定"
-              value={promoCodeId}
-              onChange={setPromoCodeId}
-              options={(options?.promoCodes ?? []).map((p) => ({
-                value: p.id,
-                label: `${p.code} · ${p.name}`,
-              }))}
-            />
-          </Form.Item>
-        ) : null}
-
-        <Form.Item label="履约方式" required>
-          <Radio.Group
-            value={deliveryMode}
-            onChange={(e) => {
-              setDeliveryMode(e.target.value);
-              if (e.target.value !== 'ADDRESS') setAutoReceive(false);
-            }}
-            options={[
-              { value: 'ADDRESS', label: '配送到址' },
-              { value: 'ON_SITE_PICKUP', label: '现场提货' },
-            ]}
-          />
-        </Form.Item>
-
-        {deliveryMode === 'ADDRESS' ? (
-          <>
-            <Form.Item label="收货人（选填）">
-              <Input
-                placeholder="默认：用户+手机尾号"
-                value={receiverName}
-                maxLength={32}
-                onChange={(e) => setReceiverName(e.target.value)}
-              />
-            </Form.Item>
-            <Form.Item label="省市区" required>
-              <ChinaRegionCascader value={regionCodes} onChange={setRegionCodes} />
-            </Form.Item>
-            <Form.Item label="详细地址" required>
-              <Input.TextArea
-                rows={2}
-                placeholder="街道门牌等"
-                value={addressDetail}
-                maxLength={256}
-                onChange={(e) => setAddressDetail(e.target.value)}
-              />
-            </Form.Item>
-            <Form.Item>
-              <Checkbox checked={autoReceive} onChange={(e) => setAutoReceive(e.target.checked)}>
-                同意自动收货（配送到址必选）
-              </Checkbox>
-            </Form.Item>
-          </>
-        ) : null}
-
-        <div style={{ background: '#fafafa', borderRadius: 8, padding: 12 }}>
-          <Typography.Text type="secondary">费用预览</Typography.Text>
-          {previewLoading ? (
-            <div>计算中…</div>
-          ) : preview ? (
-            <Space direction="vertical" size={2} style={{ width: '100%', marginTop: 8 }}>
-              <div>履约：{deliveryLabel}</div>
-              <div>商品金额：¥{fmtMoney(preview.productAmount)}</div>
-              <div>实付：¥{fmtMoney(preview.payAmount)}</div>
-              <div>好客权益：¥{fmtMoney(preview.benefitAmount)}</div>
+          {payLoading && !codeUrl ? (
+            <Typography.Text type="secondary">正在生成收款码…</Typography.Text>
+          ) : codeUrl ? (
+            <Space direction="vertical" size={12} align="center">
+              <QRCode value={codeUrl} size={200} />
+              <Typography.Text type="secondary">请使用微信扫一扫完成支付（本地可用下方模拟支付）</Typography.Text>
+              <Typography.Text type="secondary" style={{ fontSize: 12, wordBreak: 'break-all' }}>
+                {codeUrl}
+              </Typography.Text>
            </Space>
          ) : (
-            <div style={{ marginTop: 8 }}>
-              <Typography.Text type="secondary">请完善商品与数量</Typography.Text>
-            </div>
+            <Typography.Text type="danger">收款码生成失败，请关闭后重试</Typography.Text>
          )}
        </div>
-      </Form>
+      ) : (
+        <>
+          <Alert
+            type="info"
+            showIcon
+            style={{ marginBottom: 16 }}
+            message="提交后生成微信收款码，支付成功后发放好客权益；配送单进入待发货"
+          />
+
+          <Form layout="vertical">
+            <Form.Item label="用户手机号" required>
+              <Input
+                placeholder="11 位手机号"
+                value={phone}
+                maxLength={11}
+                onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))}
+              />
+            </Form.Item>
+
+            <Form.Item label="酒品" required>
+              <Select
+                showSearch
+                optionFilterProp="label"
+                loading={loadingOptions}
+                placeholder="选择商品"
+                value={productId}
+                onChange={setProductId}
+                options={(options?.products ?? []).map((p) => ({
+                  value: p.id,
+                  label: `${p.name} · ${p.spec} · ¥${fmtMoney(p.price)}`,
+                }))}
+              />
+            </Form.Item>
+
+            <Form.Item label="数量" required>
+              <InputNumber
+                min={1}
+                value={quantity}
+                onChange={(v) => setQuantity(Math.max(1, Number(v) || 1))}
+                style={{ width: '100%' }}
+              />
+            </Form.Item>
+
+            {(options?.promoCodes.length ?? 0) > 0 ? (
+              <Form.Item label="绑定推广码（选填）">
+                <Select
+                  allowClear
+                  placeholder="不绑定"
+                  value={promoCodeId}
+                  onChange={setPromoCodeId}
+                  options={(options?.promoCodes ?? []).map((p) => ({
+                    value: p.id,
+                    label: `${p.code} · ${p.name}`,
+                  }))}
+                />
+              </Form.Item>
+            ) : null}
+
+            <Form.Item label="履约方式" required>
+              <Radio.Group
+                value={deliveryMode}
+                onChange={(e) => {
+                  setDeliveryMode(e.target.value);
+                  if (e.target.value !== 'ADDRESS') setAutoReceive(false);
+                }}
+                options={[
+                  { value: 'ADDRESS', label: '配送到址' },
+                  { value: 'ON_SITE_PICKUP', label: '现场提货' },
+                ]}
+              />
+            </Form.Item>
+
+            {deliveryMode === 'ADDRESS' ? (
+              <>
+                <Form.Item label="收货人（选填）">
+                  <Input
+                    placeholder="默认：用户+手机尾号"
+                    value={receiverName}
+                    maxLength={32}
+                    onChange={(e) => setReceiverName(e.target.value)}
+                  />
+                </Form.Item>
+                <Form.Item label="省市区" required>
+                  <ChinaRegionCascader value={regionCodes} onChange={setRegionCodes} />
+                </Form.Item>
+                <Form.Item label="详细地址" required>
+                  <Input.TextArea
+                    rows={2}
+                    placeholder="街道门牌等"
+                    value={addressDetail}
+                    maxLength={256}
+                    onChange={(e) => setAddressDetail(e.target.value)}
+                  />
+                </Form.Item>
+                <Form.Item>
+                  <Checkbox checked={autoReceive} onChange={(e) => setAutoReceive(e.target.checked)}>
+                    同意自动收货（配送到址必选）
+                  </Checkbox>
+                </Form.Item>
+              </>
+            ) : null}
+
+            <div style={{ background: '#fafafa', borderRadius: 8, padding: 12 }}>
+              <Typography.Text type="secondary">费用预览</Typography.Text>
+              {previewLoading ? (
+                <div>计算中…</div>
+              ) : preview ? (
+                <Space direction="vertical" size={2} style={{ width: '100%', marginTop: 8 }}>
+                  <div>履约：{deliveryLabel}</div>
+                  <div>商品金额：¥{fmtMoney(preview.productAmount)}</div>
+                  <div>实付：¥{fmtMoney(preview.payAmount)}</div>
+                  <div>好客权益：¥{fmtMoney(preview.benefitAmount)}</div>
+                </Space>
+              ) : (
+                <div style={{ marginTop: 8 }}>
+                  <Typography.Text type="secondary">请完善商品与数量</Typography.Text>
+                </div>
+              )}
+            </div>
+          </Form>
+        </>
+      )}
    </Modal>
  );
 }
@@ -9,15 +9,17 @@
    "lint": "echo ok"
  },
  "dependencies": {
-    "@dukang/shared-ui": "workspace:*",
    "@dukang/shared-types": "workspace:*",
+    "@dukang/shared-ui": "workspace:*",
    "@dukang/weixin-sdk": "workspace:*",
    "element-china-area-data": "^6.1.0",
+    "qrcode": "^1.5.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0"
  },
  "devDependencies": {
+    "@types/qrcode": "^1.5.6",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
@@ -0,0 +1 @@
+ayPJ4CQqbUcec3jX
@@ -113,6 +113,10 @@ export function clearAuth(options?: { keepProfile?: boolean }) {
  }
 }

+export function getToken() {
+  return localStorage.getItem(ACCESS_TOKEN);
+}
+
 export function isLoggedIn() {
  return !!localStorage.getItem(ACCESS_TOKEN);
 }
@@ -0,0 +1,36 @@
+const STATUS_LABELS: Record<string, string> = {
+  PENDING_PAY: '待付款',
+  PENDING_SHIP: '待发货',
+  OUT_WAREHOUSE: '已出库',
+  SHIPPING: '配送中',
+  PENDING_RECEIVE: '待收货',
+  COMPLETED: '已完成',
+  CANCELLED: '已取消',
+  REFUNDING: '退款中',
+  REFUNDED: '已退款',
+};
+
+const PAY_LABELS: Record<string, string> = {
+  UNPAID: '未支付',
+  PAYING: '支付中',
+  PAID: '已付款',
+  REFUNDING: '退款中',
+  REFUNDED: '已退款',
+};
+
+export function proxyOrderStatusLabel(status?: string | null) {
+  if (!status) return '—';
+  return STATUS_LABELS[status] || status;
+}
+
+export function proxyOrderPayLabel(payStatus?: string | null) {
+  if (!payStatus) return '—';
+  return PAY_LABELS[payStatus] || payStatus;
+}
+
+export function proxyOrderStatusColor(status?: string | null) {
+  if (status === 'PENDING_PAY') return 'var(--color-warning, #d48806)';
+  if (status === 'COMPLETED') return 'var(--color-success-green)';
+  if (status === 'CANCELLED' || status === 'REFUNDED') return 'var(--color-text-muted, #999)';
+  return 'var(--color-primary, #8b1e1e)';
+}
@@ -3,6 +3,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import PageHeader from '@dukang/shared-ui/PageHeader';
 import type { PartnerProxyOrderListItem } from '@dukang/shared-types';
 import { request } from '../lib/api';
+import {
+  proxyOrderPayLabel,
+  proxyOrderStatusColor,
+  proxyOrderStatusLabel,
+} from '../lib/proxyOrderStatus';
+import { toastError, toastSuccess } from '../lib/toast';

 function fmtMoney(n: number) {
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -21,14 +27,30 @@ function deliveryLabel(order: PartnerProxyOrderListItem) {
  if (t === 'ON_SITE_PICKUP') return '现场提货';
  if (t === 'CROSS_CITY') return '跨城配送';
  if (t === 'LOCAL') return '同城配送';
-  return '线下代下单';
+  return '代下单';
 }

+type TrackNode = {
+  time?: string;
+  status?: string;
+  description?: string;
+};
+
+type TrackResult = {
+  nodes?: TrackNode[];
+  trackingNo?: string | null;
+  provider?: string | null;
+  manualQueryUrl?: string | null;
+};
+
 export default function ProxyOrderDetailPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [order, setOrder] = useState<PartnerProxyOrderListItem | null>(null);
  const [error, setError] = useState('');
+  const [track, setTrack] = useState<TrackResult | null>(null);
+  const [trackError, setTrackError] = useState('');
+  const [paying, setPaying] = useState(false);

  useEffect(() => {
    document.title = '代下单详情';
@@ -41,7 +63,42 @@ export default function ProxyOrderDetailPage() {
      .catch((e) => setError(e instanceof Error ? e.message : '加载失败'));
  }, [id]);

+  useEffect(() => {
+    if (!id || !order) return;
+    const dt = String(order.deliveryType || '').toUpperCase();
+    if (dt === 'ON_SITE_PICKUP' || order.payStatus !== 'PAID') {
+      setTrack(null);
+      return;
+    }
+    void request<TrackResult>('PARTNER_H5', `/partner/proxy-orders/${id}/track`, { silent: true })
+      .then(setTrack)
+      .catch((e) => setTrackError(e instanceof Error ? e.message : '物流暂不可用'));
+  }, [id, order]);
+
+  async function continuePay() {
+    if (!id) return;
+    setPaying(true);
+    try {
+      await request('PARTNER_H5', `/partner/proxy-orders/${id}/pay/mock-confirm`, {
+        method: 'POST',
+        body: '{}',
+        silent: true,
+      });
+      toastSuccess('支付成功');
+      const refreshed = await request<PartnerProxyOrderListItem>(
+        'PARTNER_H5',
+        `/partner/proxy-orders/${id}`,
+      );
+      setOrder(refreshed);
+    } catch (e) {
+      toastError(e instanceof Error ? e.message : '支付失败');
+    } finally {
+      setPaying(false);
+    }
+  }
+
  const img = order?.imageResource?.url || '';
+  const isOnSite = String(order?.deliveryType || '').toUpperCase() === 'ON_SITE_PICKUP';

  return (
    <div className="page-no-tab partner-orders-page">
@@ -60,8 +117,11 @@ export default function ProxyOrderDetailPage() {
          <div className="partner-order-card" style={{ pointerEvents: 'none' }}>
            <div className="partner-order-card-top">
              <span className="label-md text-muted">NO. {order.orderNo}</span>
-              <span className="label-md" style={{ color: 'var(--color-success-green)', fontWeight: 600 }}>
-                已完成
+              <span
+                className="label-md"
+                style={{ color: proxyOrderStatusColor(order.status), fontWeight: 600 }}
+              >
+                {proxyOrderStatusLabel(order.status)}
              </span>
            </div>
            <div className="partner-order-product">
@@ -99,7 +159,7 @@ export default function ProxyOrderDetailPage() {
            <p className="body-md">姓名：{order.receiverName || '—'}</p>
            <p className="body-md" style={{ marginTop: 8 }}>手机：{order.receiverPhone || '—'}</p>
            <p className="body-md" style={{ marginTop: 8 }}>
-              地址：{order.receiverAddress || (String(order.deliveryType).toUpperCase() === 'ON_SITE_PICKUP' ? '现场提货' : '—')}
+              地址：{order.receiverAddress || (isOnSite ? '现场提货' : '—')}
            </p>
          </section>

@@ -107,9 +167,64 @@ export default function ProxyOrderDetailPage() {
            <h3 className="headline-md" style={{ marginBottom: 12 }}>订单信息</h3>
            <p className="body-md">配送方式：{deliveryLabel(order)}</p>
            <p className="body-md" style={{ marginTop: 8 }}>下单时间：{fmtTime(order.createdAt)}</p>
-            <p className="body-md" style={{ marginTop: 8 }}>支付状态：已付款（线下）</p>
-            <p className="body-md" style={{ marginTop: 8 }}>订单状态：已完成并发放权益</p>
+            <p className="body-md" style={{ marginTop: 8 }}>
+              支付状态：{proxyOrderPayLabel(order.payStatus)}
+            </p>
+            <p className="body-md" style={{ marginTop: 8 }}>
+              订单状态：{proxyOrderStatusLabel(order.status)}
+            </p>
          </section>
+
+          {order.payStatus === 'UNPAID' || order.status === 'PENDING_PAY' ? (
+            <button
+              type="button"
+              className="btn btn-primary btn-block"
+              style={{ marginTop: 16 }}
+              disabled={paying}
+              onClick={() => void continuePay()}
+            >
+              {paying ? '处理中…' : '继续支付（模拟）'}
+            </button>
+          ) : null}
+
+          {!isOnSite && order.payStatus === 'PAID' ? (
+            <section className="partner-form-card" style={{ marginTop: 12 }}>
+              <h3 className="headline-md" style={{ marginBottom: 12 }}>物流信息</h3>
+              {trackError ? (
+                <p className="label-md text-muted">{trackError}</p>
+              ) : !track ? (
+                <p className="label-md text-muted">加载物流…</p>
+              ) : (
+                <>
+                  {track.trackingNo ? (
+                    <p className="body-md" style={{ marginBottom: 8 }}>
+                      运单号：{track.trackingNo}
+                      {track.provider ? `（${track.provider}）` : ''}
+                    </p>
+                  ) : null}
+                  {track.manualQueryUrl ? (
+                    <p className="body-md" style={{ marginBottom: 8 }}>
+                      <a href={track.manualQueryUrl} target="_blank" rel="noreferrer">
+                        查看物流官网
+                      </a>
+                    </p>
+                  ) : null}
+                  {(track.nodes ?? []).length === 0 ? (
+                    <p className="label-md text-muted">暂无物流轨迹（待总部发货后更新）</p>
+                  ) : (
+                    <ul style={{ paddingLeft: 18, margin: 0 }}>
+                      {(track.nodes ?? []).map((n, i) => (
+                        <li key={`${n.time}-${i}`} className="body-md" style={{ marginBottom: 8 }}>
+                          <div className="label-md text-muted">{fmtTime(n.time)}</div>
+                          <div>{n.description || n.status || '—'}</div>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </>
+              )}
+            </section>
+          ) : null}
        </div>
      )}
    </div>
@@ -4,6 +4,10 @@ import PageHeader from '@dukang/shared-ui/PageHeader';
 import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
 import type { PartnerProxyOrderListItem, PartnerProxyOrderListResponse } from '@dukang/shared-types';
 import { isLoggedIn, request } from '../lib/api';
+import {
+  proxyOrderStatusColor,
+  proxyOrderStatusLabel,
+} from '../lib/proxyOrderStatus';

 function fmtMoney(n: number) {
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -98,8 +102,11 @@ export default function ProxyOrderListPage() {
            <Link key={orderId} to={`/center/proxy-orders/${orderId}`} className="partner-order-card" style={{ marginBottom: 12 }}>
              <div className="partner-order-card-top">
                <span className="label-md text-muted">NO. {o.orderNo}</span>
-                <span className="label-md" style={{ color: 'var(--color-success-green)', fontWeight: 600 }}>
-                  已完成
+                <span
+                  className="label-md"
+                  style={{ color: proxyOrderStatusColor(o.status), fontWeight: 600 }}
+                >
+                  {proxyOrderStatusLabel(o.status)}
                </span>
              </div>
              <div className="partner-order-product">
@@ -1,8 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import QRCode from 'qrcode';
 import PageHeader from '@dukang/shared-ui/PageHeader';
+import { invokeWechatPay } from '@dukang/weixin-sdk';
 import ChinaRegionPicker from '../components/ChinaRegionPicker';
-import { request } from '../lib/api';
+import { getToken, request } from '../lib/api';
 import { formatRegionLabel, parseRegionCodes } from '../lib/china-region';
 import {
  clearProxyOrderDraft,
@@ -11,11 +13,16 @@ import {
  type ProxyOrderDraft,
 } from '../lib/proxyOrderDraft';
 import { toastError, toastSuccess } from '../lib/toast';
+import { isWechatEnv } from '../lib/weixin';
+import { fetchPartnerProfile, partnerHasWechatBinding } from '../lib/wechat-auth';
 import type {
  PartnerProxyDeliveryMode,
  PartnerProxyOrderCreateRequest,
  PartnerProxyOrderOptions,
  PartnerProxyOrderPreviewResult,
+  ProxyOrderCreateResponse,
+  ProxyOrderPayResponse,
+  ProxyPayMethod,
 } from '@dukang/shared-types';

 function fmtMoney(n: number) {
@@ -57,10 +64,34 @@ export default function ProxyOrderPage() {
  const [previewLoading, setPreviewLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [msg, setMsg] = useState('');
+  const [step, setStep] = useState<'form' | 'pay'>('form');
+  const [created, setCreated] = useState<ProxyOrderCreateResponse | null>(null);
+  const [payMethod, setPayMethod] = useState<ProxyPayMethod>('NATIVE');
+  const [codeUrl, setCodeUrl] = useState<string | null>(null);
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+  const [paying, setPaying] = useState(false);
+  const pollRef = useRef<number | null>(null);

  const region = useMemo(() => parseRegionCodes(regionCodes), [regionCodes]);
  const regionLabel = region ? formatRegionLabel(region) : '';

+  function stopPoll() {
+    if (pollRef.current != null) {
+      window.clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }
+
+  useEffect(() => () => stopPoll(), []);
+
+  useEffect(() => {
+    if (!codeUrl) {
+      setQrDataUrl(null);
+      return;
+    }
+    void QRCode.toDataURL(codeUrl, { width: 220, margin: 1 }).then(setQrDataUrl).catch(() => setQrDataUrl(null));
+  }, [codeUrl]);
+
  function persistDraft(overrides?: Partial<ProxyOrderDraft>) {
    saveProxyOrderDraft({
      phone,
@@ -157,6 +188,82 @@ export default function ProxyOrderPage() {
    return null;
  }

+  function startPoll(orderId: string) {
+    stopPoll();
+    pollRef.current = window.setInterval(() => {
+      void request<{ payStatus: string; orderNo: string }>(
+        'PARTNER_H5',
+        `/partner/proxy-orders/${orderId}/pay-status`,
+        { silent: true },
+      )
+        .then((st) => {
+          if (st.payStatus === 'PAID') {
+            stopPoll();
+            toastSuccess(`支付成功：${st.orderNo}`);
+            clearProxyOrderDraft();
+            navigate(`/center/proxy-orders/${orderId}`, { replace: true });
+          }
+        })
+        .catch(() => undefined);
+    }, 2000);
+  }
+
+  async function startPay(orderId: string, method: ProxyPayMethod) {
+    setPaying(true);
+    setMsg('');
+    try {
+      if (method === 'JSAPI') {
+        if (!isWechatEnv()) {
+          throw new Error('请在微信内打开合伙人端以使用微信代付');
+        }
+        const profile = await fetchPartnerProfile();
+        if (!partnerHasWechatBinding(profile)) {
+          throw new Error('请先绑定微信后再代付');
+        }
+      }
+
+      const pay = await request<ProxyOrderPayResponse>(
+        'PARTNER_H5',
+        `/partner/proxy-orders/${orderId}/pay`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ payMethod: method }),
+          silent: true,
+        },
+      );
+
+      if (pay.mode === 'mock') {
+        toastSuccess('支付成功');
+        clearProxyOrderDraft();
+        navigate(`/center/proxy-orders/${orderId}`, { replace: true });
+        return;
+      }
+
+      if (pay.mode === 'native' && pay.codeUrl) {
+        setCodeUrl(pay.codeUrl);
+        startPoll(orderId);
+        return;
+      }
+
+      if (pay.mode === 'jsapi' && pay.prepay) {
+        await invokeWechatPay(pay.prepay, {
+          apiBase: '/api/v1',
+          clientApp: 'PARTNER_H5',
+          getAccessToken: getToken,
+          platform: 'wechat-h5',
+        });
+        startPoll(orderId);
+        return;
+      }
+
+      throw new Error('支付发起失败');
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '支付失败');
+    } finally {
+      setPaying(false);
+    }
+  }
+
  async function submit() {
    setMsg('');
    const err = validateForm();
@@ -181,14 +288,16 @@ export default function ProxyOrderPage() {

    setSubmitting(true);
    try {
-      const order = await request<{ id: string; orderNo: string }>('PARTNER_H5', '/partner/proxy-orders', {
+      const order = await request<ProxyOrderCreateResponse>('PARTNER_H5', '/partner/proxy-orders', {
        method: 'POST',
        body: JSON.stringify(payload),
        silent: true,
      });
-      toastSuccess(`代下单成功：${order.orderNo}`);
      clearProxyOrderDraft();
-      navigate(`/center/proxy-orders/${order.id}`);
+      setCreated(order);
+      setStep('pay');
+      setCodeUrl(null);
+      await startPay(order.id, payMethod);
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '下单失败');
    } finally {
@@ -196,6 +305,25 @@ export default function ProxyOrderPage() {
    }
  }

+  async function handleMockConfirm() {
+    if (!created) return;
+    setPaying(true);
+    try {
+      await request('PARTNER_H5', `/partner/proxy-orders/${created.id}/pay/mock-confirm`, {
+        method: 'POST',
+        body: '{}',
+        silent: true,
+      });
+      stopPoll();
+      toastSuccess('支付成功');
+      navigate(`/center/proxy-orders/${created.id}`, { replace: true });
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '模拟支付失败');
+    } finally {
+      setPaying(false);
+    }
+  }
+
  const selectedProduct = options?.products.find((p) => p.id === productId);
  const deliveryLabel =
    preview?.deliveryType === 'ON_SITE_PICKUP'
@@ -206,10 +334,97 @@ export default function ProxyOrderPage() {

  return (
    <div className="page partner-proxy-order-page">
-      <PageHeader title="代下单" onBack={() => navigate(-1)} />
+      <PageHeader title={step === 'pay' ? '代下单支付' : '代下单'} onBack={() => navigate(-1)} />

      <main className="partner-form-card" style={{ margin: '0 16px 24px' }}>
-        {loadingOptions ? (
+        {step === 'pay' && created ? (
+          <>
+            <p className="body-md">
+              订单 {created.orderNo} · 应付 ¥{fmtMoney(created.payAmount)}
+            </p>
+            <p className="label-md text-muted" style={{ marginTop: 8 }}>
+              {created.deliveryType === 'ON_SITE_PICKUP'
+                ? '支付成功后进入现场提货闭环'
+                : '支付成功后进入待发货，由总部履约'}
+            </p>
+
+            <section className="partner-form-section" style={{ marginTop: 16 }}>
+              <label className="partner-form-label">支付方式</label>
+              <div className="partner-proxy-mode-tabs">
+                <button
+                  type="button"
+                  className={`partner-proxy-mode-tab${payMethod === 'NATIVE' ? ' is-active' : ''}`}
+                  onClick={() => {
+                    setPayMethod('NATIVE');
+                    void startPay(created.id, 'NATIVE');
+                  }}
+                >
+                  收款码
+                </button>
+                <button
+                  type="button"
+                  className={`partner-proxy-mode-tab${payMethod === 'JSAPI' ? ' is-active' : ''}`}
+                  onClick={() => {
+                    setPayMethod('JSAPI');
+                    void startPay(created.id, 'JSAPI');
+                  }}
+                >
+                  微信代付
+                </button>
+              </div>
+            </section>
+
+            {payMethod === 'NATIVE' ? (
+              <div style={{ textAlign: 'center', marginTop: 16 }}>
+                {qrDataUrl ? (
+                  <img src={qrDataUrl} alt="收款码" width={220} height={220} style={{ margin: '0 auto' }} />
+                ) : (
+                  <p className="label-md text-muted">{paying ? '生成收款码中…' : '暂无收款码'}</p>
+                )}
+                <p className="label-md text-muted" style={{ marginTop: 8 }}>
+                  请使用微信扫码支付
+                </p>
+                <button
+                  type="button"
+                  className="btn btn-primary btn-block"
+                  style={{ marginTop: 16 }}
+                  disabled={paying}
+                  onClick={() => void handleMockConfirm()}
+                >
+                  {paying ? '处理中…' : '模拟支付成功'}
+                </button>
+              </div>
+            ) : (
+              <div style={{ marginTop: 16 }}>
+                <p className="label-md text-muted">将调起微信支付（本地 Mock 可能直接入账）</p>
+                <button
+                  type="button"
+                  className="btn btn-primary btn-block"
+                  style={{ marginTop: 12 }}
+                  disabled={paying}
+                  onClick={() => void startPay(created.id, 'JSAPI')}
+                >
+                  {paying ? '支付中…' : '重新调起微信代付'}
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-block"
+                  style={{ marginTop: 8 }}
+                  disabled={paying}
+                  onClick={() => void handleMockConfirm()}
+                >
+                  模拟支付成功
+                </button>
+              </div>
+            )}
+
+            {msg ? (
+              <p className="partner-form-error" role="alert" style={{ marginTop: 12 }}>
+                {msg}
+              </p>
+            ) : null}
+          </>
+        ) : loadingOptions ? (
          <p className="label-md text-muted">加载商品…</p>
        ) : (
          <>
@@ -350,11 +565,36 @@ export default function ProxyOrderPage() {
                    checked={autoReceive}
                    onChange={(e) => setAutoReceive(e.target.checked)}
                  />
-                  <span>同意自动收货（线下代下单提交后视为已送达并发放权益）</span>
+                  <span>同意自动收货（配送到址必选）</span>
                </label>
              </>
            ) : null}

+            <section className="partner-form-section">
+              <label className="partner-form-label">支付方式</label>
+              <div className="partner-proxy-mode-tabs">
+                <button
+                  type="button"
+                  className={`partner-proxy-mode-tab${payMethod === 'NATIVE' ? ' is-active' : ''}`}
+                  onClick={() => setPayMethod('NATIVE')}
+                >
+                  收款码
+                </button>
+                <button
+                  type="button"
+                  className={`partner-proxy-mode-tab${payMethod === 'JSAPI' ? ' is-active' : ''}`}
+                  onClick={() => setPayMethod('JSAPI')}
+                >
+                  微信代付
+                </button>
+              </div>
+              <p className="label-md text-muted" style={{ marginTop: 8, lineHeight: 1.5 }}>
+                {payMethod === 'NATIVE'
+                  ? '提交后展示商家收款码，客户或现场扫码支付'
+                  : '提交后在微信内由您代客户完成支付（需已绑定微信）'}
+              </p>
+            </section>
+
            <section className="partner-proxy-fee-card">
              <h3 className="headline-md">费用明细</h3>
              {previewLoading ? (
@@ -398,15 +638,15 @@ export default function ProxyOrderPage() {
            <button
              type="button"
              className="btn btn-primary btn-block"
-              disabled={submitting || !preview}
+              disabled={submitting || paying || !preview}
              onClick={() => void submit()}
              style={{ marginTop: 16 }}
            >
-              {submitting ? '提交中…' : '确认代下单'}
+              {submitting || paying ? '处理中…' : '提交并支付'}
            </button>

            <p className="label-md text-muted" style={{ marginTop: 12, lineHeight: 1.5 }}>
-              确认线下已收款后提交：将自动创建/关联用户，订单标记为代下单并直接完成，同时发放对应权益。客户订单列表会显示您的姓名。
+              提交后进入在线支付；支付成功后发放权益。配送单将进入待发货由总部履约，现场提货走自提闭环。
            </p>
          </>
        )}
@@ -0,0 +1 @@
+ayPJ4CQqbUcec3jX