From c6e0423e460ceed26c3fd04d69da9674149764ce Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 27 Aug 2026 02:19:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BA=86=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/frontend/cms-download.css | 483 +++++++++++++++++++-------- assets/js/cms-download.js | 299 +++++++++++------ 2 files changed, 539 insertions(+), 243 deletions(-) diff --git a/assets/css/frontend/cms-download.css b/assets/css/frontend/cms-download.css index 8d1fa39d..728eacf9 100644 --- a/assets/css/frontend/cms-download.css +++ b/assets/css/frontend/cms-download.css @@ -1,3 +1,13 @@ +/** + * AKSRT download / cashier modal. + * + * 下载弹窗走主题 design token（core/tokens.css）；收银台沿用参考实现的 + * colorful-header 结构（pay-card 契约测试锁定的类名不可改动）。 + */ + +/* ============================================================ + * 弹窗外壳 + * ============================================================ */ .aksrt-dl-modal { position: fixed; inset: 0; @@ -14,13 +24,21 @@ .aksrt-dl-modal__backdrop { position: absolute; inset: 0; - background: rgb(0 0 0 / 55%); + background: rgb(15 23 42 / 55%); +} + +@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { + .aksrt-dl-modal__backdrop { + background: rgb(15 23 42 / 38%); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + } } .aksrt-dl-modal__dialog { position: relative; z-index: 1; - width: 400px; + width: 420px; max-width: calc(100% - 20px); margin: 0 auto; } @@ -33,173 +51,347 @@ color: var(--main-color, #111827); background: var(--main-bg-color, #fff); border: 0; - border-radius: var(--main-radius, 8px); - box-shadow: 0 24px 56px rgb(15 23 42 / 24%); + border-radius: var(--radius-xl, 12px); + box-shadow: var(--shadow-lg, 0 12px 32px rgba(18, 18, 18, 0.1)); } -.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel { - padding: 26px 28px 24px; +.aksrt-dl-modal.is-open .aksrt-dl-modal__dialog { + animation: aksrt-dl-modal-in 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } +@keyframes aksrt-dl-modal-in { + from { + transform: translateY(10px) scale(0.97); + opacity: 0; + } + + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +/* 关闭按钮：下载视图中悬浮在渐变头部上 */ .aksrt-dl-modal__close, .aksrt-cashier__close { appearance: none; position: absolute; z-index: 9; - top: 10px; - right: 12px; + top: 12px; + right: 14px; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; padding: 0; color: var(--muted-color, #6b7280); - font: 400 24px/1 sans-serif; + font: 400 20px/1 sans-serif; background: transparent; border: 0; + border-radius: 50%; box-shadow: none; cursor: pointer; } +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close { + color: #fff; + background: rgb(255 255 255 / 22%); +} + +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:hover { + background: rgb(255 255 255 / 34%); +} + +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:focus-visible { + outline: 2px solid rgb(255 255 255 / 70%); + outline-offset: 1px; +} + .aksrt-dl-modal.is-cashier > .aksrt-dl-modal__dialog > .aksrt-dl-modal__panel > .aksrt-dl-modal__close { display: none; } +/* ============================================================ + * 主题化下载视图（成功 / 错误 / 扫码共用外壳） + * ============================================================ */ +.aksrt-dl-view { + /* 配色变量：按 dlv-* 修饰符整体换肤，按钮与阴影自动跟随 */ + --dl-from: var(--color-primary, #f04494); + --dl-to: var(--color-accent, #18a058); + --dl-text: #fff; +} + +.aksrt-dl-view.dlv-brand { + --dl-to: var(--aksrt-purple, #8b5cf6); +} + +.aksrt-dl-view.dlv-info { + --dl-from: var(--aksrt-blue, #3b82f6); + --dl-to: var(--aksrt-cyan, #06b6d4); +} + +.aksrt-dl-view.dlv-warn { + --dl-from: var(--color-warning, #f59e0b); + --dl-to: var(--aksrt-orange, #f97316); +} + +.aksrt-dl-view.dlv-error { + --dl-from: var(--color-error, #ef4444); + --dl-to: #dc2626; +} + +.aksrt-dl-view.dlv-vip { + --dl-from: var(--aksrt-vip-gold-2, #fda085); + --dl-to: var(--aksrt-vip-gold-1, #f6d365); + --dl-text: #6b4a12; +} + +.aksrt-dl-modal__hero { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 26px 52px 22px; + overflow: hidden; + color: var(--dl-text); + text-align: center; + background: linear-gradient(135deg, var(--dl-from), var(--dl-to)); +} + +/* 装饰光斑（对应 pay-widget 的 orb 语言） */ +.aksrt-dl-modal__hero::before, +.aksrt-dl-modal__hero::after { + position: absolute; + border-radius: 100%; + background: rgb(255 255 255 / 14%); + content: ''; +} + +.aksrt-dl-modal__hero::before { + top: -46px; + right: -34px; + width: 150px; + height: 150px; +} + +.aksrt-dl-modal__hero::after { + bottom: -60px; + left: -40px; + width: 130px; + height: 130px; + opacity: 0.55; +} + +.aksrt-dl-modal__hero-icon { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + font-size: 25px; + background: rgb(255 255 255 / 22%); + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); +} + .aksrt-dl-modal__title { - margin: 0 28px 18px 0; - color: var(--main-color, #111827); - font: 700 20px/1.3 inherit; + margin: 0; + color: inherit; + font: 800 20px/1.3 inherit; +} + +.aksrt-dl-modal__subtitle { + margin: -2px 0 0; + font-size: 12.5px; + line-height: 1.55; + opacity: 0.82; +} + +.aksrt-dl-modal__content { + padding: 18px 22px 22px; } .aksrt-dl-modal__msg { - margin: 0 0 18px; - color: var(--muted-color, #4b5563); + margin: 0 0 14px; + color: var(--muted-color, #777); font-size: 14px; line-height: 1.65; } -.aksrt-dl-modal__msg--warn { - padding: 12px 0; - color: #92400e; - background: transparent; - border: 0; - border-top: 1px solid #fde68a; - border-bottom: 1px solid #fde68a; -} - -.aksrt-dl-modal__row { - display: grid; - grid-template-columns: 64px minmax(0, 1fr) 72px; - gap: 12px; - align-items: center; - padding: 12px 0; - margin: 0 0 18px; - border-top: 1px solid var(--main-border-color, #e5e7eb); - border-bottom: 1px solid var(--main-border-color, #e5e7eb); -} - -.aksrt-dl-modal__label { - color: var(--muted-color, #6b7280); +.aksrt-dl-modal__alert { + margin: 0 0 14px; + padding: 11px 13px; font-size: 13px; - font-weight: 600; - white-space: nowrap; + line-height: 1.6; + border-radius: var(--radius, 8px); +} + +.aksrt-dl-modal__alert--warn { + color: var(--color-warning-text, #ad6800); + background: var(--color-warning-bg, #fffbe6); + border: 1px solid #fde68a; +} + +/* 提取码卡片 */ +.aksrt-dl-modal__code-card { + padding: 13px 15px; + margin: 0 0 14px; + background: var(--surface-2, rgba(0, 0, 0, 0.04)); + border: 1px dashed var(--color-line-stronger, rgba(50, 50, 50, 0.12)); + border-radius: 10px; +} + +.aksrt-dl-modal__code-caption { + margin-bottom: 7px; + color: var(--muted-color, #777); + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; +} + +.aksrt-dl-modal__code-row { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; + min-width: 0; } .aksrt-dl-modal__code { display: block; min-width: 0; overflow: hidden; - color: var(--main-color, #111827); - font: 800 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - letter-spacing: 0.06em; + color: var(--color-primary, #f04494); + font: 800 20px/1.25 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); + letter-spacing: 0.12em; text-overflow: ellipsis; white-space: nowrap; } +.aksrt-dl-modal__code--wrap { + font-size: 14px; + font-weight: 500; + letter-spacing: 0.02em; + word-break: break-all; + white-space: normal; +} + .aksrt-dl-modal__copy { - appearance: none !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - width: 72px !important; - height: 32px !important; - padding: 0 !important; - overflow: visible !important; - color: #2563eb !important; - font-family: inherit !important; - font-size: 0 !important; - font-weight: 700 !important; - line-height: 1 !important; - text-indent: 0 !important; - white-space: nowrap !important; - cursor: pointer !important; - visibility: visible !important; - background: #eff6ff !important; - border: 1px solid #bfdbfe !important; - border-radius: 8px !important; - opacity: 1 !important; - -webkit-text-fill-color: #2563eb !important; -} - -.aksrt-dl-modal__copy::before, -.aksrt-dl-modal__copy::after { - display: none !important; - content: none !important; -} - -.aksrt-dl-modal__copy:hover { - color: #1d4ed8 !important; - background: #dbeafe !important; - border-color: #93c5fd !important; - -webkit-text-fill-color: #1d4ed8 !important; -} - -.aksrt-dl-modal__copy-text { - position: relative !important; - z-index: 2 !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - color: #2563eb !important; - font-family: inherit !important; - font-size: 13px !important; - font-weight: 700 !important; - line-height: 1 !important; - text-indent: 0 !important; - white-space: nowrap !important; - visibility: visible !important; - opacity: 1 !important; - -webkit-text-fill-color: #2563eb !important; -} - -.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text { - color: #1d4ed8 !important; - -webkit-text-fill-color: #1d4ed8 !important; -} - -.aksrt-dl-modal__actions { - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - padding-top: 4px; -} - -.aksrt-dl-modal__download { + appearance: none; display: inline-flex; align-items: center; justify-content: center; - min-height: 40px; - padding: 0 18px; - text-decoration: none; - cursor: pointer; + flex: 0 0 auto; + height: 30px; + padding: 0 14px; + color: var(--color-primary, #f04494); + font-family: inherit; + font-size: 12px; + font-weight: 700; + line-height: 1; + background: var(--color-primary-soft, rgba(240, 68, 148, 0.1)); border: 0; - border-radius: 9px; + border-radius: 999px; + cursor: pointer; } -.aksrt-dl-modal__balance { - margin-left: auto; - color: var(--muted-color, #6b7280); - font-size: 13px; - white-space: nowrap; +.aksrt-dl-modal__copy:hover { + background: var(--focus-color-opacity3, rgba(240, 68, 148, 0.3)); } +.aksrt-dl-modal__copy:focus-visible { + outline: 2px solid var(--color-primary, #f04494); + outline-offset: 1px; +} + +.aksrt-dl-modal__copy.is-done { + color: var(--color-success, #10b981); + background: var(--aksrt-green-soft, rgba(16, 185, 129, 0.12)); +} + +/* 信息 chips 行 */ +.aksrt-dl-modal__meta { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 0 0 16px; +} + +.aksrt-dl-modal__chip { + display: inline-flex; + gap: 6px; + align-items: center; + padding: 5px 11px; + color: var(--muted-color, #777); + font-size: 12px; + font-weight: 600; + background: var(--surface-2, rgba(0, 0, 0, 0.04)); + border-radius: 999px; +} + +.aksrt-dl-modal__chip i { + color: var(--color-primary, #f04494); + font-size: 12px; +} + +/* 操作按钮 */ +.aksrt-dl-modal__actions { + display: flex; + flex-direction: column; + gap: 10px; +} + +.aksrt-dl-modal__btn { + appearance: none; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + box-sizing: border-box; + width: 100%; + min-height: 42px; + padding: 0 18px; + color: var(--dl-text, #fff); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-decoration: none; + background: linear-gradient(135deg, var(--dl-from, var(--color-primary, #f04494)), var(--dl-to, var(--color-accent, #18a058))); + border: 0; + border-radius: 10px; + cursor: pointer; + transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; +} + +.aksrt-dl-modal__btn:hover { + transform: translateY(-1px); + filter: brightness(1.05); +} + +.aksrt-dl-modal__btn:active { + transform: scale(0.98); +} + +.aksrt-dl-modal__btn:focus-visible { + outline: 2px solid var(--color-primary, #f04494); + outline-offset: 2px; +} + +.aksrt-dl-modal__download { + min-height: 48px; + font-size: 15px; + box-shadow: 0 10px 20px -8px var(--dl-from, var(--color-primary, #f04494)); +} + +.aksrt-dl-modal__download:hover { + box-shadow: 0 12px 24px -8px var(--dl-from, var(--color-primary, #f04494)); +} + +/* ============================================================ + * 收银台（参考实现契约结构） + * ============================================================ */ .aksrt-dl-modal.is-cashier .aksrt-dl-modal__body { position: relative; min-height: 120px; @@ -224,7 +416,7 @@ align-items: center; justify-content: center; height: 120px; - border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0; + border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0; } .aksrt-dl-modal .colorful-bg > .colorful-make, @@ -287,6 +479,7 @@ text-align: center; } +/* 收银台内部使用的工具类作用域 */ .aksrt-dl-modal .text-center { text-align: center; } @@ -421,7 +614,7 @@ .aksrt-dl-modal .muted-box { padding: 10px; background: var(--muted-border-color, rgb(132 145 165 / 10%)); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .pay-tag { @@ -431,7 +624,7 @@ font-size: 12px; line-height: 1.4; background: rgb(41 151 247 / 10%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-cashier__price-row { @@ -477,7 +670,7 @@ line-height: 16px; vertical-align: 1px; background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-cashier__asset-icon { @@ -492,7 +685,7 @@ padding: 5px; text-align: center; border: 1px solid var(--main-border-color, rgb(132 145 165 / 20%)); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .payment-method-radio > * { @@ -534,7 +727,7 @@ font: inherit; background: var(--main-bg-color, #fff); border: 1px solid var(--main-border-color, #e5e7eb); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .relative { @@ -570,7 +763,7 @@ line-height: 1.5; text-align: center; background: rgb(255 84 115 / 10%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .but.initiate-pay { @@ -600,6 +793,9 @@ text-decoration: none; } +/* ============================================================ + * 页面内已购信息块（下载区，随本文件一起加载） + * ============================================================ */ .resource-download-box__attrs { display: grid; gap: 6px; @@ -665,38 +861,29 @@ body.aksrt-dl-modal-open { } @media (max-width: 480px) { - .aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel { - padding: 24px 20px 22px; + .aksrt-dl-modal__hero { + padding: 24px 44px 20px; } - .aksrt-dl-modal__row { - grid-template-columns: 1fr 72px; - gap: 8px 12px; - } - - .aksrt-dl-modal__label { - grid-column: 1 / -1; + .aksrt-dl-modal__content { + padding: 16px 16px 18px; } .aksrt-dl-modal__code { - font-size: 17px; + font-size: 18px; } - .aksrt-dl-modal__actions { - flex-direction: column; - align-items: flex-start; - } - - .aksrt-dl-modal__download { - width: 100%; - } - - .aksrt-dl-modal__balance { - margin-left: 0; + .aksrt-dl-modal__chip { + padding: 4px 10px; + font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { + .aksrt-dl-modal.is-open .aksrt-dl-modal__dialog { + animation: none; + } + .aksrt-dl-modal .colorful-bg > .colorful-make { animation: none; } diff --git a/assets/js/cms-download.js b/assets/js/cms-download.js index b95fb8d4..38905e34 100644 --- a/assets/js/cms-download.js +++ b/assets/js/cms-download.js @@ -6,6 +6,9 @@ * - 调 POST /aksrt/v1/download/request * - 弹窗显示下载链接（含提取码） * + * 弹窗视觉走主题 design token（见 assets/css/frontend/cms-download.css）， + * 付费收银台沿用参考实现的 colorful header 结构。 + * * 依赖： * - window.aksrtData.{ ajaxUrl, nonce, siteUrl } * - 主题已加载 fetch (现代浏览器) @@ -17,8 +20,6 @@ const REST_BASE = window.aksrtData.siteUrl ? window.aksrtData.siteUrl.replace(/\/$/, '') + '/wp-json/aksrt/v1' : '/wp-json/aksrt/v1'; const PAY_CONTENT_PATH = '/pay/content/'; - function tt(key, zh) { return zh; } - function escapeHtml(value) { return String(value == null ? '' : value) .replace(/&/g, '&') @@ -78,7 +79,7 @@ '
' + '
' + '
' + - ' ' + + ' ' + '
' + '
' + '
'; @@ -136,52 +137,106 @@ lastFocusedElement = null; } + // ===== 统一视图壳（下载 / 错误 / 扫码共用主题化外观） ===== + // variant 决定 hero 渐变配色（对应 CSS 的 .dlv-* 修饰符）。 + const DL_VIEWS = { + success: { variant: 'success', icon: 'fa-cloud-download-alt', title: '下载已就绪' }, + login: { variant: 'info', icon: 'fa-user-lock', title: '请先登录' }, + purchase: { variant: 'brand', icon: 'fa-shopping-cart', title: '请先购买' }, + vip: { variant: 'vip', icon: 'fa-gem', title: '会员专属' }, + credits: { variant: 'warn', icon: 'fa-coins', title: '积分不足' }, + quota: { variant: 'warn', icon: 'fa-hourglass-half', title: '今日免费额度已用完' }, + captcha: { variant: 'error', icon: 'fa-shield-alt', title: '验证失败' }, + error: { variant: 'error', icon: 'fa-exclamation-circle', title: '下载失败' }, + pay: { variant: 'info', icon: 'fa-qrcode', title: '扫码支付' }, + }; + + function dlActionButton(action) { + if (!action) return ''; + const tag = action.kind === 'link' ? 'a' : 'button'; + const cls = 'aksrt-dl-modal__btn' + (action.cls ? ' ' + action.cls : ''); + const attrs = [ + 'class="' + cls + '"', + action.url ? 'href="' + escapeAttr(action.url) + '"' : '', + action.attrs || '', + ].filter(Boolean).join(' '); + return '<' + tag + ' ' + attrs + '>' + + '' + + '' + escapeHtml(action.label) + '' + + ''; + } + + function dlView(viewKey, options) { + const meta = DL_VIEWS[viewKey] || DL_VIEWS.error; + options = options || {}; + let html = '
'; + html += '
'; + html += '
'; + html += '

' + (options.title || meta.title) + '

'; + if (options.subtitle) { + html += '

' + escapeHtml(options.subtitle) + '

'; + } + html += '
'; + html += '
'; + html += options.body || ''; + if (options.actions && options.actions.length) { + html += '
' + + options.actions.map(dlActionButton).join('') + + '
'; + } + html += '
'; + return html; + } + // ===== 错误提示渲染 ===== function renderError(msg, data, returnFocusEl, code) { - let title = tt('failed', '下载失败'); - let extra = ''; + let viewKey = 'error'; + let subtitle = ''; + let action = null; - if (code === 'aksrt_need_login' && data && data.login_url) { - title = tt('need_login', '请先登录'); - msg = tt('login_hint', '登录后即可继续下载，访客不可使用此资源。'); - extra = '' + tt('go_login', '前往登录') + ''; + data = data || {}; + msg = msg || ''; + + if (code === 'aksrt_need_login') { + viewKey = 'login'; + msg = data.login_url ? '登录后即可继续下载，访客不可使用此资源。' : (msg || '无下载权限。'); + if (data.login_url) action = { kind: 'link', url: data.login_url, label: '前往登录', icon: 'fa-sign-in-alt' }; } else if (code === 'aksrt_need_purchase') { - title = tt('need_purchase', '请先购买'); - msg = msg || tt('purchase_hint', '请先完成购买后再下载该资源。'); - extra = ''; + viewKey = 'purchase'; + msg = msg || '请先完成购买后再下载该资源。'; + if (data.post_id) { + action = { kind: 'button', label: '去购买', icon: 'fa-shopping-cart', attrs: 'type="button" data-aksrt-open-cashier="' + escapeAttr(data.post_id) + '"' }; + } } else if (code === 'aksrt_need_vip') { - title = tt('need_vip', '会员专属'); - msg = msg || tt('vip_hint', '该资源仅限会员购买/下载。'); - if (data && data.vip_url) { - extra = '' + tt('go_vip', '开通会员') + ''; - } + viewKey = 'vip'; + msg = msg || '该资源仅限会员购买/下载。'; + subtitle = '开通会员即可解锁本资源'; + if (data.vip_url) action = { kind: 'link', url: data.vip_url, label: '开通会员', icon: 'fa-gem' }; } else if (code === 'aksrt_points_insufficient' || code === 'aksrt_balance_insufficient') { - title = tt('credit_low', '积分不够'); - const balance = typeof (data && data.balance) === 'number' ? data.balance : 0; - const cost = typeof (data && data.cost) === 'number' ? data.cost : 0; - msg = tt('credit_hint', - '当前余额 ' + balance + ' 积分，需要 ' + cost + ' 积分。可通过签到、阅读、邀请好友等方式获取积分。' - ); - if (data && data.credits_url) { - extra = '' + tt('my_points', '我的积分') + ''; - } + viewKey = 'credits'; + const balance = typeof data.balance === 'number' ? data.balance : 0; + const cost = typeof data.cost === 'number' ? data.cost : 0; + msg = '当前余额 ' + balance + ' 积分，需要 ' + cost + ' 积分。可通过签到、阅读、邀请好友等方式获取积分。'; + if (data.credits_url) action = { kind: 'link', url: data.credits_url, label: '我的积分', icon: 'fa-coins' }; } else if (code === 'aksrt_download_limit') { - title = tt('quota_over', '今日免费额度已用完'); - msg = msg || tt('quota_hint', '您今日下载免费资源个数已超限，请明日再下载。'); - if (data && data.allow_limit_over && data.post_id) { - extra = ''; + viewKey = 'quota'; + msg = msg || '您今日下载免费资源个数已超限，请明日再下载。'; + if (data.allow_limit_over && data.post_id) { + action = { kind: 'button', label: '立即购买', icon: 'fa-shopping-cart', attrs: 'type="button" data-aksrt-open-cashier="' + escapeAttr(data.post_id) + '" data-price-type="download_limit_over"' }; } } else if (code === 'aksrt_captcha_failed') { - title = tt('captcha_fail', '验证失败'); - msg = msg || tt('captcha_retry', '人机验证失败，请重试。'); - } else if (data && data.login_url) { - extra = '' + tt('go_login', '前往登录') + ''; + viewKey = 'captcha'; + msg = msg || '人机验证失败，请重试。'; + } else if (!action && data.login_url) { + action = { kind: 'link', url: data.login_url, label: '前往登录', icon: 'fa-sign-in-alt' }; } open( - '

' + title + '

' + - '

' + (msg || '') + '

' + - (extra ? '
' + extra + '
' : ''), + dlView(viewKey, { + subtitle: subtitle, + body: msg ? '

' + escapeHtml(msg) + '

' : '', + actions: action ? [action] : [], + }), returnFocusEl ); @@ -197,22 +252,60 @@ } // ===== 成功渲染 ===== + function metaChip(icon, label) { + return '' + escapeHtml(label) + ''; + } + function renderSuccess(payload, returnFocusEl) { + payload = payload || {}; const code = String(payload.extract_code || '').trim(); const has = !!payload.has_extract || code !== ''; const safeCode = escapeHtml(code); const safeCodeAttr = escapeAttr(code); - const dlUrl = escapeAttr(payload.dl_url || '#'); - const extractHtml = code !== '' - ? '
' + tt('extract', '提取码') + '' + safeCode + '
' - : (has ? '

' + tt('extract_missing', '下载源标记了提取码，但接口未返回具体内容，请检查资源下载源的 extract_code 字段。') + '

' : ''); + const expiresIn = typeof payload.expires_in === 'number' && payload.expires_in > 0 + ? Math.max(1, Math.round(payload.expires_in / 60)) + : 10; + + let body = ''; + if (code !== '') { + body += + '
' + + '
网盘提取码
' + + '
' + + ' ' + safeCode + '' + + ' ' + + '
' + + '
'; + } else if (has) { + body += '

下载源标记了提取码，但接口未返回具体内容，请检查资源下载源的 extract_code 字段。

'; + } else { + body += '

点击下方按钮开始下载，文件请及时保存到本地。

'; + } + + const chips = []; + const sourceLabel = String(payload.source_label || '').trim(); + if (sourceLabel !== '') { + chips.push('' + escapeHtml(sourceLabel) + ''); + } + chips.push(metaChip('fa-clock', '链接 ' + expiresIn + ' 分钟内有效')); + if (typeof payload.balance === 'number') { + chips.push(metaChip('fa-coins', '积分余额 ' + payload.balance)); + } + body += '
' + chips.join('') + '
'; + open( - '

' + tt('ready', '下载已就绪') + '

' + - (extractHtml || '

' + tt('hint', '点击下方按钮开始下载，链接 10 分钟内有效。') + '

') + - '
' + - ' ' + tt('go', '立即下载') + '' + - (typeof payload.balance === 'number' ? ' ' + tt('balance', '余额：') + payload.balance + '' : '') + - '
', + dlView('success', { + subtitle: '下载链接已生成，请及时将文件保存到本地。', + body: body, + actions: [{ + kind: 'link', + url: payload.dl_url || '#', + label: '立即下载', + icon: 'fa-download', + cls: 'aksrt-dl-modal__download', + attrs: 'target="_blank" rel="noopener noreferrer"', + }], + }), returnFocusEl ); @@ -223,8 +316,12 @@ const label = btn.querySelector('.aksrt-dl-modal__copy-text') || btn; if (navigator.clipboard) { navigator.clipboard.writeText(text).then(function () { - label.textContent = tt('copied', '已复制'); - setTimeout(function () { label.textContent = tt('copy', '复制'); }, 2000); + label.textContent = '已复制'; + btn.classList.add('is-done'); + setTimeout(function () { + label.textContent = '复制'; + btn.classList.remove('is-done'); + }, 2000); }); } }); @@ -259,11 +356,11 @@ function cashierHeader() { return '
' + - '' + + '' + '
' + '
' + '
' + - '
' + tt('confirm_buy', '确认购买') + '
' + + '
确认购买
' + '
' + '
'; } @@ -285,7 +382,7 @@ if (window.console && console.warn) { console.warn('[AKSRT] download captcha not ready'); } - alert(tt('captcha_loading', '验证码组件加载中，请稍候再试')); + alert('验证码组件加载中，请稍候再试'); return; } scene.verify(function () { callback(); }); @@ -300,7 +397,7 @@ button.disabled = true; const original = button.innerHTML; - button.innerHTML = ' ' + tt('processing', '处理中…'); + button.innerHTML = ' 处理中…'; const restNonce = window.aksrtData.restNonce || ''; const captchaPayload = collectCaptchaPayload(button); @@ -323,7 +420,7 @@ button.disabled = false; button.innerHTML = original; if (!r.ok || (r.json && r.json.code)) { - renderError(r.json.message || tt('default_err', '请稍后重试'), r.json.data || {}, button, r.json.code); + renderError(r.json.message || '请稍后重试', r.json.data || {}, button, r.json.code); // 验证码已被消费，重置以便用户重试 try { const scene = window.AKSRTCaptchaState && window.AKSRTCaptchaState.scenes && window.AKSRTCaptchaState.scenes.download; @@ -336,7 +433,7 @@ .catch(function () { button.disabled = false; button.innerHTML = original; - renderError(tt('network_err', '网络错误，请稍后重试'), {}, button); + renderError('网络错误，请稍后重试', {}, button); }); } @@ -410,7 +507,7 @@ priceType = priceType || ''; couponCode = couponCode || ''; openCashierContent( - '

' + tt('loading', '加载中…') + '

', + '

加载中…

', returnFocusEl ); @@ -427,11 +524,11 @@ renderError(r.json.message || '', data, returnFocusEl, 'aksrt_need_vip'); return; } - if (code === 'aksrt_already_paid' || code === 'aksrt_already_followed') { + if (code === 'aksrt_already_paid') { window.location.reload(); return; } - renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), data, returnFocusEl, code); + renderError((r.json && r.json.message) || '请稍后重试', data, returnFocusEl, code); return; } var prev = r.json || {}; @@ -440,7 +537,7 @@ renderCashier(prev, returnFocusEl); }) .catch(function () { - renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl); + renderError('网络错误，请稍后重试', {}, returnFocusEl); }); } @@ -518,36 +615,36 @@ if (!isPoints && Number(preview.original) > Number(preview.base)) { regularPrice = '' + formatAssetLabel(preview, preview.original) + '' + regularPrice; } - priceRows += cashierPriceRow(tt('price', '价格'), regularPrice, 'aksrt-cashier__regular-price'); + priceRows += cashierPriceRow('价格', regularPrice, 'aksrt-cashier__regular-price'); } if (preview.list_amount !== preview.base) { priceRows += cashierPriceRow( - tt('vip_price', '会员价') + 'VIP' + escapeHtml(preview.vip_level || '') + '', + '会员价VIP' + escapeHtml(preview.vip_level || '') + '', '' + listLabel + '', 'c-red' ); } else if (preview.amount !== preview.base && !preview.rebate_discount && !preview.coupon_discount) { priceRows += cashierPriceRow( - tt('vip_price', '会员价') + 'VIP' + escapeHtml(preview.vip_level || '') + '', + '会员价VIP' + escapeHtml(preview.vip_level || '') + '', '' + amountLabel + '', 'c-red' ); } if (preview.rebate_discount > 0) { priceRows += cashierPriceRow( - tt('rebate_discount', '推广折扣'), + '推广折扣', '' + escapeHtml(preview.rebate_discount_label || ('-' + preview.rebate_discount)) + '' ); } if (preview.coupon_discount > 0) { priceRows += cashierPriceRow( - tt('coupon_discount', '优惠码'), + '优惠码', '' + escapeHtml(preview.coupon_discount_label || ('-' + preview.coupon_discount)) + '' ); } if (preview.amount !== preview.base || preview.rebate_discount > 0 || preview.coupon_discount > 0) { priceRows += cashierPriceRow( - tt('pay_amount', '支付金额'), + '支付金额', '' + amountLabel + '', 'font-bold c-red' ); @@ -562,27 +659,27 @@ if (isPoints) { body += '
' + '
' + - '' + tt('my_points', '我的积分') + + '我的积分' + '
' + balance + '
'; if (!preview.balance_enough) { - body += '
' + tt('points_short', '抱歉，您的积分不足，暂时无法支付') + '
'; + body += '
抱歉，您的积分不足，暂时无法支付
'; body += '
'; if (preview.credits_url) { - body += '' + tt('my_points', '我的积分') + ''; + body += '我的积分'; } body += '
'; openCashierContent(body, returnFocusEl); return; } body += ''; + '立即支付' + amountLabel + ''; } else { if (couponAllowed) { body += '
'; - body += '
' + tt('use_coupon', '使用优惠码') + '
'; + body += '
使用优惠码
'; body += '
'; - body += ''; - body += ''; + body += ''; + body += ''; body += '
'; if (preview.coupon_desc) { body += '
' + escapeHtml(preview.coupon_desc) + '
'; @@ -590,7 +687,7 @@ if (preview.coupon_error) { body += '
' + escapeHtml(preview.coupon_error) + '
'; } else if (preview.coupon_discount > 0) { - body += '
' + tt('coupon_ok', '优惠码可用') + '
'; + body += '
优惠码可用
'; } body += '
'; } @@ -608,7 +705,7 @@ paymentMethodLogo(rawId) + '
' + name + '
'; }); if (methods.length > 1) { - body += '
' + tt('pay_method', '请选择支付方式') + '
' + + body += '
请选择支付方式
' + '
' + methodHtml + '
'; } if (methods.length) { @@ -618,23 +715,23 @@ const balanceSelected = methods[0] && methods[0].id === 'balance'; body += '
' + '
' + - '' + tt('my_wallet', '我的余额') + + '我的余额' + '
￥' + escapeHtml(walletBal) + '
'; if (preview.balance_enough === false) { if (preview.credits_url) { body += '' + - tt('wallet_short', '抱歉！余额不足，请先充值') + ' '; + '抱歉！余额不足，请先充值 '; } else { - body += '
' + tt('wallet_short', '抱歉！余额不足，请先充值') + '
'; + body += '
抱歉！余额不足，请先充值
'; } } body += '
'; } if (methods.length) { body += ''; + '立即支付' + amountLabel + ''; } else { - body += '
' + tt('no_pay_method', '暂无可用支付方式，请联系站长配置收款接口') + '
'; + body += '
暂无可用支付方式，请联系站长配置收款接口
'; } } @@ -652,13 +749,13 @@ } checkBtn.disabled = true; const old = checkBtn.innerHTML; - checkBtn.innerHTML = tt('checking', '检查中…'); + checkBtn.innerHTML = '检查中…'; fetchPreview(preview.post_id, priceType, code) .then(function (r) { checkBtn.disabled = false; checkBtn.innerHTML = old; if (!r.ok || (r.json && r.json.code && !r.json.amount && r.json.amount !== 0)) { - renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), (r.json && r.json.data) || {}, returnFocusEl, (r.json && r.json.code) || ''); + renderError((r.json && r.json.message) || '请稍后重试', (r.json && r.json.data) || {}, returnFocusEl, (r.json && r.json.code) || ''); return; } var prev = r.json || {}; @@ -669,7 +766,7 @@ .catch(function () { checkBtn.disabled = false; checkBtn.innerHTML = old; - renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl); + renderError('网络错误，请稍后重试', {}, returnFocusEl); }); }); } @@ -717,7 +814,7 @@ if (!postId) return; const original = button.innerHTML; button.disabled = true; - button.innerHTML = tt('processing', '处理中…'); + button.innerHTML = '处理中…'; const payload = { mode: mode }; if (mode === 'cash') payload.payment_method = paymentMethod || 'balance'; @@ -741,11 +838,11 @@ if (!r.ok || (r.json && r.json.code && !r.json.success)) { const code = r.json && r.json.code ? r.json.code : ''; const data = (r.json && r.json.data) || {}; - if (code === 'aksrt_already_paid' || code === 'aksrt_already_followed') { + if (code === 'aksrt_already_paid') { window.location.reload(); return; } - renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), data, returnFocusEl, code); + renderError((r.json && r.json.message) || '请稍后重试', data, returnFocusEl, code); return; } const data = (r.json && r.json.data) ? r.json.data : r.json; @@ -754,15 +851,7 @@ if (data.payment_url) { window.open(data.payment_url, '_blank'); } - open( - '

' + tt('scan_pay', '扫码支付') + '

' + - '

' + escapeHtml(data.message || tt('scan_hint', '请使用手机扫码完成支付，支付后刷新页面。')) + '

' + - (data.qr_content ? ('

' + escapeHtml(data.qr_content || '') + '

') : '') + - '
', - returnFocusEl - ); - const reloadBtn = document.querySelector('[data-aksrt-reload]'); - if (reloadBtn) reloadBtn.addEventListener('click', function () { window.location.reload(); }); + renderScanPay(data, returnFocusEl); if (data.order_number) pollOrderPaid(data.order_number, returnFocusEl); return; } @@ -771,10 +860,30 @@ .catch(function () { button.disabled = false; button.innerHTML = original; - renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl); + renderError('网络错误，请稍后重试', {}, returnFocusEl); }); } + function renderScanPay(data, returnFocusEl) { + data = data || {}; + let body = ''; + if (data.qr_content) { + body += '
凭证内容
' + + '' + escapeHtml(String(data.qr_content)) + '
'; + } + body += '

' + escapeHtml(data.message || '请使用手机扫码完成支付，支付后刷新页面。') + '

'; + open( + dlView('pay', { + subtitle: '支付完成后页面会自动刷新', + body: body, + actions: [{ kind: 'button', label: '我已支付', icon: 'fa-sync-alt', attrs: 'type="button" data-aksrt-reload' }], + }), + returnFocusEl + ); + const reloadBtn = document.querySelector('[data-aksrt-reload]'); + if (reloadBtn) reloadBtn.addEventListener('click', function () { window.location.reload(); }); + } + // ===== 事件绑定 ===== document.addEventListener('click', function (e) { const lowBtn = e.target.closest('[data-action="aksrt-need-credits"]');