feat: 页面优化1

front/templates/payPage.html

@@ -141,7 +141,7 @@
     <!-- Loading状态 -->
     <div id="loading" class="loading-container" style="display: none;">
         <div class="loading-spinner"></div>
-         <p class="loading-text">支付处理中，请稍等...</p>
+        <p class="loading-text">支付处理中，请稍等...</p>
     </div>
 
     </body>
@@ -167,21 +167,21 @@
             document.getElementById('loading').style.display = 'flex';
         }
 
+        // 关闭Loading效果
+        function closeLoading() {
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('payment-info').style.display = 'block';
+            document.getElementById('pay-container').style.display = 'block';
+        }
+
         // 处理支付回调
         function handlePaymentCallback() {
             const id = getQueryParam('no');
             if (!id) return;
+
             showLoading();
 
             // 检查订单状态
-            checkOrderStatus();
-        }
-
-        // 检查订单状态
-        function checkOrderStatus() {
-            const id = getQueryParam('no');
-            if (!id) return;
-
             fetch(`/pay/front/api/v1/payPage/query?no=${id}`, {
                 method: 'POST',
             })
@@ -193,47 +193,31 @@
                 throw new Error('请求失败');
             })
             .then(data => {
+                const url = new URL(window.location.href);
                 switch(data.status) {
-                    case 3: 
-                        // 订单支付成功，刷新页面
-                        window.location.reload();
-                        break;
                     case 2:
-                        // 订单处理中，继续等待
-                        const loadingText = document.querySelector('.loading-text');
-                        loadingText.textContent = `支付处理中，请稍等...`;
-                        
-                        // 1秒后再次检查
-                        setTimeout(checkOrderStatus, 1000);
+                        // 订单处理中，1秒后再次检查
+                        setTimeout(handlePaymentCallback, 1000);
                         break;
                     case 1: // 待支付
+                    case 3: // 支付成功
                     case 4: // 支付失败
                     case 5: // 订单关闭
                     default:
-                        // 这些状态都显示支付方式选择界面
-                        fetchPaymentMethods(false);
+                        // 移除return参数，刷新界面
+                        url.searchParams.delete('return'); 
+                        window.location.href = url.toString();
+
                 }
             })
             .catch(error => {
                 console.error('检查订单状态失败:', error);
-                fetchPaymentMethods(false);
+                window.location.reload();
             });
         }
-                
-        // 显示支付页面
-        function showPaymentPage() {
-            document.getElementById('loading').style.display = 'none';
-            document.getElementById('payment-info').style.display = 'block';
-            document.getElementById('pay-container').style.display = 'block';
-            fetchPaymentMethods();
-        }
 
         // 获取支付方式列表
-        function fetchPaymentMethods(showLoading = true) {
-            if (showLoading) {
-                showLoading();
-            }
-
+        function fetchPaymentMethods() {
             const id = getQueryParam('no');
             console.log('Order no:', id);
             if (id) {
@@ -254,20 +238,16 @@
                     }
                 })
                 .then(data => {
-                    // 隐藏loading
-                    document.getElementById('loading').style.display = 'none';
-                   
                     // 处理返回的数据，例如渲染支付方式列表
                     if (data === null || data.data.length === 0) {
                         const pay = document.getElementById('pay');
                         pay.innerHTML = '<h3>支付环境异常，请检查</h3>';
                     } else if (data.data.length === 1) {
-                        // 只有一种支付方式，直接跳转
+                        // 只有一种支付方式，显示loading效果，并跳转
+                        showLoading();
                         window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
                     } else {
-                        // 多种支付方式，显示选择界面
-                        document.getElementById('pay-container').style.display = 'block';
-                        document.getElementById('payment-info').style.display = 'block';
+                        // 多种支付方式，展示支付界面
                         renderPaymentMethods(data.data);
                     }
                 })
@@ -362,12 +342,12 @@
 
         // 页面加载时执行
         window.onload = function() {
-            if (getQueryParam('return') === 'true') {
+            if (getQueryParam('return') == 'true') {
                 // 如果是支付回调，处理支付结果
                 handlePaymentCallback();
             } else {
-                // 否则获取支付方式
-                fetchPaymentMethods();
+                // 获取支付方式
+                fetchPaymentMethods(); 
             }
         };
 
@@ -379,7 +359,7 @@
     <div class="payment-info" style="text-align: center;">
         <h2 style="color: #ff0000;">支付异常</h2>
         <p>{{.message}}</p>
-        <button onclick="window.location.href='/'">返回首页</button>
+        <button onclick="window.location.href='/'">返回</button>
     </div>
     </body>