支付时检测是否已经微信授权

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

@@ -1,9 +1,18 @@
-import { useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import type { WechatPayOrderResult } from '@dukang/shared-types';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import type { WechatLoginResult, WechatPayOrderResult } from '@dukang/shared-types';
 import SubPageHeader from '../components/SubPageHeader';
 import { request } from '../lib/api';
 import { buildOrderConfirmUrl } from '../lib/navigation';
+import {
+  authorizeWechatForPay,
+  buildLoginReturnUrl,
+  fetchClientConfig,
+  fetchUserProfile,
+  isWechatAuthRequiredError,
+  needsWechatAuthForPay,
+  saveWechatLoginResult,
+} from '../lib/pay-wechat';
 import { isWechatEnv, weixinSdk } from '../lib/weixin';
 
 function sleep(ms: number) {
@@ -21,10 +30,54 @@ async function waitOrderPaid(orderId: string, maxAttempts = 15) {
 
 export default function PayPage() {
   const [params] = useSearchParams();
+  const location = useLocation();
   const orderId = params.get('orderId') || '';
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
+  const [authLoading, setAuthLoading] = useState(false);
   const [mockMode, setMockMode] = useState(true);
+  const [needsWechatAuth, setNeedsWechatAuth] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  const refreshPayReadiness = useCallback(async () => {
+    try {
+      const [config, profile] = await Promise.all([fetchClientConfig(), fetchUserProfile()]);
+      setMockMode(config.mockPay);
+      setNeedsWechatAuth(needsWechatAuthForPay(config, profile));
+      return profile;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const handleWechatLoginResult = useCallback(
+    async (result: WechatLoginResult) => {
+      if (result.needBindPhone && result.wxSessionKey) {
+        setMsg('微信授权成功，请先绑定手机号');
+        navigate(buildLoginReturnUrl(location.pathname, location.search));
+        return;
+      }
+      if (saveWechatLoginResult(result)) {
+        setMsg('');
+        await refreshPayReadiness();
+      }
+    },
+    [location.pathname, location.search, navigate, refreshPayReadiness],
+  );
+
+  useEffect(() => {
+    refreshPayReadiness();
+  }, [refreshPayReadiness]);
+
+  useEffect(() => {
+    if (!isWechatEnv()) return;
+    weixinSdk
+      .handleOAuthCallback()
+      .then((result) => {
+        if (result) void handleWechatLoginResult(result);
+      })
+      .catch((e) => setMsg(e instanceof Error ? e.message : '微信授权失败'));
+  }, [handleWechatLoginResult]);
 
   function goBackConfirm() {
     navigate(
@@ -37,8 +90,30 @@ export default function PayPage() {
     );
   }
 
+  async function wechatAuthorize() {
+    setAuthLoading(true);
+    setMsg('');
+    try {
+      if (!isWechatEnv()) {
+        setMsg('请在微信内打开以授权微信支付');
+        return;
+      }
+      const result = await authorizeWechatForPay();
+      if (result) await handleWechatLoginResult(result);
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '微信授权失败');
+    } finally {
+      setAuthLoading(false);
+    }
+  }
+
   async function pay() {
+    if (needsWechatAuth) {
+      setMsg('请先完成微信授权后再支付');
+      return;
+    }
     setLoading(true);
+    setMsg('');
     try {
       const result = await request<WechatPayOrderResult>('USER_H5', `/trade/orders/${orderId}/pay`, {
         method: 'POST',
@@ -58,7 +133,12 @@ export default function PayPage() {
 
       navigate('/orders?tab=pending_ship');
     } catch (e) {
-      alert(e instanceof Error ? e.message : '支付失败');
+      if (isWechatAuthRequiredError(e)) {
+        setNeedsWechatAuth(true);
+        setMsg('微信支付需要先完成微信授权');
+        return;
+      }
+      setMsg(e instanceof Error ? e.message : '支付失败');
     } finally {
       setLoading(false);
     }
@@ -72,18 +152,43 @@ export default function PayPage() {
           <span className="material-symbols-outlined">account_balance_wallet</span>
         </div>
         <p className="headline-lg text-primary">
-          {mockMode ? (isWechatEnv() ? '微信支付' : 'Mock 微信支付') : '微信支付'}
+          {needsWechatAuth ? '授权微信后可支付' : mockMode ? (isWechatEnv() ? '微信支付' : 'Mock 微信支付') : '微信支付'}
         </p>
         <p className="text-muted body-md" style={{ marginTop: 8 }}>
-          {mockMode
-            ? 'preV1 Mock 模式：点击确认即完成；开启真实支付后将调起微信收银台'
-            : '请在微信内完成支付，支付成功后自动跳转'}
+          {needsWechatAuth
+            ? '使用微信支付前，需先授权微信账号以完成付款'
+            : mockMode
+              ? 'preV1 Mock 模式：点击确认即完成；开启真实支付后将调起微信收银台'
+              : '请在微信内完成支付，支付成功后自动跳转'}
         </p>
+
+        {needsWechatAuth && (
+          <div className="pay-wechat-auth-card">
+            <p className="pay-wechat-auth-title">尚未授权微信</p>
+            <p className="pay-wechat-auth-desc">授权后可安全调起微信支付，不会重复扣款</p>
+            <button
+              type="button"
+              className="login-wechat-btn pay-wechat-auth-btn"
+              disabled={authLoading}
+              onClick={wechatAuthorize}
+            >
+              <span className="material-symbols-outlined login-wechat-icon">chat</span>
+              <span>{authLoading ? '授权中...' : '微信一键授权'}</span>
+            </button>
+          </div>
+        )}
+
+        {msg && <p className="pay-wechat-auth-msg">{msg}</p>}
         <p className="label-md text-muted" style={{ marginTop: 24 }}>订单号 {orderId}</p>
       </div>
       <div className="page-actions">
-        <button type="button" className="btn btn-primary btn-block" disabled={loading || !orderId} onClick={pay}>
-          {loading ? '支付中...' : '确认支付'}
+        <button
+          type="button"
+          className="btn btn-primary btn-block"
+          disabled={loading || !orderId || needsWechatAuth}
+          onClick={pay}
+        >
+          {loading ? '支付中...' : needsWechatAuth ? '请先授权微信' : '确认支付'}
         </button>
       </div>
     </div>