fix(user-center): embed official certification panel
This commit is contained in:
kate522 committed
1 parent
d3bf75fbea
commit
0a04c3e4cc
22 files changed
+415
-461
No files matched your search
@@ -14,6 +14,21 @@
|
||||
<n-descriptions-item label="最近处理">{{ detail.request.reviewed_at || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<div class="aksrt-verify-drawer__section">
|
||||
<div class="aksrt-verify-drawer__title">申请资料</div>
|
||||
<n-descriptions bordered :column="1" size="small" label-placement="left">
|
||||
<n-descriptions-item label="认证类型">{{ detail.request.application?.type || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="认证身份">{{ detail.request.application?.name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="身份简介">{{ detail.request.application?.desc || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="申请说明">{{ detail.request.application?.msg || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<div v-if="detail.request.application?.img?.length" class="aksrt-verify-drawer__proofs">
|
||||
<a v-for="image in detail.request.application.img" :key="image" :href="image" target="_blank" rel="noopener noreferrer">
|
||||
<img :src="image" alt="认证证明材料" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aksrt-verify-drawer__section">
|
||||
<div class="aksrt-verify-drawer__title">当前备注</div>
|
||||
<n-alert type="info" :show-icon="false">
|
||||
@@ -149,6 +164,21 @@ async function handleSubmit() {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.aksrt-verify-drawer__proofs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.aksrt-verify-drawer__proofs img {
|
||||
display: block;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aksrt-verify-drawer__timeline {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
|
||||
@@ -4,7 +4,7 @@ export const featuresSchema = {
|
||||
icon: 'fas fa-user-cog',
|
||||
description: '配置用户中心和个人主页的功能模块。',
|
||||
defaults: {
|
||||
user_center_tabs: 'profile,posts,comments,favorites,vip,credits',
|
||||
user_center_tabs: 'profile,posts,comments,favorites,vip,credits,auth',
|
||||
user_avatar_upload: true,
|
||||
user_cover_upload: true,
|
||||
user_social_links: true,
|
||||
@@ -26,7 +26,7 @@ export const featuresSchema = {
|
||||
title: '用户中心',
|
||||
icon: 'fas fa-user-shield',
|
||||
fields: [
|
||||
{ key: 'user_center_tabs', label: '用户中心 Tab', type: 'input', default: 'profile,posts,comments,favorites,vip,credits', help: '逗号分隔。vip=我的会员（会员功能开启时也会自动注入）' },
|
||||
{ key: 'user_center_tabs', label: '用户中心 Tab', type: 'input', default: 'profile,posts,comments,favorites,vip,credits,auth', help: '逗号分隔。auth=官方认证；vip、订单和认证会按功能开关自动注入' },
|
||||
{ key: 'user_avatar_upload', label: '头像上传', type: 'switch', default: true },
|
||||
{ key: 'user_cover_upload', label: '封面上传', type: 'switch', default: true },
|
||||
{ key: 'user_social_links', label: '社交链接', type: 'switch', default: true },
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* User identity auth page styles (zibll user-auth).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.aksrt-user-auth-panel {
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .colorful-bg.c-blue {
|
||||
background: linear-gradient(135deg, #4e9bff 0%, #2f6df6 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .muted-2-color {
|
||||
color: var(--muted-2-color, #888);
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .form-control {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--main-border-color, #ddd);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .mb6 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .but.c-blue,
|
||||
.aksrt-user-auth-panel button.but {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: var(--focus-color, #2f6df6);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 10px 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs .preview-item {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--main-border-color, #eee);
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .c-red {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
|
||||
@@ -359,3 +359,79 @@
|
||||
margin-right: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ==================== 官方认证面板 ==================== */
|
||||
.uc-auth-panel { overflow: hidden; }
|
||||
|
||||
.uc-auth-card {
|
||||
display: grid;
|
||||
grid-template-columns: 128px minmax(0, 1fr);
|
||||
min-height: 210px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), rgba(124, 92, 220, 0.08));
|
||||
}
|
||||
|
||||
.uc-auth-card__art {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(150deg, #3988f4, #7567de);
|
||||
color: #fff;
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
.uc-auth-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.uc-auth-card__content small { color: var(--color-primary); font-weight: 700; }
|
||||
.uc-auth-card__content h2 { margin: 5px 0 9px; font-size: 24px; }
|
||||
.uc-auth-card__content p,
|
||||
.uc-auth-card__content time { margin: 0; color: var(--color-ink-4); font-size: 13px; line-height: 1.7; }
|
||||
.uc-auth-card__notice { margin-top: 14px; color: var(--color-error, #dc2626); font-size: 13px; }
|
||||
.uc-auth-apply-open { margin-top: 18px; min-width: 112px; }
|
||||
.uc-auth-card--verified { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)); }
|
||||
.uc-auth-card--verified .uc-auth-card__art { background: linear-gradient(150deg, #20a77d, #3287df); }
|
||||
|
||||
.uc-auth-modal { z-index: 620; }
|
||||
.uc-auth-modal .aksrt-modal__dialog { width: min(620px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
|
||||
.uc-auth-modal__header > div { display: flex; align-items: center; gap: 10px; }
|
||||
.uc-auth-modal__header > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.uc-auth-modal__body { padding: 22px; }
|
||||
|
||||
.uc-auth-form { display: grid; gap: 17px; }
|
||||
.uc-auth-form > label { display: grid; gap: 7px; color: var(--color-ink-2); font-size: 13px; font-weight: 600; }
|
||||
.uc-auth-form .form-control { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.1)); border-radius: 9px; background: var(--surface-1); color: var(--color-ink); font: inherit; font-weight: 400; box-sizing: border-box; }
|
||||
.uc-auth-form textarea.form-control { resize: vertical; }
|
||||
.uc-auth-upload small { color: var(--color-ink-4); font-weight: 400; }
|
||||
.uc-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
|
||||
.uc-auth-form__message { min-height: 18px; color: var(--color-error, #dc2626); font-size: 12px; text-align: center; }
|
||||
|
||||
.uc-auth-upload__previews { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.uc-auth-upload__previews img,
|
||||
.uc-auth-proof-list .preview-item { width: 82px; height: 82px; border-radius: 8px; overflow: hidden; object-fit: cover; }
|
||||
.uc-auth-proof-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
||||
.uc-auth-proof-list img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.uc-auth-pending { text-align: center; padding: 4px 0 18px; }
|
||||
.uc-auth-pending > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; background: rgba(245, 158, 11, 0.14); color: #a66e0b; font-size: 24px; }
|
||||
.uc-auth-pending h3 { margin: 0 0 7px; }
|
||||
.uc-auth-pending p { margin: 0; color: var(--color-ink-4); font-size: 13px; }
|
||||
.uc-auth-apply-detail { display: grid; gap: 0; border-top: 1px solid var(--color-line-soft); }
|
||||
.uc-auth-apply-detail dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px; }
|
||||
.uc-auth-apply-detail dt { color: var(--color-ink-4); }
|
||||
.uc-auth-apply-detail dd { margin: 0; color: var(--color-ink-2); }
|
||||
.uc-auth-modal__confirm { width: 100%; margin-top: 20px; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.uc-auth-card { grid-template-columns: 92px minmax(0, 1fr); min-height: 180px; }
|
||||
.uc-auth-card__art { font-size: 34px; }
|
||||
.uc-auth-card__content { padding: 20px 17px; }
|
||||
.uc-auth-card__content h2 { font-size: 20px; }
|
||||
.uc-auth-modal .aksrt-modal__dialog { position: fixed; inset: auto 0 0; width: 100%; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
|
||||
}
|
||||
@@ -631,10 +631,15 @@ body.aksrt-user-center .uc-content,
|
||||
.uc-service-grid__item--profile .uc-service-grid__icon { color: #6550c7; background: rgba(124, 92, 220, 0.12); }
|
||||
.uc-service-grid__item--security .uc-service-grid__icon { color: #16816c; background: rgba(16, 185, 129, 0.12); }
|
||||
|
||||
.uc-service-grid__item:hover {
|
||||
.uc-service-grid__item:hover,
|
||||
.uc-service-grid__item.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.uc-service-grid__item.is-active .uc-service-grid__icon {
|
||||
box-shadow: 0 0 0 2px var(--color-primary-soft), 0 5px 14px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uc-order-grid__icon { transition: none; }
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
if (!tabContainer) return;
|
||||
|
||||
var tabs = tabContainer.querySelectorAll('[data-tab]');
|
||||
var sidebarBtns = document.querySelectorAll('.uc-sidebar__btn[data-tab]');
|
||||
var sidebarBtns = document.querySelectorAll('.uc-sidebar__btn[data-tab], .uc-service-grid__item[data-tab]');
|
||||
var panels = {};
|
||||
var defaultTab = cfg.defaultTab || 'profile';
|
||||
var drawerTrigger = document.getElementById('uc-drawer-trigger');
|
||||
@@ -193,6 +193,92 @@
|
||||
});
|
||||
}
|
||||
|
||||
function initAuthForm() {
|
||||
var modal = document.getElementById('uc-auth-modal');
|
||||
if (!modal || modal.dataset.authModalBound === '1') return;
|
||||
modal.dataset.authModalBound = '1';
|
||||
|
||||
function openModal() {
|
||||
modal.classList.add('is-open');
|
||||
modal.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
var first = modal.querySelector('input:not([type="hidden"]), select, textarea, button');
|
||||
if (first) window.setTimeout(function() { first.focus(); }, 80);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.classList.remove('is-open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-auth-modal-open]').forEach(function(button) {
|
||||
button.addEventListener('click', openModal);
|
||||
});
|
||||
modal.querySelectorAll('[data-auth-modal-close]').forEach(function(button) {
|
||||
button.addEventListener('click', closeModal);
|
||||
});
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
|
||||
});
|
||||
|
||||
var fileInput = modal.querySelector('[data-auth-files]');
|
||||
var previews = modal.querySelector('[data-auth-previews]');
|
||||
if (fileInput && previews) {
|
||||
fileInput.addEventListener('change', function() {
|
||||
previews.innerHTML = '';
|
||||
var files = Array.prototype.slice.call(fileInput.files || []);
|
||||
if (files.length > 3) {
|
||||
showToast('证明材料最多上传 3 张');
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
for (var index = 0; index < files.length; index++) {
|
||||
if (files[index].size > 2 * 1024 * 1024) {
|
||||
showToast('单张图片不能超过 2MB');
|
||||
fileInput.value = '';
|
||||
previews.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
var image = document.createElement('img');
|
||||
image.src = URL.createObjectURL(files[index]);
|
||||
image.alt = '';
|
||||
image.onload = function() { URL.revokeObjectURL(this.src); };
|
||||
previews.appendChild(image);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var form = modal.querySelector('.aksrt-user-auth-form');
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
var button = form.querySelector('[type="submit"]');
|
||||
var message = form.querySelector('[data-auth-message]');
|
||||
var original = button ? button.textContent : '';
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.textContent = i18n.submitting || '提交中…';
|
||||
}
|
||||
if (message) message.textContent = '';
|
||||
fetch(ajaxUrl, { method: 'POST', body: new FormData(form), credentials: 'same-origin' })
|
||||
.then(function(response) { return response.json(); })
|
||||
.then(function(response) {
|
||||
if (!response || response.error) throw new Error((response && response.msg) || '提交失败');
|
||||
showToast(response.msg || '提交成功');
|
||||
window.setTimeout(function() { window.location.assign(tabUrls.auth || '?tab=auth'); }, 500);
|
||||
})
|
||||
.catch(function(error) {
|
||||
if (message) message.textContent = error.message || '提交失败';
|
||||
showToast(error.message || '提交失败');
|
||||
if (button) {
|
||||
button.disabled = false;
|
||||
button.textContent = original;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== 列表内取消收藏 ==================== */
|
||||
function initUnfavorite() {
|
||||
var list = document.querySelector('.profile-list[data-list="favorites"]');
|
||||
@@ -678,6 +764,7 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initDashboardNavigation();
|
||||
initProfileForm();
|
||||
initAuthForm();
|
||||
initUnfavorite();
|
||||
initNotifications();
|
||||
initSettings();
|
||||
@@ -685,6 +772,7 @@
|
||||
} else {
|
||||
initDashboardNavigation();
|
||||
initProfileForm();
|
||||
initAuthForm();
|
||||
initUnfavorite();
|
||||
initNotifications();
|
||||
initSettings();
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
/**
|
||||
* User auth apply form AJAX.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function ajaxUrl() {
|
||||
if (window.aksrtData && window.aksrtData.ajaxUrl) return window.aksrtData.ajaxUrl;
|
||||
return '/wp-admin/admin-ajax.php';
|
||||
}
|
||||
|
||||
function toast(msg, type) {
|
||||
if (window.aksrt && typeof window.aksrt.toast === 'function') {
|
||||
window.aksrt.toast(msg, type || 'info');
|
||||
return;
|
||||
}
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert(msg);
|
||||
}
|
||||
|
||||
function init() {
|
||||
var form = document.querySelector('.aksrt-user-auth-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var btn = form.querySelector('button[type="submit"]');
|
||||
if (btn) btn.disabled = true;
|
||||
var fd = new FormData(form);
|
||||
if (!fd.get('action')) fd.set('action', 'aksrt_user_auth_apply');
|
||||
|
||||
fetch(ajaxUrl(), {
|
||||
method: 'POST',
|
||||
body: fd,
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data || data.error) {
|
||||
toast((data && data.msg) || '提交失败', 'danger');
|
||||
return;
|
||||
}
|
||||
toast(data.msg || '提交成功', 'success');
|
||||
if (data.reload) {
|
||||
window.setTimeout(function () { window.location.reload(); }, 500);
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
toast('网络错误', 'danger');
|
||||
})
|
||||
.finally(function () {
|
||||
if (btn) btn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in new issue
Block a user