微信授权逻辑修改

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

@@ -1,19 +1,20 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import type { WechatLoginResult, WechatPayOrderResult } from '@dukang/shared-types';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import type { WechatPayOrderResult } from '@dukang/shared-types';
 import SubPageHeader from '../components/SubPageHeader';
+import PhoneVerifySheet from '../components/PhoneVerifySheet';
 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';
+import { applyWechatLoginResult, handleWechatAuthCallback } from '../lib/wechat-auth';
+import { isWechatEnv } from '../lib/weixin';
 
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -30,7 +31,6 @@ 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);
@@ -38,6 +38,8 @@ export default function PayPage() {
   const [mockMode, setMockMode] = useState(true);
   const [needsWechatAuth, setNeedsWechatAuth] = useState(false);
   const [msg, setMsg] = useState('');
+  const [showBindPhone, setShowBindPhone] = useState(false);
+  const [wxSessionKey, setWxSessionKey] = useState<string | null>(null);
 
   const refreshPayReadiness = useCallback(async () => {
     try {
@@ -51,10 +53,11 @@ export default function PayPage() {
   }, []);
 
   const handleWechatLoginResult = useCallback(
-    async (result: WechatLoginResult) => {
+    async (result: Parameters<typeof applyWechatLoginResult>[0]) => {
       if (result.needBindPhone && result.wxSessionKey) {
-        setMsg('微信授权成功，请先绑定手机号');
-        navigate(buildLoginReturnUrl(location.pathname, location.search));
+        setWxSessionKey(result.wxSessionKey);
+        setShowBindPhone(true);
+        setMsg('');
         return;
       }
       if (saveWechatLoginResult(result)) {
@@ -62,7 +65,7 @@ export default function PayPage() {
         await refreshPayReadiness();
       }
     },
-    [location.pathname, location.search, navigate, refreshPayReadiness],
+    [refreshPayReadiness],
   );
 
   useEffect(() => {
@@ -71,8 +74,7 @@ export default function PayPage() {
 
   useEffect(() => {
     if (!isWechatEnv()) return;
-    weixinSdk
-      .handleOAuthCallback()
+    handleWechatAuthCallback()
       .then((result) => {
         if (result) void handleWechatLoginResult(result);
       })
@@ -121,6 +123,7 @@ export default function PayPage() {
 
       if (result.mode === 'jsapi' && result.prepay) {
         setMockMode(false);
+        const { weixinSdk } = await import('../lib/weixin');
         await weixinSdk.pay(result.prepay);
         const paid = await waitOrderPaid(orderId);
         if (!paid) {
@@ -190,6 +193,19 @@ export default function PayPage() {
           {loading ? '支付中...' : needsWechatAuth ? '请先授权微信' : '确认支付'}
         </button>
       </div>
+
+      <PhoneVerifySheet
+        open={showBindPhone}
+        mode="wechat_bind_phone"
+        wxSessionKey={wxSessionKey ?? undefined}
+        onClose={() => {
+          setShowBindPhone(false);
+          setWxSessionKey(null);
+        }}
+        onSuccess={() => {
+          void refreshPayReadiness();
+        }}
+      />
     </div>
   );
 }