feat: 购买流程重做（新页选套餐→选支付方式）+ 支付后后台自动激活 v1.8.0

- 修复「点击购买授权没反应」：支付方式选择行被 .pay-select-row 的 display:flex 压过 hidden 属性常驻显示；新增全局 [hidden]{display:none!important} - 点「购买授权」改为打开新页面 buy.html：①展示本项目全部在售套餐 ②选套餐后才显示支付方式 ③下单支付 - 自动激活改为后台 chrome.alarms 每分钟轮询（关掉侧边栏/支付页也能激活），侧边栏轮询保留为快速通道 - authCreateOrder 支持传入所选套餐 cardTypeId；新增 getCardTypes 消息
2026-10-20 18:57:04 +08:00
1 parent 540f506c78
commit 9348d52a98
@@ -0,0 +1,140 @@
+/* 购买授权页：选套餐 → 选支付方式 → 下单 → 支付 → 自动激活 */
+const $ = (id) => document.getElementById(id);
+let packages = [];
+let selected = null;
+let orderNo = null;
+let pollTimer = null;
+
+function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    }[c]));
+}
+
+function durationText(days) {
+    const n = Number(days);
+    if (!n) return '限时体验';
+    if (n >= 999999) return '永久有效';
+    return n + ' 天';
+}
+
+async function loadPackages() {
+    $('package-list').innerHTML = '<div class="loading">正在加载套餐…</div>';
+    try {
+        const res = await chrome.runtime.sendMessage({ action: 'getCardTypes' });
+        if (!res || !res.ok) throw new Error((res && res.message) || '加载失败');
+        packages = (res.data || []).filter((p) => Number(p.price) > 0);
+        if (!packages.length) {
+            $('package-list').innerHTML = '<div class="empty">暂无在售套餐，请稍后再试</div>';
+            return;
+        }
+        renderPackages();
+    } catch (e) {
+        $('package-list').innerHTML = '<div class="empty">套餐加载失败：' + esc(e.message) + '</div>';
+    }
+}
+
+function renderPackages() {
+    $('package-list').innerHTML = packages.map((p) => `
+        <div class="package" data-id="${esc(p.id)}">
+            <div class="pkg-name">${esc(p.name)}</div>
+            <div class="pkg-price">¥${esc(p.price)}</div>
+            <div class="pkg-dur">${esc(durationText(p.duration_days))}</div>
+            <button class="pkg-btn" data-id="${esc(p.id)}">选择此套餐</button>
+        </div>`).join('');
+    document.querySelectorAll('.pkg-btn').forEach((btn) => {
+        btn.addEventListener('click', () => selectPackage(btn.dataset.id));
+    });
+}
+
+function selectPackage(id) {
+    selected = packages.find((p) => String(p.id) === String(id));
+    if (!selected) return;
+    document.querySelectorAll('.package').forEach((el) => {
+        el.classList.toggle('active', el.dataset.id === String(id));
+    });
+    $('chosen-package').innerHTML = `已选套餐：<b>${esc(selected.name)}</b>　价格 <b>¥${esc(selected.price)}</b>　${esc(durationText(selected.duration_days))}`;
+    $('step-pay').hidden = false;
+    $('step-pay').scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+
+async function createOrder(payType) {
+    if (!selected) return;
+    $('order-panel').hidden = false;
+    $('order-panel').scrollIntoView({ behavior: 'smooth', block: 'center' });
+    const status = $('order-status');
+    status.className = 'order-status pending';
+    status.textContent = '⏳ 正在创建订单…';
+    try {
+        const res = await chrome.runtime.sendMessage({
+            action: 'authCreateOrder',
+            payType,
+            cardTypeId: selected.id
+        });
+        if (!res || !res.ok) throw new Error((res && res.message) || '创建订单失败');
+
+        orderNo = res.order.orderNo;
+        const priceText = res.order.couponCode
+            ? `¥${res.order.amount}（原价 ¥${res.order.originalPrice}，已用优惠码 ${res.order.couponCode}）`
+            : `¥${res.order.amount}`;
+        status.textContent = `订单 ${orderNo}（${priceText}）已创建，正在打开支付页面…`;
+        if (res.payUrl) window.open(res.payUrl, '_blank');
+        startPolling();
+    } catch (e) {
+        status.className = 'order-status error';
+        status.textContent = '✗ ' + e.message;
+    }
+}
+
+function startPolling() {
+    if (pollTimer) clearInterval(pollTimer);
+    let attempts = 0;
+    pollTimer = setInterval(async () => {
+        attempts++;
+        if (attempts > 240) {
+            clearInterval(pollTimer);
+            pollTimer = null;
+            const status = $('order-status');
+            status.className = 'order-status error';
+            status.textContent = `✗ 等待支付超时。订单号 ${orderNo}，如已付款请把订单号发给客服QQ 1556688283 手动补发。`;
+            return;
+        }
+        try {
+            const res = await chrome.runtime.sendMessage({ action: 'authQueryOrder', orderNo });
+            if (!res || !res.ok) return;
+            if (res.activated) {
+                clearInterval(pollTimer);
+                pollTimer = null;
+                showActivated(res);
+            } else if (res.cardKey && !res.activated) {
+                clearInterval(pollTimer);
+                pollTimer = null;
+                const status = $('order-status');
+                status.className = 'order-status error';
+                status.textContent = '✗ 已支付但激活失败：' + ((res.licenseState && res.licenseState.message) || '请把订单号发给客服手动处理');
+            } else {
+                const status = $('order-status');
+                status.className = 'order-status pending';
+                status.textContent = `⏳ 等待支付中…（订单 ${orderNo}，已等待 ${attempts * 5} 秒）`;
+            }
+        } catch (e) {
+            /* 单次查询失败不中断轮询 */
+        }
+    }, 5000);
+}
+
+function showActivated(res) {
+    const status = $('order-status');
+    status.className = 'order-status success';
+    status.innerHTML = `
+        <div class="ok-title">✓ 支付成功，已自动激活</div>
+        <div class="ok-line">卡密：<b>${esc(res.cardKey || '')}</b></div>
+        <div class="ok-line">到期时间：${esc(res.expireTime || '永久')}</div>
+        <div class="ok-line muted">回到插件侧边栏即可使用全部功能（本机已授权）。</div>`;
+}
+
+document.querySelectorAll('.pay-btn').forEach((btn) => {
+    btn.addEventListener('click', () => createOrder(btn.dataset.pay));
+});
+
+loadPackages();