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.
1013 lines
54 KiB
HTML
1013 lines
54 KiB
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 -->
|
|
<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">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1E40AF',
|
|
secondary: '#3B82F6',
|
|
accent: '#60A5FA',
|
|
light: '#EFF6FF',
|
|
dark: '#1E3A8A'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif']
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.input-field {
|
|
@apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply w-full bg-primary hover:bg-dark text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply w-full bg-white hover:bg-gray-100 text-primary font-medium py-2 px-4 rounded-lg border border-primary transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply w-full bg-transparent hover:bg-gray-100 text-primary font-medium py-2 px-4 rounded-lg border border-primary transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
|
|
}
|
|
|
|
.btn-outline-sm {
|
|
@apply bg-transparent hover:bg-gray-100 text-primary font-medium py-2 px-3 rounded-lg border border-primary transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary text-sm;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300;
|
|
}
|
|
|
|
.tab-button {
|
|
@apply px-4 py-2 font-medium rounded-lg transition-all duration-300;
|
|
}
|
|
|
|
.tab-button.active {
|
|
@apply bg-primary text-white;
|
|
}
|
|
|
|
.tab-button:not(.active) {
|
|
@apply bg-gray-100 text-gray-600 hover:bg-gray-200;
|
|
}
|
|
|
|
.status-badge {
|
|
@apply px-2 py-1 text-xs font-medium rounded-full;
|
|
}
|
|
|
|
.status-pending {
|
|
@apply bg-yellow-100 text-yellow-800;
|
|
}
|
|
|
|
.status-approved {
|
|
@apply bg-green-100 text-green-800;
|
|
}
|
|
|
|
.status-rejected {
|
|
@apply bg-red-100 text-red-800;
|
|
}
|
|
|
|
.status-repaid {
|
|
@apply bg-blue-100 text-blue-800;
|
|
}
|
|
|
|
.page-transition {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.page-enter {
|
|
@apply opacity-0 transform translate-y-4;
|
|
}
|
|
|
|
.page-enter-active {
|
|
@apply opacity-100 transform translate-y-0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans">
|
|
<!-- 背景图 -->
|
|
<div class="fixed inset-0 z-0 opacity-10 pointer-events-none">
|
|
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/66b58b0e385648838a0c84304dc90556~tplv-a9rns2rl98-image.image?rcl=202511162031498C14CB6DF1111F4CB4B7&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765888329&x-signature=r5rhhn7iyoRCIqexuquZmwjRgUw%3D" alt="背景" class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<!-- 主容器 -->
|
|
<div class="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
|
|
<!-- 页面容器 -->
|
|
<div class="w-full max-w-md">
|
|
<!-- 登录页面 -->
|
|
<div id="login-page" class="page active">
|
|
<div class="card">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-2xl font-bold text-primary">云管理平台</h1>
|
|
<p class="text-gray-500 mt-1">更安全便捷的管理平台</p>
|
|
</div>
|
|
|
|
<form id="login-form" class="space-y-4">
|
|
<div>
|
|
<label for="login-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
|
<input type="tel" id="login-phone" name="phone" placeholder="请输入手机号" required="" class="input-field">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
|
<input type="password" id="login-password" name="password" placeholder="请输入密码" required="" class="input-field">
|
|
</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-700">
|
|
记住我
|
|
</label>
|
|
</div>
|
|
|
|
<a href="#" id="forgot-password-link" class="text-sm text-primary hover:text-dark">
|
|
忘记密码?
|
|
</a>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
登录
|
|
</button>
|
|
|
|
<div class="text-center mt-4">
|
|
<p class="text-sm text-gray-600">
|
|
还没有账号? <a href="#" id="register-link" class="text-primary hover:text-dark font-medium">立即注册</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 注册页面 -->
|
|
<div id="register-page" class="page hidden">
|
|
<div class="card">
|
|
<div class="text-center mb-6">
|
|
<h1 class="text-2xl font-bold text-primary">用户注册</h1>
|
|
<p class="text-gray-500 mt-1">创建您的个人账户</p>
|
|
</div>
|
|
|
|
<form id="register-form" class="space-y-5">
|
|
<div>
|
|
<label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
|
<div class="relative">
|
|
<input type="tel" id="register-phone" name="phone" placeholder="请输入手机号" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-phone"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="register-password" name="password" placeholder="请输入密码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-lock"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="register-confirm-password" name="confirm-password" placeholder="请再次输入密码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-lock"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
|
|
<div class="relative">
|
|
<input type="text" id="register-name" name="name" placeholder="请输入真实姓名" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-user"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-id" class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
|
|
<div class="relative">
|
|
<input type="text" id="register-id" name="id" placeholder="请输入身份证号" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-id-card"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-card" class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
|
|
<div class="relative">
|
|
<input type="text" id="register-card" name="card" placeholder="请输入银行卡号" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-credit-card"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-bank" class="block text-sm font-medium text-gray-700 mb-1">银行名称</label>
|
|
<div class="relative">
|
|
<input type="text" id="register-bank" name="bank" placeholder="请输入银行名称" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-bank"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-payment-info" class="block text-sm font-medium text-gray-700 mb-1">上传收款信息图片</label>
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-primary transition-colors duration-300">
|
|
<i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
|
|
<p class="text-sm text-gray-500">点击上传图片</p>
|
|
<p class="text-xs text-gray-400 mt-1">支持JPG、PNG格式</p>
|
|
<input type="file" id="register-payment-info" name="payment-info" class="hidden" accept="image/*">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="register-code" class="block text-sm font-medium text-gray-700 mb-1">短信验证码</label>
|
|
<div class="flex space-x-2">
|
|
<div class="relative flex-1">
|
|
<input type="text" id="register-code" name="code" placeholder="请输入验证码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-code"></i>
|
|
</span>
|
|
</div>
|
|
<button type="button" id="send-code-btn" class="btn-outline-sm">
|
|
发送验证码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
注册
|
|
</button>
|
|
|
|
<div class="text-center mt-4">
|
|
<p class="text-sm text-gray-600">
|
|
已有账号? <a href="#" id="login-link" class="text-primary hover:text-dark font-medium">立即登录</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 忘记密码页面 -->
|
|
<div id="forgot-password-page" class="page hidden">
|
|
<div class="card">
|
|
<div class="text-center mb-6">
|
|
<h1 class="text-2xl font-bold text-primary">忘记密码</h1>
|
|
<p class="text-gray-500 mt-1">通过手机验证码重置密码</p>
|
|
</div>
|
|
|
|
<form id="forgot-password-form" class="space-y-4">
|
|
<div>
|
|
<label for="forgot-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
|
<div class="relative">
|
|
<input type="tel" id="forgot-phone" name="phone" placeholder="请输入手机号" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-phone"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="forgot-code" class="block text-sm font-medium text-gray-700 mb-1">短信验证码</label>
|
|
<div class="flex space-x-2">
|
|
<div class="relative flex-1">
|
|
<input type="text" id="forgot-code" name="code" placeholder="请输入验证码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-code"></i>
|
|
</span>
|
|
</div>
|
|
<button type="button" id="forgot-send-code-btn" class="btn-outline-sm">
|
|
发送验证码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="forgot-new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="forgot-new-password" name="new-password" placeholder="请输入新密码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-lock"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="forgot-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="forgot-confirm-password" name="confirm-password" placeholder="请再次输入新密码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-lock"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
重置密码
|
|
</button>
|
|
|
|
<div class="text-center mt-4">
|
|
<p class="text-sm text-gray-600">
|
|
返回登录? <a href="#" id="back-to-login-link" class="text-primary hover:text-dark font-medium">立即登录</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人中心页面 -->
|
|
<div id="personal-center-page" class="page hidden">
|
|
<!-- 用户信息卡片 -->
|
|
<div class="card mb-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold text-primary">个人中心</h2>
|
|
<button id="logout-btn" class="text-sm text-gray-500 hover:text-red-500 flex items-center">
|
|
<i class="fa fa-sign-out mr-1"></i> 退出登录
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-8">
|
|
<div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold">
|
|
<span id="user-initial">张</span>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg font-medium" id="user-name">张先生</h3>
|
|
<p class="text-gray-500 text-sm" id="user-phone">138****5678</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 资金信息 -->
|
|
<div class="grid grid-cols-3 gap-6 mb-8">
|
|
<div class="text-center">
|
|
<p class="text-gray-500 text-sm">当前余额</p>
|
|
<p class="text-xl font-bold text-primary" id="current-balance">¥10,000.00</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-gray-500 text-sm">当前利息</p>
|
|
<p class="text-xl font-bold text-green-500" id="current-interest">3.65%</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-gray-500 text-sm">累计收益</p>
|
|
<p class="text-xl font-bold text-green-500" id="total-income">¥1,234.5</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能按钮 -->
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<button id="recharge-btn" class="btn-outline flex flex-col items-center py-3">
|
|
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/af48a8eeecad42c39239e613152b7f24~tplv-a9rns2rl98-image.image?rcl=202511162031498C14CB6DF1111F4CB4B7&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765888343&x-signature=tAV0N9sPJYyJ7oX05%2BPa3N%2BpY%2BQ%3D" alt="充值" class="w-8 h-8 mb-1">
|
|
<span class="text-sm">充值</span>
|
|
</button>
|
|
<button id="withdraw-btn" class="btn-outline flex flex-col items-center py-3">
|
|
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/af48a8eeecad42c39239e613152b7f24~tplv-a9rns2rl98-image.image?rcl=202511162031498C14CB6DF1111F4CB4B7&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765888343&x-signature=tAV0N9sPJYyJ7oX05%2BPa3N%2BpY%2BQ%3D" alt="提现" class="w-8 h-8 mb-1">
|
|
<span class="text-sm">提现</span>
|
|
</button>
|
|
<button id="borrow-btn" class="btn-outline flex flex-col items-center py-3">
|
|
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/af48a8eeecad42c39239e613152b7f24~tplv-a9rns2rl98-image.image?rcl=202511162031498C14CB6DF1111F4CB4B7&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765888343&x-signature=tAV0N9sPJYyJ7oX05%2BPa3N%2BpY%2BQ%3D" alt="借款" class="w-8 h-8 mb-1">
|
|
<span class="text-sm">借款</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易记录 -->
|
|
<div class="card">
|
|
<h2 class="text-lg font-bold text-primary mb-6">交易记录</h2>
|
|
|
|
<!-- 交易类型切换卡 -->
|
|
<div class="flex overflow-x-auto mb-4 pb-2 hide-scrollbar">
|
|
<button class="tab-button active mr-2" data-type="all">全部</button>
|
|
<button class="tab-button mr-2" data-type="recharge">充值</button>
|
|
<button class="tab-button mr-2" data-type="income">收益</button>
|
|
<button class="tab-button mr-2" data-type="withdraw">提取</button>
|
|
<button class="tab-button" data-type="borrow">借款</button>
|
|
</div>
|
|
|
|
<!-- 交易记录列表 -->
|
|
<div class="space-y-4 max-h-80 overflow-y-auto pr-1" id="transaction-list">
|
|
<!-- 交易记录项 - 充值 -->
|
|
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg transaction-item" data-type="recharge">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500">
|
|
<i class="fa fa-plus"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-medium">充值</p>
|
|
<p class="text-xs text-gray-500">2023-07-20 14:30</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-green-500">+¥5,000.00</p>
|
|
<span class="status-badge status-approved">已通过</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易记录项 - 收益 -->
|
|
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg transaction-item" data-type="income">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-500">
|
|
<i class="fa fa-line-chart"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-medium">利息收益</p>
|
|
<p class="text-xs text-gray-500">2023-07-19 00:00</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-green-500">+¥36.50</p>
|
|
<span class="status-badge status-approved">已通过</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易记录项 - 提现 -->
|
|
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg transaction-item" data-type="withdraw">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-500">
|
|
<i class="fa fa-minus"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-medium">提现</p>
|
|
<p class="text-xs text-gray-500">2023-07-18 09:15</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-red-500">-¥2,000.00</p>
|
|
<span class="status-badge status-approved">已通过</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易记录项 - 借款 -->
|
|
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg transaction-item" data-type="borrow">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-500">
|
|
<i class="fa fa-money"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-medium">借款</p>
|
|
<p class="text-xs text-gray-500">2023-07-15 16:45</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-blue-500">+¥10,000.00</p>
|
|
<span class="status-badge status-repaid">已还款</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易记录项 - 借款 -->
|
|
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg transaction-item" data-type="borrow">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-500">
|
|
<i class="fa fa-money"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-medium">借款</p>
|
|
<p class="text-xs text-gray-500">2023-07-10 11:20</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-blue-500">+¥5,000.00</p>
|
|
<span class="status-badge status-pending">审核中</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 充值页面 -->
|
|
<div id="recharge-page" class="page hidden">
|
|
<div class="card">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold text-primary">充值</h2>
|
|
<button id="back-from-recharge-btn" class="text-gray-500 hover:text-primary">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="recharge-form" class="space-y-4">
|
|
<div>
|
|
<label for="recharge-amount" class="block text-sm font-medium text-gray-700 mb-1">充值金额</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">¥</span>
|
|
<input type="number" id="recharge-amount" name="amount" placeholder="请输入充值金额" required="" class="input-field pl-8" min="10000" step="100">
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">最低充值10000元</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="recharge-screenshot" class="block text-sm font-medium text-gray-700 mb-1">上传充值截图</label>
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-primary transition-colors duration-300">
|
|
<i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
|
|
<p class="text-sm text-gray-500">点击上传截图</p>
|
|
<p class="text-xs text-gray-400 mt-1">支持JPG、PNG格式</p>
|
|
<input type="file" id="recharge-screenshot" name="screenshot" class="hidden" accept="image/*">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="recharge-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
|
|
<div class="flex space-x-2">
|
|
<div class="relative flex-1">
|
|
<input type="text" id="recharge-code" name="code" placeholder="请输入验证码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-shield"></i>
|
|
</span>
|
|
</div>
|
|
<div class="w-28 h-10 bg-gray-100 rounded-lg flex items-center justify-center font-bold text-primary text-sm" id="verification-code">
|
|
8A7C
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
确认充值
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提现页面 -->
|
|
<div id="withdraw-page" class="page hidden">
|
|
<div class="card">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold text-primary">提现</h2>
|
|
<button id="back-from-withdraw-btn" class="text-gray-500 hover:text-primary">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="withdraw-form" class="space-y-4">
|
|
<div>
|
|
<label for="withdraw-amount" class="block text-sm font-medium text-gray-700 mb-1">提现金额</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">¥</span>
|
|
<input type="number" id="withdraw-amount" name="amount" placeholder="请输入提现金额" required="" class="input-field pl-8" min="100" step="100">
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">当前可提现余额: <span id="available-balance">¥10,000.00</span></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="withdraw-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
|
|
<div class="flex space-x-2">
|
|
<div class="relative flex-1">
|
|
<input type="text" id="withdraw-code" name="code" placeholder="请输入验证码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-shield"></i>
|
|
</span>
|
|
</div>
|
|
<div class="w-28 h-10 bg-gray-100 rounded-lg flex items-center justify-center font-bold text-primary text-sm" id="withdraw-verification-code">
|
|
B3D9
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
确认提现
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 提现确认弹窗 -->
|
|
<div id="withdraw-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<h3 class="text-lg font-bold text-primary mb-4 text-center">确认提现</h3>
|
|
<p class="text-center mb-6">您确定要提现 <span class="font-bold text-primary" id="confirm-withdraw-amount">¥0.00</span> 吗?</p>
|
|
<div class="flex space-x-3">
|
|
<button id="cancel-withdraw-btn" class="btn-secondary flex-1">取消</button>
|
|
<button id="confirm-withdraw-btn" class="btn-primary flex-1">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 借款页面 -->
|
|
<div id="borrow-page" class="page hidden">
|
|
<div class="card">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold text-primary">借款</h2>
|
|
<button id="back-from-borrow-btn" class="text-gray-500 hover:text-primary">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="borrow-form" class="space-y-4">
|
|
<div>
|
|
<label for="borrow-amount" class="block text-sm font-medium text-gray-700 mb-1">借款金额</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">¥</span>
|
|
<input type="number" id="borrow-amount" name="amount" placeholder="请输入借款金额" required="" class="input-field pl-8" min="1000" step="1000">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3 bg-blue-50 rounded-lg">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-gray-600">借款利率</span>
|
|
<span class="font-medium text-primary">3.65%</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-2">
|
|
<span class="text-sm text-gray-600">每日利息</span>
|
|
<span class="font-medium text-primary" id="daily-interest">¥0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="borrow-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
|
|
<div class="flex space-x-2">
|
|
<div class="relative flex-1">
|
|
<input type="text" id="borrow-code" name="code" placeholder="请输入验证码" required="" class="input-field pl-12">
|
|
<span class="absolute left-4 top-3.5 text-gray-400">
|
|
<i class="fa fa-shield"></i>
|
|
</span>
|
|
</div>
|
|
<div class="w-28 h-10 bg-gray-100 rounded-lg flex items-center justify-center font-bold text-primary text-sm" id="borrow-verification-code">
|
|
5F2E
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
申请借款
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 借款确认弹窗 -->
|
|
<div id="borrow-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<h3 class="text-lg font-bold text-primary mb-4 text-center">确认借款</h3>
|
|
<p class="text-center mb-2">您确定要借款 <span class="font-bold text-primary" id="confirm-borrow-amount">¥0.00</span> 吗?</p>
|
|
<p class="text-center mb-6 text-sm text-gray-500">借款利率: 3.65%，每日利息: <span id="confirm-daily-interest">¥0.00</span></p>
|
|
<div class="flex space-x-3">
|
|
<button id="cancel-borrow-btn" class="btn-secondary flex-1">取消</button>
|
|
<button id="confirm-borrow-btn" class="btn-primary flex-1">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成功提示弹窗 -->
|
|
<div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md mx-4 text-center">
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-check text-2xl text-green-500"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-primary mb-2" id="success-title">操作成功</h3>
|
|
<p class="text-gray-600 mb-6" id="success-message">您的操作已成功完成</p>
|
|
<button id="close-success-modal" class="btn-primary">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面切换功能
|
|
function showPage(pageId) {
|
|
// 隐藏所有页面
|
|
document.querySelectorAll('.page').forEach(page => {
|
|
page.classList.add('hidden');
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// 显示目标页面
|
|
const targetPage = document.getElementById(pageId);
|
|
targetPage.classList.remove('hidden');
|
|
|
|
// 添加动画效果
|
|
targetPage.classList.add('page-enter');
|
|
setTimeout(() => {
|
|
targetPage.classList.add('page-enter-active');
|
|
}, 10);
|
|
setTimeout(() => {
|
|
targetPage.classList.remove('page-enter', 'page-enter-active');
|
|
targetPage.classList.add('active');
|
|
}, 300);
|
|
}
|
|
|
|
// 生成随机验证码
|
|
function generateVerificationCode() {
|
|
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
let code = '';
|
|
for (let i = 0; i < 4; i++) {
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
return code;
|
|
}
|
|
|
|
// 格式化金额
|
|
function formatCurrency(amount) {
|
|
return '¥' + amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
|
}
|
|
|
|
// 初始化页面
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 页面切换事件
|
|
document.getElementById('register-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showPage('register-page');
|
|
});
|
|
|
|
document.getElementById('login-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showPage('login-page');
|
|
});
|
|
|
|
document.getElementById('forgot-password-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showPage('forgot-password-page');
|
|
});
|
|
|
|
document.getElementById('back-to-login-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showPage('login-page');
|
|
});
|
|
|
|
// 登录表单提交
|
|
document.getElementById('login-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟登录成功
|
|
showPage('personal-center-page');
|
|
});
|
|
|
|
// 注册表单提交
|
|
document.getElementById('register-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟注册成功
|
|
showPage('login-page');
|
|
});
|
|
|
|
// 忘记密码表单提交
|
|
document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// 模拟密码重置成功
|
|
showPage('login-page');
|
|
});
|
|
|
|
// 发送验证码按钮
|
|
document.getElementById('send-code-btn').addEventListener('click', function() {
|
|
const btn = this;
|
|
const originalText = btn.textContent;
|
|
|
|
// 模拟发送验证码
|
|
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 = originalText;
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// 忘记密码发送验证码按钮
|
|
document.getElementById('forgot-send-code-btn').addEventListener('click', function() {
|
|
const btn = this;
|
|
const originalText = btn.textContent;
|
|
|
|
// 模拟发送验证码
|
|
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 = originalText;
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// 退出登录按钮
|
|
document.getElementById('logout-btn').addEventListener('click', function() {
|
|
showPage('login-page');
|
|
});
|
|
|
|
// 充值按钮
|
|
document.getElementById('recharge-btn').addEventListener('click', function() {
|
|
// 生成新的验证码
|
|
document.getElementById('verification-code').textContent = generateVerificationCode();
|
|
showPage('recharge-page');
|
|
});
|
|
|
|
// 返回个人中心按钮 - 充值页面
|
|
document.getElementById('back-from-recharge-btn').addEventListener('click', function() {
|
|
showPage('personal-center-page');
|
|
});
|
|
|
|
// 充值表单提交
|
|
document.getElementById('recharge-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 显示成功弹窗
|
|
document.getElementById('success-title').textContent = '充值成功';
|
|
document.getElementById('success-message').textContent = '您的充值申请已提交成功，等待审核';
|
|
document.getElementById('success-modal').classList.remove('hidden');
|
|
|
|
// 重置表单
|
|
this.reset();
|
|
});
|
|
|
|
// 提现按钮
|
|
document.getElementById('withdraw-btn').addEventListener('click', function() {
|
|
// 生成新的验证码
|
|
document.getElementById('withdraw-verification-code').textContent = generateVerificationCode();
|
|
showPage('withdraw-page');
|
|
});
|
|
|
|
// 返回个人中心按钮 - 提现页面
|
|
document.getElementById('back-from-withdraw-btn').addEventListener('click', function() {
|
|
showPage('personal-center-page');
|
|
});
|
|
|
|
// 提现表单提交
|
|
document.getElementById('withdraw-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const amount = document.getElementById('withdraw-amount').value;
|
|
document.getElementById('confirm-withdraw-amount').textContent = formatCurrency(parseFloat(amount));
|
|
|
|
// 显示确认弹窗
|
|
document.getElementById('withdraw-confirm-modal').classList.remove('hidden');
|
|
});
|
|
|
|
// 取消提现按钮
|
|
document.getElementById('cancel-withdraw-btn').addEventListener('click', function() {
|
|
document.getElementById('withdraw-confirm-modal').classList.add('hidden');
|
|
});
|
|
|
|
// 确认提现按钮
|
|
document.getElementById('confirm-withdraw-btn').addEventListener('click', function() {
|
|
document.getElementById('withdraw-confirm-modal').classList.add('hidden');
|
|
|
|
// 显示成功弹窗
|
|
document.getElementById('success-title').textContent = '提现成功';
|
|
document.getElementById('success-message').textContent = '您的提现申请已提交成功，等待审核';
|
|
document.getElementById('success-modal').classList.remove('hidden');
|
|
|
|
// 重置表单
|
|
document.getElementById('withdraw-form').reset();
|
|
});
|
|
|
|
// 借款按钮
|
|
document.getElementById('borrow-btn').addEventListener('click', function() {
|
|
// 生成新的验证码
|
|
document.getElementById('borrow-verification-code').textContent = generateVerificationCode();
|
|
showPage('borrow-page');
|
|
});
|
|
|
|
// 返回个人中心按钮 - 借款页面
|
|
document.getElementById('back-from-borrow-btn').addEventListener('click', function() {
|
|
showPage('personal-center-page');
|
|
});
|
|
|
|
// 借款金额输入事件
|
|
document.getElementById('borrow-amount').addEventListener('input', function() {
|
|
const amount = parseFloat(this.value) || 0;
|
|
const dailyInterest = (amount * 0.0365) / 365;
|
|
document.getElementById('daily-interest').textContent = formatCurrency(dailyInterest);
|
|
});
|
|
|
|
// 借款表单提交
|
|
document.getElementById('borrow-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const amount = document.getElementById('borrow-amount').value;
|
|
const dailyInterest = (parseFloat(amount) * 0.0365) / 365;
|
|
|
|
document.getElementById('confirm-borrow-amount').textContent = formatCurrency(parseFloat(amount));
|
|
document.getElementById('confirm-daily-interest').textContent = formatCurrency(dailyInterest);
|
|
|
|
// 显示确认弹窗
|
|
document.getElementById('borrow-confirm-modal').classList.remove('hidden');
|
|
});
|
|
|
|
// 取消借款按钮
|
|
document.getElementById('cancel-borrow-btn').addEventListener('click', function() {
|
|
document.getElementById('borrow-confirm-modal').classList.add('hidden');
|
|
});
|
|
|
|
// 确认借款按钮
|
|
document.getElementById('confirm-borrow-btn').addEventListener('click', function() {
|
|
document.getElementById('borrow-confirm-modal').classList.add('hidden');
|
|
|
|
// 显示成功弹窗
|
|
document.getElementById('success-title').textContent = '借款申请成功';
|
|
document.getElementById('success-message').textContent = '您的借款申请已提交成功，等待审核';
|
|
document.getElementById('success-modal').classList.remove('hidden');
|
|
|
|
// 重置表单
|
|
document.getElementById('borrow-form').reset();
|
|
document.getElementById('daily-interest').textContent = formatCurrency(0);
|
|
});
|
|
|
|
// 关闭成功弹窗按钮
|
|
document.getElementById('close-success-modal').addEventListener('click', function() {
|
|
document.getElementById('success-modal').classList.add('hidden');
|
|
showPage('personal-center-page');
|
|
});
|
|
|
|
// 交易记录类型切换
|
|
document.querySelectorAll('.tab-button').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// 更新按钮状态
|
|
document.querySelectorAll('.tab-button').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
this.classList.add('active');
|
|
|
|
const type = this.getAttribute('data-type');
|
|
|
|
// 筛选交易记录
|
|
document.querySelectorAll('.transaction-item').forEach(item => {
|
|
if (type === 'all' || item.getAttribute('data-type') === type) {
|
|
item.classList.remove('hidden');
|
|
} else {
|
|
item.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 充值截图上传
|
|
const screenshotUpload = document.getElementById('recharge-screenshot');
|
|
const screenshotArea = screenshotUpload.parentElement;
|
|
|
|
screenshotArea.addEventListener('click', function() {
|
|
screenshotUpload.click();
|
|
});
|
|
|
|
screenshotUpload.addEventListener('change', function() {
|
|
if (this.files.length > 0) {
|
|
const fileName = this.files[0].name;
|
|
screenshotArea.innerHTML = `
|
|
<i class="fa fa-check-circle text-3xl text-green-500 mb-2"></i>
|
|
<p class="text-sm text-gray-700">${fileName}</p>
|
|
<p class="text-xs text-gray-400 mt-1">点击更换图片</p>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// 收款信息图片上传
|
|
const paymentInfoUpload = document.getElementById('register-payment-info');
|
|
const paymentInfoArea = paymentInfoUpload.parentElement;
|
|
|
|
paymentInfoArea.addEventListener('click', function() {
|
|
paymentInfoUpload.click();
|
|
});
|
|
|
|
paymentInfoUpload.addEventListener('change', function() {
|
|
if (this.files.length > 0) {
|
|
const fileName = this.files[0].name;
|
|
paymentInfoArea.innerHTML = `
|
|
<i class="fa fa-check-circle text-3xl text-green-500 mb-2"></i>
|
|
<p class="text-sm text-gray-700">${fileName}</p>
|
|
<p class="text-xs text-gray-400 mt-1">点击更换图片</p>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// 初始化显示登录页面
|
|
showPage('login-page');
|
|
});
|
|
</script>
|
|
|
|
|
|
</body></html> |