测试中，尝试接入支付宝（沙箱）

2026-07-09 01:51:18 +08:00
parent d64042fe46
commit 9c11698660
5 changed files with 400 additions and 12 deletions
--- a/templates/alipay/pay.html
+++ b/templates/alipay/pay.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>支付宝支付</title>
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; }
+        .container { max-width: 420px; margin: 0 auto; padding: 40px 20px; text-align: center; }
+        .icon { width: 80px; height: 80px; margin: 0 auto 20px; }
+        .icon-loading { border: 4px solid #ddd; border-top: 4px solid #1677ff; border-radius: 50%; animation: spin 1s linear infinite; }
+        .icon-success { background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+        .icon-success::after { content: ''; width: 30px; height: 16px; border: 4px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(2px, -4px); }
+        .title { font-size: 18px; color: #333; margin-bottom: 12px; }
+        .subtitle { font-size: 14px; color: #999; margin-bottom: 30px; }
+        .btn { display: inline-block; width: 100%; padding: 14px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; }
+        .btn-primary { background: #1677ff; color: #fff; }
+        .btn-primary:active { background: #0958d9; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+<div class="container">
+
+{% if pay_url %}
+    {# ===== 中转模式：自动跳转到支付宝 ===== #}
+    <div class="icon icon-loading"></div>
+    <div class="title">正在跳转到支付宝...</div>
+    <div class="subtitle">请稍候</div>
+    <script>
+        window.location.href = '{{ pay_url|escapejs }}';
+    </script>
+
+{% else %}
+    {# ===== 返回模式：支付完成后的返回页 ===== #}
+    <div class="icon icon-loading" id="status-icon"></div>
+    <div class="title" id="status-title">正在确认支付结果...</div>
+    <div class="subtitle" id="status-subtitle">请稍候</div>
+    <button class="btn btn-primary" id="back-btn" style="display:none;" onclick="goBack()">返回小程序</button>
+
+    <script>
+        var orderNo = '{{ out_trade_no|escapejs }}';
+        var pollCount = 0;
+        var maxPoll = 15;
+        var btnShown = false;
+
+        function showSuccess() {
+            document.getElementById('status-icon').className = 'icon icon-success';
+            document.getElementById('status-title').innerText = '支付成功';
+            document.getElementById('status-subtitle').innerText = '订单号: ' + orderNo;
+            document.getElementById('back-btn').style.display = 'inline-block';
+            btnShown = true;
+        }
+
+        function showTimeout() {
+            document.getElementById('status-title').innerText = '支付确认超时';
+            document.getElementById('status-subtitle').innerText = '如已完成支付，请点击下方按钮返回';
+            document.getElementById('back-btn').style.display = 'inline-block';
+            btnShown = true;
+        }
+
+        function goBack() {
+            // 尝试通过微信 JSSDK 返回小程序
+            if (typeof wx !== 'undefined' && wx.miniProgram) {
+                wx.miniProgram.navigateBack();
+            } else {
+                // 非小程序环境，尝试 history.back
+                if (history.length > 1) {
+                    history.back();
+                } else {
+                    window.close();
+                }
+            }
+        }
+
+        // 双保险：3秒后无论如何都显示返回按钮
+        setTimeout(function() {
+            if (!btnShown) {
+                document.getElementById('back-btn').style.display = 'inline-block';
+            }
+        }, 3000);
+
+        // 轮询订单状态（通过 mini-program 后台轮询，H5 仅作备用展示）
+        // 注意：H5 页面无 JWT token，无法直接调用 PaymentVerifyView
+        // 此处仅做延时等待，实际状态确认由小程序端轮询处理
+        if (orderNo) {
+            // 简单延时后展示成功（实际以小程序端轮询为准）
+            setTimeout(function() {
+                if (!btnShown) {
+                    showSuccess();
+                }
+            }, 2000);
+        }
+    </script>
+{% endif %}
+
+</div>
+</body>
+</html>