更新 front/templates/payPage.html

2025-07-21 21:03:41 +08:00 · 2025-07-21 21:01:22 +08:00 · 2025-07-21 20:55:21 +08:00 · 2025-07-21 20:52:38 +08:00 · 2025-07-21 20:47:55 +08:00 · 2025-07-21 20:26:48 +08:00
4 changed files with 133 additions and 51 deletions
--- a/app/http/controllers/front/pay_page.go
+++ b/app/http/controllers/front/pay_page.go
@ -108,3 +108,30 @@ func GetPayLink(c *gin.Context) {
 		"message": message,
 	})
 }
+
+// 订单查询
+func PayPageCheckOrder(c *gin.Context) {
+	var (
+		code      int
+		orderInfo ordersmodel.Orders
+		returnUrl string
+	)
+	orderId := strings.TrimSpace(c.Query("no"))
+
+	if orderId == "" || len(orderId) < 18 || len(orderId) > 20 {
+		controllers.ErrWithCode(c, errorcode.OrdersNotFound)
+		return
+	}
+
+	orderInfo, returnUrl, code = thirdpay.PayPageCheckOrder(orderId)
+	if code == errorcode.OrderPayed {
+		code = errorcode.Success
+	}
+
+	rsp := front.PayPageCheckOrderResponse{
+		ReturnUrl: returnUrl,
+		Status:    orderInfo.Status,
+	}
+	controllers.HandCodeRes(c, rsp, code)
+
+}
--- a/app/http/entities/front/pay.go
+++ b/app/http/entities/front/pay.go
@ -98,3 +98,8 @@ type GetPayLinkRequest struct {
 	OrderId      string `json:"no" form:"no"`
 	ClientIp     string
 }
+
+type PayPageCheckOrderResponse struct {
+	ReturnUrl string `json:"return_url"`
+	Status    int    `json:"status"`
+}
--- a/app/http/routes/route.go
+++ b/app/http/routes/route.go
@ -99,6 +99,8 @@ func RegisterRoute(router *gin.Engine) {
 	{
 		// 收银台地址
 		router.GET(common.PayPageAddress, front.PayPage)
+		// 订单查询
+		router.GET(common.PayPageAddress+"/query", front.PayPageCheckOrder)

 		payPage := router.Group(common.PayPageAddress, middlewares.ValidateRequest())
 		// 收银台 支付渠道列表
--- a/front/templates/payPage.html
+++ b/front/templates/payPage.html
@ -59,7 +59,7 @@
                flex-direction: column;
                align-items: center;
                justify-content: center;
-                height: 200px;
+                height: 100%;
            }
            
            .loading-spinner {
@ -124,7 +124,7 @@
    {{if eq .code  200 }}
    <body>
    <!-- 页面内容 -->
-    <div class="payment-info" id="payment-info">
+    <div class="payment-info" id="payment-info" style="display: none;">
        <h2>订单支付</h2>
        <p>{{.desc}}</p>
        <p>交易号：{{ .id }}</p>
@ -132,22 +132,22 @@
    </div>
    
    <!-- 支付方式选择区域 -->
-    <div id="pay-container">
+    <div id="pay-container" style="display: none;">
        <div id="pay"></div>
        <!-- 支付方式列表 -->
        <ul id="payment-list"></ul>
    </div>

    <!-- Loading状态 -->
-    <div id="loading" class="loading-container" style="display: none;">
+    <div id="loading" class="loading-container" style="display: flex;">
        <div class="loading-spinner"></div>
-         <p class="loading-text">支付处理中，请稍等...</p>
+        <p class="loading-text">支付处理中，请稍等...</p>
    </div>

    </body>

    <script>
-        // 从 URL 中提取参数
+        // 从URL中提取参数
        function getQueryParam(param) {
            const queryString = window.location.search.substring(1);
            const params = queryString.split('&');
@ -160,70 +160,111 @@
            return null;
        }

-        // 显示Loading状态
+        // 显示Loading效果
        function showLoading() {
            document.getElementById('payment-info').style.display = 'none';
            document.getElementById('pay-container').style.display = 'none';
-            document.getElementById('loading').style.display = 'flex';
+            document.getElementById('loading').style.display = 'block';
+        }
+
+        // 关闭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() {
-            showLoading();
-            const loadingText = document.querySelector('.loading-text');
-            loadingText.textContent = `支付处理中，请稍等...`;
-            
-            // 1秒后刷新页面
-            setTimeout(() => {
-                clearInterval(dotInterval);
+            const id = getQueryParam('no');
+            if (!id) {
+                closeLoading();
+                return;
+            };
+
+            // 查询订单状态
+            fetch(`/pay/front/api/v1/payPage/query?no=${id}`, {
+                method: 'POST',
+            })
+            .then(async response => {
+                if (!response.ok) throw new Error('请求失败');
+                return await response.json();
+            })
+            .then(data => {
+                closeLoading();
+                switch(data.status) {
+                    case 2: // 处理中
+                        handlePaymentCallback(); // 重查状态
+                        break;
+                    case 3: // 支付成功
+                        if (data.return_url) {
+                            window.location.href = data.return_url; // 自动跳转
+                        }
+                        break;
+                    default: // 其他状态（待支付/失败/关闭）
+                        fetchPaymentMethods();
+                        // window.location.reload();
+                }
+            })
+            .catch(error => {
+                // closeLoading();
                window.location.reload();
-            }, 1000);
+            });
        }

        // 获取支付方式列表
        function fetchPaymentMethods() {
+
            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 => {
-                        if (response.ok) {
-                            const data = await response.json()
-                            console.log(data)
-                            if (data.code !== 200) {
-                                throw new Error('无效');
-                            } else {
-                                return data;
-                            }
-                        } else {
+                .then(async response => {
+                    if (response.ok) {
+                        const data = await response.json()
+                        console.log(data)
+                        if (data.code !== 200) {
                            throw new Error('无效');
+                        } else {
+                            return data;
                        }
-                    })
-                    .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();
+                    } 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) {
+                        if(localStorage.getItem('auto-redirect') != 2){
+                            // 否则设置自动跳转标记，并跳转
+                            localStorage.setItem('auto-redirect', 2);
                            window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
                        } else {
+                        closeLoading();
                            renderPaymentMethods(data.data);
                        }
-                    })
-                    .catch(error => {
-                        console.error('获取支付方式失败:', error);
-                        const pay = document.getElementById('pay');
-                        pay.innerHTML = '<h3 style="color: red;">获取支付方式失败，请刷新重试</h3>';
-                    });
+                    } else {
+                        closeLoading();
+                        // 多种支付方式，展示支付界面
+                        renderPaymentMethods(data.data);
+                    }
+                })
+                .catch(error => {
+                    closeLoading();
+                    console.error('获取支付方式失败:', error);
+                    const pay = document.getElementById('pay');
+                    pay.innerHTML = '<h3 style="color: red;">获取支付方式失败，请刷新重试</h3>';
+                });
            } else {
+                closeLoading();
                console.error('Order no not found in URL');
            }
        }
-
+        
        // 渲染支付方式列表
        function renderPaymentMethods(paymentMethods) {
            const pay = document.getElementById('pay');
@ -289,7 +330,6 @@
                const no = getQueryParam('no');
                const selectedMethod = document.querySelector('input[name="paymentMethod"]:checked');
                if (selectedMethod) {
-                    showLoading();
                    window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${selectedMethod.value}&no=${no}`;
                } else {
                    alert('请选择支付方式');
@ -303,15 +343,23 @@
        }

        // 页面加载时执行
-        window.onload = function() {
-            if (getQueryParam('return')) {
-                // 如果是支付回调，处理支付结果
-                handlePaymentCallback();
-            } else {
-                // 否则获取支付方式
+        // 监听页面可见性变化
+        document.addEventListener('visibilitychange', function() {
+            if (!document.hidden && localStorage.getItem('auto-redirect') == 2) {
+                // 页面从后台返回且处于支付状态
                fetchPaymentMethods();
            }
+        });
+
+        window.onload = function() {
+            if (localStorage.getItem('auto-redirect') && localStorage.getItem('auto-redirect') == 2) {
+                handlePaymentCallback(); // 如果是支付回调且不是自动跳转，处理支付结果
+            } else {
+                localStorage.setItem('auto-redirect', 1); // 设置自动跳转标记
+                fetchPaymentMethods(); // 获取支付方式
+            }
        };
+
    </script>

    {{ else}}
@ -320,7 +368,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>
Author	SHA1	Message	Date
zhangguoping	6c0b41639b	更新 front/templates/payPage.html	2025-07-21 21:03:41 +08:00
zhangguoping	15f296806f	更新 front/templates/payPage.html	2025-07-21 21:01:22 +08:00
zhangguoping	072c094878	更新 front/templates/payPage.html	2025-07-21 20:55:21 +08:00
zhangguoping	ac48291008	更新 front/templates/payPage.html	2025-07-21 20:52:38 +08:00
zhangguoping	8457574a8e	更新 front/templates/payPage.html	2025-07-21 20:47:55 +08:00
zhangguoping	64d79d4f3e	更新 front/templates/payPage.html	2025-07-21 20:26:48 +08:00
zhangguoping	eaed2d4a0b	更新 front/templates/payPage.html	2025-07-21 20:20:22 +08:00
zhangguoping	e62a311c0e	更新 front/templates/payPage.html	2025-07-21 20:11:37 +08:00
zhangguoping	26d1caa42c	更新 front/templates/payPage.html	2025-07-21 20:09:45 +08:00
zhangguoping	70c35cd5d1	更新 front/templates/payPage.html	2025-07-21 20:05:31 +08:00
zhangguoping	f83b34d1ba	更新 front/templates/payPage.html	2025-07-21 20:01:26 +08:00
zhangguoping	e85454f926	更新 front/templates/payPage.html	2025-07-21 18:48:49 +08:00
zhangguoping	5a47b55f67	更新 front/templates/payPage.html	2025-07-21 18:40:36 +08:00
zhangguoping	c30484e7f7	更新 front/templates/payPage.html	2025-07-21 18:33:19 +08:00
zhangguoping	1fe90a5ccf	更新 front/templates/payPage.html	2025-07-21 18:27:46 +08:00
zhangguoping	401bcc93e1	更新 front/templates/payPage.html	2025-07-21 18:21:47 +08:00
zhangguoping	3d7431a8d8	更新 front/templates/payPage.html	2025-07-21 18:15:44 +08:00
zhangguoping	240fda37a8	更新 front/templates/payPage.html	2025-07-21 18:01:11 +08:00
zhangguoping	4d45e6a29b	更新 front/templates/payPage.html	2025-07-21 17:48:39 +08:00
zhangguoping	f5061b558e	更新 front/templates/payPage.html	2025-07-21 17:41:22 +08:00
zhangguoping	d39d581a80	更新 front/templates/payPage.html	2025-07-21 17:27:18 +08:00
zhangguoping	c65d00689f	更新 front/templates/payPage.html	2025-07-21 17:21:15 +08:00
zhangguoping	6ebbd46ae4	更新 front/templates/payPage.html	2025-07-21 17:17:59 +08:00
zhangguoping	d20b0e99be	更新 front/templates/payPage.html	2025-07-21 17:06:18 +08:00
zhangguoping	a97843a8f2	更新 front/templates/payPage.html	2025-07-21 17:05:27 +08:00
zhangguoping	394d68624d	更新 front/templates/payPage.html	2025-07-21 17:00:56 +08:00
zhangguoping	707c1d20c1	更新 front/templates/payPage.html	2025-07-21 16:51:26 +08:00
wolter	a527a44e20	feat: 页面优化5	2025-07-21 16:25:55 +08:00
wolter	47c3a408a1	feat: 页面优化4	2025-07-21 15:46:28 +08:00
wolter	85c585ee02	feat: 页面优化3	2025-07-21 14:21:23 +08:00
wolter	8293761701	feat: 页面优化2	2025-07-21 13:58:16 +08:00
wolter	0d77c47a60	feat: 页面优化1	2025-07-21 13:39:08 +08:00
wolter	162fe878b5	feat: 页面优化	2025-07-21 11:08:37 +08:00
wolter	cdcfaaecd6	feat: 收银台查询订单	2025-07-21 09:51:01 +08:00