update pay ui

src/components/Subscription/SubscriptionContentNew.tsx

@@ -483,13 +483,28 @@ export default function SubscriptionContentNew() {
         ? `${getApiBase()}/api/payment/alipay/create-order`
         : `${getApiBase()}/api/payment/create-order`;
 
-      // 检测是否为移动端设备
+      // 检测是否为移动端设备（多重检测，确保 Safari 兼容性）
       const userAgent = navigator.userAgent;
-      const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+      // 方式1：User Agent 检测
+      const uaCheck = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+      // 方式2：触摸屏检测（Safari 兼容）
+      const touchCheck = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+      // 方式3：屏幕宽度检测
+      const screenCheck = window.innerWidth <= 768;
+
+      // 方式4：Safari 移动端特定检测（iOS Safari 有 standalone 属性）
+      const isSafariMobile = /Safari/i.test(userAgent) && /Apple/i.test(navigator.vendor) && touchCheck;
+
+      // 综合判断：UA 匹配 或 (触摸屏 + 小屏幕) 或 Safari 移动端
+      const isMobileDevice = uaCheck || (touchCheck && screenCheck) || isSafariMobile;
 
       // 调试日志
       console.log('[支付] User-Agent:', userAgent);
-      console.log('[支付] 检测为移动端:', isMobileDevice);
+      console.log('[支付] 移动端检测 - UA:', uaCheck, 'Touch:', touchCheck, 'Screen:', screenCheck, 'SafariMobile:', isSafariMobile);
+      console.log('[支付] 最终判断为移动端:', isMobileDevice);
       console.log('[支付] 支付方式:', paymentMethod);
 
       const response = await fetch(apiUrl, {
@@ -512,18 +527,13 @@ export default function SubscriptionContentNew() {
           if (paymentMethod === 'alipay') {
             // 支付宝：跳转到支付页面
             if (data.data.pay_url) {
-              // 检测是否为移动端设备（与上面保持一致）
+              // 使用与上面相同的移动端检测结果（已在上面计算过）
-              const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-
               console.log('[支付宝] 订单创建成功');
               console.log('[支付宝] pay_url:', data.data.pay_url.substring(0, 100) + '...');
               console.log('[支付宝] 是否移动端跳转:', isMobileDevice);
 
               if (isMobileDevice) {
-                // 手机端：显示模态框，让用户手动点击跳转到支付宝
+                // 手机端：尝试自动跳转到支付宝
-                // 原因：各种手机浏览器（Safari、华为、小米、微信内置等）对自动跳转有不同限制
-                // 用户主动点击可以绑过这些限制，确保兼容性
-
                 // 保存订单信息到 sessionStorage，支付完成后返回时可以用来检查状态
                 sessionStorage.setItem('alipay_order_id', data.data.id);
                 sessionStorage.setItem('alipay_order_no', data.data.order_no);
@@ -531,7 +541,7 @@ export default function SubscriptionContentNew() {
                 // 检测是否在微信内置浏览器中
                 const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
 
-                // 显示模态框，让用户点击按钮跳转
+                // 设置订单状态（用于支付完成后返回时显示）
                 setPaymentOrder({
                   ...data.data,
                   payment_method: 'alipay',
@@ -541,13 +551,30 @@ export default function SubscriptionContentNew() {
                 setPaymentCountdown(30 * 60);
                 startAutoPaymentCheck(data.data.id, 'alipay');
 
+                if (isWechatBrowser) {
+                  // 微信内置浏览器：无法直接跳转支付宝，需要引导用户在外部浏览器打开
                   toast({
                     title: '订单创建成功',
-                  description: isWechatBrowser ? '请点击按钮，在浏览器中打开支付' : '请点击按钮打开支付宝',
+                    description: '微信内无法直接打开支付宝，请点击按钮复制链接后在浏览器中打开',
+                    status: 'warning',
+                    duration: 5000,
+                    isClosable: true,
+                  });
+                } else {
+                  // 非微信浏览器（Safari、Chrome 等）：直接跳转
+                  toast({
+                    title: '正在跳转支付宝',
+                    description: '如未自动跳转，请点击下方按钮',
                     status: 'success',
                     duration: 3000,
                     isClosable: true,
                   });
+
+                  // 延迟 300ms 后自动跳转，让 toast 显示出来
+                  setTimeout(() => {
+                    window.location.href = data.data.pay_url;
+                  }, 300);
+                }
               } else {
                 // PC端：新窗口打开
                 setPaymentOrder(data.data);