- 修复「点击购买授权没反应」:支付方式选择行被 .pay-select-row 的 display:flex 压过 hidden 属性常驻显示;新增全局 [hidden]{display:none!important}
- 点「购买授权」改为打开新页面 buy.html:①展示本项目全部在售套餐 ②选套餐后才显示支付方式 ③下单支付
- 自动激活改为后台 chrome.alarms 每分钟轮询(关掉侧边栏/支付页也能激活),侧边栏轮询保留为快速通道
- authCreateOrder 支持传入所选套餐 cardTypeId;新增 getCardTypes 消息
141 lines
5.6 KiB
JavaScript
141 lines
5.6 KiB
JavaScript
/* 购买授权页:选套餐 → 选支付方式 → 下单 → 支付 → 自动激活 */
|
||
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) => ({
|
||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||
}[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();
|