You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1593 lines
89 KiB
HTML
1593 lines
89 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>
|
|
<!-- Tailwind CSS v3 -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
|
<!-- 统一的 Tailwind 配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1a56db',
|
|
secondary: '#e2e8f0',
|
|
success: '#10b981',
|
|
danger: '#ef4444',
|
|
warning: '#f59e0b',
|
|
info: '#3b82f6',
|
|
light: '#f8fafc',
|
|
dark: '#1e293b',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
.sidebar-active {
|
|
@apply bg-primary text-white;
|
|
}
|
|
.sidebar-icon {
|
|
@apply mr-3 text-lg;
|
|
}
|
|
.btn {
|
|
@apply px-4 py-2 rounded font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
.btn-primary {
|
|
@apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
|
|
}
|
|
.btn-success {
|
|
@apply bg-success text-white hover:bg-success/90 focus:ring-success/50;
|
|
}
|
|
.btn-danger {
|
|
@apply bg-danger text-white hover:bg-danger/90 focus:ring-danger/50;
|
|
}
|
|
.btn-outline {
|
|
@apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500/50;
|
|
}
|
|
.form-input {
|
|
@apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary/50 focus:border-primary;
|
|
}
|
|
.form-label {
|
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
|
}
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-md overflow-hidden;
|
|
}
|
|
.card-header {
|
|
@apply px-4 py-3 border-b border-gray-200 bg-gray-50;
|
|
}
|
|
.card-body {
|
|
@apply p-4;
|
|
}
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
.badge-success {
|
|
@apply bg-green-100 text-green-800;
|
|
}
|
|
.badge-danger {
|
|
@apply bg-red-100 text-red-800;
|
|
}
|
|
.badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800;
|
|
}
|
|
.badge-info {
|
|
@apply bg-blue-100 text-blue-800;
|
|
}
|
|
.table-container {
|
|
@apply overflow-x-auto;
|
|
}
|
|
.table {
|
|
@apply min-w-full divide-y divide-gray-200;
|
|
}
|
|
.table th {
|
|
@apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
}
|
|
.table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
|
}
|
|
.table tr {
|
|
@apply hover:bg-gray-50;
|
|
}
|
|
/* 移动端表格样式 */
|
|
@media (max-width: 640px) {
|
|
.responsive-table {
|
|
@apply block;
|
|
}
|
|
.responsive-table thead {
|
|
@apply hidden;
|
|
}
|
|
.responsive-table tbody,
|
|
.responsive-table tr,
|
|
.responsive-table td {
|
|
@apply block w-full;
|
|
}
|
|
.responsive-table tr {
|
|
@apply mb-4 border;
|
|
}
|
|
.responsive-table td {
|
|
@apply text-right p-3 relative;
|
|
}
|
|
.responsive-table td::before {
|
|
@apply absolute left-3 top-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
content: attr(data-label);
|
|
}
|
|
.responsive-table td:first-child {
|
|
@apply bg-gray-50;
|
|
}
|
|
}
|
|
.pagination {
|
|
@apply flex items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6;
|
|
}
|
|
.pagination-links {
|
|
@apply flex-1 flex justify-between sm:hidden;
|
|
}
|
|
.pagination-list {
|
|
@apply hidden sm:flex-1 sm:flex sm:items-center sm:justify-between;
|
|
}
|
|
.pagination-item {
|
|
@apply relative inline-flex items-center px-2 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
|
|
}
|
|
.pagination-item.active {
|
|
@apply bg-primary text-white border-primary;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 font-sans">
|
|
<!-- 登录页面 -->
|
|
<div id="login-page" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-indigo-700 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full space-y-8 bg-white rounded-lg shadow-xl p-8">
|
|
<div>
|
|
<div class="flex justify-center mb-6">
|
|
<div class="bg-primary rounded-full p-3">
|
|
<i class="fa fa-shield text-white text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
小程序后端管理系统
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
请登录您的账户
|
|
</p>
|
|
</div>
|
|
<form class="mt-8 space-y-6" id="login-form">
|
|
<input type="hidden" name="remember" value="true">
|
|
<div class="rounded-md shadow-sm -space-y-px bg-gray-50 p-4 rounded-lg">
|
|
<div>
|
|
<label for="username" class="form-label text-gray-700">用户名/手机号</label>
|
|
<input id="username" name="username" type="text" required class="form-input bg-white border-gray-300" placeholder="请输入用户名或手机号">
|
|
</div>
|
|
<div class="mt-4">
|
|
<label for="password" class="form-label text-gray-700">密码</label>
|
|
<input id="password" name="password" type="password" required class="form-input bg-white border-gray-300" placeholder="请输入密码">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
|
|
记住我
|
|
</label>
|
|
</div>
|
|
<div class="text-sm">
|
|
<a href="#" id="forgot-password-link" class="font-medium text-primary hover:text-primary/80">
|
|
忘记密码?
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50">
|
|
登录
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 找回密码页面 -->
|
|
<div id="forgot-password-page" class="hidden min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-indigo-700 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full space-y-8 bg-white rounded-lg shadow-xl p-8">
|
|
<div>
|
|
<div class="flex justify-center mb-6">
|
|
<div class="bg-primary rounded-full p-3">
|
|
<i class="fa fa-key text-white text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
找回密码
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
通过手机号验证码找回密码
|
|
</p>
|
|
</div>
|
|
<form class="mt-8 space-y-6" id="forgot-password-form">
|
|
<div class="rounded-md shadow-sm -space-y-px bg-gray-50 p-4 rounded-lg">
|
|
<div>
|
|
<label for="phone" class="form-label text-gray-700">手机号</label>
|
|
<input id="phone" name="phone" type="tel" required class="form-input bg-white border-gray-300" placeholder="请输入注册手机号">
|
|
</div>
|
|
<div class="mt-4">
|
|
<label for="verification-code" class="form-label text-gray-700">验证码</label>
|
|
<div class="flex">
|
|
<input id="verification-code" name="verification-code" type="text" required class="form-input bg-white border-gray-300 flex-1" placeholder="请输入验证码">
|
|
<button type="button" id="send-code-btn" class="ml-2 btn btn-outline whitespace-nowrap">
|
|
获取验证码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<label for="new-password" class="form-label text-gray-700">新密码</label>
|
|
<input id="new-password" name="new-password" type="password" required class="form-input bg-white border-gray-300" placeholder="请输入新密码">
|
|
</div>
|
|
<div class="mt-4">
|
|
<label for="confirm-password" class="form-label text-gray-700">确认密码</label>
|
|
<input id="confirm-password" name="confirm-password" type="password" required class="form-input bg-white border-gray-300" placeholder="请再次输入新密码">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-sm">
|
|
<a href="#" id="back-to-login-link" class="font-medium text-primary hover:text-primary/80">
|
|
返回登录
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50">
|
|
重置密码
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主管理页面 -->
|
|
<div id="admin-page" class="hidden">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<h1 class="text-xl font-bold text-primary">小程序后端管理系统</h1>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<button id="notification-btn" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50">
|
|
<span class="sr-only">查看通知</span>
|
|
<i class="fa fa-bell text-lg"></i>
|
|
<span class="absolute top-3 right-12 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-danger rounded-full">3</span>
|
|
</button>
|
|
</div>
|
|
<div class="ml-4 relative flex items-center">
|
|
<div>
|
|
<button id="user-menu-btn" class="flex items-center max-w-xs rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50">
|
|
<span class="sr-only">打开用户菜单</span>
|
|
<div class="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
|
|
<i class="fa fa-chevron-down ml-1 text-xs text-gray-400 hidden md:block"></i>
|
|
</button>
|
|
</div>
|
|
<div id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
|
|
<a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- 移动端菜单按钮 -->
|
|
<button id="mobile-menu-btn" class="md:hidden fixed top-4 left-4 z-50 bg-white p-2 rounded-md shadow-md">
|
|
<i class="fa fa-bars text-gray-700"></i>
|
|
</button>
|
|
|
|
<!-- 侧边导航栏 -->
|
|
<aside id="sidebar" class="w-64 bg-white shadow-md hidden md:block absolute md:relative z-40 h-full transition-all duration-300 -translate-x-full md:translate-x-0">
|
|
<nav class="mt-5 px-2">
|
|
<div class="space-y-1">
|
|
<a href="#" class="sidebar-item group flex items-center px-2 py-2 text-base font-medium rounded-md sidebar-active" data-target="user-list-page">
|
|
<i class="fa fa-users sidebar-icon"></i>
|
|
用户列表
|
|
</a>
|
|
<a href="#" class="sidebar-item group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" data-target="recharge-audit-page">
|
|
<i class="fa fa-credit-card sidebar-icon"></i>
|
|
充值审核
|
|
</a>
|
|
<a href="#" class="sidebar-item group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" data-target="withdraw-audit-page">
|
|
<i class="fa fa-money sidebar-icon"></i>
|
|
提现审核
|
|
</a>
|
|
<a href="#" class="sidebar-item group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" data-target="loan-audit-page">
|
|
<i class="fa fa-handshake-o sidebar-icon"></i>
|
|
借款审核
|
|
</a>
|
|
<a href="#" class="sidebar-item group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" data-target="income-management-page">
|
|
<i class="fa fa-line-chart sidebar-icon"></i>
|
|
收益管理
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="flex-1 overflow-y-auto bg-gray-100 p-4">
|
|
<!-- 仪表盘页面 - 已隐藏 -->
|
|
<div id="dashboard-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">仪表盘</h1>
|
|
<div class="text-sm text-gray-500">
|
|
<span id="current-date"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- 总用户数卡片 -->
|
|
<div class="card bg-gradient-to-br from-primary to-blue-700 text-white shadow-lg transform transition-all hover:scale-105">
|
|
<div class="card-body p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-blue-100 text-sm font-medium">总用户数</p>
|
|
<p class="text-3xl font-bold mt-2">1,248</p>
|
|
<div class="flex items-center mt-2 text-blue-100 text-sm">
|
|
<i class="fa fa-arrow-up mr-1"></i>
|
|
<span>12% 较上月</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 p-3 rounded-full">
|
|
<i class="fa fa-users text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日充值卡片 -->
|
|
<div class="card bg-gradient-to-br from-success to-green-700 text-white shadow-lg transform transition-all hover:scale-105">
|
|
<div class="card-body p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-green-100 text-sm font-medium">今日充值</p>
|
|
<p class="text-3xl font-bold mt-2">¥25,680</p>
|
|
<div class="flex items-center mt-2 text-green-100 text-sm">
|
|
<i class="fa fa-arrow-up mr-1"></i>
|
|
<span>8.5% 较昨日</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 p-3 rounded-full">
|
|
<i class="fa fa-credit-card text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日提现卡片 -->
|
|
<div class="card bg-gradient-to-br from-info to-blue-500 text-white shadow-lg transform transition-all hover:scale-105">
|
|
<div class="card-body p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-blue-100 text-sm font-medium">今日提现</p>
|
|
<p class="text-3xl font-bold mt-2">¥12,340</p>
|
|
<div class="flex items-center mt-2 text-blue-100 text-sm">
|
|
<i class="fa fa-arrow-down mr-1"></i>
|
|
<span>3.2% 较昨日</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 p-3 rounded-full">
|
|
<i class="fa fa-money text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日借款卡片 -->
|
|
<div class="card bg-gradient-to-br from-warning to-amber-600 text-white shadow-lg transform transition-all hover:scale-105">
|
|
<div class="card-body p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-amber-100 text-sm font-medium">今日借款</p>
|
|
<p class="text-3xl font-bold mt-2">¥8,920</p>
|
|
<div class="flex items-center mt-2 text-amber-100 text-sm">
|
|
<i class="fa fa-arrow-up mr-1"></i>
|
|
<span>5.7% 较昨日</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 p-3 rounded-full">
|
|
<i class="fa fa-handshake-o text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户列表页面 -->
|
|
<div id="user-list-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">用户列表</h1>
|
|
<div class="flex space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索用户..." class="form-input pl-10">
|
|
<i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
<button class="btn btn-outline">
|
|
<i class="fa fa-filter mr-1"></i> 筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<div class="table-container">
|
|
<table class="table responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户名(手机号)</th>
|
|
<th>真实姓名</th>
|
|
<th>身份证号</th>
|
|
<th>银行名称</th>
|
|
<th>银行卡号</th>
|
|
<th>当前余额</th>
|
|
<th>历史收益</th>
|
|
<th>借款金额</th>
|
|
<th>提现金额</th>
|
|
<th>收款图片</th>
|
|
<th>注册时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td data-label="用户名(手机号)">13812345678</td>
|
|
<td data-label="真实姓名">张三</td>
|
|
<td data-label="身份证号">310123198001011234</td>
|
|
<td data-label="银行名称">中国工商银行</td>
|
|
<td data-label="银行卡号">6222021001012345678</td>
|
|
<td data-label="当前余额">¥12,500.00</td>
|
|
<td data-label="历史收益">¥1,250.00</td>
|
|
<td data-label="借款金额">¥5,000.00</td>
|
|
<td data-label="提现金额">¥3,000.00</td>
|
|
<td data-label="收款图片">
|
|
<button class="text-primary hover:text-primary/80" id="view-receipt-btn">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="注册时间">2023-06-15 10:30</td>
|
|
<td data-label="操作">
|
|
<button class="btn btn-primary text-xs py-1 px-2 recharge-btn" data-username="13812345678">
|
|
<i class="fa fa-plus mr-1"></i> 充值
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名(手机号)">13987654321</td>
|
|
<td data-label="真实姓名">李四</td>
|
|
<td data-label="身份证号">310123198505054567</td>
|
|
<td data-label="银行名称">中国建设银行</td>
|
|
<td data-label="银行卡号">6217001234567890123</td>
|
|
<td data-label="当前余额">¥8,200.00</td>
|
|
<td data-label="历史收益">¥820.00</td>
|
|
<td data-label="借款金额">¥3,000.00</td>
|
|
<td data-label="提现金额">¥5,000.00</td>
|
|
<td data-label="收款图片">
|
|
<button class="text-primary hover:text-primary/80">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="注册时间">2023-07-20 14:15</td>
|
|
<td data-label="操作">
|
|
<button class="btn btn-primary text-xs py-1 px-2 recharge-btn" data-username="13987654321">
|
|
<i class="fa fa-plus mr-1"></i> 充值
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名(手机号)">13512345678</td>
|
|
<td data-label="真实姓名">王五</td>
|
|
<td data-label="身份证号">310123199010107890</td>
|
|
<td data-label="银行名称">中国农业银行</td>
|
|
<td data-label="银行卡号">6228480010123456789</td>
|
|
<td data-label="当前余额">¥20,100.00</td>
|
|
<td data-label="历史收益">¥2,010.00</td>
|
|
<td data-label="借款金额">¥0.00</td>
|
|
<td data-label="提现金额">¥8,000.00</td>
|
|
<td data-label="收款图片">
|
|
<button class="text-primary hover:text-primary/80">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="注册时间">2023-08-05 09:45</td>
|
|
<td data-label="操作">
|
|
<button class="btn btn-primary text-xs py-1 px-2 recharge-btn" data-username="13512345678">
|
|
<i class="fa fa-plus mr-1"></i> 充值
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<div class="pagination-links">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
</div>
|
|
<div class="pagination-list">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条结果
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a href="#" class="pagination-item active">1</a>
|
|
<a href="#" class="pagination-item">2</a>
|
|
<a href="#" class="pagination-item">3</a>
|
|
<span class="pagination-item">...</span>
|
|
<a href="#" class="pagination-item">4</a>
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 充值审核页面 -->
|
|
<div id="recharge-audit-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">充值审核</h1>
|
|
<div class="flex space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索用户..." class="form-input pl-10">
|
|
<i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
<button class="btn btn-outline">
|
|
<i class="fa fa-filter mr-1"></i> 筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<div class="table-container">
|
|
<table class="table responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>充值金额</th>
|
|
<th>提交时间</th>
|
|
<th>充值截图</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td data-label="用户名">13812345678</td>
|
|
<td data-label="充值金额">¥5,000.00</td>
|
|
<td data-label="提交时间">2023-09-10 09:30</td>
|
|
<td data-label="充值截图">
|
|
<button class="text-primary hover:text-primary/80" id="view-screenshot-btn">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="状态"><span class="badge badge-warning">待审核</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-success text-xs py-1 px-2">通过</button>
|
|
<button class="btn btn-danger text-xs py-1 px-2">拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名">13987654321</td>
|
|
<td data-label="充值金额">¥2,000.00</td>
|
|
<td data-label="提交时间">2023-09-10 10:15</td>
|
|
<td data-label="充值截图">
|
|
<button class="text-primary hover:text-primary/80">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="状态"><span class="badge badge-warning">待审核</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-success text-xs py-1 px-2">通过</button>
|
|
<button class="btn btn-danger text-xs py-1 px-2">拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名">13512345678</td>
|
|
<td data-label="充值金额">¥10,000.00</td>
|
|
<td data-label="提交时间">2023-09-09 16:45</td>
|
|
<td data-label="充值截图">
|
|
<button class="text-primary hover:text-primary/80">
|
|
<i class="fa fa-image"></i> 查看
|
|
</button>
|
|
</td>
|
|
<td data-label="状态"><span class="badge badge-success">已通过</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-outline text-xs py-1 px-2" disabled>已通过</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<div class="pagination-links">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
</div>
|
|
<div class="pagination-list">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">8</span> 条结果
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a href="#" class="pagination-item active">1</a>
|
|
<a href="#" class="pagination-item">2</a>
|
|
<a href="#" class="pagination-item">3</a>
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提现审核页面 -->
|
|
<div id="withdraw-audit-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">提现审核</h1>
|
|
<div class="flex space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索用户..." class="form-input pl-10">
|
|
<i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
<button class="btn btn-outline">
|
|
<i class="fa fa-filter mr-1"></i> 筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<div class="table-container">
|
|
<table class="table responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>提现金额</th>
|
|
<th>提交时间</th>
|
|
<th>银行卡信息</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td data-label="用户名">13987654321</td>
|
|
<td data-label="提现金额">¥2,000.00</td>
|
|
<td data-label="提交时间">2023-09-10 11:30</td>
|
|
<td data-label="银行卡信息">中国建设银行 6217001234567890123</td>
|
|
<td data-label="状态"><span class="badge badge-warning">待审核</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-success text-xs py-1 px-2">通过</button>
|
|
<button class="btn btn-danger text-xs py-1 px-2">拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名">13512345678</td>
|
|
<td data-label="提现金额">¥3,000.00</td>
|
|
<td data-label="提交时间">2023-09-10 13:45</td>
|
|
<td data-label="银行卡信息">中国农业银行 6228480010123456789</td>
|
|
<td data-label="状态"><span class="badge badge-warning">待审核</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-success text-xs py-1 px-2">通过</button>
|
|
<button class="btn btn-danger text-xs py-1 px-2">拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>13812345678</td>
|
|
<td>¥1,000.00</td>
|
|
<td>2023-09-09 15:20</td>
|
|
<td>中国工商银行 6222021001012345678</td>
|
|
<td><span class="badge badge-danger">已拒绝</span></td>
|
|
<td>
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-outline text-xs py-1 px-2" disabled>已拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<div class="pagination-links">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
</div>
|
|
<div class="pagination-list">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">6</span> 条结果
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a href="#" class="pagination-item active">1</a>
|
|
<a href="#" class="pagination-item">2</a>
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 借款审核页面 -->
|
|
<div id="loan-audit-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">借款审核</h1>
|
|
<div class="flex space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索用户..." class="form-input pl-10">
|
|
<i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
<button class="btn btn-outline">
|
|
<i class="fa fa-filter mr-1"></i> 筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<div class="table-container">
|
|
<table class="table responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>借款金额</th>
|
|
<th>申请时间</th>
|
|
<th>借款期限</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td data-label="用户名">13512345678</td>
|
|
<td data-label="借款金额">¥3,000.00</td>
|
|
<td data-label="申请时间">2023-09-10 14:30</td>
|
|
<td data-label="借款期限">30天</td>
|
|
<td data-label="状态"><span class="badge badge-warning">待审核</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-success text-xs py-1 px-2">通过</button>
|
|
<button class="btn btn-danger text-xs py-1 px-2">拒绝</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名">13812345678</td>
|
|
<td data-label="借款金额">¥5,000.00</td>
|
|
<td data-label="申请时间">2023-09-10 11:15</td>
|
|
<td data-label="借款期限">60天</td>
|
|
<td data-label="状态"><span class="badge badge-success">已通过</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn bg-blue-600 hover:bg-blue-700 text-white text-xs py-1 px-2">已还款</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="用户名">13987654321</td>
|
|
<td data-label="借款金额">¥2,000.00</td>
|
|
<td data-label="申请时间">2023-09-09 09:45</td>
|
|
<td data-label="借款期限">30天</td>
|
|
<td data-label="状态"><span class="badge badge-info">已还款</span></td>
|
|
<td data-label="操作">
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-outline text-xs py-1 px-2" disabled>已完成</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<div class="pagination-links">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
</div>
|
|
<div class="pagination-list">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">5</span> 条结果
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a href="#" class="pagination-item active">1</a>
|
|
<a href="#" class="pagination-item">2</a>
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收益管理页面 -->
|
|
<div id="income-management-page" class="page-content hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">收益管理</h1>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-medium text-gray-900">收益率设置</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="income-settings-form">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="income-rate" class="form-label">收益年利率 (%)</label>
|
|
<div class="relative">
|
|
<input type="number" id="income-rate" name="income-rate" step="0.01" min="0" max="100" value="8.5" class="form-input pr-10">
|
|
<span class="absolute right-3 top-3 text-gray-500">%</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500">当前设置: 8.5%</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="loan-rate" class="form-label">借款年利率 (%)</label>
|
|
<div class="relative">
|
|
<input type="number" id="loan-rate" name="loan-rate" step="0.01" min="0" max="100" value="12.8" class="form-input pr-10">
|
|
<span class="absolute right-3 top-3 text-gray-500">%</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500">当前设置: 12.8%</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="verify-code" class="form-label">验证码</label>
|
|
<div class="flex">
|
|
<input type="text" id="verify-code" name="verify-code" required class="form-input w-48" placeholder="请输入6位验证码">
|
|
<button type="button" id="get-verify-code-btn" class="ml-2 btn btn-outline whitespace-nowrap w-48">
|
|
获取验证码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-save mr-1"></i> 保存设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片查看模态框 -->
|
|
<div id="image-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg max-w-2xl w-full mx-4">
|
|
<div class="flex justify-between items-center border-b border-gray-200 px-4 py-3">
|
|
<h3 class="text-lg font-medium text-gray-900" id="modal-title">图片查看</h3>
|
|
<button id="close-modal-btn" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex justify-center">
|
|
<img id="modal-image" src="" alt="图片" class="max-h-96 object-contain">
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-end">
|
|
<button id="modal-close-btn" class="btn btn-outline">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 通知模态框 -->
|
|
<div id="notification-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg max-w-md w-full mx-4">
|
|
<div class="flex justify-between items-center border-b border-gray-200 px-4 py-3">
|
|
<h3 class="text-lg font-medium text-gray-900">通知</h3>
|
|
<button id="close-notification-btn" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 max-h-96 overflow-y-auto">
|
|
<div class="space-y-4">
|
|
<div class="flex items-start p-3 bg-yellow-50 rounded-md">
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-full p-2">
|
|
<i class="fa fa-bell text-yellow-600"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-gray-900">有新的充值申请</p>
|
|
<p class="text-xs text-gray-500">用户: 138****5678 | 金额: ¥5,000</p>
|
|
<p class="text-xs text-gray-500 mt-1">10分钟前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start p-3 bg-yellow-50 rounded-md">
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-full p-2">
|
|
<i class="fa fa-bell text-yellow-600"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-gray-900">有新的提现申请</p>
|
|
<p class="text-xs text-gray-500">用户: 139****1234 | 金额: ¥2,000</p>
|
|
<p class="text-xs text-gray-500 mt-1">30分钟前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start p-3 bg-yellow-50 rounded-md">
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-full p-2">
|
|
<i class="fa fa-bell text-yellow-600"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-gray-900">有新的借款申请</p>
|
|
<p class="text-xs text-gray-500">用户: 135****9876 | 金额: ¥3,000</p>
|
|
<p class="text-xs text-gray-500 mt-1">1小时前</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-between">
|
|
<button class="btn btn-outline text-sm">全部标为已读</button>
|
|
<button id="notification-close-btn" class="btn btn-primary">查看全部</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 充值模态框 -->
|
|
<div id="recharge-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg max-w-md w-full mx-4">
|
|
<div class="flex justify-between items-center border-b border-gray-200 px-4 py-3">
|
|
<h3 class="text-lg font-medium text-gray-900">用户充值</h3>
|
|
<button id="close-recharge-modal-btn" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
<form id="recharge-form">
|
|
<input type="hidden" id="recharge-username" value="">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="recharge-amount" class="form-label">充值金额 (元)</label>
|
|
<input type="number" id="recharge-amount" name="recharge-amount" min="1" step="0.01" required class="form-input" placeholder="请输入充值金额">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm-recharge-amount" class="form-label">确认充值金额 (元)</label>
|
|
<input type="number" id="confirm-recharge-amount" name="confirm-recharge-amount" min="1" step="0.01" required class="form-input" placeholder="请再次输入充值金额">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="recharge-code" class="form-label">验证码</label>
|
|
<div class="flex">
|
|
<input type="text" id="recharge-code" name="recharge-code" required class="form-input flex-1" placeholder="请输入验证码">
|
|
<div class="ml-2 flex items-center">
|
|
<span id="random-code" class="px-3 py-2 bg-gray-100 rounded-md text-gray-700 font-mono text-center w-24">ABCD</span>
|
|
<button type="button" id="refresh-code-btn" class="ml-2 text-primary hover:text-primary/80">
|
|
<i class="fa fa-refresh"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2">
|
|
<button id="cancel-recharge-btn" class="btn btn-outline">取消</button>
|
|
<button id="confirm-recharge-btn" class="btn btn-primary">确认充值</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作成功提示 -->
|
|
<div id="success-toast" class="fixed bottom-4 right-4 bg-success text-white px-4 py-3 rounded-md shadow-lg flex items-center hidden">
|
|
<i class="fa fa-check-circle mr-2"></i>
|
|
<span id="toast-message">操作成功</span>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 显示当前日期
|
|
const currentDateEl = document.getElementById('current-date');
|
|
const now = new Date();
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
|
|
currentDateEl.textContent = now.toLocaleDateString('zh-CN', options);
|
|
// 登录表单提交
|
|
document.getElementById('login-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟登录验证
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (username && password) {
|
|
// 登录成功，显示主管理页面
|
|
document.getElementById('login-page').classList.add('hidden');
|
|
document.getElementById('admin-page').classList.remove('hidden');
|
|
|
|
// 默认显示用户列表页面
|
|
const pageContents = document.querySelectorAll('.page-content');
|
|
pageContents.forEach(page => {
|
|
page.classList.add('hidden');
|
|
});
|
|
document.getElementById('user-list-page').classList.remove('hidden');
|
|
|
|
// 初始化图表
|
|
initCharts();
|
|
} else {
|
|
alert('请输入用户名和密码');
|
|
}
|
|
});
|
|
|
|
// 找回密码表单提交
|
|
document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟找回密码验证
|
|
const phone = document.getElementById('phone').value;
|
|
const code = document.getElementById('verification-code').value;
|
|
const newPassword = document.getElementById('new-password').value;
|
|
const confirmPassword = document.getElementById('confirm-password').value;
|
|
|
|
if (!phone) {
|
|
alert('请输入手机号');
|
|
return;
|
|
}
|
|
|
|
if (!code) {
|
|
alert('请输入验证码');
|
|
return;
|
|
}
|
|
|
|
if (!newPassword || !confirmPassword) {
|
|
alert('请输入新密码和确认密码');
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('两次输入的密码不一致');
|
|
return;
|
|
}
|
|
|
|
// 密码重置成功，返回登录页面
|
|
showToast('密码重置成功，请重新登录');
|
|
setTimeout(() => {
|
|
document.getElementById('forgot-password-page').classList.add('hidden');
|
|
document.getElementById('login-page').classList.remove('hidden');
|
|
}, 1500);
|
|
});
|
|
|
|
// 收益设置表单提交
|
|
document.getElementById('income-settings-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟保存设置
|
|
const incomeRate = document.getElementById('income-rate').value;
|
|
const loanRate = document.getElementById('loan-rate').value;
|
|
|
|
if (!incomeRate || !loanRate) {
|
|
alert('请输入收益率和借款利率');
|
|
return;
|
|
}
|
|
|
|
// 保存成功
|
|
showToast('设置保存成功');
|
|
});
|
|
|
|
// 忘记密码链接点击
|
|
document.getElementById('forgot-password-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.getElementById('login-page').classList.add('hidden');
|
|
document.getElementById('forgot-password-page').classList.remove('hidden');
|
|
});
|
|
|
|
// 返回登录链接点击
|
|
document.getElementById('back-to-login-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.getElementById('forgot-password-page').classList.add('hidden');
|
|
document.getElementById('login-page').classList.remove('hidden');
|
|
});
|
|
|
|
// 用户菜单按钮点击
|
|
document.getElementById('user-menu-btn').addEventListener('click', function() {
|
|
const menu = document.getElementById('user-menu');
|
|
menu.classList.toggle('hidden');
|
|
});
|
|
|
|
// 退出登录按钮点击
|
|
document.getElementById('logout-btn').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
// 确认退出
|
|
if (confirm('确定要退出登录吗？')) {
|
|
document.getElementById('admin-page').classList.add('hidden');
|
|
document.getElementById('login-page').classList.remove('hidden');
|
|
}
|
|
});
|
|
|
|
// 通知按钮点击
|
|
document.getElementById('notification-btn').addEventListener('click', function() {
|
|
document.getElementById('notification-modal').classList.remove('hidden');
|
|
});
|
|
|
|
// 关闭通知模态框
|
|
document.getElementById('close-notification-btn').addEventListener('click', function() {
|
|
document.getElementById('notification-modal').classList.add('hidden');
|
|
});
|
|
|
|
document.getElementById('notification-close-btn').addEventListener('click', function() {
|
|
document.getElementById('notification-modal').classList.add('hidden');
|
|
});
|
|
|
|
// 查看收款图片按钮点击
|
|
document.getElementById('view-receipt-btn').addEventListener('click', function() {
|
|
showImageModal('收款图片', 'https://example.com/receipt.jpg');
|
|
});
|
|
|
|
// 查看充值截图按钮点击
|
|
document.getElementById('view-screenshot-btn').addEventListener('click', function() {
|
|
showImageModal('充值截图', 'https://example.com/screenshot.jpg');
|
|
});
|
|
|
|
// 关闭图片模态框
|
|
document.getElementById('close-modal-btn').addEventListener('click', function() {
|
|
document.getElementById('image-modal').classList.add('hidden');
|
|
});
|
|
|
|
document.getElementById('modal-close-btn').addEventListener('click', function() {
|
|
document.getElementById('image-modal').classList.add('hidden');
|
|
});
|
|
|
|
// 发送验证码按钮点击
|
|
document.getElementById('send-code-btn').addEventListener('click', function() {
|
|
const phone = document.getElementById('phone').value;
|
|
if (!phone) {
|
|
alert('请输入手机号');
|
|
return;
|
|
}
|
|
|
|
// 模拟发送验证码
|
|
const btn = this;
|
|
btn.disabled = true;
|
|
btn.textContent = '60s后重新发送';
|
|
|
|
// 倒计时
|
|
let seconds = 60;
|
|
const timer = setInterval(() => {
|
|
seconds--;
|
|
btn.textContent = `${seconds}s后重新发送`;
|
|
|
|
if (seconds <= 0) {
|
|
clearInterval(timer);
|
|
btn.disabled = false;
|
|
btn.textContent = '获取验证码';
|
|
}
|
|
}, 1000);
|
|
|
|
// 模拟发送验证码
|
|
alert(`验证码已发送到手机号: ${phone}`);
|
|
});
|
|
|
|
// 收益管理获取验证码按钮点击
|
|
document.getElementById('get-verify-code-btn').addEventListener('click', function() {
|
|
// 模拟发送验证码
|
|
const btn = this;
|
|
btn.disabled = true;
|
|
btn.textContent = '60s后重新发送';
|
|
|
|
// 倒计时
|
|
let seconds = 60;
|
|
const timer = setInterval(() => {
|
|
seconds--;
|
|
btn.textContent = `${seconds}s后重新发送`;
|
|
|
|
if (seconds <= 0) {
|
|
clearInterval(timer);
|
|
btn.disabled = false;
|
|
btn.textContent = '获取验证码';
|
|
}
|
|
}, 1000);
|
|
|
|
// 模拟发送验证码到管理员手机
|
|
alert('验证码已发送到管理员手机');
|
|
});
|
|
|
|
// 侧边栏导航点击
|
|
const sidebarItems = document.querySelectorAll('.sidebar-item');
|
|
sidebarItems.forEach(item => {
|
|
item.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 移除所有侧边栏项的激活状态
|
|
sidebarItems.forEach(i => {
|
|
i.classList.remove('sidebar-active');
|
|
i.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-gray-900');
|
|
});
|
|
|
|
// 添加当前项的激活状态
|
|
this.classList.add('sidebar-active');
|
|
this.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-gray-900');
|
|
|
|
// 隐藏所有页面内容
|
|
const pageContents = document.querySelectorAll('.page-content');
|
|
pageContents.forEach(page => {
|
|
page.classList.add('hidden');
|
|
});
|
|
|
|
// 显示目标页面内容
|
|
const targetId = this.getAttribute('data-target');
|
|
document.getElementById(targetId).classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
// 审核操作按钮点击
|
|
const auditButtons = document.querySelectorAll('.btn-success, .btn-danger, .btn-info, .bg-blue-600');
|
|
auditButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// 非禁用状态的按钮才执行操作
|
|
if (!this.disabled) {
|
|
const action = this.textContent.trim();
|
|
const username = this.closest('tr').querySelector('td:first-child').textContent;
|
|
const amount = this.closest('tr').querySelector('td:nth-child(2)').textContent;
|
|
|
|
// 确认操作
|
|
let confirmMessage = '';
|
|
if (action === '已还款') {
|
|
confirmMessage = `确定要标记用户 ${username} 的 ${amount} 借款为已还款吗？`;
|
|
} else {
|
|
confirmMessage = `确定要${action}用户 ${username} 的 ${amount} 申请吗？`;
|
|
}
|
|
|
|
if (confirm(confirmMessage)) {
|
|
// 模拟审核操作
|
|
showToast(`已${action}用户 ${username} 的申请`);
|
|
|
|
// 更新状态
|
|
const statusCell = this.closest('tr').querySelector('td:nth-child(5)');
|
|
if (action === '通过') {
|
|
statusCell.innerHTML = '<span class="badge badge-success">已通过</span>';
|
|
} else if (action === '拒绝') {
|
|
statusCell.innerHTML = '<span class="badge badge-danger">已拒绝</span>';
|
|
} else if (action === '已还款') {
|
|
statusCell.innerHTML = '<span class="badge badge-info">已还款</span>';
|
|
}
|
|
|
|
// 禁用操作按钮
|
|
const actionCell = this.closest('td');
|
|
actionCell.innerHTML = `<div class="flex space-x-2"><button class="btn btn-outline text-xs py-1 px-2" disabled>已${action}</button></div>`;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 点击页面其他地方关闭用户菜单
|
|
document.addEventListener('click', function(e) {
|
|
const userMenu = document.getElementById('user-menu');
|
|
const userMenuBtn = document.getElementById('user-menu-btn');
|
|
|
|
if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
|
|
userMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 充值按钮点击事件
|
|
const rechargeBtns = document.querySelectorAll('.recharge-btn');
|
|
rechargeBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const username = this.getAttribute('data-username');
|
|
document.getElementById('recharge-username').value = username;
|
|
document.getElementById('recharge-amount').value = '';
|
|
document.getElementById('recharge-code').value = '';
|
|
|
|
// 生成随机验证码
|
|
generateRandomCode();
|
|
|
|
// 显示充值模态框
|
|
document.getElementById('recharge-modal').classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
// 关闭充值模态框
|
|
document.getElementById('close-recharge-modal-btn').addEventListener('click', function() {
|
|
document.getElementById('recharge-modal').classList.add('hidden');
|
|
});
|
|
|
|
document.getElementById('cancel-recharge-btn').addEventListener('click', function() {
|
|
document.getElementById('recharge-modal').classList.add('hidden');
|
|
});
|
|
|
|
// 刷新验证码按钮点击事件
|
|
document.getElementById('refresh-code-btn').addEventListener('click', function() {
|
|
generateRandomCode();
|
|
});
|
|
|
|
// 确认充值按钮点击事件
|
|
document.getElementById('confirm-recharge-btn').addEventListener('click', function() {
|
|
const username = document.getElementById('recharge-username').value;
|
|
const amount = document.getElementById('recharge-amount').value;
|
|
const confirmAmount = document.getElementById('confirm-recharge-amount').value;
|
|
const code = document.getElementById('recharge-code').value;
|
|
const randomCode = document.getElementById('random-code').textContent;
|
|
|
|
if (!amount || amount <= 0) {
|
|
alert('请输入有效的充值金额');
|
|
return;
|
|
}
|
|
|
|
if (!confirmAmount || confirmAmount <= 0) {
|
|
alert('请输入确认充值金额');
|
|
return;
|
|
}
|
|
|
|
if (parseFloat(amount) !== parseFloat(confirmAmount)) {
|
|
alert('两次输入的充值金额不一致，请重新输入');
|
|
return;
|
|
}
|
|
|
|
if (!code) {
|
|
alert('请输入验证码');
|
|
return;
|
|
}
|
|
|
|
if (code.toUpperCase() !== randomCode) {
|
|
alert('验证码错误，请重新输入');
|
|
generateRandomCode();
|
|
return;
|
|
}
|
|
|
|
// 模拟充值操作
|
|
if (confirm(`确定要为用户 ${username} 充值 ${amount} 元吗？`)) {
|
|
// 充值成功
|
|
showToast(`已成功为用户 ${username} 充值 ${amount} 元`);
|
|
|
|
// 更新用户余额
|
|
const userRows = document.querySelectorAll('#user-list-page tbody tr');
|
|
userRows.forEach(row => {
|
|
const rowUsername = row.querySelector('td:first-child').textContent;
|
|
if (rowUsername === username) {
|
|
const balanceCell = row.querySelector('td:nth-child(6)');
|
|
const currentBalance = parseFloat(balanceCell.textContent.replace('¥', '').replace(',', ''));
|
|
const newBalance = currentBalance + parseFloat(amount);
|
|
balanceCell.textContent = '¥' + newBalance.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
|
}
|
|
});
|
|
|
|
// 关闭模态框
|
|
document.getElementById('recharge-modal').classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 生成随机验证码
|
|
function generateRandomCode() {
|
|
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
let code = '';
|
|
for (let i = 0; i < 4; i++) {
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
document.getElementById('random-code').textContent = code;
|
|
}
|
|
});
|
|
|
|
// 显示图片模态框
|
|
function showImageModal(title, imageUrl) {
|
|
document.getElementById('modal-title').textContent = title;
|
|
document.getElementById('modal-image').src = imageUrl;
|
|
document.getElementById('image-modal').classList.remove('hidden');
|
|
}
|
|
|
|
// 显示操作成功提示
|
|
function showToast(message) {
|
|
const toast = document.getElementById('success-toast');
|
|
document.getElementById('toast-message').textContent = message;
|
|
toast.classList.remove('hidden');
|
|
|
|
// 3秒后自动隐藏
|
|
setTimeout(() => {
|
|
toast.classList.add('hidden');
|
|
}, 3000);
|
|
}
|
|
|
|
// 初始化图表
|
|
function initCharts() {
|
|
// 资金流动趋势图表
|
|
const fundFlowCtx = document.getElementById('fundFlowChart').getContext('2d');
|
|
const fundFlowChart = new Chart(fundFlowCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
|
|
datasets: [
|
|
{
|
|
label: '充值金额',
|
|
data: [12000, 15000, 18000, 14000, 20000, 25000, 22000, 28000, 25680],
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: '提现金额',
|
|
data: [8000, 10000, 12000, 9000, 15000, 18000, 16000, 14000, 12340],
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: '借款金额',
|
|
data: [5000, 7000, 9000, 6000, 10000, 12000, 11000, 9500, 8920],
|
|
borderColor: '#f59e0b',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return '¥' + value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 用户增长趋势图表
|
|
const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
|
|
const userGrowthChart = new Chart(userGrowthCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
|
|
datasets: [
|
|
{
|
|
label: '新增用户',
|
|
data: [80, 120, 150, 130, 180, 210, 190, 230, 250],
|
|
backgroundColor: '#1a56db'
|
|
},
|
|
{
|
|
label: '活跃用户',
|
|
data: [50, 80, 110, 90, 140, 170, 150, 190, 210],
|
|
backgroundColor: '#10b981'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|