fix(user-center): 优化提现记录弹窗分页
This commit is contained in:
kate522 committed
1 parent
27f54c8e35
commit
6bbb79213b
5 files changed
+290
-62
No files matched your search
@@ -886,10 +886,102 @@ body.uc-modal-open {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uc-withdraw-history-modal__dialog {
|
||||
max-width: min(860px, calc(100vw - 32px));
|
||||
overflow: hidden;
|
||||
}
|
||||
.uc-withdraw-history {
|
||||
width: 100%;
|
||||
}
|
||||
.uc-withdraw-history__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--muted-border-color, rgba(0,0,0,.08));
|
||||
white-space: nowrap;
|
||||
}
|
||||
.uc-withdraw-history__item:last-child {
|
||||
border-bottom: 0 !important;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.uc-withdraw-history__status,
|
||||
.uc-withdraw-history__amount {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.uc-withdraw-history__amount {
|
||||
min-width: 84px;
|
||||
text-align: right;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uc-withdraw-history__number,
|
||||
.uc-withdraw-history__meta,
|
||||
.uc-withdraw-history__note {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.uc-withdraw-history__number {
|
||||
flex: 1 1 190px;
|
||||
}
|
||||
.uc-withdraw-history__meta {
|
||||
flex: 0 1 190px;
|
||||
}
|
||||
.uc-withdraw-history__note {
|
||||
flex: 0 1 160px;
|
||||
}
|
||||
.uc-withdraw-history__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.uc-withdraw-history__page {
|
||||
min-width: 34px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--muted-border-color, rgba(0,0,0,.12));
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uc-withdraw-history__page:hover:not(:disabled),
|
||||
.uc-withdraw-history__page.is-current {
|
||||
border-color: var(--focus-color, #3b82f6);
|
||||
background: var(--focus-color, #3b82f6);
|
||||
color: #fff;
|
||||
}
|
||||
.uc-withdraw-history__page:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.uc-withdraw-history-modal__dialog {
|
||||
max-width: calc(100vw - 20px);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.uc-withdraw-history__item {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.uc-withdraw-history__amount {
|
||||
min-width: 66px;
|
||||
}
|
||||
.uc-withdraw-history__number {
|
||||
flex-basis: 120px;
|
||||
}
|
||||
.uc-withdraw-history__meta {
|
||||
flex-basis: 120px;
|
||||
}
|
||||
.uc-withdraw-history__note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Points tasks tab */
|
||||
.uc-points-tasks .border-bottom,
|
||||
|
||||
+137
-13
@@ -804,19 +804,143 @@
|
||||
}
|
||||
|
||||
|
||||
function initWithdrawHistory() {
|
||||
var modal = document.querySelector('[data-aksrt-withdraw-history-modal]');
|
||||
if (!modal || modal.dataset.aksrtWithdrawHistoryInitialized === '1') return;
|
||||
modal.dataset.aksrtWithdrawHistoryInitialized = '1';
|
||||
function open() { modal.hidden = false; document.body.classList.add('uc-modal-open'); }
|
||||
function close() { modal.hidden = true; document.body.classList.remove('uc-modal-open'); }
|
||||
document.querySelectorAll('[data-aksrt-withdraw-history-open]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) { e.preventDefault(); open(); });
|
||||
});
|
||||
modal.querySelectorAll('[data-aksrt-withdraw-history-close]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) { e.preventDefault(); close(); });
|
||||
});
|
||||
}
|
||||
function initWithdrawHistory() {
|
||||
var modal = document.querySelector('[data-aksrt-withdraw-history-modal]');
|
||||
if (!modal || modal.dataset.aksrtWithdrawHistoryInitialized === '1') return;
|
||||
modal.dataset.aksrtWithdrawHistoryInitialized = '1';
|
||||
var list = modal.querySelector('[data-aksrt-withdraw-history-list]');
|
||||
var pagination = modal.querySelector('[data-aksrt-withdraw-history-pagination]');
|
||||
var statusLabels = {
|
||||
pending: '待处理',
|
||||
processing: '处理中',
|
||||
completed: '已完成',
|
||||
rejected: '已拒绝'
|
||||
};
|
||||
var currentPage = 1;
|
||||
var loading = false;
|
||||
|
||||
function text(value) {
|
||||
return value === null || value === undefined ? '' : String(value);
|
||||
}
|
||||
|
||||
function appendText(parent, value, className) {
|
||||
var node = document.createElement('span');
|
||||
if (className) node.className = className;
|
||||
node.textContent = text(value);
|
||||
parent.appendChild(node);
|
||||
return node;
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
if (!list) return;
|
||||
list.textContent = '';
|
||||
if (!Array.isArray(items) || !items.length) {
|
||||
var empty = document.createElement('div');
|
||||
empty.className = 'uc-transactions__empty';
|
||||
var emptyText = document.createElement('p');
|
||||
emptyText.textContent = '暂无提现记录';
|
||||
empty.appendChild(emptyText);
|
||||
list.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
items.forEach(function (item) {
|
||||
var status = text(item && item.status).toLowerCase();
|
||||
var row = document.createElement('div');
|
||||
row.className = 'uc-withdraw-history__item';
|
||||
var badge = appendText(row, statusLabels[status] || status, 'badg badg-sm uc-withdraw-history__status');
|
||||
badge.classList.add(status === 'rejected' ? 'c-red' : (status === 'completed' ? 'c-green' : 'c-blue'));
|
||||
appendText(row, item && (item.gross_amount || item.amount), 'uc-withdraw-history__amount em12');
|
||||
var number = document.createElement('span');
|
||||
number.className = 'uc-withdraw-history__number muted-2-color em09';
|
||||
var numberLabel = document.createElement('span');
|
||||
numberLabel.textContent = '提现单号：';
|
||||
number.appendChild(numberLabel);
|
||||
var code = document.createElement('code');
|
||||
code.textContent = text(item && item.withdrawal_number);
|
||||
number.appendChild(code);
|
||||
row.appendChild(number);
|
||||
var meta = appendText(row, text(item && item.created_at), 'uc-withdraw-history__meta muted-2-color em09');
|
||||
var gross = text(item && (item.gross_amount || item.amount));
|
||||
var net = text(item && item.amount);
|
||||
if (gross !== net && net !== '') meta.appendChild(document.createTextNode(' · 到账 ' + net));
|
||||
if (item && item.note) appendText(row, item.note, 'uc-withdraw-history__note muted-2-color em09');
|
||||
list.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPagination(page, maxPages) {
|
||||
if (!pagination) return;
|
||||
pagination.textContent = '';
|
||||
if (maxPages <= 1) return;
|
||||
function addButton(label, target, disabled, current) {
|
||||
var button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'uc-withdraw-history__page' + (current ? ' is-current' : '');
|
||||
button.textContent = label;
|
||||
button.disabled = !!disabled;
|
||||
if (current) button.setAttribute('aria-current', 'page');
|
||||
button.dataset.aksrtWithdrawHistoryPage = String(target);
|
||||
pagination.appendChild(button);
|
||||
}
|
||||
addButton('上一页', page - 1, page <= 1, false);
|
||||
for (var index = 1; index <= maxPages; index += 1) addButton(String(index), index, false, index === page);
|
||||
addButton('下一页', page + 1, page >= maxPages, false);
|
||||
}
|
||||
|
||||
function loadPage(page) {
|
||||
if (loading || !list) return;
|
||||
loading = true;
|
||||
list.textContent = '加载中…';
|
||||
var rest = (window.aksrtData && (window.aksrtData.restUrl || window.aksrtData.apiUrl)) || '';
|
||||
if (!rest) {
|
||||
list.textContent = '记录加载失败，请重试';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
var url = rest.replace(/\/$/, '') + '/earnings/withdrawals?page=' + encodeURIComponent(Math.max(1, page)) + '&per_page=10';
|
||||
fetch(url, {
|
||||
credentials: 'same-origin',
|
||||
headers: { 'X-WP-Nonce': (window.aksrtData && (window.aksrtData.restNonce || window.aksrtData.nonce)) || '' }
|
||||
}).then(function (response) {
|
||||
return response.json().then(function (payload) {
|
||||
if (!response.ok || !payload || !Array.isArray(payload.items)) throw new Error('withdraw-history-load-failed');
|
||||
currentPage = Math.max(1, parseInt(payload.page, 10) || 1);
|
||||
var maxPages = Math.max(1, parseInt(payload.max_pages, 10) || 1);
|
||||
renderItems(payload.items);
|
||||
renderPagination(currentPage, maxPages);
|
||||
});
|
||||
}).catch(function () {
|
||||
list.textContent = '记录加载失败，请重试';
|
||||
if (pagination) pagination.textContent = '';
|
||||
}).finally(function () {
|
||||
loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function open() {
|
||||
modal.hidden = false;
|
||||
document.body.classList.add('uc-modal-open');
|
||||
loadPage(1);
|
||||
}
|
||||
function close() {
|
||||
modal.hidden = true;
|
||||
document.body.classList.remove('uc-modal-open');
|
||||
}
|
||||
document.querySelectorAll('[data-aksrt-withdraw-history-open]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) { e.preventDefault(); open(); });
|
||||
});
|
||||
modal.querySelectorAll('[data-aksrt-withdraw-history-close]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) { e.preventDefault(); close(); });
|
||||
});
|
||||
if (pagination) {
|
||||
pagination.addEventListener('click', function (e) {
|
||||
var button = e.target.closest('[data-aksrt-withdraw-history-page]');
|
||||
if (!button || button.disabled) return;
|
||||
e.preventDefault();
|
||||
loadPage(parseInt(button.dataset.aksrtWithdrawHistoryPage || '1', 10) || 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.AKSRTWithdrawInit = initWithdraw;
|
||||
window.AKSRTAssetBalances = {
|
||||
|
||||
Reference in new issue
Block a user