feat: 页面优化

front/templates/payPage.html

@@ -147,7 +147,7 @@
     </body>
 
     <script>
-        // 从 URL 中提取参数
+        // 从URL中提取参数
         function getQueryParam(param) {
             const queryString = window.location.search.substring(1);
             const params = queryString.split('&');
@@ -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,56 +169,114 @@
 
         // 处理支付回调
         function handlePaymentCallback() {
+            const id = getQueryParam('no');
+            if (!id) return;
             showLoading();
-            const loadingText = document.querySelector('.loading-text');
-            loadingText.textContent = `支付处理中，请稍等...`;
 
-            // 1秒后刷新页面
+            // 检查订单状态
-            setTimeout(() => {
+            checkOrderStatus();
-                clearInterval(dotInterval);
+        }
-                window.location.reload();
+
-            }, 1000);
+        // 检查订单状态
+        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秒后再次检查
+                        setTimeout(checkOrderStatus, 1000);
+                        break;
+                    case 1: // 待支付
+                    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) {
                 fetch(`/pay/front/api/v1/payPage/list?id=${id}`, {
                     method: 'POST',
                 })
-                    .then(async response => {
+                .then(async response => {
-                        if (response.ok) {
+                    if (response.ok) {
-                            const data = await response.json()
+                        const data = await response.json()
-                            console.log(data)
+                        console.log(data)
-                            if (data.code !== 200) {
+                        if (data.code !== 200) {
-                                throw new Error('无效');
-                            } else {
-                                return data;
-                            }
-                        } else {
                             throw new Error('无效');
-                        }
-                    })
-                    .then(data => {
-                        // 处理返回的数据，例如渲染支付方式列表
-                        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 {
-                            renderPaymentMethods(data.data);
+                            return data;
                         }
-                    })
+                    } else {
-                    .catch(error => {
+                        throw new Error('无效');
-                        console.error('获取支付方式失败:', error);
+                    }
+                })
+                .then(data => {
+                    // 隐藏loading
+                    document.getElementById('loading').style.display = 'none';
+                   
+                    // 处理返回的数据，例如渲染支付方式列表
+                    if (data === null || data.data.length === 0) {
                         const pay = document.getElementById('pay');
-                        pay.innerHTML = '<h3 style="color: red;">获取支付方式失败，请刷新重试</h3>';
+                        pay.innerHTML = '<h3>支付环境异常，请检查</h3>';
-                    });
+                    } else if (data.data.length === 1) {
+                        // 只有一种支付方式，直接跳转
+                        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>';
+                });
             } else {
                 console.error('Order no not found in URL');
             }
@@ -304,7 +362,7 @@
 
         // 页面加载时执行
         window.onload = function() {
-            if (getQueryParam('return')) {
+            if (getQueryParam('return') === 'true') {
                 // 如果是支付回调，处理支付结果
                 handlePaymentCallback();
             } else {
@@ -312,6 +370,7 @@
                 fetchPaymentMethods();
             }
         };
+
     </script>
 
     {{ else}}