llmapi-v2 2.1.0

package/views/pages/orders.ejs

@@ -0,0 +1,111 @@
+<%- include('../partials/header', { pageTitle: '我的订单' }) %>
+<%- include('../partials/nav') %>
+
+<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+  <!-- 页面标题 -->
+  <div class="mb-8">
+    <h1 class="text-2xl font-bold text-claude-dark">我的订单</h1>
+    <p class="text-sm text-gray-500 mt-1">查看所有订单记录与支付状态</p>
+  </div>
+
+  <!-- 订单列表 -->
+  <div id="orderList">
+    <div class="text-center py-16 text-gray-400">加载中...</div>
+  </div>
+
+</div>
+
+<script>
+  function fmtMoney(n) {
+    if (n == null) return '--';
+    return '¥' + Number(n).toFixed(2);
+  }
+
+  function fmtDate(d) {
+    if (!d) return '--';
+    return new Date(d).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+  }
+
+  function escHtml(s) {
+    if (!s) return '';
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function statusBadge(status) {
+    const map = {
+      pending: { label: '待支付', cls: 'bg-yellow-100 text-yellow-700' },
+      paid: { label: '已支付', cls: 'bg-green-100 text-green-700' },
+      cancelled: { label: '已取消', cls: 'bg-gray-100 text-gray-500' },
+      refunded: { label: '已退款', cls: 'bg-red-100 text-red-600' },
+      expired: { label: '已过期', cls: 'bg-gray-100 text-gray-400' },
+    };
+    const s = map[status] || { label: status || '未知', cls: 'bg-gray-100 text-gray-500' };
+    return `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${s.cls}">${s.label}</span>`;
+  }
+
+  function planLabel(p) {
+    const map = { free: '免费版', basic: '基础版', pro: '专业版', enterprise: '企业版' };
+    return map[p] || p || '--';
+  }
+
+  async function loadOrders() {
+    const container = document.getElementById('orderList');
+    try {
+      const res = await fetch('/api/payment/orders', { credentials: 'same-origin' });
+      if (!res.ok) throw new Error('请求失败');
+      const data = await res.json();
+      const orders = data.data || data || [];
+
+      if (!orders.length) {
+        container.innerHTML = `
+          <div class="text-center py-20">
+            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+            </svg>
+            <p class="text-gray-500 mb-4">暂无订单记录</p>
+            <a href="/pricing" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-white bg-claude-orange rounded-lg hover:bg-opacity-90 transition-all shadow-sm">
+              查看套餐定价 &rarr;
+            </a>
+          </div>
+        `;
+        return;
+      }
+
+      container.innerHTML = '<div class="space-y-4">' + orders.map(o => `
+        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow transition-shadow">
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center space-x-3 mb-2">
+                <h3 class="text-base font-semibold text-claude-dark">${escHtml(planLabel(o.plan))}</h3>
+                ${statusBadge(o.status)}
+              </div>
+              <div class="flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500">
+                <span>订单号：<code class="text-xs font-mono bg-gray-50 px-1.5 py-0.5 rounded">${escHtml(o.orderNo || o.id || o._id)}</code></span>
+                <span>创建时间：${fmtDate(o.createdAt)}</span>
+                ${o.paidAt ? `<span>支付时间：${fmtDate(o.paidAt)}</span>` : ''}
+              </div>
+            </div>
+            <div class="text-right flex-shrink-0">
+              <div class="text-xl font-bold text-claude-dark">${fmtMoney(o.amount)}</div>
+              ${o.status === 'pending' ? `
+                <a href="${escHtml(o.payUrl || '#')}" class="inline-block mt-2 px-4 py-1.5 text-xs font-medium text-white bg-claude-orange rounded-lg hover:bg-opacity-90 transition-all">去支付</a>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+      `).join('') + '</div>';
+
+    } catch (e) {
+      console.error('加载订单失败:', e);
+      container.innerHTML = '<div class="text-center py-16 text-red-400">加载失败，请刷新重试</div>';
+    }
+  }
+
+  loadOrders();
+</script>
+
+</body>
+</html>

package/views/pages/pricing.ejs

@@ -0,0 +1,379 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<main class="min-h-[calc(100vh-4rem)] py-12 px-4">
+  <div class="max-w-6xl mx-auto">
+    <!-- Page Header -->
+    <div class="text-center mb-12">
+      <h1 class="text-3xl sm:text-4xl font-bold text-claude-dark">选择适合您的套餐</h1>
+      <p class="mt-3 text-lg text-claude-dark/60 max-w-2xl mx-auto">灵活的定价方案，满足从个人开发者到企业团队的各种需求</p>
+    </div>
+
+    <!-- Pricing Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+
+      <!-- Free Plan -->
+      <div class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6 flex flex-col">
+        <div class="mb-6">
+          <h3 class="text-lg font-semibold text-claude-dark">Free</h3>
+          <p class="text-sm text-claude-dark/50 mt-1">体验入门</p>
+        </div>
+        <div class="mb-6">
+          <span class="text-4xl font-bold text-claude-dark">0</span>
+          <span class="text-claude-dark/50 text-sm">元/月</span>
+        </div>
+        <ul class="space-y-3 mb-8 flex-1 text-sm text-claude-dark/70">
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>50K tokens / 月</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>10 次/分钟 速率限制</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>1 个 API Key</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>基础模型支持</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>社区支持</span>
+          </li>
+        </ul>
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <button disabled class="w-full py-2.5 px-4 bg-claude-dark/5 text-claude-dark/40 font-medium rounded-lg text-sm cursor-not-allowed">当前套餐</button>
+        <% } else { %>
+          <a href="/register" class="block w-full py-2.5 px-4 bg-claude-dark/5 text-claude-dark font-medium rounded-lg hover:bg-claude-dark/10 transition-colors text-sm text-center">选择套餐</a>
+        <% } %>
+      </div>
+
+      <!-- Starter Plan -->
+      <div class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6 flex flex-col">
+        <div class="mb-6">
+          <h3 class="text-lg font-semibold text-claude-dark">Starter</h3>
+          <p class="text-sm text-claude-dark/50 mt-1">个人开发者</p>
+        </div>
+        <div class="mb-6">
+          <span class="text-4xl font-bold text-claude-dark">9</span>
+          <span class="text-claude-dark/50 text-sm">元/月</span>
+        </div>
+        <ul class="space-y-3 mb-8 flex-1 text-sm text-claude-dark/70">
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>2M tokens / 月</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>30 次/分钟 速率限制</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>3 个 API Key</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>全部模型支持</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>邮件支持</span>
+          </li>
+        </ul>
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <button onclick="handleSubscribe('starter')" class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm">订阅</button>
+        <% } else { %>
+          <a href="/register" class="block w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm text-center">选择套餐</a>
+        <% } %>
+      </div>
+
+      <!-- Pro Plan (Recommended) -->
+      <div class="bg-white rounded-2xl shadow-md border-2 border-claude-orange p-6 flex flex-col relative">
+        <div class="absolute -top-3 left-1/2 -translate-x-1/2">
+          <span class="bg-claude-orange text-white text-xs font-semibold px-3 py-1 rounded-full">推荐</span>
+        </div>
+        <div class="mb-6">
+          <h3 class="text-lg font-semibold text-claude-dark">Pro</h3>
+          <p class="text-sm text-claude-dark/50 mt-1">专业开发者</p>
+        </div>
+        <div class="mb-6">
+          <span class="text-4xl font-bold text-claude-dark">29</span>
+          <span class="text-claude-dark/50 text-sm">元/月</span>
+        </div>
+        <ul class="space-y-3 mb-8 flex-1 text-sm text-claude-dark/70">
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>10M tokens / 月</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>60 次/分钟 速率限制</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>5 个 API Key</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>全部模型 + 优先路由</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>优先技术支持</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>用量统计分析</span>
+          </li>
+        </ul>
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <button onclick="handleSubscribe('pro')" class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm shadow-sm">订阅</button>
+        <% } else { %>
+          <a href="/register" class="block w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm text-center shadow-sm">选择套餐</a>
+        <% } %>
+      </div>
+
+      <!-- Unlimited Plan -->
+      <div class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6 flex flex-col">
+        <div class="mb-6">
+          <h3 class="text-lg font-semibold text-claude-dark">Team</h3>
+          <p class="text-sm text-claude-dark/50 mt-1">团队 / 企业</p>
+        </div>
+        <div class="mb-6">
+          <span class="text-4xl font-bold text-claude-dark">99</span>
+          <span class="text-claude-dark/50 text-sm">元/月</span>
+        </div>
+        <ul class="space-y-3 mb-8 flex-1 text-sm text-claude-dark/70">
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>50M tokens / 月</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>120 次/分钟 速率限制</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>10 个 API Key</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>全部模型 + 专属路由</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>1 对 1 专属支持</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>SLA 可用性保障</span>
+          </li>
+          <li class="flex items-start">
+            <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            <span>高级用量分析</span>
+          </li>
+        </ul>
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <button onclick="handleSubscribe('unlimited')" class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm">订阅</button>
+        <% } else { %>
+          <a href="/register" class="block w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm text-center">选择套餐</a>
+        <% } %>
+      </div>
+
+    </div>
+
+    <div class="text-center mt-8">
+      <p class="text-sm text-claude-dark/50">1 typical Claude Code conversation uses ~15K tokens</p>
+      <p class="text-sm text-claude-dark/50 mt-1">Claude Code Max costs $200/month for similar usage. Our Pro plan is $29.</p>
+    </div>
+
+    <!-- FAQ Section -->
+    <div class="mt-16 max-w-3xl mx-auto">
+      <h2 class="text-2xl font-bold text-claude-dark text-center mb-8">常见问题</h2>
+      <div class="space-y-4">
+        <div class="bg-white rounded-xl border border-claude-dark/5 p-5">
+          <h3 class="font-medium text-claude-dark">什么是 tokens？</h3>
+          <p class="mt-2 text-sm text-claude-dark/60">Tokens 是 AI 模型处理文本的基本单位。中文大约每个字对应 1-2 个 token，英文每个单词约 1-3 个 token。每月额度包含输入和输出的总 token 数。</p>
+        </div>
+        <div class="bg-white rounded-xl border border-claude-dark/5 p-5">
+          <h3 class="font-medium text-claude-dark">可以随时切换套餐吗？</h3>
+          <p class="mt-2 text-sm text-claude-dark/60">可以。升级套餐会立即生效，当月额度即时更新。降级将在当前计费周期结束后生效。</p>
+        </div>
+        <div class="bg-white rounded-xl border border-claude-dark/5 p-5">
+          <h3 class="font-medium text-claude-dark">支持哪些支付方式？</h3>
+          <p class="mt-2 text-sm text-claude-dark/60">目前支持支付宝扫码支付。后续将支持微信支付等更多支付方式。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+<!-- Alipay QR Payment Modal -->
+<div id="paymentModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+  <div class="bg-white rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6">
+    <div class="text-center">
+      <h3 class="text-lg font-semibold text-claude-dark mb-1">支付宝扫码支付</h3>
+      <p class="text-sm text-claude-dark/60 mb-4">请使用支付宝扫描下方二维码完成支付</p>
+
+      <!-- QR Code Container -->
+      <div class="flex justify-center mb-4">
+        <div id="qrCodeContainer" class="w-64 h-64 bg-claude-cream/50 rounded-xl flex items-center justify-center border border-claude-dark/10">
+          <img id="qrCodeImg" src="" alt="支付宝二维码" class="hidden w-56 h-56 object-contain">
+          <div id="qrLoading" class="flex flex-col items-center space-y-2">
+            <svg class="w-8 h-8 text-claude-orange animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span class="text-sm text-claude-dark/50">生成二维码中...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Payment Info -->
+      <div class="mb-4 p-3 bg-claude-cream/50 rounded-lg">
+        <p class="text-sm text-claude-dark/70">支付金额：<span id="paymentAmount" class="font-bold text-claude-orange text-lg"></span> 元</p>
+        <p class="text-xs text-claude-dark/40 mt-1">订单号：<span id="paymentOrderNo"></span></p>
+      </div>
+
+      <div id="paymentStatus" class="hidden mb-4 p-3 rounded-lg text-sm"></div>
+
+      <div class="flex space-x-3">
+        <button
+          onclick="closePaymentModal()"
+          class="flex-1 py-2.5 px-4 bg-claude-dark/5 text-claude-dark font-medium rounded-lg hover:bg-claude-dark/10 transition-colors text-sm"
+        >
+          取消支付
+        </button>
+        <button
+          onclick="checkPaymentStatus()"
+          id="checkPayBtn"
+          class="flex-1 py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors text-sm"
+        >
+          我已支付
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  var currentOrderNo = null;
+  var pollTimer = null;
+
+  async function handleSubscribe(plan) {
+    // Show modal and start loading
+    var modal = document.getElementById('paymentModal');
+    var qrImg = document.getElementById('qrCodeImg');
+    var qrLoading = document.getElementById('qrLoading');
+    var statusEl = document.getElementById('paymentStatus');
+
+    modal.classList.remove('hidden');
+    qrImg.classList.add('hidden');
+    qrLoading.classList.remove('hidden');
+    statusEl.classList.add('hidden');
+
+    try {
+      var res = await fetch('/api/payment/create-order', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ plan: plan }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        currentOrderNo = data.orderNo;
+        document.getElementById('paymentAmount').textContent = data.amount;
+        document.getElementById('paymentOrderNo').textContent = data.orderNo;
+
+        qrImg.src = data.qrCode;
+        qrImg.classList.remove('hidden');
+        qrLoading.classList.add('hidden');
+
+        // Start polling for payment status
+        startPaymentPolling();
+      } else {
+        qrLoading.innerHTML = '<span class="text-sm text-red-500">' + (data.error || '创建订单失败') + '</span>';
+      }
+    } catch (err) {
+      qrLoading.innerHTML = '<span class="text-sm text-red-500">网络错误，请重试</span>';
+    }
+  }
+
+  function startPaymentPolling() {
+    if (pollTimer) clearInterval(pollTimer);
+    pollTimer = setInterval(async function() {
+      if (!currentOrderNo) return;
+      try {
+        var res = await fetch('/api/payment/check/' + currentOrderNo, { credentials: 'same-origin' });
+        var data = await res.json();
+        if (data.success && data.status === 'paid') {
+          clearInterval(pollTimer);
+          onPaymentSuccess();
+        }
+      } catch (e) {
+        // Silently retry
+      }
+    }, 3000);
+  }
+
+  async function checkPaymentStatus() {
+    if (!currentOrderNo) return;
+
+    var btn = document.getElementById('checkPayBtn');
+    var statusEl = document.getElementById('paymentStatus');
+    btn.disabled = true;
+    btn.textContent = '查询中...';
+
+    try {
+      var res = await fetch('/api/payment/check/' + currentOrderNo, { credentials: 'same-origin' });
+      var data = await res.json();
+
+      if (data.success && data.status === 'paid') {
+        onPaymentSuccess();
+      } else {
+        statusEl.className = 'mb-4 p-3 rounded-lg text-sm bg-yellow-50 border border-yellow-200 text-yellow-700';
+        statusEl.textContent = '暂未检测到支付，请确认支付完成后重试';
+        statusEl.classList.remove('hidden');
+      }
+    } catch (err) {
+      statusEl.className = 'mb-4 p-3 rounded-lg text-sm bg-red-50 border border-red-200 text-red-700';
+      statusEl.textContent = '查询失败，请稍后重试';
+      statusEl.classList.remove('hidden');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '我已支付';
+    }
+  }
+
+  function onPaymentSuccess() {
+    var statusEl = document.getElementById('paymentStatus');
+    statusEl.className = 'mb-4 p-3 rounded-lg text-sm bg-green-50 border border-green-200 text-green-700';
+    statusEl.textContent = '支付成功！正在跳转到控制台...';
+    statusEl.classList.remove('hidden');
+
+    if (pollTimer) clearInterval(pollTimer);
+
+    setTimeout(function() {
+      window.location.href = '/dashboard';
+    }, 1500);
+  }
+
+  function closePaymentModal() {
+    document.getElementById('paymentModal').classList.add('hidden');
+    if (pollTimer) clearInterval(pollTimer);
+    currentOrderNo = null;
+  }
+
+  // Close modal on backdrop click
+  document.getElementById('paymentModal').addEventListener('click', function(e) {
+    if (e.target === this) closePaymentModal();
+  });
+</script>
+
+</body>
+</html>