|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>账户账单详情</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
<style>
|
|
|
:root {
|
|
|
--bg-color: #ffffff;
|
|
|
--text-color: #111827;
|
|
|
--secondary-text-color: #6b7280;
|
|
|
--border-color: #e5e7eb;
|
|
|
--card-bg-color: #ffffff;
|
|
|
--accent-color: #000000;
|
|
|
--error-color: #ef4444;
|
|
|
--success-color: #10b981;
|
|
|
--info-color: #3b82f6;
|
|
|
--income-color: #22c55e;
|
|
|
--expense-color: #ef4444;
|
|
|
--summary-bar-bg: #f9fafb;
|
|
|
}
|
|
|
body {
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
margin: 0;
|
|
|
background-color: var(--summary-bar-bg);
|
|
|
color: var(--text-color);
|
|
|
line-height: 1.6;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
.container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
padding: 32px 20px;
|
|
|
}
|
|
|
header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 16px;
|
|
|
padding-bottom: 24px;
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
}
|
|
|
header h1 {
|
|
|
margin: 0;
|
|
|
font-size: 28px;
|
|
|
color: var(--text-color);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
.header-actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.header-actions .back-link {
|
|
|
padding: 8px 16px;
|
|
|
background-color: var(--bg-color);
|
|
|
color: var(--secondary-text-color);
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
text-decoration: none;
|
|
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
|
}
|
|
|
.header-actions .back-link:hover {
|
|
|
background-color: #f3f4f6;
|
|
|
border-color: #d1d5db;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
#account-summary-bar {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
gap: 20px;
|
|
|
background-color: var(--card-bg-color);
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
margin-bottom: 30px;
|
|
|
border: 1px solid var(--border-color);
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
.summary-item {
|
|
|
text-align: left;
|
|
|
}
|
|
|
.summary-label {
|
|
|
display: block;
|
|
|
font-size: 0.875em;
|
|
|
color: var(--secondary-text-color);
|
|
|
margin-bottom: 4px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.summary-value {
|
|
|
display: block;
|
|
|
font-size: 1.5em;
|
|
|
color: var(--text-color);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.statement-card-item {
|
|
|
background-color: var(--card-bg-color);
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid var(--border-color);
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
|
margin-bottom: 12px;
|
|
|
cursor: pointer;
|
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
|
}
|
|
|
.statement-card-item:hover {
|
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
.statement-card-item .card-summary {
|
|
|
padding: 16px 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.statement-card-item .summary-left { display: flex; align-items: center; gap: 12px; }
|
|
|
.statement-card-item .change-type-icon {
|
|
|
width: 32px; height: 32px; border-radius: 50%; display: flex;
|
|
|
align-items: center; justify-content: center; font-weight: 600; color: white;
|
|
|
}
|
|
|
.statement-card-item .summary-info .description { font-weight: 500; color: var(--text-color); }
|
|
|
.statement-card-item .summary-info .timestamp { font-size: 0.875em; color: var(--secondary-text-color); }
|
|
|
.statement-card-item .summary-right .amount { font-weight: 600; font-size: 1.1em; }
|
|
|
.statement-card-item .amount.positive { color: var(--income-color); }
|
|
|
.statement-card-item .amount.negative { color: var(--expense-color); }
|
|
|
.statement-card-item .amount.neutral { color: var(--text-color); }
|
|
|
.statement-card-item .card-details {
|
|
|
padding: 0 20px 16px 20px;
|
|
|
border-top: 1px solid var(--border-color);
|
|
|
margin-top: 12px;
|
|
|
display: none;
|
|
|
}
|
|
|
.statement-card-item .details-grid {
|
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
|
gap: 12px 20px; margin-top: 12px;
|
|
|
}
|
|
|
.statement-card-item .detail-item { font-size: 0.9em; }
|
|
|
.statement-card-item .detail-item strong { color: var(--secondary-text-color); font-weight: 500; margin-right: 8px; display: inline-block; min-width: 80px;}
|
|
|
.statement-card-item .detail-item span { color: var(--text-color); word-break: break-all; }
|
|
|
.statement-card-item .metadata-title { font-weight: 600; margin-top: 16px; margin-bottom: 8px; font-size: 0.95em; color: var(--text-color); }
|
|
|
.statement-card-item .metadata-item { font-size: 0.85em; padding-left: 10px; border-left: 2px solid var(--border-color); margin-bottom: 4px; }
|
|
|
.statement-card-item .metadata-item strong { min-width: 70px; }
|
|
|
|
|
|
#statements-loading-indicator {
|
|
|
text-align: center; padding: 40px; font-size: 1em; color: var(--secondary-text-color); display: none; width: 100%;
|
|
|
}
|
|
|
#statements-loading-indicator::before {
|
|
|
content: ''; display: inline-block; width: 24px; height: 24px;
|
|
|
border: 3px solid rgba(0,0,0, 0.1); border-radius: 50%;
|
|
|
border-top-color: var(--text-color); animation: spin 0.8s linear infinite;
|
|
|
margin-right: 12px; position: relative; top: 4px;
|
|
|
}
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
#pagination-controls {
|
|
|
margin-top: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
#pagination-controls button {
|
|
|
padding: 8px 16px;
|
|
|
margin: 0 5px;
|
|
|
border: 1px solid var(--border-color);
|
|
|
background-color: var(--card-bg-color);
|
|
|
color: var(--text-color);
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
#pagination-controls button:disabled {
|
|
|
opacity: 0.5;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
#pagination-controls button:hover:not(:disabled) {
|
|
|
border-color: var(--accent-color);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<header>
|
|
|
<h1>账户账单详情</h1>
|
|
|
<div class="header-actions">
|
|
|
<a href="{{ url_for('dashboard') }}" class="back-link">← 返回仪表盘</a>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<div id="account-summary-bar">
|
|
|
<div class="summary-item">
|
|
|
<span class="summary-label">总收入</span>
|
|
|
<span class="summary-value" id="summary-total-income">--.-- USD</span>
|
|
|
</div>
|
|
|
<div class="summary-item">
|
|
|
<span class="summary-label">总支出</span>
|
|
|
<span class="summary-value" id="summary-total-expense">--.-- USD</span>
|
|
|
</div>
|
|
|
<div class="summary-item">
|
|
|
<span class="summary-label">总结余</span>
|
|
|
<span class="summary-value" id="summary-total-balance">--.-- USD</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="statements-loading-indicator">正在加载账单...</div>
|
|
|
<div id="statement-records-container">
|
|
|
</div>
|
|
|
<div id="pagination-controls">
|
|
|
<button id="prev-page-btn" disabled>上一页</button>
|
|
|
<span id="page-info">第 1 页</span>
|
|
|
<button id="next-page-btn" disabled>下一页</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const accountEmail = "{{ account_email }}";
|
|
|
const recordsContainer = document.getElementById('statement-records-container');
|
|
|
const loadingIndicator = document.getElementById('statements-loading-indicator');
|
|
|
const prevPageBtn = document.getElementById('prev-page-btn');
|
|
|
const nextPageBtn = document.getElementById('next-page-btn');
|
|
|
const pageInfoElem = document.getElementById('page-info');
|
|
|
|
|
|
const summaryTotalIncomeElem = document.getElementById('summary-total-income');
|
|
|
const summaryTotalExpenseElem = document.getElementById('summary-total-expense');
|
|
|
const summaryTotalBalanceElem = document.getElementById('summary-total-balance');
|
|
|
|
|
|
let currentPage = 1;
|
|
|
const pageSize = 20;
|
|
|
let totalRecords = 0;
|
|
|
|
|
|
function formatStatementTimestamp(unixTimestamp) {
|
|
|
if (!unixTimestamp) return 'N/A';
|
|
|
const date = new Date(unixTimestamp * 1000);
|
|
|
return date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
|
|
|
}
|
|
|
|
|
|
function getChangeTypeDetails(type) {
|
|
|
const types = {
|
|
|
1: { text: "充值", icon: "➕", color: "#22c55e" }, 2: { text: "提现", icon: "➖", color: "#ef4444" },
|
|
|
3: { text: "接收", icon: "➡️", color: "#3b82f6" }, 4: { text: "发送", icon: "⬅️", color: "#f97316" },
|
|
|
5: { text: "消费", icon: "💳", color: "#ef4444" }, 6: { text: "收益", icon: "💰", color: "#10b981" },
|
|
|
7: { text: "提出", icon: "🔄", color: "#6366f1" }, 8: { text: "开卡", icon: "🚫", color: "#6b7280" },
|
|
|
14: { text: "红包", icon: "🧧", color: "#f43f5e" }
|
|
|
};
|
|
|
return types[type] || { text: `类型 ${type}`, icon: "❓", color: "#6b7280" };
|
|
|
}
|
|
|
|
|
|
function formatMetadata(metadata) {
|
|
|
if (typeof metadata !== 'object' || metadata === null || Object.keys(metadata).length === 0) {
|
|
|
return '<p class="detail-item"><strong>元数据:</strong> <span>无</span></p>';
|
|
|
}
|
|
|
let html = '<div class="metadata-title">元数据:</div>';
|
|
|
for (const key in metadata) {
|
|
|
html += `<div class="metadata-item"><strong>${key}:</strong> <span>${typeof metadata[key] === 'object' ? JSON.stringify(metadata[key]) : metadata[key]}</span></div>`;
|
|
|
}
|
|
|
return html;
|
|
|
}
|
|
|
|
|
|
function renderStatementRecords(apiResponse) {
|
|
|
recordsContainer.innerHTML = '';
|
|
|
loadingIndicator.style.display = 'none';
|
|
|
|
|
|
if (!apiResponse || !apiResponse.data || !apiResponse.data.items) {
|
|
|
recordsContainer.innerHTML = '<p>无法加载账单数据或无记录。</p>';
|
|
|
updatePaginationControls(0);
|
|
|
return;
|
|
|
}
|
|
|
const items = apiResponse.data.items;
|
|
|
totalRecords = apiResponse.data.total || items.length;
|
|
|
|
|
|
if (items.length === 0) {
|
|
|
recordsContainer.innerHTML = '<p>该账户暂无账单记录。</p>';
|
|
|
updatePaginationControls(0);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
items.forEach(item => {
|
|
|
const statementItemCard = document.createElement('div');
|
|
|
statementItemCard.classList.add('statement-card-item');
|
|
|
const changeTypeDetails = getChangeTypeDetails(item.change_type);
|
|
|
const amountClass = item.change > 0 ? 'positive' : (item.change < 0 ? 'negative' : 'neutral');
|
|
|
const formattedAmount = `${item.change >= 0 ? '+' : ''}${parseFloat(item.change).toFixed(item.field === "RED_PACKET_BALANCE" || item.field === "AVAILABLE_BALANCE" ? 5 : 2)}`;
|
|
|
|
|
|
statementItemCard.innerHTML = `
|
|
|
<div class="card-summary">
|
|
|
<div class="summary-left">
|
|
|
<div class="change-type-icon" style="background-color: ${changeTypeDetails.color};">${changeTypeDetails.icon}</div>
|
|
|
<div class="summary-info">
|
|
|
<div class="description">${changeTypeDetails.text} - ${item.field === "AVAILABLE_BALANCE" ? "可用余额" : (item.field === "RED_PACKET_BALANCE" ? "红包余额" : item.field)}</div>
|
|
|
<div class="timestamp">${formatStatementTimestamp(item.created_at)}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="summary-right"><span class="amount ${amountClass}">${formattedAmount}</span></div>
|
|
|
</div>
|
|
|
<div class="card-details">
|
|
|
<div class="details-grid">
|
|
|
<p class="detail-item"><strong>ID:</strong> <span>${item.id}</span></p>
|
|
|
<p class="detail-item"><strong>交易ID:</strong> <span>${item.tx_id}</span></p>
|
|
|
<p class="detail-item"><strong>字段:</strong> <span>${item.field}</span></p>
|
|
|
<p class="detail-item"><strong>变动类型:</strong> <span>${changeTypeDetails.text} (${item.change_type})</span></p>
|
|
|
<p class="detail-item"><strong>变动额:</strong> <span class="${amountClass}">${formattedAmount}</span></p>
|
|
|
<p class="detail-item"><strong>状态:</strong> <span>${item.status === 1 ? '成功' : '处理中/失败'}</span></p>
|
|
|
<p class="detail-item"><strong>变动前余额:</strong> <span>${parseFloat(item.pre_balance).toFixed(5)}</span></p>
|
|
|
<p class="detail-item"><strong>变动后余额:</strong> <span>${parseFloat(item.balance).toFixed(5)}</span></p>
|
|
|
</div>
|
|
|
${formatMetadata(item.metadata)}
|
|
|
</div>
|
|
|
`;
|
|
|
statementItemCard.querySelector('.card-summary').addEventListener('click', () => {
|
|
|
const details = statementItemCard.querySelector('.card-details');
|
|
|
details.style.display = details.style.display === 'none' || details.style.display === '' ? 'block' : 'none';
|
|
|
});
|
|
|
recordsContainer.appendChild(statementItemCard);
|
|
|
});
|
|
|
updatePaginationControls(totalRecords);
|
|
|
}
|
|
|
|
|
|
function updatePaginationControls(total) {
|
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
|
pageInfoElem.textContent = `第 ${currentPage} / ${totalPages} 页 (共 ${total} 条)`;
|
|
|
prevPageBtn.disabled = currentPage === 1;
|
|
|
nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
|
|
|
}
|
|
|
|
|
|
async function fetchStatementsForPage(page) {
|
|
|
loadingIndicator.style.display = 'block';
|
|
|
recordsContainer.innerHTML = '';
|
|
|
try {
|
|
|
const response = await fetch(`/api/account_statements?email=${encodeURIComponent(accountEmail)}&page=${page}&size=${pageSize}`);
|
|
|
if (response.status === 401) { window.location.href = '/'; return; }
|
|
|
if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
|
|
|
|
|
|
const statementData = await response.json();
|
|
|
if (statementData.error) {
|
|
|
recordsContainer.innerHTML = `<p style="color: var(--error-color);">获取账单失败: ${statementData.error}</p>`;
|
|
|
} else {
|
|
|
renderStatementRecords(statementData);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error(`Error fetching statements for ${accountEmail} page ${page}:`, error);
|
|
|
recordsContainer.innerHTML = `<p style="color: var(--error-color);">获取账单时发生网络错误。</p>`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
prevPageBtn.addEventListener('click', () => {
|
|
|
if (currentPage > 1) {
|
|
|
currentPage--;
|
|
|
fetchStatementsForPage(currentPage);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
nextPageBtn.addEventListener('click', () => {
|
|
|
const totalPages = Math.ceil(totalRecords / pageSize);
|
|
|
if (currentPage < totalPages) {
|
|
|
currentPage++;
|
|
|
fetchStatementsForPage(currentPage);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
if (accountEmail) {
|
|
|
fetchAccountStatistics();
|
|
|
fetchStatementsForPage(currentPage);
|
|
|
} else {
|
|
|
recordsContainer.innerHTML = "<p>未指定账户信息。</p>";
|
|
|
loadingIndicator.style.display = 'none';
|
|
|
summaryTotalIncomeElem.textContent = 'N/A';
|
|
|
summaryTotalExpenseElem.textContent = 'N/A';
|
|
|
summaryTotalBalanceElem.textContent = 'N/A';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
async function fetchAccountStatistics() {
|
|
|
if (!accountEmail) return;
|
|
|
|
|
|
try {
|
|
|
const response = await fetch(`/api/account_summary_statistics?email=${encodeURIComponent(accountEmail)}`);
|
|
|
|
|
|
if (response.status === 401) {
|
|
|
console.warn('Unauthorized access to statistics API via backend. User might need to log in.');
|
|
|
summaryTotalIncomeElem.textContent = '认证失败';
|
|
|
summaryTotalExpenseElem.textContent = '认证失败';
|
|
|
summaryTotalBalanceElem.textContent = '认证失败';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!response.ok) {
|
|
|
let errorMsg = `HTTP error! status: ${response.status}`;
|
|
|
try {
|
|
|
const errData = await response.json();
|
|
|
errorMsg = errData.error || errData.message || errorMsg;
|
|
|
} catch (e) { }
|
|
|
throw new Error(errorMsg);
|
|
|
}
|
|
|
|
|
|
const statsData = await response.json();
|
|
|
|
|
|
if (statsData.error) {
|
|
|
console.error('Backend failed to get statistics:', statsData.error);
|
|
|
summaryTotalIncomeElem.textContent = '加载失败';
|
|
|
summaryTotalExpenseElem.textContent = '加载失败';
|
|
|
summaryTotalBalanceElem.textContent = '加载失败';
|
|
|
} else if (statsData.code === 0 && statsData.data) {
|
|
|
summaryTotalIncomeElem.textContent = `${parseFloat(statsData.data.income || 0).toFixed(2)} USD`;
|
|
|
summaryTotalExpenseElem.textContent = `${parseFloat(statsData.data.expense || 0).toFixed(2)} USD`;
|
|
|
summaryTotalBalanceElem.textContent = `${parseFloat(statsData.data.balance || 0).toFixed(2)} USD`;
|
|
|
} else {
|
|
|
console.error('Received unexpected statistics data structure from backend:', statsData);
|
|
|
summaryTotalIncomeElem.textContent = '数据格式错误';
|
|
|
summaryTotalExpenseElem.textContent = '数据格式错误';
|
|
|
summaryTotalBalanceElem.textContent = '数据格式错误';
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('Error fetching account statistics via backend:', error);
|
|
|
summaryTotalIncomeElem.textContent = '网络错误';
|
|
|
summaryTotalExpenseElem.textContent = '网络错误';
|
|
|
summaryTotalBalanceElem.textContent = '网络错误';
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
