feat: 页面优化

front/templates/payPage.html

@@ -160,7 +160,7 @@
             return null;
         }
 
-        // 显示Loading状态
+        // 显示Loading效果
         function showLoading() {
             document.getElementById('payment-info').style.display = 'none';
             document.getElementById('pay-container').style.display = 'none';
@@ -169,19 +169,71 @@
 
         // 处理支付回调
         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',
+            })
+            .then(async response => {
+                if (response.ok) {
+                    const data = await response.json();
+                    return data;
+                }
+                throw new Error('请求失败');
+            })
+            .then(data => {
+                switch(data.status) {
+                    case 3: 
+                        // 订单支付成功，刷新页面
+                        window.location.reload();
+                        break;
+                    case 2:
+                        // 订单处理中，继续等待
                         const loadingText = document.querySelector('.loading-text');
                         loadingText.textContent = `支付处理中，请稍等...`;
                         
-            // 1秒后刷新页面
+                        // 1秒后再次检查
-            setTimeout(() => {
+                        setTimeout(checkOrderStatus, 1000);
-                clearInterval(dotInterval);
+                        break;
-                window.location.reload();
+                    case 1: // 待支付
-            }, 1000);
+                    case 4: // 支付失败
+                    case 5: // 订单关闭
+                    default:
+                        // 这些状态都显示支付方式选择界面
+                        fetchPaymentMethods(false);
+                }
+            })
+            .catch(error => {
+                console.error('检查订单状态失败:', error);
+                fetchPaymentMethods(false);
+            });
+        }
+                
+        // 显示支付页面
+        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() {
+        function fetchPaymentMethods(showLoading = true) {
+            if (showLoading) {
+                showLoading();
+            }
+
             const id = getQueryParam('no');
             console.log('Order no:', id);
             if (id) {
@@ -202,20 +254,26 @@
                     }
                 })
                 .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) {
-                            // 只有一个支付方式时，显示空白页并直接跳转
+                        // 只有一种支付方式，直接跳转
-                            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);
                     }
                 })
                 .catch(error => {
                     console.error('获取支付方式失败:', error);
+                    document.getElementById('loading').style.display = 'none';
                     const pay = document.getElementById('pay');
                     pay.innerHTML = '<h3 style="color: red;">获取支付方式失败，请刷新重试</h3>';
                 });
@@ -304,7 +362,7 @@
 
         // 页面加载时执行
         window.onload = function() {
-            if (getQueryParam('return')) {
+            if (getQueryParam('return') === 'true') {
                 // 如果是支付回调，处理支付结果
                 handlePaymentCallback();
             } else {
@@ -312,6 +370,7 @@
                 fetchPaymentMethods();
             }
         };
+
     </script>
 
     {{ else}}