feat: 用户管理扩展-账户管理+人脸采集入口
- din-user-mgmt.html 会员表格新增「账号余额」列，「查看/编辑」改为「详情/账户管理/人脸采集」三个操作 - 新增 din-user-account.html 账户管理详情页（充值/消费/退款记录等） - 同步沿用侧边栏自有餐品库改名+终端管理分组重构 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
d32141e6ba
commit
e157638168
@@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>账户管理 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 通用组件 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:var(--danger);color:#fff;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:140px;}
|
||||
.filter-input:focus,.filter-select:focus{border-color:var(--primary);}
|
||||
/* 页面头部 */
|
||||
.page-header-bar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
|
||||
.page-header-bar__left{display:flex;align-items:center;gap:12px;}
|
||||
.page-header-bar__title{font-size:var(--font-lg);font-weight:700;color:var(--text-primary);}
|
||||
.page-header-bar__back{color:var(--primary);text-decoration:none;font-size:var(--font-sm);display:flex;align-items:center;gap:4px;}
|
||||
.page-header-bar__back:hover{color:#40a9ff;}
|
||||
/* 顶部账户操作区 */
|
||||
.account-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
|
||||
/* 用户信息卡片 */
|
||||
.user-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
.user-card__avatar{width:48px;height:48px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;flex-shrink:0;}
|
||||
.user-card__info{flex:1;min-width:0;}
|
||||
.user-card__name{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.user-card__code{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;}
|
||||
.user-card__tags{display:flex;gap:6px;margin-top:6px;}
|
||||
.user-card__balance{text-align:right;}
|
||||
.user-card__balance-label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.user-card__balance-value{font-size:var(--font-xxl);font-weight:700;color:var(--text-primary);margin-top:4px;}
|
||||
/* 账户设置卡片 */
|
||||
.settings-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.settings-card__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:14px;}
|
||||
.settings-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
|
||||
.settings-item{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
|
||||
.settings-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.settings-item select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 8px;font-size:var(--font-sm);outline:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;cursor:pointer;width:100%;}
|
||||
.settings-item select:focus{border-color:var(--primary);}
|
||||
.settings-item .readonly{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);height:32px;display:flex;align-items:center;}
|
||||
/* 充值卡片 */
|
||||
.recharge-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.recharge-card__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:14px;}
|
||||
.recharge-amount{display:flex;align-items:center;gap:0;margin-bottom:12px;}
|
||||
.recharge-amount .currency{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);margin-right:2px;}
|
||||
.recharge-amount input{border:none;border-bottom:2px solid var(--border);font-size:26px;font-weight:700;outline:none;width:140px;padding:2px 0;}
|
||||
.recharge-amount input:focus{border-bottom-color:var(--primary);}
|
||||
.recharge-form-row{display:flex;gap:8px;margin-bottom:12px;}
|
||||
.recharge-form-item{display:flex;flex-direction:column;gap:4px;flex:1;}
|
||||
.recharge-form-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.recharge-form-item input,.recharge-form-item select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-sm);outline:none;width:100%;}
|
||||
.recharge-form-item select{padding-right:24px;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;cursor:pointer;}
|
||||
.recharge-form-item input:focus,.recharge-form-item select:focus{border-color:var(--primary);}
|
||||
.recharge-preview{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:12px;display:none;}
|
||||
.recharge-preview span{color:var(--primary);font-weight:600;}
|
||||
/* 账单列表区 */
|
||||
.bill-section{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.bill-section__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.bill-section__title{font-size:var(--font-base);font-weight:600;}
|
||||
.filter-bar{padding:12px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
/* 表格 */
|
||||
.table-wrap{overflow-x:auto;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid #f5f5f5;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--border);}
|
||||
.pagination__info{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__btns{display:flex;align-items:center;gap:4px;}
|
||||
.page-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.page-btn:disabled{color:#ccc;cursor:not-allowed;}
|
||||
.page-btn:disabled:hover{background:#fff;color:#ccc;border-color:var(--border);}
|
||||
/* 确认弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:8px;width:440px;max-width:90vw;box-shadow:0 12px 48px rgba(0,0,0,.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal-title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal-close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);}
|
||||
.modal-close:hover{background:#f5f5f5;}
|
||||
.modal-body{padding:24px;font-size:var(--font-sm);color:var(--text-secondary);line-height:2;}
|
||||
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* Toast */
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(0,0,0,0.75);color:#fff;padding:10px 24px;border-radius:var(--radius-md);font-size:var(--font-sm);opacity:0;pointer-events:none;transition:all .3s;z-index:2000;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a><a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div><span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-canteen.html" class="sidebar-item"><span class="mi">🏢</span>场所管理</a>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<a href="din-dish-own.html" class="sidebar-item"><span class="mi">📦</span>自有餐品库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="this.parentElement.classList.toggle('open')">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item active"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🖥️ 终端管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">📟</span>设备管理</a>
|
||||
<a href="din-content-center.html" class="sidebar-item"><span class="mi">📦</span>内容中心</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="this.parentElement.classList.toggle('open')">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header-bar">
|
||||
<div class="page-header-bar__left">
|
||||
<a class="page-header-bar__back" href="din-user-mgmt.html">← 返回用户管理</a>
|
||||
<span class="page-header-bar__title">账户管理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部：三栏布局 -->
|
||||
<div class="account-top">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-card">
|
||||
<div class="user-card__avatar" id="userAvatar">张</div>
|
||||
<div class="user-card__info">
|
||||
<div class="user-card__name" id="userName">张伟</div>
|
||||
<div class="user-card__code" id="userCode">EMP001</div>
|
||||
<div class="user-card__tags">
|
||||
<span class="tag tag-red" id="userLevel">钻石</span>
|
||||
<span class="tag tag-green" id="userStatus">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-card__balance">
|
||||
<div class="user-card__balance-label">当前余额</div>
|
||||
<div class="user-card__balance-value" id="userBalance">¥256.50</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户设置 -->
|
||||
<div class="settings-card">
|
||||
<div class="settings-card__title">账户设置</div>
|
||||
<div class="settings-row">
|
||||
<div class="settings-item">
|
||||
<label>会员等级</label>
|
||||
<select id="editLevel" onchange="onLevelChange()">
|
||||
<option value="普通会员">普通会员</option>
|
||||
<option value="银卡会员">银卡会员</option>
|
||||
<option value="金卡会员">金卡会员</option>
|
||||
<option value="钻石会员">钻石会员</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>会员状态</label>
|
||||
<select id="editStatus" onchange="onStatusChange()">
|
||||
<option value="正常">正常</option>
|
||||
<option value="休眠">休眠</option>
|
||||
<option value="冻结">冻结</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>有效期</label>
|
||||
<input type="date" id="editExpire" style="height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-sm);outline:none;width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="settings-item">
|
||||
<label>当前积分</label>
|
||||
<div class="readonly" id="editPoints">8,628</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>累计消费</label>
|
||||
<div class="readonly" id="editSpend">¥12,860</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="saveSettings()" style="height:30px;font-size:12px;">保存设置</button>
|
||||
</div>
|
||||
|
||||
<!-- 会员充值 -->
|
||||
<div class="recharge-card">
|
||||
<div class="recharge-card__title">会员充值</div>
|
||||
<div class="recharge-amount">
|
||||
<span class="currency">¥</span>
|
||||
<input type="number" id="rechargeAmount" placeholder="0.00" min="0.01" step="0.01" oninput="updateRechargePreview()">
|
||||
</div>
|
||||
<div class="recharge-preview" id="rechargePreview">
|
||||
充值后余额 <span id="previewAfter">¥256.50</span>
|
||||
</div>
|
||||
<div class="recharge-form-row">
|
||||
<div class="recharge-form-item">
|
||||
<label>支付方式</label>
|
||||
<select id="rechargeMethod">
|
||||
<option>微信支付</option><option>现金支付</option><option>银行转账</option><option>支付宝支付</option><option>后台挂账</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="recharge-form-item">
|
||||
<label>备注</label>
|
||||
<input type="text" id="rechargeRemark" placeholder="选填">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="confirmRecharge()" style="height:30px;font-size:12px;width:100%;">确认充值</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下方：账单明细列表 -->
|
||||
<div class="bill-section">
|
||||
<div class="bill-section__header">
|
||||
<div class="bill-section__title">账单明细</div>
|
||||
<span id="billCount" style="font-size:var(--font-sm);color:var(--text-placeholder);"></span>
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>交易类型</label>
|
||||
<select class="filter-select" id="billTypeFilter" onchange="renderBills()">
|
||||
<option value="">全部</option>
|
||||
<option value="消费">消费</option>
|
||||
<option value="充值">充值</option>
|
||||
<option value="提现">提现</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>支付方式</label>
|
||||
<select class="filter-select" id="billPayFilter" onchange="renderBills()">
|
||||
<option value="">全部</option>
|
||||
<option value="微信支付">微信支付</option>
|
||||
<option value="余额支付">余额支付</option>
|
||||
<option value="现金支付">现金支付</option>
|
||||
<option value="支付宝支付">支付宝支付</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>交易状态</label>
|
||||
<select class="filter-select" id="billStatusFilter" onchange="renderBills()">
|
||||
<option value="">全部</option>
|
||||
<option value="交易成功">交易成功</option>
|
||||
<option value="退款">退款</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-default" onclick="resetBillFilter()" style="height:30px;font-size:12px;">重置</button>
|
||||
</div>
|
||||
<div class="table-wrap" id="billTable"></div>
|
||||
<div class="pagination" id="billPagination"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 充值确认弹窗 -->
|
||||
<div class="modal-overlay" id="rechargeConfirmModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">确认充值</div>
|
||||
<button class="modal-close" onclick="closeRechargeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="rechargeConfirmBody"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeRechargeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="submitRecharge()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
(function(){var sub=document.querySelector('.sidebar-item.active');if(sub){var sg=sub.closest('.sidebar-subgroup');if(sg)sg.classList.add('open');}})();
|
||||
|
||||
/* ========== 账户数据 ========== */
|
||||
var accountDataMap = {
|
||||
'张伟': {code:'EMP001',balance:256.50,level:'钻石会员',status:'正常',expire:'2027-01-14',points:'8,628',spend:'¥12,860',
|
||||
bills:[
|
||||
{name:'午餐消费',type:'消费',time:'2026-08-03 11:32:15',payMethod:'余额支付',status:'交易成功',amount:'-28.50',payNo:'PAY20260803113215001',orderNo:'NM20260803113215001',merchant:'二号食堂'},
|
||||
{name:'早餐消费',type:'消费',time:'2026-08-03 07:45:08',payMethod:'余额支付',status:'交易成功',amount:'-15.00',payNo:'PAY20260803074508002',orderNo:'NM20260803074508002',merchant:'二号食堂'},
|
||||
{name:'午餐消费',type:'消费',time:'2026-08-01 12:10:33',payMethod:'余额支付',status:'交易成功',amount:'-32.00',payNo:'PAY20260801121033003',orderNo:'NM20260801121033003',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-08-01 09:00:21',payMethod:'微信支付',status:'交易成功',amount:'+200.00',payNo:'PAY20260801090021004',orderNo:'RC20260801090021004',merchant:'—'},
|
||||
{name:'余额提现',type:'提现',time:'2026-07-25 15:30:00',payMethod:'余额支付',status:'交易成功',amount:'-100.00',payNo:'PAY20260725153000005',orderNo:'WD20260725153000005',merchant:'—'},
|
||||
{name:'午餐消费',type:'消费',time:'2026-07-31 11:45:12',payMethod:'余额支付',status:'交易成功',amount:'-35.00',payNo:'PAY20260731114512005',orderNo:'NM20260731114512005',merchant:'二号食堂'},
|
||||
{name:'晚餐消费',type:'消费',time:'2026-07-30 18:20:44',payMethod:'微信支付',status:'交易成功',amount:'-42.00',payNo:'PAY20260730182044006',orderNo:'NM20260730182044006',merchant:'二号食堂'},
|
||||
{name:'早餐消费',type:'消费',time:'2026-07-30 07:30:18',payMethod:'余额支付',status:'交易成功',amount:'-12.00',payNo:'PAY20260730073018007',orderNo:'NM20260730073018007',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-07-28 10:15:55',payMethod:'现金支付',status:'交易成功',amount:'+100.00',payNo:'PAY20260728101555008',orderNo:'RC20260728101555008',merchant:'—'},
|
||||
{name:'午餐消费',type:'消费',time:'2026-06-30 12:00:03',payMethod:'余额支付',status:'交易成功',amount:'-28.00',payNo:'PAY20260630120003009',orderNo:'NM20260630120003009',merchant:'二号食堂'},
|
||||
{name:'晚餐消费',type:'消费',time:'2026-06-29 18:00:27',payMethod:'支付宝支付',status:'退款',amount:'-10.00',payNo:'PAY20260629180027010',orderNo:'NM20260629180027010',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-06-25 14:30:41',payMethod:'微信支付',status:'交易成功',amount:'+50.00',payNo:'PAY20260625143041011',orderNo:'RC20260625143041011',merchant:'—'},
|
||||
{name:'午餐消费',type:'消费',time:'2026-06-20 12:15:09',payMethod:'余额支付',status:'交易成功',amount:'-22.00',payNo:'PAY20260620121509012',orderNo:'NM20260620121509012',merchant:'二号食堂'},
|
||||
{name:'早餐消费',type:'消费',time:'2026-06-19 08:00:36',payMethod:'余额支付',status:'交易成功',amount:'-8.00',payNo:'PAY20260619080036013',orderNo:'NM20260619080036013',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-06-10 16:20:15',payMethod:'银行转账',status:'交易成功',amount:'+300.00',payNo:'PAY20260610162015014',orderNo:'RC20260610162015014',merchant:'—'}
|
||||
]},
|
||||
'李娜': {code:'EMP002',balance:512.00,level:'金卡会员',status:'正常',expire:'2027-05-07',points:'3,286',spend:'¥4,820',
|
||||
bills:[
|
||||
{name:'午餐消费',type:'消费',time:'2026-08-02 12:00:10',payMethod:'余额支付',status:'交易成功',amount:'-22.00',payNo:'PAY20260802120010001',orderNo:'NM20260802120010001',merchant:'二号食堂'},
|
||||
{name:'晚餐消费',type:'消费',time:'2026-08-01 18:30:22',payMethod:'现金支付',status:'交易成功',amount:'-35.00',payNo:'PAY20260801183022002',orderNo:'NM20260801183022002',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-07-20 09:00:00',payMethod:'微信支付',status:'交易成功',amount:'+200.00',payNo:'PAY20260720090000003',orderNo:'RC20260720090000003',merchant:'—'}
|
||||
]},
|
||||
'赵敏': {code:'EMP004',balance:320.00,level:'银卡会员',status:'正常',expire:'2027-08-11',points:'1,420',spend:'¥2,180',
|
||||
bills:[
|
||||
{name:'午餐消费',type:'消费',time:'2026-08-02 11:30:00',payMethod:'余额支付',status:'交易成功',amount:'-32.00',payNo:'PAY20260802113000001',orderNo:'NM20260802113000001',merchant:'二号食堂'},
|
||||
{name:'充值',type:'充值',time:'2026-07-15 09:00:00',payMethod:'现金支付',status:'交易成功',amount:'+100.00',payNo:'PAY20260715090000002',orderNo:'RC20260715090000002',merchant:'—'}
|
||||
]},
|
||||
'刘芳': {code:'EMP006',balance:678.00,level:'银卡会员',status:'正常',expire:'2027-10-19',points:'986',spend:'¥1,520',
|
||||
bills:[
|
||||
{name:'午餐消费',type:'消费',time:'2026-08-01 12:00:00',payMethod:'余额支付',status:'交易成功',amount:'-18.00',payNo:'PAY20260801120000001',orderNo:'NM20260801120000001',merchant:'二号食堂'}
|
||||
]},
|
||||
'孙磊': {code:'EMP010',balance:156.00,level:'金卡会员',status:'即将到期',expire:'2026-12-07',points:'5,120',spend:'¥7,860',
|
||||
bills:[
|
||||
{name:'早餐消费',type:'消费',time:'2026-07-15 08:00:00',payMethod:'余额支付',status:'交易成功',amount:'-10.00',payNo:'PAY20260715080000001',orderNo:'NM20260715080000001',merchant:'二号食堂'}
|
||||
]},
|
||||
'周明': {code:'EMP008',balance:3200.00,level:'钻石会员',status:'休眠',expire:'2027-02-09',points:'12,486',spend:'¥16,820',
|
||||
bills:[
|
||||
{name:'充值',type:'充值',time:'2026-04-15 10:00:00',payMethod:'银行转账',status:'交易成功',amount:'+2000.00',payNo:'PAY20260415100000001',orderNo:'RC20260415100000001',merchant:'—'},
|
||||
{name:'午餐消费',type:'消费',time:'2026-03-28 12:15:00',payMethod:'余额支付',status:'交易成功',amount:'-28.00',payNo:'PAY20260328121500002',orderNo:'NM20260328121500002',merchant:'二号食堂'}
|
||||
]}
|
||||
};
|
||||
|
||||
/* ========== 分页状态 ========== */
|
||||
var currentPage = 1;
|
||||
var pageSize = 8;
|
||||
|
||||
/* ========== 初始化 ========== */
|
||||
function getQueryParam(key) {
|
||||
var m = location.search.match(new RegExp('[?&]' + key + '=([^&]*)'));
|
||||
return m ? decodeURIComponent(m[1]) : '';
|
||||
}
|
||||
|
||||
(function init() {
|
||||
var name = getQueryParam('name') || '张伟';
|
||||
var data = accountDataMap[name] || accountDataMap['张伟'];
|
||||
window._currentUser = { name: name, data: data };
|
||||
|
||||
/* 用户卡片 */
|
||||
document.getElementById('userAvatar').textContent = name[0];
|
||||
document.getElementById('userName').textContent = name;
|
||||
document.getElementById('userCode').textContent = data.code;
|
||||
document.getElementById('userBalance').textContent = '¥' + data.balance.toFixed(2);
|
||||
|
||||
/* 等级/状态 */
|
||||
var levelColors = {'普通会员':'tag-gray','银卡会员':'tag-blue','金卡会员':'tag-orange','钻石会员':'tag-red'};
|
||||
var levelEl = document.getElementById('userLevel');
|
||||
levelEl.textContent = data.level;
|
||||
levelEl.className = 'tag ' + (levelColors[data.level] || 'tag-gray');
|
||||
var statusColors = {'正常':'tag-green','休眠':'tag-gray','冻结':'tag-red','即将到期':'tag-orange'};
|
||||
var statusEl = document.getElementById('userStatus');
|
||||
statusEl.textContent = data.status;
|
||||
statusEl.className = 'tag ' + (statusColors[data.status] || 'tag-green');
|
||||
|
||||
/* 设置表单 */
|
||||
document.getElementById('editLevel').value = data.level;
|
||||
document.getElementById('editStatus').value = data.status;
|
||||
document.getElementById('editPoints').textContent = data.points;
|
||||
document.getElementById('editSpend').textContent = data.spend;
|
||||
if (data.expire) document.getElementById('editExpire').value = data.expire;
|
||||
|
||||
renderBills();
|
||||
})();
|
||||
|
||||
/* ========== 账单渲染 ========== */
|
||||
function getFilteredBills() {
|
||||
var bills = window._currentUser.data.bills.slice();
|
||||
var typeFilter = document.getElementById('billTypeFilter').value;
|
||||
var payFilter = document.getElementById('billPayFilter').value;
|
||||
var statusFilter = document.getElementById('billStatusFilter').value;
|
||||
if (typeFilter) bills = bills.filter(function(b){return b.type===typeFilter;});
|
||||
if (payFilter) bills = bills.filter(function(b){return b.payMethod===payFilter;});
|
||||
if (statusFilter) bills = bills.filter(function(b){return b.status===statusFilter;});
|
||||
return bills;
|
||||
}
|
||||
|
||||
function renderBills() {
|
||||
var bills = getFilteredBills();
|
||||
var total = bills.length;
|
||||
var totalPages = Math.ceil(total / pageSize) || 1;
|
||||
if (currentPage > totalPages) currentPage = totalPages;
|
||||
var start = (currentPage - 1) * pageSize;
|
||||
var pageBills = bills.slice(start, start + pageSize);
|
||||
|
||||
document.getElementById('billCount').textContent = '共 ' + total + ' 条';
|
||||
|
||||
var thead = '<table><thead><tr><th>交易名称</th><th>交易类型</th><th>交易时间</th><th>支付方式</th><th>交易状态</th><th>金额</th><th>支付流水号</th><th>交易单号</th><th>商户名称</th></tr></thead><tbody>';
|
||||
var rows = '';
|
||||
pageBills.forEach(function(b){
|
||||
var typeTagClass = b.type==='消费'?'tag-blue':(b.type==='充值'?'tag-green':(b.type==='提现'?'tag-red':'tag-gray'));
|
||||
var statusTagClass = b.status==='交易成功'?'tag-green':'tag-red';
|
||||
var amountStyle = b.amount.indexOf('+')===0?'color:#52c41a;font-weight:500;':'';
|
||||
rows += '<tr>'
|
||||
+ '<td>'+b.name+'</td>'
|
||||
+ '<td><span class="tag '+typeTagClass+'">'+b.type+'</span></td>'
|
||||
+ '<td>'+b.time+'</td>'
|
||||
+ '<td>'+b.payMethod+'</td>'
|
||||
+ '<td><span class="tag '+statusTagClass+'">'+b.status+'</span></td>'
|
||||
+ '<td style="'+amountStyle+'">'+b.amount+'</td>'
|
||||
+ '<td style="font-family:monospace;font-size:11px;">'+b.payNo+'</td>'
|
||||
+ '<td style="font-family:monospace;font-size:11px;">'+b.orderNo+'</td>'
|
||||
+ '<td>'+b.merchant+'</td>'
|
||||
+ '</tr>';
|
||||
});
|
||||
if (!total) {
|
||||
rows = '<tr><td colspan="9" style="text-align:center;padding:60px 24px;color:var(--text-placeholder);font-size:var(--font-base);">暂无符合条件的账单记录</td></tr>';
|
||||
}
|
||||
document.getElementById('billTable').innerHTML = thead + rows + '</tbody></table>';
|
||||
|
||||
/* 分页 */
|
||||
var pagHtml = '<div class="pagination__info">显示 '+(total?start+1:0)+'-'+Math.min(start+pageSize,total)+' 条，共 '+total+' 条</div>';
|
||||
pagHtml += '<div class="pagination__btns"><button class="page-btn" '+(currentPage<=1?'disabled':'')+' onclick="goPage('+(currentPage-1)+')">‹</button>';
|
||||
for (var i=1;i<=totalPages;i++) {
|
||||
pagHtml += '<button class="page-btn'+(i===currentPage?' active':'')+'" onclick="goPage('+i+')">'+i+'</button>';
|
||||
}
|
||||
pagHtml += '<button class="page-btn" '+(currentPage>=totalPages?'disabled':'')+' onclick="goPage('+(currentPage+1)+')">›</button></div>';
|
||||
document.getElementById('billPagination').innerHTML = pagHtml;
|
||||
}
|
||||
|
||||
function goPage(page) {
|
||||
currentPage = page;
|
||||
renderBills();
|
||||
}
|
||||
|
||||
function resetBillFilter() {
|
||||
document.getElementById('billTypeFilter').value = '';
|
||||
document.getElementById('billPayFilter').value = '';
|
||||
document.getElementById('billStatusFilter').value = '';
|
||||
currentPage = 1;
|
||||
renderBills();
|
||||
}
|
||||
|
||||
/* ========== 账户设置 ========== */
|
||||
function onLevelChange() {
|
||||
/* 实时更新标签 */
|
||||
}
|
||||
function onStatusChange() {
|
||||
/* 实时更新标签 */
|
||||
}
|
||||
function saveSettings() {
|
||||
var newLevel = document.getElementById('editLevel').value;
|
||||
var newStatus = document.getElementById('editStatus').value;
|
||||
var newExpire = document.getElementById('editExpire').value;
|
||||
var data = window._currentUser.data;
|
||||
data.level = newLevel;
|
||||
data.status = newStatus;
|
||||
data.expire = newExpire;
|
||||
var levelColors = {'普通会员':'tag-gray','银卡会员':'tag-blue','金卡会员':'tag-orange','钻石会员':'tag-red'};
|
||||
var le = document.getElementById('userLevel'); le.textContent = newLevel; le.className = 'tag ' + (levelColors[newLevel]||'tag-gray');
|
||||
var statusColors = {'正常':'tag-green','休眠':'tag-gray','冻结':'tag-red','即将到期':'tag-orange'};
|
||||
var se = document.getElementById('userStatus'); se.textContent = newStatus; se.className = 'tag ' + (statusColors[newStatus]||'tag-green');
|
||||
showToast('账户设置保存成功');
|
||||
}
|
||||
|
||||
/* ========== 手动充值 ========== */
|
||||
function updateRechargePreview() {
|
||||
var amount = parseFloat(document.getElementById('rechargeAmount').value) || 0;
|
||||
var preview = document.getElementById('rechargePreview');
|
||||
if (amount > 0) {
|
||||
preview.style.display = 'block';
|
||||
document.getElementById('previewAfter').textContent = '¥' + (window._currentUser.data.balance + amount).toFixed(2);
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function confirmRecharge() {
|
||||
var amount = parseFloat(document.getElementById('rechargeAmount').value);
|
||||
if (!amount || amount <= 0) { showToast('请输入有效的充值金额'); return; }
|
||||
var method = document.getElementById('rechargeMethod').value;
|
||||
var remark = document.getElementById('rechargeRemark').value || '无';
|
||||
var after = (window._currentUser.data.balance + amount).toFixed(2);
|
||||
|
||||
var body = '<div style="display:flex;flex-direction:column;gap:10px;">'
|
||||
+ '<div style="display:flex;justify-content:space-between;"><span>充值金额</span><span style="font-weight:600;color:var(--primary);">¥' + amount.toFixed(2) + '</span></div>'
|
||||
+ '<div style="display:flex;justify-content:space-between;"><span>支付方式</span><span>' + method + '</span></div>'
|
||||
+ '<div style="display:flex;justify-content:space-between;"><span>充值前余额</span><span>¥' + window._currentUser.data.balance.toFixed(2) + '</span></div>'
|
||||
+ '<div style="display:flex;justify-content:space-between;"><span>充值后余额</span><span style="font-weight:600;color:var(--primary);">¥' + after + '</span></div>'
|
||||
+ '<div style="display:flex;justify-content:space-between;"><span>备注</span><span>' + remark + '</span></div></div>';
|
||||
|
||||
document.getElementById('rechargeConfirmBody').innerHTML = body;
|
||||
document.getElementById('rechargeConfirmModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeRechargeModal() {
|
||||
document.getElementById('rechargeConfirmModal').classList.remove('show');
|
||||
}
|
||||
|
||||
function submitRecharge() {
|
||||
var amount = parseFloat(document.getElementById('rechargeAmount').value);
|
||||
var method = document.getElementById('rechargeMethod').value;
|
||||
var remark = document.getElementById('rechargeRemark').value || '';
|
||||
var data = window._currentUser.data;
|
||||
|
||||
/* 更新余额 */
|
||||
data.balance = data.balance + amount;
|
||||
document.getElementById('userBalance').textContent = '¥' + data.balance.toFixed(2);
|
||||
|
||||
/* 新增账单 */
|
||||
var now = new Date();
|
||||
var pad = function(n){return String(n).padStart(2,'0');};
|
||||
var timeStr = now.getFullYear()+'-'+pad(now.getMonth()+1)+'-'+pad(now.getDate())+' '+pad(now.getHours())+':'+pad(now.getMinutes())+':'+pad(now.getSeconds());
|
||||
var seq = String(data.bills.length + 1).padStart(5,'0');
|
||||
data.bills.unshift({
|
||||
name:'充值', type:'充值', time:timeStr, payMethod:method,
|
||||
status:'交易成功', amount:'+'+amount.toFixed(2),
|
||||
payNo:'PAY'+now.getFullYear()+pad(now.getMonth()+1)+pad(now.getDate())+pad(now.getHours())+pad(now.getMinutes())+pad(now.getSeconds())+seq,
|
||||
orderNo:'RC'+now.getFullYear()+pad(now.getMonth()+1)+pad(now.getDate())+pad(now.getHours())+pad(now.getMinutes())+pad(now.getSeconds())+seq,
|
||||
merchant:'后台充值' + (remark ? '（'+remark+'）' : '')
|
||||
});
|
||||
|
||||
closeRechargeModal();
|
||||
document.getElementById('rechargeAmount').value = '';
|
||||
document.getElementById('rechargePreview').style.display = 'none';
|
||||
currentPage = 1;
|
||||
renderBills();
|
||||
showToast('充值成功！已到账 ¥' + amount.toFixed(2));
|
||||
}
|
||||
|
||||
/* ========== Toast ========== */
|
||||
function showToast(msg) {
|
||||
var el = document.getElementById('toast');
|
||||
el.textContent = msg;
|
||||
el.classList.add('show');
|
||||
setTimeout(function(){el.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
document.getElementById('rechargeConfirmModal').addEventListener('click',function(e){if(e.target===this)closeRechargeModal();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -334,7 +334,7 @@ tbody td.td-actions{overflow:visible;}
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<a href="din-dish-free.html" class="sidebar-item"><span class="mi">📦</span>自由餐品库</a>
|
||||
<a href="din-dish-own.html" class="sidebar-item"><span class="mi">📦</span>自有餐品库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
@@ -353,7 +353,16 @@ tbody td.td-actions{overflow:visible;}
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🖥️ 终端管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">📟</span>设备管理</a>
|
||||
<a href="din-content-center.html" class="sidebar-item"><span class="mi">📦</span>内容中心</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
@@ -508,15 +517,15 @@ tbody td.td-actions{overflow:visible;}
|
||||
<div class="table-card__content">
|
||||
<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>
|
||||
<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><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>MB-202401-001</td><td>张伟</td><td>EMP001</td><td><span class="tag tag-red">钻石</span></td><td>8,628</td><td>12,860</td><td>¥1,286</td><td>2024-01-15</td><td>2027-01-14</td><td>2026-04-28 11:32</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202405-008</td><td>李娜</td><td>EMP002</td><td><span class="tag tag-orange">金卡</span></td><td>3,286</td><td>4,820</td><td>¥682</td><td>2024-05-08</td><td>2027-05-07</td><td>2026-04-28 12:08</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202508-015</td><td>赵敏</td><td>EMP004</td><td><span class="tag tag-blue">银卡</span></td><td>1,420</td><td>2,180</td><td>¥486</td><td>2025-08-12</td><td>2027-08-11</td><td>2026-04-28 11:30</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202510-026</td><td>刘芳</td><td>EMP006</td><td><span class="tag tag-blue">银卡</span></td><td>986</td><td>1,520</td><td>¥320</td><td>2025-10-20</td><td>2027-10-19</td><td>2026-04-28 11:48</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202312-003</td><td>孙磊</td><td>EMP010</td><td><span class="tag tag-orange">金卡</span></td><td>5,120</td><td>7,860</td><td>¥0</td><td>2023-12-08</td><td>2026-12-07</td><td>2026-04-15 12:20</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202402-005</td><td>周明</td><td>EMP008</td><td><span class="tag tag-red">钻石</span></td><td>12,486</td><td>16,820</td><td>¥0</td><td>2024-02-10</td><td>2027-02-09</td><td>2026-03-28 12:15</td><td><span class="tag tag-gray">休眠</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202401-001</td><td>张伟</td><td>EMP001</td><td><span class="tag tag-red">钻石</span></td><td>8,628</td><td>12,860</td><td>¥1,286</td><td>2024-01-15</td><td>2027-01-14</td><td>2026-04-28 11:32</td><td>¥256.50</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
<tr><td>MB-202405-008</td><td>李娜</td><td>EMP002</td><td><span class="tag tag-orange">金卡</span></td><td>3,286</td><td>4,820</td><td>¥682</td><td>2024-05-08</td><td>2027-05-07</td><td>2026-04-28 12:08</td><td>¥512.00</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
<tr><td>MB-202508-015</td><td>赵敏</td><td>EMP004</td><td><span class="tag tag-blue">银卡</span></td><td>1,420</td><td>2,180</td><td>¥486</td><td>2025-08-12</td><td>2027-08-11</td><td>2026-04-28 11:30</td><td>¥320.00</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
<tr><td>MB-202510-026</td><td>刘芳</td><td>EMP006</td><td><span class="tag tag-blue">银卡</span></td><td>986</td><td>1,520</td><td>¥320</td><td>2025-10-20</td><td>2027-10-19</td><td>2026-04-28 11:48</td><td>¥678.00</td><td><span class="tag tag-green">正常</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
<tr><td>MB-202312-003</td><td>孙磊</td><td>EMP010</td><td><span class="tag tag-orange">金卡</span></td><td>5,120</td><td>7,860</td><td>¥0</td><td>2023-12-08</td><td>2026-12-07</td><td>2026-04-15 12:20</td><td>¥156.00</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
<tr><td>MB-202402-005</td><td>周明</td><td>EMP008</td><td><span class="tag tag-red">钻石</span></td><td>12,486</td><td>16,820</td><td>¥0</td><td>2024-02-10</td><td>2027-02-09</td><td>2026-03-28 12:15</td><td>¥3,200.00</td><td><span class="tag tag-gray">休眠</span></td><td class="td-actions"><a class="link" data-action="detail">详情</a> <a class="link" data-action="account">账户管理</a> <a class="link" data-action="face">人脸采集</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1008,6 +1017,23 @@ document.querySelectorAll('.tab-panel')[0].querySelectorAll('tbody tr').forEach(
|
||||
if (deleteLink) deleteLink.addEventListener('click', () => { closeAllMoreTips(); if(confirm('确定要删除用户「'+name+'」吗？此操作不可恢复。')){ row.remove(); } });
|
||||
});
|
||||
|
||||
/* ========== 会员账户事件绑定（Tab3） ========== */
|
||||
document.querySelectorAll('.tab-panel')[2].querySelectorAll('tbody tr').forEach(row => {
|
||||
var tds = row.querySelectorAll('td');
|
||||
var name = tds[1] ? tds[1].textContent : '';
|
||||
// 详情
|
||||
var detailLink = row.querySelector('[data-action="detail"]');
|
||||
if (detailLink) detailLink.addEventListener('click', function() { showUserProfile(name); });
|
||||
// 账户管理
|
||||
var accountLink = row.querySelector('[data-action="account"]');
|
||||
if (accountLink) accountLink.addEventListener('click', function() {
|
||||
window.location.href = 'din-user-account.html?name=' + encodeURIComponent(name);
|
||||
});
|
||||
// 人脸采集
|
||||
var faceLink = row.querySelector('[data-action="face"]');
|
||||
if (faceLink) faceLink.addEventListener('click', function() { showFaceModal(name); });
|
||||
});
|
||||
|
||||
/* ========== 人脸采集弹窗 ========== */
|
||||
// 模拟：张伟、李娜有人脸数据，其他人无
|
||||
const faceDataMap = { '张伟': true, '李娜': true };
|
||||
|
||||
Reference in New Issue
Block a user