支付问题优化

front/templates/payPage.html

@@ -52,6 +52,101 @@
         background-color: #0056b3;
       }
 
+      /* 弹窗样式 */
+      .modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .modal-content {
+        background-color: white;
+        padding: 30px;
+        border-radius: 10px;
+        text-align: center;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+        width: 90%;
+        max-width: 400px;
+      }
+
+      .modal-content h3 {
+        margin-top: 0;
+        color: #333;
+      }
+
+      .modal-content p {
+        color: #666;
+        margin-bottom: 30px;
+      }
+
+      .modal-buttons {
+        display: flex;
+        justify-content: space-around;
+        gap: 20px;
+      }
+
+      .modal-button {
+        padding: 12px 24px;
+        font-size: 16px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        flex: 1;
+        max-width: 150px;
+      }
+
+      .paid-button {
+        background-color: #28a745;
+        color: white;
+      }
+
+      .paid-button:hover {
+        background-color: #218838;
+      }
+
+      .unpaid-button {
+        background-color: #dc3545;
+        color: white;
+      }
+
+      .unpaid-button:hover {
+        background-color: #c82333;
+      }
+
+      /* Toast提示样式 */
+      .toast {
+        position: fixed;
+        bottom: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 12px 24px;
+        border-radius: 5px;
+        color: white;
+        font-size: 14px;
+        z-index: 1001;
+        background-color: rgba(0, 0, 0, 0.7);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+
+      .toast.show {
+        display: block;
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      .toast.hide {
+        opacity: 0;
+        transform: translateX(-50%) translateY(20px);
+      }
+
       /* loading样式 */
       .loading-container {
         display: flex;
@@ -151,17 +246,32 @@
       <div class="loading-spinner"></div>
       <p class="loading-text">支付处理中，请稍等...</p>
     </div>
+
+    <!-- 支付状态确认弹窗 -->
+    <div id="payment-status-modal" class="modal" style="display: none;">
+      <div class="modal-content">
+        <h3>支付状态确认</h3>
+        <p>请确认您的支付状态</p>
+        <div class="modal-buttons">
+          <button id="btn-paid" class="modal-button paid-button">已支付</button>
+          <button id="btn-unpaid" class="modal-button unpaid-button">未支付</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast提示 -->
+    <div id="toast" class="toast" style="display: none;"></div>
   </body>
 
   <script>
     // 支付页面模块化实现
-
+    const API_BASE_URL = 'https://pay.cdlsxd.cn';
-    // ========== 配置模块 ==========
+    // ========== 配置模块 ==========    
     const CONFIG = {
       API: {
-        LIST: '/pay/front/api/v1/payPage/list',
+        LIST: API_BASE_URL + '/pay/front/api/v1/payPage/list',
-        SUBMIT: '/pay/front/api/v1/payPage/submit',
+        SUBMIT: API_BASE_URL + '/pay/front/api/v1/payPage/submit',
-        QUERY: '/pay/front/api/v1/payPage/query'
+        QUERY: API_BASE_URL + '/pay/front/api/v1/payPage/query'
       },
       POLLING: {
         MAX_ATTEMPTS: 30,
@@ -170,13 +280,16 @@
         REQUEST_TIMEOUT: 10000
       },
       LOCAL_STORAGE: {
-        AUTO_REDIRECT: 'auto-redirect'
+        AUTO_REDIRECT: 'auto-redirect',
+        AUTO_REDIRECT_TIMESTAMP: 'auto-redirect-timestamp'
       },
       PAYMENT_STATUS: {
         PROCESSING: 2,
         SUCCESS: 3
       },
-      REDIRECT_DELAY: 3000
+      REDIRECT_DELAY: 3000,
+      // 自动跳转标记的有效期（毫秒）
+      REDIRECT_FLAG_EXPIRY: 10 * 60 * 1000 // 10分钟
     };
 
     // ========== 工具函数模块 ==========
@@ -219,7 +332,7 @@
           loadingText.textContent = text;
         }
         
-        loadingElement.style.display = "block";
+        loadingElement.style.display = "flex";
       },
 
       // 关闭Loading效果
@@ -232,16 +345,79 @@
       // 清除支付状态标记
       clearRedirectFlag() {
         localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
+        localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP);
       },
 
       // 设置支付状态标记
       setRedirectFlag(value) {
         localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, value);
+        localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP, Date.now().toString());
       },
 
       // 获取支付状态标记
       getRedirectFlag() {
         return localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
+      },
+
+      // 检查自动跳转标记是否有效
+      isRedirectFlagValid() {
+        const flag = localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
+        const timestampStr = localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP);
+        
+        if (!flag || !timestampStr) {
+          return false;
+        }
+        
+        const timestamp = parseInt(timestampStr, 10);
+        if (isNaN(timestamp)) {
+          return false;
+        }
+        
+        // 检查标记是否在有效期内
+        return (Date.now() - timestamp) < CONFIG.REDIRECT_FLAG_EXPIRY;
+      },
+
+      // 显示支付状态确认弹窗
+      showPaymentStatusModal() {
+        const modal = document.getElementById('payment-status-modal');
+        if (modal) {
+          modal.style.display = 'flex';
+        }
+      },
+
+      // 隐藏支付状态确认弹窗
+      hidePaymentStatusModal() {
+        const modal = document.getElementById('payment-status-modal');
+        if (modal) {
+          modal.style.display = 'none';
+        }
+      },
+
+      // 显示Toast提示
+      showToast(message, duration = 3000) {
+        const toast = document.getElementById('toast');
+        if (toast) {
+          toast.textContent = message;
+          toast.className = 'toast show';
+          
+          // 自动隐藏
+          setTimeout(() => {
+            Utils.hideToast();
+          }, duration);
+        }
+      },
+
+      // 隐藏Toast提示
+      hideToast() {
+        const toast = document.getElementById('toast');
+        if (toast) {
+          toast.className = 'toast hide';
+          
+          // 动画结束后完全隐藏
+          setTimeout(() => {
+            toast.style.display = 'none';
+          }, 300);
+        }
       }
     };
 
@@ -250,12 +426,16 @@
       // 处理轮询超时
       handleTimeout() {
         Utils.closeLoading();
+        // 清除自动跳转标记
+        Utils.clearRedirectFlag();
         this.showError("支付结果查询超时，请稍后手动查询订单状态。");
       },
 
       // 处理超过最大轮询次数
       handleMaxAttempts() {
         Utils.closeLoading();
+        // 清除自动跳转标记
+        Utils.clearRedirectFlag();
         this.showError("支付结果查询次数已达上限，请稍后手动查询订单状态。");
       },
 
@@ -370,7 +550,11 @@
                   PaymentManager.handlePaymentSuccess(data);
                   break;
                 default: // 其他状态（待支付/失败/关闭）
-                  PaymentManager.handlePaymentCanceled();
+                  // 显示未查到支付状态的提示
+                  Utils.closeLoading();
+                  Utils.showToast("未查到支付状态");
+                  // 重新显示支付状态确认弹窗
+                  Utils.showPaymentStatusModal();
               }
             })
             .catch((error) => {
@@ -451,6 +635,8 @@
       // 处理支付取消
       handlePaymentCanceled() {
         Utils.closeLoading();
+        // 清除自动跳转标记，避免影响后续支付
+        Utils.clearRedirectFlag();
         // 显示支付取消提示
         const payContainer = document.getElementById("pay");
         payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
@@ -484,6 +670,8 @@
             })
             .catch((error) => {
               Utils.closeLoading();
+              // 清除自动跳转标记
+              Utils.clearRedirectFlag();
               console.error("获取支付方式失败:", error);
               const pay = document.getElementById("pay");
               pay.innerHTML = `
@@ -508,19 +696,26 @@
           pay.innerHTML = "<h3>支付环境异常，请检查</h3>";
         } else if (data.data.length === 1) {
           // 检查是否是从支付页面返回
-          if (Utils.getRedirectFlag() != 2) {
+          if (Utils.getRedirectFlag() != 2 || !Utils.isRedirectFlagValid()) {
-            // 首次访问且只有一种支付方式，自动跳转
+            // 首次访问或标记已失效，且只有一种支付方式，自动跳转
             Utils.setRedirectFlag(2);
             window.location.href = `${CONFIG.API.SUBMIT}?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
           } else {
-            // 从支付页面返回，显示支付方式选择
+            // 从支付页面返回，显示支付状态确认弹窗
             Utils.closeLoading();
-            PaymentManager.renderPaymentMethods(data.data);
+            Utils.showPaymentStatusModal();
           }
         } else {
-          Utils.closeLoading();
+          // 多种支付方式，先检查是否从支付页面返回
-          // 多种支付方式，展示支付界面
+          if (Utils.getRedirectFlag() == 2 && Utils.isRedirectFlagValid()) {
-          PaymentManager.renderPaymentMethods(data.data);
+            // 从支付页面返回，显示支付状态确认弹窗
+            Utils.closeLoading();
+            Utils.showPaymentStatusModal();
+          } else {
+            Utils.closeLoading();
+            // 首次访问或标记已失效，展示支付界面
+            PaymentManager.renderPaymentMethods(data.data);
+          }
         }
       },
 
@@ -611,6 +806,8 @@
             // 设置超时检查，如果长时间未跳转则显示错误
             setTimeout(() => {
               Utils.closeLoading();
+              // 清除自动跳转标记，避免影响后续支付
+              Utils.clearRedirectFlag();
               const payContainer = document.getElementById("pay");
               payContainer.innerHTML = `
                 <h3 style="color: red;">支付提交超时</h3>
@@ -622,6 +819,8 @@
             }, 5000);
           } catch (error) {
             Utils.closeLoading();
+            // 清除自动跳转标记，避免影响后续支付
+            Utils.clearRedirectFlag();
             alert("支付提交失败，请重试");
             console.error("支付提交失败:", error);
           }
@@ -633,29 +832,47 @@
 
     // 监听页面可见性变化
     document.addEventListener("visibilitychange", function () {
-      if (!document.hidden && localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
+      if (!document.hidden && localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2 && Utils.isRedirectFlagValid()) {
-        // 显示支付取消提示
+        // 当页面从隐藏变为可见，且有有效标记时，显示支付状态确认弹窗
-        const payContainer = document.getElementById("pay");
+        // 这样无论用户是支付成功后切换回来，还是点击完成跳回来，都能让用户确认支付状态
-        payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
+        Utils.closeLoading();
-        // 按回退键返回，重新获取支付方式
+        Utils.showPaymentStatusModal();
-        PaymentManager.fetchPaymentMethods();
       }
     });
 
     // 页面加载时执行
     window.onload = function () {
       // 检查是否有return参数或已尝试支付的标记
-      if (Utils.getQueryParam("return")) {
+      if (Utils.getQueryParam("return") || (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2 && Utils.isRedirectFlagValid())) {
-        PaymentManager.handleCallback(); // 如果是支付回调，处理支付结果
+        // 用户从支付页面返回，显示支付状态确认弹窗
-      } else if (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
+        Utils.closeLoading();
-        // 用户已经尝试过支付，检查订单状态（处理用户支付后直接返回的情况）
+        Utils.showPaymentStatusModal();
-        PaymentManager.handleCallback();
       } else {
-        // 首次访问，清除可能的旧标记并设置新标记
+        // 首次访问或标记已失效，清除可能的旧标记并设置新标记
-        localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
+        Utils.clearRedirectFlag();
-        localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, 1);
+        Utils.setRedirectFlag(1);
         PaymentManager.fetchPaymentMethods(); // 获取支付方式
       }
+
+      // 绑定弹窗按钮事件
+      document.getElementById('btn-paid').addEventListener('click', function() {
+        // 显示加载状态
+        Utils.showLoading("正在查询支付结果...");
+        // 隐藏弹窗
+        Utils.hidePaymentStatusModal();
+        // 查询订单状态
+        PaymentManager.handleCallback();
+      });
+
+      document.getElementById('btn-unpaid').addEventListener('click', function() {
+        // 隐藏弹窗
+        Utils.hidePaymentStatusModal();
+        // 清除支付状态标记
+        Utils.clearRedirectFlag();
+        Utils.setRedirectFlag(1);
+        // 重新获取支付方式
+        PaymentManager.fetchPaymentMethods();
+      });
     };
   </script>