更新 front/templates/payPage.html

front/templates/payPage.html

@@ -59,7 +59,7 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                height: 100%;
+                height: 200px;
             }
             
             .loading-spinner {
@@ -139,7 +139,7 @@
     </div>
 
     <!-- Loading状态 -->
-    <div id="loading" class="loading-container" style="display: flex;">
+    <div id="loading" class="loading-container" style="display: block;">
         <div class="loading-spinner"></div>
         <p class="loading-text">支付处理中，请稍等...</p>
     </div>
@@ -214,6 +214,7 @@
 
         // 获取支付方式列表
         function fetchPaymentMethods() {
+
             const id = getQueryParam('no');
             if (id) {
                 fetch(`/pay/front/api/v1/payPage/list?id=${id}`, {
@@ -233,9 +234,9 @@
                     }
                 })
                 .then(data => {
+                    closeLoading();
                     // 处理返回的数据，例如渲染支付方式列表
                     if (data === null || data.data.length === 0) {
-                        closeLoading();
                         const pay = document.getElementById('pay');
                         pay.innerHTML = '<h3>支付环境异常，请检查</h3>';
                     } else if (data.data.length === 1) {
@@ -247,7 +248,6 @@
                         }
                     } else {
                         // 多种支付方式，展示支付界面
-                        closeLoading();
                         renderPaymentMethods(data.data);
                     }
                 })
@@ -341,6 +341,14 @@
         }
 
         // 页面加载时执行
+        // 监听页面可见性变化
+        document.addEventListener('visibilitychange', function() {
+            if (!document.hidden && localStorage.getItem('auto-redirect') == 1) {
+                // 页面从后台返回且处于支付状态
+                handlePaymentCallback();
+            }
+        });
+
         window.onload = function() {
             if (localStorage.getItem('auto-redirect') && localStorage.getItem('auto-redirect') == 2) {
                 handlePaymentCallback(); // 如果是支付回调且不是自动跳转，处理支付结果
@@ -350,7 +358,6 @@
             }
         };
 
-        
     </script>
 
     {{ else}}
@@ -359,6 +366,7 @@
     <div class="payment-info" style="text-align: center;">
         <h2 style="color: #ff0000;">支付异常</h2>
         <p>{{.message}}</p>
+        <button onclick="window.location.href='/'">返回</button>
     </div>
     </body>