微信JSSDK对接，代下单支付

apps/h5-partner/src/pages/ProxyOrderPage.tsx

@@ -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>
           </>
         )}