微信JSSDK对接，代下单支付

2026-08-02 11:49:35 +08:00
parent 50ba6e9c56
commit 09e732bfa3
32 changed files with 1223 additions and 218 deletions
@@ -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>
          </>
        )}