update pay ui

src/components/Subscription/SubscriptionContentNew.tsx

@@ -519,23 +519,34 @@ export default function SubscriptionContentNew() {
               console.log('[支付宝] 是否移动端跳转:', isMobileDevice);
 
               if (isMobileDevice) {
-                // 手机端：直接在当前页面跳转（可调起支付宝APP）
-                toast({
-                  title: '订单创建成功',
-                  description: '正在跳转到支付宝...',
-                  status: 'success',
-                  duration: 2000,
-                  isClosable: true,
-                });
+                // 手机端：显示模态框，让用户手动点击跳转到支付宝
+                // 原因：各种手机浏览器（Safari、华为、小米、微信内置等）对自动跳转有不同限制
+                // 用户主动点击可以绑过这些限制，确保兼容性
 
                 // 保存订单信息到 sessionStorage，支付完成后返回时可以用来检查状态
                 sessionStorage.setItem('alipay_order_id', data.data.id);
                 sessionStorage.setItem('alipay_order_no', data.data.order_no);
 
-                // 延迟跳转，让用户看到提示
-                setTimeout(() => {
-                  window.location.href = data.data.pay_url;
-                }, 500);
+                // 检测是否在微信内置浏览器中
+                const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
+
+                // 显示模态框，让用户点击按钮跳转
+                setPaymentOrder({
+                  ...data.data,
+                  payment_method: 'alipay',
+                  is_mobile: true,
+                  is_wechat_browser: isWechatBrowser,
+                });
+                setPaymentCountdown(30 * 60);
+                startAutoPaymentCheck(data.data.id, 'alipay');
+
+                toast({
+                  title: '订单创建成功',
+                  description: isWechatBrowser ? '请点击按钮，在浏览器中打开支付' : '请点击按钮打开支付宝',
+                  status: 'success',
+                  duration: 3000,
+                  isClosable: true,
+                });
               } else {
                 // PC端：新窗口打开
                 setPaymentOrder(data.data);
@@ -1619,12 +1630,49 @@ export default function SubscriptionContentNew() {
                           支付宝支付
                         </Text>
                       </HStack>
-                      <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
-                        请在新打开的页面中完成支付
-                      </Text>
-                      <Text color="rgba(255, 255, 255, 0.5)" fontSize="xs" mt={1}>
-                        支付完成后点击下方按钮确认
-                      </Text>
+                      {(paymentOrder as any).is_mobile ? (
+                        <>
+                          {(paymentOrder as any).is_wechat_browser ? (
+                            <>
+                              <Text color="orange.300" fontSize="sm" mb={2}>
+                                检测到您在微信中打开，请点击右上角「...」选择「在浏览器中打开」后再支付
+                              </Text>
+                              <Text color="rgba(255, 255, 255, 0.5)" fontSize="xs" mb={3}>
+                                或点击下方按钮尝试跳转
+                              </Text>
+                            </>
+                          ) : (
+                            <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm" mb={3}>
+                              点击下方按钮打开支付宝完成支付
+                            </Text>
+                          )}
+                          <Button
+                            w="full"
+                            size="lg"
+                            bgGradient="linear-gradient(135deg, #1677FF, #0958d9)"
+                            color="white"
+                            fontWeight="bold"
+                            leftIcon={<Box as={AlipayCircleOutlined} fontSize="20px" />}
+                            onClick={() => {
+                              window.location.href = (paymentOrder as any).pay_url;
+                            }}
+                            _hover={{
+                              bgGradient: 'linear-gradient(135deg, #4096ff, #1677FF)',
+                            }}
+                          >
+                            打开支付宝付款
+                          </Button>
+                        </>
+                      ) : (
+                        <>
+                          <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
+                            请在新打开的页面中完成支付
+                          </Text>
+                          <Text color="rgba(255, 255, 255, 0.5)" fontSize="xs" mt={1}>
+                            支付完成后点击下方按钮确认
+                          </Text>
+                        </>
+                      )}
                     </Box>
                   </>
                 ) : (

src/utils/apiConfig.js

@@ -17,19 +17,15 @@
  * const response = await fetch(getApiBase() + '/api/users');
  */
 export const getApiBase = () => {
-    // 生产环境使用相对路径
-    if (process.env.NODE_ENV === 'production') {
-        return '';
-    }
-
-    // 检查是否定义了 REACT_APP_API_URL（包括空字符串）
-    // 使用 !== undefined 而不是 || 运算符，正确处理空字符串
+    // 优先使用环境变量配置的 API URL
+    // 生产环境配置为 https://api.valuefrontier.cn（CDN 部署后静态资源和 API 分离）
+    // Mock 模式下配置为空字符串，让 MSW 拦截请求
     const apiUrl = process.env.REACT_APP_API_URL;
     if (apiUrl !== undefined) {
-        return apiUrl; // Mock 模式下返回 ''，其他情况返回配置的值
+        return apiUrl;
     }
 
-    // 未配置时的默认后端地址
+    // 未配置时的默认后端地址（开发环境）
     return 'http://49.232.185.254:5001';
 };