394 lines
19 KiB
HTML
394 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>枢机信用储备银行 - 储值查看</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind 配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#8b5cf6',
|
|
accent: '#10b981',
|
|
danger: '#ef4444',
|
|
warning: '#f59e0b',
|
|
info: '#06b6d4',
|
|
dark: {
|
|
100: '#1e293b',
|
|
200: '#0f172a',
|
|
300: '#020617'
|
|
},
|
|
light: {
|
|
100: '#f8fafc',
|
|
200: '#f1f5f9',
|
|
300: '#e2e8f0'
|
|
},
|
|
minecraft: {
|
|
gold: '#FFD700',
|
|
iron: '#C0C0C0',
|
|
diamond: '#B9F2FF',
|
|
emerald: '#50C878',
|
|
redstone: '#FF0000',
|
|
lapis: '#2E5894',
|
|
netherite: '#443A49'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
minecraft: ['"Minecraft"', 'Inter', 'sans-serif']
|
|
},
|
|
boxShadow: {
|
|
'glow': '0 0 15px rgba(59, 130, 246, 0.5)',
|
|
'glow-dark': '0 0 15px rgba(139, 92, 246, 0.5)',
|
|
'glow-accent': '0 0 15px rgba(16, 185, 129, 0.5)'
|
|
},
|
|
animation: {
|
|
'float': 'float 3s ease-in-out infinite',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-10px)' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.text-shadow-glow {
|
|
text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
|
|
}
|
|
.text-shadow-dark {
|
|
text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
|
|
}
|
|
.bg-blur {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.transition-transform-slow {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.hover-scale {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.hover-scale:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
.card-gradient {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
|
}
|
|
.dark .card-gradient {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.toast {
|
|
animation: toast-fade-in 0.3s ease-out forwards;
|
|
}
|
|
.toast.fade-out {
|
|
animation: toast-fade-out 0.3s ease-in forwards;
|
|
}
|
|
@keyframes toast-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes toast-fade-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-inter bg-light-200 dark:bg-dark-200 text-dark-300 dark:text-light-100 transition-colors duration-300 min-h-screen flex flex-col">
|
|
<!-- Toast 通知 -->
|
|
<div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>
|
|
|
|
<!-- 导航栏 -->
|
|
<header class="sticky top-0 z-50 bg-light-100/80 dark:bg-dark-100/80 bg-blur border-b border-light-300/30 dark:border-dark-300/30 shadow-md">
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="text-primary dark:text-secondary text-3xl">
|
|
<i class="fa fa-bank"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl md:text-2xl font-bold text-primary dark:text-secondary">枢机信用储备银行</h1>
|
|
<p class="text-xs md:text-sm text-gray-600 dark:text-gray-400">银河锋锐软件开发工作室</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button id="refresh-btn" class="p-2 rounded-full bg-light-300 dark:bg-dark-300 hover:bg-light-200 dark:hover:bg-dark-100 transition-colors">
|
|
<i class="fa fa-refresh text-dark-300 dark:text-light-100"></i>
|
|
</button>
|
|
<button id="theme-toggle" class="p-2 rounded-full bg-light-300 dark:bg-dark-300 hover:bg-light-200 dark:hover:bg-dark-100 transition-colors">
|
|
<i class="fa fa-moon dark:hidden text-dark-300"></i>
|
|
<i class="fa fa-sun hidden dark:inline text-light-100"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow">
|
|
<!-- 储值查看表格 -->
|
|
<section class="py-12 bg-light-100 dark:bg-dark-100">
|
|
<div class="mx-auto px-4">
|
|
<div class="w-[85vw] mx-auto">
|
|
<div class="bg-white dark:bg-dark-200 rounded-xl shadow-lg overflow-hidden mb-8">
|
|
<div class="bg-primary dark:bg-secondary px-6 py-4 flex justify-between items-center">
|
|
<h2 class="text-xl font-bold text-white">已购买储值项目查看</h2>
|
|
<div class="flex items-center space-x-2">
|
|
<span id="loading-spinner" class="hidden">
|
|
<i class="fa fa-spinner fa-spin text-white"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 overflow-x-auto">
|
|
<table class="w-full border-collapse border border-light-300 dark:border-dark-300">
|
|
<thead>
|
|
<tr>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">玩家名称</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值类型</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值创建时间</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值最短取出时间</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值已存日期</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值日利率</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值金额</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值累计应计利息</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">储值共生效日期长度</th>
|
|
<th class="border border-light-300 dark:border-dark-300 px-4 py-2">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="storage-table-body">
|
|
<!-- 这里将通过 JavaScript 动态插入数据 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-light-100 dark:bg-dark-100 border-t border-light-300/30 dark:border-dark-300/30 py-8">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
<div class="mb-4 md:mb-0">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="text-primary dark:text-secondary text-2xl">
|
|
<i class="fa fa-bank"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold">枢机信用储备银行</h2>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400">银河锋锐软件开发工作室</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
<p>© 2025 枢机信用储备银行. 保留所有权利.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 初始化页面
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 主题切换
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
themeToggle.addEventListener('click', () => {
|
|
document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
|
|
});
|
|
|
|
// 刷新按钮
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
refreshBtn.addEventListener('click', fetchStorageData);
|
|
|
|
// 初始加载数据
|
|
fetchStorageData();
|
|
|
|
// 获取存储数据
|
|
function fetchStorageData() {
|
|
const loadingSpinner = document.getElementById('loading-spinner');
|
|
loadingSpinner.classList.remove('hidden');
|
|
|
|
fetch('/api/crb/store-values/')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log(data);
|
|
// 渲染表格数据
|
|
const tableBody = document.getElementById('storage-table-body');
|
|
tableBody.innerHTML = ''; // 清空现有数据
|
|
|
|
if (data.data && data.data.length > 0) {
|
|
data.data.forEach(item => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.PlayerName}</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueType}</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueCreateDateTime}</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueMin}</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.GameDays} 游戏日 | ${item.Days} 现实日</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueDayInterestRate}%</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueAmount.toLocaleString()} GC</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.AccruedInterest.toLocaleString()} GC</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">${item.StoreValueExpirationGameDate} 游戏日</td>
|
|
<td class="border border-light-300 dark:border-dark-300 px-4 py-2">
|
|
<button data-uuid="${item.StoreValueUUID}" class="cash-btn px-4 py-2 bg-primary hover:bg-primary/90 dark:bg-secondary dark:hover:bg-secondary/90 text-white rounded-md">兑现</button>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// 为所有兑现按钮添加事件监听器
|
|
document.querySelectorAll('.cash-btn').forEach(button => {
|
|
button.addEventListener('click', handleCashOut);
|
|
});
|
|
} else {
|
|
// 显示无数据提示行
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td colspan="10" class="border border-light-300 dark:border-dark-300 px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
|
<div class="flex flex-col items-center justify-center space-y-2">
|
|
<i class="fa fa-database text-3xl"></i>
|
|
<p class="text-lg">暂无储值数据</p>
|
|
</div>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
showToast('获取数据失败，请重试', 'danger');
|
|
})
|
|
.finally(() => {
|
|
loadingSpinner.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// 处理兑现操作
|
|
function handleCashOut(event) {
|
|
const button = event.currentTarget;
|
|
const uuid = button.getAttribute('data-uuid');
|
|
|
|
// 禁用按钮防止重复点击
|
|
button.disabled = true;
|
|
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 处理中...';
|
|
|
|
const formData = new FormData();
|
|
formData.append('StoreValueUUID', uuid);
|
|
|
|
fetch('/api/crb/store-values/' + uuid + '/cash/', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({StoreValueUUID: uuid})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.status === 0) {
|
|
showToast('兑现成功', 'success');
|
|
} else {
|
|
showToast(data.message || `兑现失败: ${data.msg}`, 'danger');
|
|
}
|
|
fetchStorageData();
|
|
})
|
|
.catch(error => {
|
|
console.error('兑现操作出错:', error);
|
|
showToast('兑现操作出错，请重试', 'danger');
|
|
button.disabled = false;
|
|
button.textContent = '兑现';
|
|
});
|
|
}
|
|
|
|
// 显示Toast通知
|
|
function showToast(message, type = 'info') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
|
|
// 根据类型设置样式
|
|
let bgColor = 'bg-info';
|
|
let icon = 'fa-info-circle';
|
|
|
|
switch(type) {
|
|
case 'success':
|
|
bgColor = 'bg-accent';
|
|
icon = 'fa-check-circle';
|
|
break;
|
|
case 'danger':
|
|
bgColor = 'bg-danger';
|
|
icon = 'fa-exclamation-circle';
|
|
break;
|
|
case 'warning':
|
|
bgColor = 'bg-warning';
|
|
icon = 'fa-exclamation-triangle';
|
|
break;
|
|
}
|
|
|
|
toast.className = `toast ${bgColor} text-white px-4 py-3 rounded-md shadow-lg flex items-center space-x-2`;
|
|
toast.innerHTML = `
|
|
<i class="fa ${icon}"></i>
|
|
<span>${message}</span>
|
|
`;
|
|
|
|
toastContainer.appendChild(toast);
|
|
|
|
// 3秒后自动消失
|
|
setTimeout(() => {
|
|
toast.classList.add('fade-out');
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |