1768 lines
48 KiB
HTML
1768 lines
48 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>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* 字体图标备用方案 */
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'FontAwesome';
|
|||
|
|
src: url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2');
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 使用Unicode字符作为图标备用 */
|
|||
|
|
.icon-address-book:before {
|
|||
|
|
content: "📒";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-user-plus:before {
|
|||
|
|
content: "➕";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-list:before {
|
|||
|
|
content: "📋";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-calendar:before {
|
|||
|
|
content: "📅";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-user:before {
|
|||
|
|
content: "👤";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-phone:before {
|
|||
|
|
content: "📱";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-clock:before {
|
|||
|
|
content: "⏰";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-money:before {
|
|||
|
|
content: "💰";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-bell:before {
|
|||
|
|
content: "🔔";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-calculator:before {
|
|||
|
|
content: "🧮";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-plus:before {
|
|||
|
|
content: "➕";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-rotate:before {
|
|||
|
|
content: "🔄";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-database:before {
|
|||
|
|
content: "🗄️";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-info:before {
|
|||
|
|
content: "ℹ️";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-calendar-plus:before {
|
|||
|
|
content: "📆➕";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-logout:before {
|
|||
|
|
content: "🚪";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--primary: #8fd6b3;
|
|||
|
|
--primary-dark: #5bbf93;
|
|||
|
|
--primary-deep: #2f8f67;
|
|||
|
|
--danger: #ef4444;
|
|||
|
|
--success: #10b981;
|
|||
|
|
--warning: #f59e0b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 25px 30px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -50px;
|
|||
|
|
right: -50px;
|
|||
|
|
width: 150px;
|
|||
|
|
height: 150px;
|
|||
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
background: rgba(255, 255, 255, 0.15);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
backdrop-filter: blur(5px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-badge {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-details {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-role {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logout-btn {
|
|||
|
|
padding: 8px 20px;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
color: white;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 999px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logout-btn:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section {
|
|||
|
|
background-color: #f9fafc;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 25px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
border: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
color: #2c3e50;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-bottom: 12px;
|
|||
|
|
border-bottom: 2px solid #eaeef5;
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
label {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3a506b;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input,
|
|||
|
|
select,
|
|||
|
|
textarea {
|
|||
|
|
padding: 12px 15px;
|
|||
|
|
border: 1px solid #d1d9e6;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
transition: all .3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:focus,
|
|||
|
|
select:focus,
|
|||
|
|
textarea:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--primary-dark);
|
|||
|
|
box-shadow: 0 0 0 3px rgba(91, 191, 147, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
padding: 12px 25px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all .3s;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
background-color: var(--primary-dark);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
background-color: var(--primary-deep);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary {
|
|||
|
|
background-color: #6c757d;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary:hover {
|
|||
|
|
background-color: #5a6268;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-success {
|
|||
|
|
background-color: #28a745;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-success:hover {
|
|||
|
|
background-color: #218838;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-danger {
|
|||
|
|
background-color: #dc3545;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-danger:hover {
|
|||
|
|
background-color: #c82333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-section {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
min-width: 800px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th {
|
|||
|
|
background-color: #f1f5fd;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
padding: 16px 12px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-bottom: 2px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
td {
|
|||
|
|
padding: 14px 12px;
|
|||
|
|
border-bottom: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tr:hover {
|
|||
|
|
background-color: #f9fafc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount-cell {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.expired {
|
|||
|
|
color: #dc3545;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.expiring-soon {
|
|||
|
|
color: #ff9800;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-section {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
|||
|
|
border-left: 5px solid var(--primary-dark);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card:hover {
|
|||
|
|
transform: translateY(-5px);
|
|||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card h3 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: #6c757d;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-amount {
|
|||
|
|
color: #28a745;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20px;
|
|||
|
|
color: #6c757d;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
border-top: 1px solid #eaeef5;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
color: #6c757d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width:768px) {
|
|||
|
|
.form-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-group {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
padding: 20px 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-bar {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 启动页（Splash） */
|
|||
|
|
#splash {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .panel {
|
|||
|
|
width: min(520px, 92vw);
|
|||
|
|
background: rgba(255, 255, 255, 0.12);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|||
|
|
border-radius: 18px;
|
|||
|
|
padding: 26px 22px;
|
|||
|
|
color: #fff;
|
|||
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .brand {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 14px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .logo {
|
|||
|
|
width: 52px;
|
|||
|
|
height: 52px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
background: rgba(255, 255, 255, 0.18);
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .logo .icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .desc {
|
|||
|
|
opacity: 0.92;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .bar {
|
|||
|
|
margin-top: 18px;
|
|||
|
|
height: 10px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255, 255, 255, 0.18);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash .bar::after {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 35%;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255, 255, 255, 0.85);
|
|||
|
|
animation: splashMove 1.2s infinite ease-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes splashMove {
|
|||
|
|
0% {
|
|||
|
|
transform: translateX(-110%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translateX(300%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#splash.hide {
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: opacity 220ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 登录检查遮罩 */
|
|||
|
|
#loginCheck {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
z-index: 9998;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#loginCheck .spinner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 4px solid var(--primary-bg);
|
|||
|
|
border-top-color: var(--primary);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 续费弹窗样式 */
|
|||
|
|
.renew-modal {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
|||
|
|
padding: 20px;
|
|||
|
|
width: 300px;
|
|||
|
|
border: 1px solid #eaeef5;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal.show {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal-close {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: #6c757d;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal-body {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-field {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-field label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3a506b;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-field input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #d1d9e6;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-btn-small {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 到期详情弹窗 */
|
|||
|
|
.status-modal-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.45);
|
|||
|
|
display: none;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 9999;
|
|||
|
|
backdrop-filter: blur(2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-modal {
|
|||
|
|
width: min(900px, 92vw);
|
|||
|
|
max-height: 80vh;
|
|||
|
|
overflow: auto;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
|
|||
|
|
border: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 18px 22px;
|
|||
|
|
border-bottom: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-modal-title {
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-modal-close {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: #6c757d;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-modal-body {
|
|||
|
|
padding: 18px 22px 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
min-width: 700px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-table th {
|
|||
|
|
background-color: #f1f5fd;
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-bottom: 2px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-table td {
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
border-bottom: 1px solid #eaeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 备注输入框样式 */
|
|||
|
|
.remark-input {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 36px;
|
|||
|
|
resize: vertical;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid #d1d9e6;
|
|||
|
|
padding: 8px 10px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-family: inherit;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remark-input:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--primary-dark);
|
|||
|
|
box-shadow: 0 0 0 3px rgba(91, 191, 147, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 续费按钮样式 */
|
|||
|
|
.renew-btn {
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
background-color: var(--primary-dark);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.renew-btn:hover {
|
|||
|
|
background-color: var(--primary-deep);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标样式 */
|
|||
|
|
.icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 消息提示 */
|
|||
|
|
.staff-message {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
z-index: 10000;
|
|||
|
|
color: white;
|
|||
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|||
|
|
animation: slideIn 0.3s ease;
|
|||
|
|
max-width: 400px;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.staff-message.success {
|
|||
|
|
background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.staff-message.error {
|
|||
|
|
background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.staff-message.info {
|
|||
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideIn {
|
|||
|
|
from {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideOut {
|
|||
|
|
from {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 数据加载提示 */
|
|||
|
|
.data-loading {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
color: #6c757d;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 4px solid #eaeef5;
|
|||
|
|
border-top-color: var(--primary);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 刷新按钮 */
|
|||
|
|
.refresh-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 25px;
|
|||
|
|
right: 25px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
color: white;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- 登录检查 -->
|
|||
|
|
<div id="loginCheck">
|
|||
|
|
<div style="font-size:1.2rem; color:#2c3e50;">正在验证登录状态...</div>
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 启动页 -->
|
|||
|
|
<div id="splash" aria-hidden="true">
|
|||
|
|
<div class="panel">
|
|||
|
|
<div class="brand">
|
|||
|
|
<div class="logo"><span class="icon icon-address-book"></span></div>
|
|||
|
|
<div>
|
|||
|
|
<div class="title">客户登记管理系统</div>
|
|||
|
|
<div class="desc">正在加载数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bar" role="progressbar" aria-label="loading"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container" id="mainContent" style="display:none;">
|
|||
|
|
<header>
|
|||
|
|
<h1><span class="icon icon-address-book"></span> 客户登记管理系统</h1>
|
|||
|
|
<p class="subtitle">员工工作台 - 管理您的客户</p>
|
|||
|
|
|
|||
|
|
<div class="user-info-bar">
|
|||
|
|
<div class="user-badge">
|
|||
|
|
<div class="user-avatar" id="staffAvatar">员</div>
|
|||
|
|
<div class="user-details">
|
|||
|
|
<div class="user-name" id="staffName">员工姓名</div>
|
|||
|
|
<div class="user-role" id="staffRole">员工账号</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="logout-btn" id="logoutBtn">
|
|||
|
|
<span class="icon icon-logout"></span> 退出登录
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="refresh-btn" onclick="loadClients()" title="刷新数据">
|
|||
|
|
<span class="icon icon-rotate"></span> 刷新数据
|
|||
|
|
</button>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="content">
|
|||
|
|
<section class="form-section">
|
|||
|
|
<h2><span class="icon icon-user-plus"></span> 添加新客户</h2>
|
|||
|
|
|
|||
|
|
<div class="form-grid">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="regDate"><span class="icon icon-calendar"></span> 登记日期</label>
|
|||
|
|
<input type="date" id="regDate" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="customerName"><span class="icon icon-user"></span> 客户姓名</label>
|
|||
|
|
<input type="text" id="customerName" placeholder="请输入客户姓名" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="phone"><span class="icon icon-phone"></span> 联系电话</label>
|
|||
|
|
<input type="tel" id="phone" placeholder="请输入联系电话" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="expireDate"><span class="icon icon-clock"></span> 到期时间</label>
|
|||
|
|
<input type="date" id="expireDate" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="amount"><span class="icon icon-money"></span> 金额（元）</label>
|
|||
|
|
<input type="number" id="amount" placeholder="请输入金额" min="0" step="0.01" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="serviceType"><span class="icon icon-bell"></span> 服务类型</label>
|
|||
|
|
<select id="serviceType">
|
|||
|
|
<option value="TK会员">TK会员</option>
|
|||
|
|
<option value="测试会员">测试会员</option>
|
|||
|
|
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="btn-group">
|
|||
|
|
<button id="addBtn" class="btn-primary"><span class="icon icon-plus"></span> 添加客户</button>
|
|||
|
|
<!-- <button id="calculateTotalBtn" class="btn-success"><span class="icon icon-calculator"></span> 计算总金额</button> -->
|
|||
|
|
<!-- <button class="btn-secondary" onclick="clearForm()"><span class="icon icon-rotate"></span> 清空表单</button> -->
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="table-section">
|
|||
|
|
<h2><span class="icon icon-list"></span> 我的客户列表</h2>
|
|||
|
|
<div id="filterBar" style="margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
|
|||
|
|
<span style="font-weight:600; color:#3a506b;">当前筛选：</span>
|
|||
|
|
<span id="currentFilterTag"
|
|||
|
|
style="background:#eef7f1; color:var(--primary-deep); border:1px solid rgba(47,143,103,0.25); padding:6px 10px; border-radius:999px; font-weight:700;">全部</span>
|
|||
|
|
<button id="clearFilterBtn" class="btn-secondary" style="padding:8px 14px; border-radius:999px;"><span
|
|||
|
|
class="icon icon-rotate"></span> 查看全部</button>
|
|||
|
|
<span id="filterHint" style="opacity:.75; font-size:0.92rem;">提示：点击下方"即将到期/已过期"卡片可快速筛选</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="tableContainer">
|
|||
|
|
<!-- 数据加载中提示 -->
|
|||
|
|
<div id="dataLoading" class="data-loading" style="display:none;">
|
|||
|
|
<div class="loading-spinner"></div>
|
|||
|
|
<p>正在加载客户数据...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table id="clientTable">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>序号</th>
|
|||
|
|
<th>登记日期</th>
|
|||
|
|
<th>客户姓名</th>
|
|||
|
|
<th>联系电话</th>
|
|||
|
|
<th>服务类型</th>
|
|||
|
|
<th>到期时间</th>
|
|||
|
|
<th>金额（元）</th>
|
|||
|
|
<th>状态</th>
|
|||
|
|
<th>续费</th>
|
|||
|
|
<th>备注</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
|
|||
|
|
<tbody id="tableBody"></tbody>
|
|||
|
|
|
|||
|
|
<tfoot>
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="7" style="text-align:right;font-weight:600;">总计：</td>
|
|||
|
|
<td id="totalAmount" class="amount-cell">0.00</td>
|
|||
|
|
<td colspan="2"></td>
|
|||
|
|
</tr>
|
|||
|
|
</tfoot>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<div id="noDataMessage" class="no-data" style="display:none;">
|
|||
|
|
<span class="icon icon-database" style="font-size:2rem; margin-bottom:15px; opacity:0.5;"></span>
|
|||
|
|
<p>暂无客户数据，请添加第一条客户记录</p>
|
|||
|
|
<p style="margin-top:10px; font-size:0.9rem; color:#6c757d;">或者等待管理员分配客户</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="stats-section">
|
|||
|
|
<div class="stat-card" onclick="setFilter('all')">
|
|||
|
|
<h3>客户总数</h3>
|
|||
|
|
<div class="stat-value" id="totalClients">0</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card" onclick="setFilter('all')">
|
|||
|
|
<h3>总金额</h3>
|
|||
|
|
<div class="stat-value total-amount" id="totalAmountStat">¥0.00</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card" onclick="openStatusModal('expiring')" id="expiringCard">
|
|||
|
|
<h3>即将到期 (< 7天)</h3>
|
|||
|
|
<div class="stat-value" id="expiringSoonCount">0</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card" onclick="openStatusModal('expired')" id="expiredCard">
|
|||
|
|
<h3>已过期</h3>
|
|||
|
|
<div class="stat-value expired" id="expiredCount">0</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footer">
|
|||
|
|
<p>客户登记管理系统 - 员工端 © 2024 | 数据来源：管理员分配</p>
|
|||
|
|
<p style="font-size:0.8rem; margin-top:5px;">最后更新: <span id="lastUpdateTime">-</span></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 续费弹窗 -->
|
|||
|
|
<div id="renewModal" class="renew-modal">
|
|||
|
|
<div class="renew-modal-header">
|
|||
|
|
<div class="renew-modal-title"><span class="icon icon-calendar-plus"></span> 客户续费</div>
|
|||
|
|
<button class="renew-modal-close" id="renewModalClose">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="renew-modal-body">
|
|||
|
|
<div class="renew-field">
|
|||
|
|
<label for="renewExpireDateInput"><span class="icon icon-calendar"></span> 新到期时间</label>
|
|||
|
|
<input type="date" id="renewExpireDateInput">
|
|||
|
|
</div>
|
|||
|
|
<div class="renew-field">
|
|||
|
|
<label for="renewAmountInput"><span class="icon icon-money"></span> 续费金额（元）</label>
|
|||
|
|
<input type="number" id="renewAmountInput" min="0" step="0.01" placeholder="请输入续费金额">
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size:0.85rem; color:#6c757d; margin-top:10px;">
|
|||
|
|
<span class="icon icon-info"></span> 更新后，该客户的到期时间和金额将被修改
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="renew-modal-footer">
|
|||
|
|
<button class="btn-secondary renew-btn-small" id="renewModalCancel">取消</button>
|
|||
|
|
<button class="btn-success renew-btn-small" id="renewModalConfirm">确认续费</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 到期详情弹窗 -->
|
|||
|
|
<div id="statusModal" class="status-modal-overlay">
|
|||
|
|
<div class="status-modal">
|
|||
|
|
<div class="status-modal-header">
|
|||
|
|
<div class="status-modal-title" id="statusModalTitle">到期详情</div>
|
|||
|
|
<button class="status-modal-close" onclick="closeStatusModal()">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-modal-body">
|
|||
|
|
<div id="statusModalSummary" style="margin-bottom:12px; color:#6c757d;"></div>
|
|||
|
|
<div style="overflow:auto;">
|
|||
|
|
<table class="status-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>客户姓名</th>
|
|||
|
|
<th>联系电话</th>
|
|||
|
|
<th>服务类型</th>
|
|||
|
|
<th>登记日期</th>
|
|||
|
|
<th>到期时间</th>
|
|||
|
|
<th>金额</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="statusModalBody"></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 消息提示 -->
|
|||
|
|
<div id="staffMessage" class="staff-message" style="display:none;"></div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// ========== API ==========
|
|||
|
|
const API_BASE_URL = window.location.origin;
|
|||
|
|
const API_ENDPOINTS = {
|
|||
|
|
me: '/api/auth/me',
|
|||
|
|
staffClients: '/api/staff/clients',
|
|||
|
|
staffClientById: (id) => `/api/staff/clients/${id}`
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getAuthToken() {
|
|||
|
|
return localStorage.getItem('auth_token') || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function apiRequest(path, options = {}) {
|
|||
|
|
const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
|
|||
|
|
const token = getAuthToken();
|
|||
|
|
if (token) headers.Authorization = `Bearer ${token}`;
|
|||
|
|
|
|||
|
|
const res = await fetch(`${API_BASE_URL}${path}`, { ...options, headers });
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
if (res.status === 401) handleAuthExpired();
|
|||
|
|
throw new Error(data.message || '请求失败');
|
|||
|
|
}
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleAuthExpired() {
|
|||
|
|
localStorage.removeItem('auth_user');
|
|||
|
|
localStorage.removeItem('auth_token');
|
|||
|
|
showMessage('登录已失效，请重新登录', 'error');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
window.location.href = 'index.html';
|
|||
|
|
}, 800);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function normalizeClient(row) {
|
|||
|
|
return {
|
|||
|
|
id: row.id,
|
|||
|
|
regDate: row.regDate || '',
|
|||
|
|
customerName: row.customerName || row.customer || '',
|
|||
|
|
customer: row.customerName || row.customer || '',
|
|||
|
|
phone: row.phone || '',
|
|||
|
|
expireDate: row.expireDate || '',
|
|||
|
|
amount: row.amount || 0,
|
|||
|
|
serviceType: row.serviceType || row.service || '',
|
|||
|
|
service: row.serviceType || row.service || '',
|
|||
|
|
remark: row.remark || '',
|
|||
|
|
lastRenewAt: row.lastRenewAt || null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 登录检查 ==========
|
|||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|||
|
|
const loginCheck = document.getElementById('loginCheck');
|
|||
|
|
const mainContent = document.getElementById('mainContent');
|
|||
|
|
const splash = document.getElementById('splash');
|
|||
|
|
|
|||
|
|
void (async () => {
|
|||
|
|
const authUser = localStorage.getItem('auth_user');
|
|||
|
|
const authToken = localStorage.getItem('auth_token');
|
|||
|
|
|
|||
|
|
if (!authUser || !authToken) {
|
|||
|
|
alert('请先登录');
|
|||
|
|
window.location.href = 'index.html';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const user = JSON.parse(authUser);
|
|||
|
|
if (user.role !== 'staff') {
|
|||
|
|
alert('权限不足，请使用员工账号登录');
|
|||
|
|
window.location.href = 'index.html';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const me = await apiRequest(API_ENDPOINTS.me, { method: 'GET' });
|
|||
|
|
if (!me.user || me.user.role !== 'staff') {
|
|||
|
|
handleAuthExpired();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
localStorage.setItem('auth_user', JSON.stringify(me.user));
|
|||
|
|
|
|||
|
|
document.getElementById('staffName').textContent = me.user.name || '员工';
|
|||
|
|
document.getElementById('staffRole').textContent = me.user.username ? `账号: ${me.user.username}` : '员工账号';
|
|||
|
|
document.getElementById('staffAvatar').textContent = (me.user.name || '员').charAt(0);
|
|||
|
|
|
|||
|
|
window.currentStaff = me.user;
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loginCheck.style.display = 'none';
|
|||
|
|
mainContent.style.display = 'block';
|
|||
|
|
initPage();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (splash) {
|
|||
|
|
splash.classList.add('hide');
|
|||
|
|
setTimeout(() => splash.remove(), 300);
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
}, 600);
|
|||
|
|
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('登录检查失败:', e);
|
|||
|
|
handleAuthExpired();
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== 全局变量 ==========
|
|||
|
|
let clients = [];
|
|||
|
|
let currentFilter = 'all';
|
|||
|
|
const remarkSaveTimers = new Map();
|
|||
|
|
|
|||
|
|
// DOM元素引用
|
|||
|
|
const regDateInput = document.getElementById('regDate');
|
|||
|
|
const customerNameInput = document.getElementById('customerName');
|
|||
|
|
const phoneInput = document.getElementById('phone');
|
|||
|
|
const expireDateInput = document.getElementById('expireDate');
|
|||
|
|
const amountInput = document.getElementById('amount');
|
|||
|
|
const serviceTypeInput = document.getElementById('serviceType');
|
|||
|
|
const addBtn = document.getElementById('addBtn');
|
|||
|
|
const calculateTotalBtn = document.getElementById('calculateTotalBtn');
|
|||
|
|
const tableBody = document.getElementById('tableBody');
|
|||
|
|
const totalAmountCell = document.getElementById('totalAmount');
|
|||
|
|
const totalAmountStat = document.getElementById('totalAmountStat');
|
|||
|
|
const totalClientsStat = document.getElementById('totalClients');
|
|||
|
|
const expiringSoonCount = document.getElementById('expiringSoonCount');
|
|||
|
|
const expiredCount = document.getElementById('expiredCount');
|
|||
|
|
const noDataMessage = document.getElementById('noDataMessage');
|
|||
|
|
const expiringCard = document.getElementById('expiringCard');
|
|||
|
|
const expiredCard = document.getElementById('expiredCard');
|
|||
|
|
const currentFilterTag = document.getElementById('currentFilterTag');
|
|||
|
|
const clearFilterBtn = document.getElementById('clearFilterBtn');
|
|||
|
|
const logoutBtn = document.getElementById('logoutBtn');
|
|||
|
|
const dataLoading = document.getElementById('dataLoading');
|
|||
|
|
const lastUpdateTimeEl = document.getElementById('lastUpdateTime');
|
|||
|
|
const statusModal = document.getElementById('statusModal');
|
|||
|
|
const statusModalBody = document.getElementById('statusModalBody');
|
|||
|
|
const statusModalTitle = document.getElementById('statusModalTitle');
|
|||
|
|
const statusModalSummary = document.getElementById('statusModalSummary');
|
|||
|
|
|
|||
|
|
// 续费弹窗元素
|
|||
|
|
const renewModal = document.getElementById('renewModal');
|
|||
|
|
const renewExpireDateInput = document.getElementById('renewExpireDateInput');
|
|||
|
|
const renewAmountInput = document.getElementById('renewAmountInput');
|
|||
|
|
const renewModalClose = document.getElementById('renewModalClose');
|
|||
|
|
const renewModalCancel = document.getElementById('renewModalCancel');
|
|||
|
|
const renewModalConfirm = document.getElementById('renewModalConfirm');
|
|||
|
|
let renewClientId = null;
|
|||
|
|
let renewButtonPosition = { top: 0, left: 0 };
|
|||
|
|
|
|||
|
|
// ========== 初始化页面 ==========
|
|||
|
|
function initPage() {
|
|||
|
|
// 设置默认日期
|
|||
|
|
const today = new Date().toISOString().split('T')[0];
|
|||
|
|
regDateInput.value = today;
|
|||
|
|
expireDateInput.value = getDateAfterDays(30);
|
|||
|
|
|
|||
|
|
// 加载客户数据
|
|||
|
|
loadClients();
|
|||
|
|
|
|||
|
|
// 初始化事件监听
|
|||
|
|
initEventListeners();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 获取n天后的日期 ==========
|
|||
|
|
function getDateAfterDays(days) {
|
|||
|
|
const d = new Date();
|
|||
|
|
d.setDate(d.getDate() + days);
|
|||
|
|
return d.toISOString().split('T')[0];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 初始化事件监听 ==========
|
|||
|
|
function initEventListeners() {
|
|||
|
|
// 添加客户按钮
|
|||
|
|
if (addBtn) addBtn.addEventListener('click', addClient);
|
|||
|
|
|
|||
|
|
// 计算总金额按钮
|
|||
|
|
if (calculateTotalBtn) calculateTotalBtn.addEventListener('click', calculateTotal);
|
|||
|
|
|
|||
|
|
// 回车键添加客户
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter') addClient();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 筛选卡片点击事件
|
|||
|
|
|
|||
|
|
// 清除筛选按钮
|
|||
|
|
if (clearFilterBtn) clearFilterBtn.addEventListener('click', () => setFilter('all'));
|
|||
|
|
|
|||
|
|
// 续费弹窗事件
|
|||
|
|
if (renewModalClose) renewModalClose.addEventListener('click', closeRenewModal);
|
|||
|
|
if (renewModalCancel) renewModalCancel.addEventListener('click', closeRenewModal);
|
|||
|
|
if (renewModalConfirm) renewModalConfirm.addEventListener('click', confirmRenew);
|
|||
|
|
|
|||
|
|
// 点击弹窗外部关闭
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (renewModal.classList.contains('show') &&
|
|||
|
|
!renewModal.contains(e.target) &&
|
|||
|
|
!e.target.classList.contains('renew-btn')) {
|
|||
|
|
closeRenewModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ESC键关闭弹窗
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape') {
|
|||
|
|
if (renewModal.classList.contains('show')) closeRenewModal();
|
|||
|
|
if (statusModal && statusModal.style.display === 'flex') closeStatusModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 退出登录按钮
|
|||
|
|
if (logoutBtn) logoutBtn.addEventListener('click', logout);
|
|||
|
|
|
|||
|
|
// 点击遮罩关闭详情弹窗
|
|||
|
|
if (statusModal) {
|
|||
|
|
statusModal.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === statusModal) closeStatusModal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 加载客户数据 ==========
|
|||
|
|
async function loadClients() {
|
|||
|
|
try {
|
|||
|
|
if (dataLoading) dataLoading.style.display = 'flex';
|
|||
|
|
if (noDataMessage) noDataMessage.style.display = 'none';
|
|||
|
|
|
|||
|
|
const data = await apiRequest(API_ENDPOINTS.staffClients, { method: 'GET' });
|
|||
|
|
clients = Array.isArray(data.clients) ? data.clients.map(normalizeClient) : [];
|
|||
|
|
|
|||
|
|
if (lastUpdateTimeEl) {
|
|||
|
|
lastUpdateTimeEl.textContent = new Date().toLocaleString('zh-CN');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderTable();
|
|||
|
|
updateStats();
|
|||
|
|
|
|||
|
|
if (clients.length === 0) {
|
|||
|
|
showMessage('您目前没有客户数据，请联系管理员分配或自行添加客户', 'info');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载客户数据失败:', error);
|
|||
|
|
showMessage('加载数据失败: ' + error.message, 'error');
|
|||
|
|
clients = [];
|
|||
|
|
renderTable();
|
|||
|
|
updateStats();
|
|||
|
|
} finally {
|
|||
|
|
if (dataLoading) dataLoading.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 渲染表格 ==========
|
|||
|
|
function renderTable() {
|
|||
|
|
const view = getFilteredClients();
|
|||
|
|
|
|||
|
|
if (view.length === 0) {
|
|||
|
|
tableBody.innerHTML = '';
|
|||
|
|
if (noDataMessage) noDataMessage.style.display = 'block';
|
|||
|
|
totalAmountCell.textContent = '¥0.00';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (noDataMessage) noDataMessage.style.display = 'none';
|
|||
|
|
tableBody.innerHTML = '';
|
|||
|
|
|
|||
|
|
view.forEach((client, index) => {
|
|||
|
|
const row = document.createElement('tr');
|
|||
|
|
const status = getExpirationStatus(client.expireDate);
|
|||
|
|
|
|||
|
|
row.innerHTML = `
|
|||
|
|
<td>${index + 1}</td>
|
|||
|
|
<td>${client.regDate}</td>
|
|||
|
|
<td>${client.customerName || client.customer || ""}</td>
|
|||
|
|
<td>${formatPhone(client.phone)}</td>
|
|||
|
|
<td>${client.serviceType || client.service || ""}</td>
|
|||
|
|
<td>${client.expireDate}</td>
|
|||
|
|
<td class="amount-cell">¥${formatAmount(client.amount)}</td>
|
|||
|
|
<td class="${status.class}">${status.text}</td>
|
|||
|
|
<td>
|
|||
|
|
<button class="renew-btn" onclick="openRenewModal(${client.id}, event)" title="续费/延长到期">
|
|||
|
|
续费
|
|||
|
|
</button>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<textarea class="remark-input"
|
|||
|
|
placeholder="填写客户备注..."
|
|||
|
|
oninput="saveRemark(${client.id}, this.value)"
|
|||
|
|
onblur="saveRemark(${client.id}, this.value)">${client.remark || ''}</textarea>
|
|||
|
|
</td>
|
|||
|
|
`;
|
|||
|
|
tableBody.appendChild(row);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
updateTotalAmount();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 获取筛选后的客户 ==========
|
|||
|
|
function getFilteredClients() {
|
|||
|
|
if (currentFilter === 'expiring') {
|
|||
|
|
return clients.filter(c => getExpirationStatus(c.expireDate).class === 'expiring-soon');
|
|||
|
|
}
|
|||
|
|
if (currentFilter === 'expired') {
|
|||
|
|
return clients.filter(c => getExpirationStatus(c.expireDate).class === 'expired');
|
|||
|
|
}
|
|||
|
|
return clients;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 设置筛选 ==========
|
|||
|
|
function setFilter(next) {
|
|||
|
|
currentFilter = next;
|
|||
|
|
if (currentFilterTag) {
|
|||
|
|
currentFilterTag.textContent = (next === 'expiring') ? '即将到期（<7天）' : (next === 'expired' ? '已过期' : '全部');
|
|||
|
|
}
|
|||
|
|
renderTable();
|
|||
|
|
updateTotalAmount();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 格式化电话 ==========
|
|||
|
|
function formatPhone(phone) {
|
|||
|
|
return String(phone || '');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 格式化金额 ==========
|
|||
|
|
function formatAmount(amount) {
|
|||
|
|
return parseFloat(amount).toFixed(2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 获取到期状态 ==========
|
|||
|
|
function getExpirationStatus(expireDate) {
|
|||
|
|
if (!expireDate) return { text: '正常', class: '' };
|
|||
|
|
const now = new Date();
|
|||
|
|
const expire = new Date(expireDate);
|
|||
|
|
if (Number.isNaN(expire.getTime())) return { text: '正常', class: '' };
|
|||
|
|
const diffTime = expire - now;
|
|||
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|||
|
|
|
|||
|
|
if (diffDays < 0) return { text: '已过期', class: 'expired' };
|
|||
|
|
if (diffDays <= 7) return { text: `${diffDays}天后到期`, class: 'expiring-soon' };
|
|||
|
|
return { text: '正常', class: '' };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 更新总金额 ==========
|
|||
|
|
function updateTotalAmount() {
|
|||
|
|
const view = getFilteredClients();
|
|||
|
|
const totalView = view.reduce((sum, client) => {
|
|||
|
|
const st = getExpirationStatus(client.expireDate).class;
|
|||
|
|
if (currentFilter === 'all' && st === 'expired') return sum;
|
|||
|
|
return sum + parseFloat(client.amount || 0);
|
|||
|
|
}, 0);
|
|||
|
|
totalAmountCell.textContent = `¥${formatAmount(totalView)}`;
|
|||
|
|
|
|||
|
|
const totalActive = clients.reduce((sum, client) => {
|
|||
|
|
const st = getExpirationStatus(client.expireDate).class;
|
|||
|
|
if (st === 'expired') return sum;
|
|||
|
|
return sum + parseFloat(client.amount || 0);
|
|||
|
|
}, 0);
|
|||
|
|
totalAmountStat.textContent = `¥${formatAmount(totalActive)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 更新统计 ==========
|
|||
|
|
function updateStats() {
|
|||
|
|
totalClientsStat.textContent = clients.length;
|
|||
|
|
updateTotalAmount();
|
|||
|
|
|
|||
|
|
let expiringSoon = 0;
|
|||
|
|
let expired = 0;
|
|||
|
|
clients.forEach(client => {
|
|||
|
|
const status = getExpirationStatus(client.expireDate);
|
|||
|
|
if (status.class === 'expiring-soon') expiringSoon++;
|
|||
|
|
if (status.class === 'expired') expired++;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
expiringSoonCount.textContent = expiringSoon;
|
|||
|
|
expiredCount.textContent = expired;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 添加客户 ==========
|
|||
|
|
async function addClient() {
|
|||
|
|
if (!validateForm()) return;
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
regDate: regDateInput.value,
|
|||
|
|
customerName: customerNameInput.value.trim(),
|
|||
|
|
phone: phoneInput.value.trim(),
|
|||
|
|
expireDate: expireDateInput.value,
|
|||
|
|
amount: parseFloat(amountInput.value),
|
|||
|
|
serviceType: serviceTypeInput.value
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const data = await apiRequest(API_ENDPOINTS.staffClients, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: JSON.stringify(payload)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const created = data.client ? normalizeClient(data.client) : normalizeClient(payload);
|
|||
|
|
clients.unshift(created);
|
|||
|
|
|
|||
|
|
clearForm();
|
|||
|
|
renderTable();
|
|||
|
|
updateStats();
|
|||
|
|
|
|||
|
|
showMessage('\u5ba2\u6237\u6dfb\u52a0\u6210\u529f', 'success');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('\u6dfb\u52a0\u5ba2\u6237\u5931\u8d25:', error);
|
|||
|
|
showMessage('加载数据失败: ' + error.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 保存客户到本地存储 ==========
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 验证表单 ==========
|
|||
|
|
function validateForm() {
|
|||
|
|
if (!customerNameInput.value.trim()) {
|
|||
|
|
showMessage('请输入客户姓名', 'error');
|
|||
|
|
customerNameInput.focus();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!phoneInput.value.trim()) {
|
|||
|
|
showMessage('请输入联系电话', 'error');
|
|||
|
|
phoneInput.focus();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!amountInput.value || parseFloat(amountInput.value) < 0) {
|
|||
|
|
showMessage('请输入有效的金额', 'error');
|
|||
|
|
amountInput.focus();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (new Date(expireDateInput.value) < new Date(regDateInput.value)) {
|
|||
|
|
showMessage('到期时间不能早于登记日期', 'error');
|
|||
|
|
expireDateInput.focus();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 清空表单 ==========
|
|||
|
|
function clearForm() {
|
|||
|
|
customerNameInput.value = '';
|
|||
|
|
phoneInput.value = '';
|
|||
|
|
amountInput.value = '';
|
|||
|
|
serviceTypeInput.value = 'TK会员';
|
|||
|
|
const today = new Date().toISOString().split('T')[0];
|
|||
|
|
regDateInput.value = today;
|
|||
|
|
expireDateInput.value = getDateAfterDays(30);
|
|||
|
|
customerNameInput.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 计算总金额 ==========
|
|||
|
|
function calculateTotal() {
|
|||
|
|
updateTotalAmount();
|
|||
|
|
showMessage(`总金额已计算：${totalAmountCell.textContent}`, 'success');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 显示消息 ==========
|
|||
|
|
function showMessage(message, type) {
|
|||
|
|
const msgEl = document.getElementById('staffMessage');
|
|||
|
|
msgEl.textContent = message;
|
|||
|
|
msgEl.className = 'staff-message ' + type;
|
|||
|
|
msgEl.style.display = 'block';
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
msgEl.style.animation = 'slideOut 0.3s ease';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
msgEl.style.display = 'none';
|
|||
|
|
msgEl.style.animation = '';
|
|||
|
|
}, 300);
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 打开续费弹窗 ==========
|
|||
|
|
function openRenewModal(id, event) {
|
|||
|
|
const client = clients.find(c => c.id === id);
|
|||
|
|
if (!client) return;
|
|||
|
|
|
|||
|
|
renewClientId = id;
|
|||
|
|
|
|||
|
|
// 定位弹窗
|
|||
|
|
if (event) {
|
|||
|
|
const buttonRect = event.target.getBoundingClientRect();
|
|||
|
|
renewButtonPosition = {
|
|||
|
|
top: buttonRect.top + window.scrollY,
|
|||
|
|
left: buttonRect.left + window.scrollX
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
renewModal.style.position = 'absolute';
|
|||
|
|
renewModal.style.top = (renewButtonPosition.top + 40) + 'px';
|
|||
|
|
renewModal.style.left = Math.max(20, renewButtonPosition.left - 150) + 'px';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置默认值为当前值
|
|||
|
|
renewExpireDateInput.value = client.expireDate || '';
|
|||
|
|
renewAmountInput.value = 0;
|
|||
|
|
renewModal.classList.add('show');
|
|||
|
|
|
|||
|
|
// 自动聚焦
|
|||
|
|
setTimeout(() => renewExpireDateInput.focus(), 50);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 关闭续费弹窗 ==========
|
|||
|
|
function closeRenewModal() {
|
|||
|
|
renewClientId = null;
|
|||
|
|
renewModal.classList.remove('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 确认续费 ==========
|
|||
|
|
// ========== 确认续费 ==========
|
|||
|
|
async function confirmRenew() {
|
|||
|
|
if (renewClientId == null) return;
|
|||
|
|
const client = clients.find(c => c.id === renewClientId);
|
|||
|
|
if (!client) return closeRenewModal();
|
|||
|
|
|
|||
|
|
const newExpire = renewExpireDateInput.value.trim();
|
|||
|
|
const addAmountStr = renewAmountInput.value.toString().trim(); // 本次续费增加金额
|
|||
|
|
|
|||
|
|
if (!newExpire) {
|
|||
|
|
showMessage('请填写新到期时间', 'error');
|
|||
|
|
renewExpireDateInput.focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!addAmountStr || isNaN(Number(addAmountStr)) || Number(addAmountStr) < 0) {
|
|||
|
|
showMessage('请填写正确的续费金额', 'error');
|
|||
|
|
renewAmountInput.focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 关键：本次输入金额 + 原本金额
|
|||
|
|
const oldAmount = Number(client.amount || 0);
|
|||
|
|
const addAmount = Number(addAmountStr);
|
|||
|
|
const nextAmount = oldAmount + addAmount;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const payload = {
|
|||
|
|
expireDate: newExpire,
|
|||
|
|
amount: nextAmount, // ✅ 更新为累加后的金额
|
|||
|
|
lastRenewAt: new Date().toISOString()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const data = await apiRequest(API_ENDPOINTS.staffClientById(renewClientId), {
|
|||
|
|
method: 'PUT',
|
|||
|
|
body: JSON.stringify(payload)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (data.client) {
|
|||
|
|
const updated = normalizeClient(data.client);
|
|||
|
|
const idx = clients.findIndex(c => c.id === renewClientId);
|
|||
|
|
if (idx >= 0) clients[idx] = updated;
|
|||
|
|
} else {
|
|||
|
|
client.expireDate = newExpire;
|
|||
|
|
client.amount = nextAmount; // ✅ 本地也更新为累加后的金额
|
|||
|
|
client.lastRenewAt = payload.lastRenewAt;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeRenewModal();
|
|||
|
|
renderTable();
|
|||
|
|
updateStats();
|
|||
|
|
|
|||
|
|
showMessage('客户续费成功', 'success');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('续费失败:', error);
|
|||
|
|
showMessage('续费失败: ' + error.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 打开到期详情弹窗 ==========
|
|||
|
|
function openStatusModal(type) {
|
|||
|
|
if (!statusModal || !statusModalBody || !statusModalTitle || !statusModalSummary) return;
|
|||
|
|
|
|||
|
|
const isExpired = type === 'expired';
|
|||
|
|
const label = isExpired ? '已过期' : '即将到期';
|
|||
|
|
const list = clients.filter(c => {
|
|||
|
|
const st = getExpirationStatus(c.expireDate).class;
|
|||
|
|
return isExpired ? st === 'expired' : st === 'expiring-soon';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
statusModalTitle.textContent = `${label}客户`;
|
|||
|
|
statusModalSummary.textContent = `共 ${list.length} 位客户`;
|
|||
|
|
statusModalBody.innerHTML = '';
|
|||
|
|
|
|||
|
|
if (list.length === 0) {
|
|||
|
|
statusModalBody.innerHTML = `<tr><td colspan="6" style="text-align:center; color:#6c757d;">暂无数据</td></tr>`;
|
|||
|
|
} else {
|
|||
|
|
list.forEach(client => {
|
|||
|
|
const row = document.createElement('tr');
|
|||
|
|
row.innerHTML = `
|
|||
|
|
<td>${client.customerName || client.customer || ''}</td>
|
|||
|
|
<td>${formatPhone(client.phone)}</td>
|
|||
|
|
<td>${client.serviceType || client.service || ''}</td>
|
|||
|
|
<td>${client.regDate || ''}</td>
|
|||
|
|
<td>${client.expireDate || ''}</td>
|
|||
|
|
<td>¥${formatAmount(client.amount)}</td>
|
|||
|
|
`;
|
|||
|
|
statusModalBody.appendChild(row);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
statusModal.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeStatusModal() {
|
|||
|
|
if (!statusModal) return;
|
|||
|
|
statusModal.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 保存备注 ==========
|
|||
|
|
function saveRemark(id, remark) {
|
|||
|
|
const client = clients.find(c => c.id === id);
|
|||
|
|
if (!client) return;
|
|||
|
|
client.remark = remark;
|
|||
|
|
|
|||
|
|
if (remarkSaveTimers.has(id)) {
|
|||
|
|
clearTimeout(remarkSaveTimers.get(id));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const timer = setTimeout(async () => {
|
|||
|
|
try {
|
|||
|
|
const data = await apiRequest(API_ENDPOINTS.staffClientById(id), {
|
|||
|
|
method: 'PUT',
|
|||
|
|
body: JSON.stringify({ remark })
|
|||
|
|
});
|
|||
|
|
if (data.client) {
|
|||
|
|
const updated = normalizeClient(data.client);
|
|||
|
|
const idx = clients.findIndex(c => c.id === id);
|
|||
|
|
if (idx >= 0) clients[idx] = updated;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('\u4fdd\u5b58\u5907\u6ce8\u5931\u8d25:', error);
|
|||
|
|
showMessage('加载数据失败: ' + error.message, 'error');
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
|
|||
|
|
remarkSaveTimers.set(id, timer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========== 退出登录 ==========
|
|||
|
|
function logout() {
|
|||
|
|
if (confirm('确定要退出登录吗？')) {
|
|||
|
|
localStorage.removeItem('auth_user');
|
|||
|
|
localStorage.removeItem('auth_token');
|
|||
|
|
window.location.href = 'index.html';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 全局函数导出 ==========
|
|||
|
|
window.openRenewModal = openRenewModal;
|
|||
|
|
window.openStatusModal = openStatusModal;
|
|||
|
|
window.closeStatusModal = closeStatusModal;
|
|||
|
|
window.saveRemark = saveRemark;
|
|||
|
|
window.setFilter = setFilter;
|
|||
|
|
window.loadClients = loadClients;
|
|||
|
|
window.clearForm = clearForm;
|
|||
|
|
|
|||
|
|
// 添加CSS动画
|
|||
|
|
const style = document.createElement('style');
|
|||
|
|
style.textContent = `
|
|||
|
|
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|||
|
|
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
|
|||
|
|
`;
|
|||
|
|
document.head.appendChild(style);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|