feat(users): build promotion invite panel

This commit is contained in:
2026-08-03 13:57:32 +08:00
parent d138c05f77
commit 156060d2ec
2 changed files with 140 additions and 21 deletions
+67 -18
View File
@@ -225,6 +225,20 @@
var codeEl = root.querySelector('[data-invite-code]');
var listEl = root.querySelector('[data-invite-list]');
var totalEl = root.querySelector('[data-invite-total]');
var statusEl = root.querySelector('[data-invite-status]');
var copyFeedback = root.querySelector('[data-invite-copy-feedback]');
function setStatus(text, isError) {
if (!statusEl) return;
statusEl.textContent = text;
statusEl.classList.toggle('is-error', !!isError);
}
function setCopyFeedback(text, isError) {
if (!copyFeedback) return;
copyFeedback.textContent = text;
copyFeedback.classList.toggle('is-error', !!isError);
}
function escapeHtml(value) {
return String(value == null ? '' : value)
@@ -268,7 +282,7 @@
else totalEl.textContent = total ? '共 ' + total + ' 条' : '暂无记录';
}
if (!items.length) {
listEl.innerHTML = '<div class="aksrt-invite-record-empty">分享链接后,好友注册记录会显示在这里。</div>';
listEl.innerHTML = '<div class="uc-promotion-record-empty">分享链接后,好友注册记录会显示在这里。</div>';
return;
}
@@ -284,14 +298,14 @@
? '<img src="' + escapeHtml(item.invitee_avatar) + '" alt="">'
: '<span>' + escapeHtml(first) + '</span>';
return '<div class="aksrt-invite-record ' + meta.className + '">' +
'<div class="aksrt-invite-record__avatar">' + avatar + '</div>' +
'<div class="aksrt-invite-record__main">' +
return '<div class="uc-promotion-record ' + meta.className + '">' +
'<div class="uc-promotion-record__avatar">' + avatar + '</div>' +
'<div class="uc-promotion-record__main">' +
'<strong>' + escapeHtml(name) + '</strong>' +
'<span>' + (createdAt ? '注册于 ' + escapeHtml(createdAt) : '注册时间未知') + '</span>' +
'</div>' +
'<div class="aksrt-invite-record__status">' +
'<span class="aksrt-invite-badge ' + meta.className + '">' + meta.label + '</span>' +
'<div class="uc-promotion-record__status">' +
'<span class="uc-promotion-badge ' + meta.className + '">' + meta.label + '</span>' +
'<small>' + escapeHtml(statusText) + '</small>' +
'</div>' +
'</div>';
@@ -308,10 +322,12 @@
el.textContent = '—';
});
}
setStatus((r.json && r.json.message) || '推广数据加载失败,请稍后刷新。', true);
return;
}
var j = r.json;
var j = r.json || {};
if (linkInput) linkInput.value = j.invite_url || '';
if (copyBtn) copyBtn.disabled = !j.invite_url;
if (codeEl) codeEl.textContent = j.code || '--';
if (stats && j.stats) {
stats.querySelectorAll('[data-stat]').forEach(function (el) {
@@ -319,16 +335,23 @@
el.textContent = (j.stats[k] || 0).toString();
});
}
setStatus('推广数据已更新。');
}).catch(function () {
if (copyBtn) copyBtn.disabled = true;
if (codeEl) codeEl.textContent = '--';
if (stats) {
stats.querySelectorAll('[data-stat]').forEach(function (el) {
el.textContent = '—';
});
}
setStatus('推广数据加载失败,请检查网络后重试。', true);
});
if (listEl) {
api('/invite/list?per_page=8').then(function (r) {
if (!r.ok) {
listEl.classList.remove('is-loading');
listEl.innerHTML = '<div class="aksrt-invite-record-empty">邀请记录加载失败,请稍后刷新。</div>';
listEl.innerHTML = '<div class="uc-promotion-record-empty">邀请记录加载失败,请稍后刷新。</div>';
if (totalEl) totalEl.textContent = '加载失败';
return;
}
@@ -336,7 +359,7 @@
renderInviteList(j.items || [], Number(j.total || 0));
}).catch(function () {
listEl.classList.remove('is-loading');
listEl.innerHTML = '<div class="aksrt-invite-record-empty">邀请记录加载失败,请稍后刷新。</div>';
listEl.innerHTML = '<div class="uc-promotion-record-empty">邀请记录加载失败,请稍后刷新。</div>';
if (totalEl) totalEl.textContent = '加载失败';
});
}
@@ -346,17 +369,43 @@
copyBtn.addEventListener('click', function () {
if (copying || !linkInput || !linkInput.value) return;
copying = true;
if (navigator.clipboard) {
navigator.clipboard.writeText(linkInput.value).then(function () {
copyBtn.disabled = true;
setCopyFeedback('正在复制…');
function copied() {
setCopyText('已复制');
setTimeout(function () { setCopyText('复制链接'); copying = false; }, 2000);
}).catch(function () { copying = false; });
} else {
linkInput.select();
document.execCommand('copy');
setCopyText('已复制');
setTimeout(function () { setCopyText('复制链接'); copying = false; }, 2000);
setCopyFeedback('推广链接已复制到剪贴板。');
setTimeout(function () {
setCopyText('复制链接');
setCopyFeedback('');
copyBtn.disabled = false;
copying = false;
}, 2000);
}
function copyFailed() {
setCopyText('复制链接');
setCopyFeedback('复制失败,请手动选择并复制链接。', true);
copyBtn.disabled = false;
copying = false;
linkInput.focus();
linkInput.select();
}
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
navigator.clipboard.writeText(linkInput.value).then(copied).catch(copyFailed);
return;
}
linkInput.focus();
linkInput.select();
try {
if (document.execCommand('copy')) {
copied();
return;
}
} catch (_) {}
copyFailed();
});
}
@@ -1,6 +1,6 @@
<?php
/**
* User center promotion panel shell.
* User center promotion panel.
*
* @package AKSRT
*/
@@ -10,7 +10,7 @@ defined('ABSPATH') || exit;
$context = is_array($args['context'] ?? null) ? $args['context'] : [];
extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_extract
?>
<section class="uc-promotion-panel" aria-labelledby="uc-promotion-title">
<section class="uc-promotion-panel" aria-labelledby="uc-promotion-title" data-aksrt-invite>
<header class="uc-promotion-panel__header">
<span class="uc-promotion-panel__icon"><i class="fas fa-user-plus" aria-hidden="true"></i></span>
<div>
@@ -18,5 +18,75 @@ extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_
<h2 id="uc-promotion-title"><?php esc_html_e('推广中心', 'aksrt'); ?></h2>
</div>
</header>
<p class="uc-promotion-panel__intro"><?php esc_html_e('在这里分享专属邀请链接并查看推广成果。', 'aksrt'); ?></p>
<p class="uc-promotion-panel__intro"><?php esc_html_e('分享专属链接,邀请好友完成注册与验证后即可获得奖励。', 'aksrt'); ?></p>
<div class="uc-promotion-panel__status" data-invite-status role="status" aria-live="polite">
<?php esc_html_e('正在加载推广数据…', 'aksrt'); ?>
</div>
<section class="uc-promotion-section uc-promotion-section--stats" aria-labelledby="uc-promotion-stats-title">
<div class="uc-promotion-section__header">
<h3 id="uc-promotion-stats-title"><?php esc_html_e('推广成果', 'aksrt'); ?></h3>
<p><?php esc_html_e('实时汇总你的邀请进度', 'aksrt'); ?></p>
</div>
<div class="uc-promotion-stats" data-invite-stats aria-live="polite">
<div class="uc-promotion-stat">
<span><?php esc_html_e('已注册', 'aksrt'); ?></span>
<strong data-stat="registered">—</strong>
<small><?php esc_html_e('通过链接完成注册', 'aksrt'); ?></small>
</div>
<div class="uc-promotion-stat">
<span><?php esc_html_e('已验证', 'aksrt'); ?></span>
<strong data-stat="verified">—</strong>
<small><?php esc_html_e('已完成邮箱验证', 'aksrt'); ?></small>
</div>
<div class="uc-promotion-stat">
<span><?php esc_html_e('已奖励', 'aksrt'); ?></span>
<strong data-stat="rewarded">—</strong>
<small><?php esc_html_e('奖励已发放', 'aksrt'); ?></small>
</div>
</div>
</section>
<section class="uc-promotion-section uc-promotion-section--share" aria-labelledby="uc-promotion-share-title">
<div class="uc-promotion-section__header">
<h3 id="uc-promotion-share-title"><?php esc_html_e('分享专属链接', 'aksrt'); ?></h3>
<p><?php esc_html_e('好友通过此链接注册,邀请关系会自动记录。', 'aksrt'); ?></p>
</div>
<div class="uc-promotion-share">
<div class="uc-promotion-code">
<span><?php esc_html_e('我的邀请码', 'aksrt'); ?></span>
<strong data-invite-code>—</strong>
</div>
<label class="screen-reader-text" for="aksrt-invite-link"><?php esc_html_e('推广链接', 'aksrt'); ?></label>
<div class="uc-promotion-link-row">
<input id="aksrt-invite-link" type="text" class="uc-promotion-link" data-invite-link readonly value="">
<button type="button" class="btn-primary btn-sm uc-promotion-copy" data-invite-copy disabled>
<i class="fas fa-copy" aria-hidden="true"></i>
<span><?php esc_html_e('复制链接', 'aksrt'); ?></span>
</button>
</div>
<p class="uc-promotion-copy-feedback" data-invite-copy-feedback role="status" aria-live="polite"></p>
</div>
</section>
<section class="uc-promotion-section uc-promotion-section--reward" aria-labelledby="uc-promotion-reward-title">
<div class="uc-promotion-section__header">
<h3 id="uc-promotion-reward-title"><?php esc_html_e('奖励说明', 'aksrt'); ?></h3>
</div>
<p><?php echo esc_html(sprintf(__('邀请好友完成注册与邮箱验证后,双方将按站点规则获得%s奖励。', 'aksrt'), (string) ($currency_name ?? __('积分', 'aksrt')))); ?></p>
</section>
<section class="uc-promotion-section uc-promotion-section--records" aria-labelledby="uc-promotion-records-title">
<div class="uc-promotion-section__header uc-promotion-records__header">
<div>
<h3 id="uc-promotion-records-title"><?php esc_html_e('邀请记录', 'aksrt'); ?></h3>
<p><?php esc_html_e('查看最近邀请好友的状态', 'aksrt'); ?></p>
</div>
<span data-invite-total><?php esc_html_e('加载中…', 'aksrt'); ?></span>
</div>
<div class="uc-promotion-record-list is-loading" data-invite-list aria-live="polite">
<div class="uc-promotion-record-empty"><?php esc_html_e('正在加载邀请记录…', 'aksrt'); ?></div>
</div>
</section>
</section>