微信SDK接通

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

@@ -1,14 +1,17 @@
 import { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import type { WechatPayOrderResult } from '@dukang/shared-types';
 import SubPageHeader from '../components/SubPageHeader';
 import { request } from '../lib/api';
 import { buildOrderConfirmUrl } from '../lib/navigation';
+import { isWechatEnv, weixinSdk } from '../lib/weixin';
 
 export default function PayPage() {
   const [params] = useSearchParams();
   const orderId = params.get('orderId') || '';
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
+  const [mockMode, setMockMode] = useState(true);
 
   function goBackConfirm() {
     navigate(
@@ -20,10 +23,22 @@ export default function PayPage() {
       }),
     );
   }
+
   async function pay() {
     setLoading(true);
     try {
-      await request('USER_H5', `/trade/orders/${orderId}/pay`, { method: 'POST' });
+      const result = await request<WechatPayOrderResult>('USER_H5', `/trade/orders/${orderId}/pay`, {
+        method: 'POST',
+      });
+
+      if (result.mode === 'jsapi' && result.prepay) {
+        setMockMode(false);
+        await weixinSdk.init();
+        await weixinSdk.pay(result.prepay);
+        navigate('/orders?tab=pending_ship');
+        return;
+      }
+
       navigate('/orders?tab=pending_ship');
     } catch (e) {
       alert(e instanceof Error ? e.message : '支付失败');
@@ -39,8 +54,14 @@ export default function PayPage() {
         <div className="pay-icon">
           <span className="material-symbols-outlined">account_balance_wallet</span>
         </div>
-        <p className="headline-lg text-primary">Mock 微信支付</p>
-        <p className="text-muted body-md" style={{ marginTop: 8 }}>preV1 环境模拟支付，点击确认即完成</p>
+        <p className="headline-lg text-primary">
+          {mockMode ? (isWechatEnv() ? '微信支付' : 'Mock 微信支付') : '微信支付'}
+        </p>
+        <p className="text-muted body-md" style={{ marginTop: 8 }}>
+          {mockMode
+            ? 'preV1 Mock 模式：点击确认即完成；开启真实支付后将调起微信收银台'
+            : '请在微信内完成支付'}
+        </p>
         <p className="label-md text-muted" style={{ marginTop: 24 }}>订单号 {orderId}</p>
       </div>
       <div className="page-actions">