447 lines
17 KiB
HTML
447 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<link rel="icon" type="image/png" th:href="@{/NIKO.png}">
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>N1KO MUSIC - 购买会员</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
min-height: 100vh;
|
|
background: #0f0f13;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* ─── 左侧品牌区 ─── */
|
|
.left {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f59e0b 0%, #ea580c 60%, #c2410c 100%);
|
|
padding: 48px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
@media (min-width: 960px) { .left { display: flex; } }
|
|
|
|
.left::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
.brand-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: absolute;
|
|
top: 40px; left: 40px;
|
|
z-index: 2;
|
|
}
|
|
.brand-logo-icon {
|
|
width: 40px; height: 40px;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 22px;
|
|
}
|
|
.brand-logo-text { font-size: 1.2rem; font-weight: 700; }
|
|
|
|
.brand-content { position: relative; z-index: 2; }
|
|
.brand-title { font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
|
|
.brand-subtitle { font-size: 1rem; opacity: 0.85; line-height: 1.6; margin-bottom: 36px; }
|
|
|
|
.features { display: flex; flex-direction: column; gap: 14px; }
|
|
.feature-item {
|
|
display: flex; align-items: center; gap: 12px;
|
|
background: rgba(255,255,255,0.12);
|
|
border-radius: 12px; padding: 12px 16px;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.feature-icon {
|
|
width: 36px; height: 36px; border-radius: 8px;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 16px; flex-shrink: 0;
|
|
}
|
|
.feature-text { font-size: 0.88rem; }
|
|
.feature-text strong { display: block; font-weight: 600; margin-bottom: 2px; }
|
|
.feature-text span { opacity: 0.75; font-size: 0.78rem; }
|
|
|
|
/* ─── 右侧支付区 ─── */
|
|
.right {
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
padding: 40px 32px;
|
|
background: #0f0f13;
|
|
}
|
|
|
|
.card {
|
|
width: 100%; max-width: 400px;
|
|
background: #1a1a22;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 20px;
|
|
padding: 36px 32px;
|
|
}
|
|
|
|
.card-header { text-align: center; margin-bottom: 28px; }
|
|
.crown-icon {
|
|
width: 56px; height: 56px; border-radius: 16px;
|
|
background: linear-gradient(135deg, #f59e0b, #ea580c);
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: 28px; margin-bottom: 14px;
|
|
box-shadow: 0 8px 24px rgba(245,158,11,0.35);
|
|
}
|
|
.card-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
|
|
.card-subtitle { font-size: 0.85rem; color: rgba(255,255,255,0.45); }
|
|
|
|
.price-block {
|
|
text-align: center;
|
|
margin: 20px 0 24px;
|
|
padding: 16px;
|
|
background: rgba(245,158,11,0.06);
|
|
border: 1px solid rgba(245,158,11,0.2);
|
|
border-radius: 12px;
|
|
}
|
|
.price-amount { font-size: 2.6rem; font-weight: 800; color: #f59e0b; }
|
|
.price-label { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 4px; }
|
|
|
|
/* ─── 状态区 ─── */
|
|
#state-idle { display: block; }
|
|
#state-loading { display: none; text-align: center; padding: 24px 0; }
|
|
#state-qr { display: none; text-align: center; }
|
|
#state-success { display: none; text-align: center; padding: 24px 0; }
|
|
#state-error { display: none; }
|
|
|
|
.btn {
|
|
width: 100%; height: 48px; border: none; border-radius: 12px; cursor: pointer;
|
|
font-size: 1rem; font-weight: 600;
|
|
background: linear-gradient(135deg, #f59e0b, #ea580c);
|
|
color: #fff;
|
|
transition: opacity .2s, transform .1s;
|
|
}
|
|
.btn:hover { opacity: 0.9; }
|
|
.btn:active { transform: scale(0.98); }
|
|
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
color: rgba(255,255,255,0.5);
|
|
font-size: 0.82rem;
|
|
height: 36px;
|
|
margin-top: 10px;
|
|
}
|
|
.btn-ghost:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.25); opacity: 1; }
|
|
|
|
.qr-wrapper {
|
|
width: 192px; height: 192px; border-radius: 16px;
|
|
background: #fff; margin: 0 auto 16px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.qr-wrapper img { width: 100%; height: 100%; object-fit: contain; }
|
|
|
|
.countdown {
|
|
font-size: 0.78rem; color: rgba(255,255,255,0.35);
|
|
display: flex; align-items: center; gap-6: 6px; justify-content: center;
|
|
gap: 6px; margin-bottom: 12px;
|
|
}
|
|
.dot-pulse {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: #4ade80; animation: pulse 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
|
|
|
.success-icon {
|
|
width: 64px; height: 64px; border-radius: 50%;
|
|
background: rgba(74,222,128,0.15);
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: 32px; margin-bottom: 16px;
|
|
}
|
|
.success-title { font-size: 1.2rem; font-weight: 700; color: #4ade80; margin-bottom: 8px; }
|
|
.success-sub { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-bottom: 20px; }
|
|
|
|
.license-box {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 10px; padding: 14px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.license-label { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
|
|
.license-code {
|
|
font-family: 'Courier New', monospace; font-size: 1.1rem;
|
|
font-weight: 700; letter-spacing: .2em; color: #f59e0b;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.copy-btn {
|
|
width: 100%; height: 40px; border: none; border-radius: 10px; cursor: pointer;
|
|
background: rgba(245,158,11,0.15); color: #f59e0b;
|
|
font-size: 0.88rem; font-weight: 600;
|
|
transition: background .2s;
|
|
}
|
|
.copy-btn:hover { background: rgba(245,158,11,0.25); }
|
|
|
|
.hint {
|
|
font-size: 0.75rem; color: rgba(255,255,255,0.25);
|
|
text-align: center; margin-top: 20px; line-height: 1.6;
|
|
}
|
|
|
|
.error-box {
|
|
background: rgba(239,68,68,0.1);
|
|
border: 1px solid rgba(239,68,68,0.25);
|
|
border-radius: 10px; padding: 12px 14px;
|
|
font-size: 0.84rem; color: #f87171;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.spinner {
|
|
width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.1);
|
|
border-top-color: #f59e0b; border-radius: 50%;
|
|
animation: spin .8s linear infinite; margin: 0 auto 14px;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.loading-text { font-size: 0.88rem; color: rgba(255,255,255,0.45); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<!-- ─── 左侧品牌区 ─── -->
|
|
<div class="left">
|
|
<div class="brand-logo">
|
|
<div class="brand-logo-icon">🎵</div>
|
|
<span class="brand-logo-text">N1KO MUSIC</span>
|
|
</div>
|
|
<div class="brand-content">
|
|
<h1 class="brand-title">解锁完整<br>音乐体验</h1>
|
|
<p class="brand-subtitle">一次性永久会员，享受所有高级功能</p>
|
|
<div class="features">
|
|
<div class="feature-item">
|
|
<div class="feature-icon">🎧</div>
|
|
<div class="feature-text">
|
|
<strong>无损原码音质</strong>
|
|
<span>支持 FLAC、无损原码等高品质格式</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">⚡</div>
|
|
<div class="feature-text">
|
|
<strong>智能推荐</strong>
|
|
<span>根据你的口味精选个性化歌单</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">⭐</div>
|
|
<div class="feature-text">
|
|
<strong>我的收藏</strong>
|
|
<span>跨设备同步收藏夹，随时随地听</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">📊</div>
|
|
<div class="feature-text">
|
|
<strong>听歌统计</strong>
|
|
<span>详细播放数据，了解你的音乐偏好</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── 右侧支付区 ─── -->
|
|
<div class="right">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="crown-icon">👑</div>
|
|
<div class="card-title">开通永久会员</div>
|
|
<div class="card-subtitle">扫码支付宝完成购买，立即获得激活码</div>
|
|
</div>
|
|
|
|
<div class="price-block">
|
|
<div class="price-amount">¥<span th:text="${payAmount}">29.9</span></div>
|
|
<div class="price-label">永久会员 · 一次付清</div>
|
|
</div>
|
|
|
|
<!-- 初始状态 -->
|
|
<div id="state-idle">
|
|
<button class="btn" onclick="createOrder()">立即扫码购买</button>
|
|
<div class="hint">点击后生成支付宝二维码，有效期 10 分钟</div>
|
|
</div>
|
|
|
|
<!-- 加载中 -->
|
|
<div id="state-loading">
|
|
<div class="spinner"></div>
|
|
<div class="loading-text">正在生成支付二维码…</div>
|
|
</div>
|
|
|
|
<!-- 二维码展示 -->
|
|
<div id="state-qr">
|
|
<div class="qr-wrapper">
|
|
<img id="qr-img" src="" alt="支付宝二维码"/>
|
|
</div>
|
|
<div class="countdown">
|
|
<div class="dot-pulse"></div>
|
|
<span>等待支付 · 二维码 <span id="cd-text">10:00</span> 后过期</span>
|
|
</div>
|
|
<button class="btn" onclick="refreshOrder()">刷新二维码</button>
|
|
<button class="btn btn-ghost" onclick="resetState()">取消</button>
|
|
</div>
|
|
|
|
<!-- 支付成功 -->
|
|
<div id="state-success">
|
|
<div class="success-icon">✅</div>
|
|
<div class="success-title">支付成功！</div>
|
|
<div class="success-sub">请复制下方激活码，回到 N1KO MUSIC 填入</div>
|
|
<div class="license-box">
|
|
<div class="license-label">你的激活码</div>
|
|
<div class="license-code" id="license-code-text">—</div>
|
|
</div>
|
|
<button class="copy-btn" onclick="copyCode()">📋 复制激活码</button>
|
|
<div class="hint">激活码可重复使用，请妥善保管</div>
|
|
</div>
|
|
|
|
<!-- 错误状态 -->
|
|
<div id="state-error">
|
|
<div class="error-box" id="error-msg">下单失败，请稍后重试</div>
|
|
<button class="btn" onclick="createOrder()">重新尝试</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = ''; // 同域，无需前缀
|
|
let orderId = null;
|
|
let pollTimer = null;
|
|
let cdTimer = null;
|
|
let countdown = 0;
|
|
|
|
function show(state) {
|
|
['idle','loading','qr','success','error'].forEach(s => {
|
|
document.getElementById('state-' + s).style.display = (s === state ? (s === 'idle' ? 'block' : 'block') : 'none');
|
|
});
|
|
}
|
|
|
|
function stopTimers() {
|
|
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
|
|
if (cdTimer) { clearInterval(cdTimer); cdTimer = null; }
|
|
}
|
|
|
|
function startCountdown(seconds) {
|
|
countdown = seconds;
|
|
updateCd();
|
|
cdTimer = setInterval(() => {
|
|
countdown--;
|
|
updateCd();
|
|
if (countdown <= 0) {
|
|
stopTimers();
|
|
showError('二维码已过期，请刷新重新获取');
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function updateCd() {
|
|
const m = String(Math.floor(countdown / 60)).padStart(2, '0');
|
|
const s = String(countdown % 60).padStart(2, '0');
|
|
document.getElementById('cd-text').textContent = m + ':' + s;
|
|
}
|
|
|
|
function startPolling() {
|
|
pollTimer = setInterval(async () => {
|
|
try {
|
|
const res = await fetch(API_BASE + '/api/v1/music/order/query?orderId=' + orderId);
|
|
const json = await res.json();
|
|
if (json.code !== 200 || !json.data) return;
|
|
const data = json.data;
|
|
if (data.status === 'PAYED') {
|
|
stopTimers();
|
|
showSuccess(data.licenseCode || '');
|
|
} else if (data.status === 'CANCELED') {
|
|
stopTimers();
|
|
showError('订单已取消，请重新下单');
|
|
}
|
|
} catch (e) { /* 静默忽略轮询异常 */ }
|
|
}, 3000);
|
|
}
|
|
|
|
async function createOrder() {
|
|
stopTimers();
|
|
show('loading');
|
|
try {
|
|
const res = await fetch(API_BASE + '/api/v1/music/order?payChannel=ALI_PAY');
|
|
const json = await res.json();
|
|
if (json.code !== 200 || !json.data || !json.data.qrCode) {
|
|
showError(json.msg || json.message || '下单失败，请稍后重试');
|
|
return;
|
|
}
|
|
const data = json.data;
|
|
orderId = data.orderId;
|
|
const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=192x192&data=' + encodeURIComponent(data.qrCode);
|
|
document.getElementById('qr-img').src = qrUrl;
|
|
show('qr');
|
|
startCountdown(600);
|
|
startPolling();
|
|
} catch (e) {
|
|
showError('网络异常，请检查连接后重试');
|
|
}
|
|
}
|
|
|
|
function refreshOrder() {
|
|
createOrder();
|
|
}
|
|
|
|
function resetState() {
|
|
stopTimers();
|
|
orderId = null;
|
|
show('idle');
|
|
}
|
|
|
|
function showSuccess(code) {
|
|
document.getElementById('license-code-text').textContent = code || '（激活码生成中，请稍候查看邮件）';
|
|
show('success');
|
|
}
|
|
|
|
function showError(msg) {
|
|
document.getElementById('error-msg').textContent = msg;
|
|
show('error');
|
|
}
|
|
|
|
function copyCode() {
|
|
const code = document.getElementById('license-code-text').textContent;
|
|
if (!code || code === '—') return;
|
|
navigator.clipboard.writeText(code).then(() => {
|
|
const btn = document.querySelector('.copy-btn');
|
|
const orig = btn.textContent;
|
|
btn.textContent = '✅ 已复制！';
|
|
setTimeout(() => { btn.textContent = orig; }, 2000);
|
|
}).catch(() => {
|
|
// fallback
|
|
const ta = document.createElement('textarea');
|
|
ta.value = code;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|