浏览代码

fix: show product info in payment popup, auto-close on success

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Xiaogang Liao 1 月之前
父节点
当前提交
0f4400999a
共有 1 个文件被更改,包括 19 次插入5 次删除
  1. 19 5
      web/product-intro/gut-testing.html

+ 19 - 5
web/product-intro/gut-testing.html

@@ -542,12 +542,18 @@ function showQrCode(codeUrl, orderNo) {
   div.onclick = function(e) { if (e.target === this) this.remove(); };
   div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
     '<h3 style="margin-bottom:0.5rem;font-size:1.1rem;">请使用微信扫码支付</h3>' +
-    '<p style="font-size:0.85rem;color:#999;margin-bottom:1rem">订单号: ' + orderNo + '</p>' +
+    '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:1rem;text-align:left">' +
+      '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">肠道菌群基因检测</div>' +
+      '<div style="display:flex;justify-content:space-between;align-items:center">' +
+        '<span style="font-size:0.8rem;color:var(--text-muted)">1份 · 含采样套件</span>' +
+        '<span style="font-size:1.1rem;font-weight:700;color:#0d9488">¥1,314</span>' +
+      '</div>' +
+    '</div>' +
     '<div style="width:200px;height:200px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden">' +
       '<img src="/api/payment/qrcode?text=' + encodeURIComponent(codeUrl) + '" alt="支付二维码" style="width:200px;height:200px">' +
     '</div>' +
     '<p style="font-size:0.8rem;color:#999">打开微信「扫一扫」完成支付</p>' +
-    '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">关闭</button>' +
+    '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">取消支付</button>' +
     '</div>';
   document.body.appendChild(div);
   
@@ -564,10 +570,18 @@ function showQrCode(codeUrl, orderNo) {
         clearInterval(pollTimer);
         div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
           '<div style="font-size:3rem;margin-bottom:0.5rem">✅</div>' +
-          '<h3 style="color:#0d9488;font-size:1.2rem;">支付成功!</h3>' +
-          '<p style="font-size:0.85rem;color:#999;margin-top:0.5rem">您的检测订单已提交,检测套件将在24小时内寄出</p>' +
-          '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;cursor:pointer">完成</button>' +
+          '<h3 style="color:#0d9488;font-size:1.2rem;margin-bottom:0.5rem">支付成功!</h3>' +
+          '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:1rem;text-align:left">' +
+            '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">肠道菌群基因检测</div>' +
+            '<div style="display:flex;justify-content:space-between;align-items:center">' +
+              '<span style="font-size:0.8rem;color:var(--text-muted)">已付款</span>' +
+              '<span style="font-size:1.1rem;font-weight:700;color:#0d9488">¥1,314</span>' +
+            '</div>' +
+          '</div>' +
+          '<p style="font-size:0.85rem;color:#999;margin-bottom:0.5rem">您的检测套件将在24小时内寄出</p>' +
+          '<p style="font-size:0.75rem;color:#bbb">窗口将在3秒后自动关闭</p>' +
           '</div>';
+        setTimeout(function() { div.remove(); }, 3000);
       }
     })
     .catch(function() {});