h5微信授权

apps/mini-user/src/pages/pay/index.tsx

@@ -1,22 +1,29 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { View, Text } from '@tarojs/components';
-import Taro, { useRouter } from '@tarojs/taro';
+import Taro, { useDidShow, useRouter } from '@tarojs/taro';
 import PageShell from '../../components/PageShell';
 import SubPageHeader from '../../components/SubPageHeader';
+import WechatLoginButton from '../../components/WechatLoginButton';
 import { ensurePayReady } from '../../lib/pay-ready';
 import {
+  authorizeWechatForPay,
   fetchClientConfig,
   fetchUserProfile,
   isWechatAuthRequiredError,
   needsWechatAuthForPay,
   payOrder,
+  saveWechatLoginResult,
 } from '../../lib/pay-wechat';
+import { applyWechatLoginResult } from '../../lib/wechat-auth';
+import { isWechatEnv } from '../../lib/weixin';
+import { goLogin } from '../../lib/auth-nav';
 import { request, toast } from '../../lib/api';
 
 export default function PayPage() {
   const router = useRouter();
   const orderId = router.params.orderId ?? '';
   const [loading, setLoading] = useState(false);
+  const [authLoading, setAuthLoading] = useState(false);
   const [mockMode, setMockMode] = useState(true);
   const [needsWechatAuth, setNeedsWechatAuth] = useState(false);
   const [msg, setMsg] = useState('');
@@ -27,23 +34,27 @@ export default function PayPage() {
     ? `/pages/pay/index?orderId=${orderId}`
     : '/pages/pay/index';
 
-  useEffect(() => {
-    if (!orderId) return;
-    void ensurePayReady(returnPath);
-  }, [orderId, returnPath]);
+  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;
+    }
+  }, []);
+
+  useDidShow(() => {
+    void refreshPayReadiness();
+  });
 
   useEffect(() => {
-    async function load() {
-      try {
-        const [config, profile] = await Promise.all([fetchClientConfig(), fetchUserProfile()]);
-        setMockMode(config.mockPay);
-        setNeedsWechatAuth(needsWechatAuthForPay(config, profile));
-      } catch {
-        /* ignore */
-      }
+    if (!orderId) return;
+    if (process.env.TARO_ENV === 'weapp') {
+      void ensurePayReady(returnPath);
     }
-    void load();
-  }, []);
+  }, [orderId, returnPath]);
 
   useEffect(() => {
     if (!orderId) {
@@ -67,6 +78,38 @@ export default function PayPage() {
       });
   }, [orderId]);
 
+  async function wechatAuthorize() {
+    setAuthLoading(true);
+    setMsg('');
+    try {
+      if (!isWechatEnv()) {
+        setMsg('请在微信内打开以授权微信支付');
+        return;
+      }
+      if (process.env.TARO_ENV === 'weapp') {
+        const ready = await ensurePayReady(returnPath);
+        if (ready) await refreshPayReadiness();
+        return;
+      }
+      const result = await authorizeWechatForPay();
+      if (result) {
+        if (result.needBindPhone && result.wxSessionKey) {
+          goLogin(returnPath, { bindMode: '1', wxSessionKey: result.wxSessionKey });
+          return;
+        }
+        if (saveWechatLoginResult(result) || applyWechatLoginResult(result)) {
+          setMsg('');
+          await refreshPayReadiness();
+          toast('微信授权成功', 'success');
+        }
+      }
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '微信授权失败');
+    } finally {
+      setAuthLoading(false);
+    }
+  }
+
   async function pay() {
     if (!orderId) {
       toast('订单不存在');
@@ -74,8 +117,11 @@ export default function PayPage() {
     }
     if (needsWechatAuth) {
       setMsg('请先完成微信授权后再支付');
-      const ready = await ensurePayReady(returnPath);
-      if (!ready) return;
+      if (process.env.TARO_ENV === 'h5') {
+        await wechatAuthorize();
+      } else {
+        await ensurePayReady(returnPath);
+      }
       return;
     }
 
@@ -96,7 +142,6 @@ export default function PayPage() {
       if (isWechatAuthRequiredError(e)) {
         setNeedsWechatAuth(true);
         setMsg('微信支付需要先完成微信授权');
-        await ensurePayReady(returnPath);
         return;
       }
       const message = e instanceof Error ? e.message : '支付失败';
@@ -124,6 +169,20 @@ export default function PayPage() {
           </Text>
           <Text className="pay-status-amount">¥{payAmount}</Text>
         </View>
+
+        {needsWechatAuth ? (
+          <View className="pay-wechat-auth-card">
+            <Text className="pay-wechat-auth-title">尚未授权微信</Text>
+            <Text className="pay-wechat-auth-desc">
+              授权后可安全调起微信支付，不会重复扣款
+            </Text>
+            <WechatLoginButton
+              loading={authLoading}
+              onClick={() => void wechatAuthorize()}
+            />
+          </View>
+        ) : null}
+
         <View className="order-card">
           <View className="order-row">
             <Text className="order-row-label">订单号</Text>
@@ -140,15 +199,34 @@ export default function PayPage() {
             </Text>
           </View>
         </View>
-        {msg ? <Text className="u-muted" style={{ display: 'block', marginTop: 12 }}>{msg}</Text> : null}
+        {msg ? (
+          <Text className="pay-wechat-auth-msg" style={{ display: 'block', marginTop: 12 }}>
+            {msg}
+          </Text>
+        ) : null}
       </View>
       <View className="pay-bar">
         <View
           className="order-confirm-submit"
-          style={{ flex: 1, opacity: loading ? 0.7 : 1 }}
-          onClick={() => !loading && void pay()}
+          style={{ flex: 1, opacity: loading || needsWechatAuth ? 0.7 : 1 }}
+          onClick={() => {
+            if (loading) return;
+            if (needsWechatAuth) {
+              void wechatAuthorize();
+              return;
+            }
+            void pay();
+          }}
         >
-          <Text>{loading ? '支付中…' : needsWechatAuth ? '去授权' : '立即支付'}</Text>
+          <Text>
+            {loading
+              ? '支付中…'
+              : needsWechatAuth
+                ? authLoading
+                  ? '授权中…'
+                  : '微信一键授权'
+                : '立即支付'}
+          </Text>
         </View>
       </View>
     </PageShell>