编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鲜丰果蔬团购 - 管理后台</title>
<style>
  :root{--green:#22a85b;--green-dark:#178a49;--red:#ff4d4f;--orange:#ff7a2f;--bg:#f0f2f5;--card:#fff;--text:#1f2329;--sub:#8a8f99;--line:#e5e7ea;}
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
  .sidebar{width:200px;height:100vh;background:#1f2329;position:fixed;left:0;top:0;color:#fff;overflow-y:auto;z-index:20;}
  .sidebar::-webkit-scrollbar{width:0;}
  .logo{padding:20px 16px 16px;border-bottom:1px solid #333;}
  .logo b{font-size:15px;display:block;color:#fff;}
  .logo span{font-size:11px;color:#6ac5a0;margin-top:2px;display:block;}
  .nav-group{padding:16px 0 0 0;}
  .nav-lab{padding:0 16px 6px;font-size:10px;color:rgba(255,255,255,.35);letter-spacing:1px;}
  .nav-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:13px;color:rgba(255,255,255,.65);cursor:pointer;transition:background .15s;}
  .nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.95);}
  .nav-item.active{background:rgba(255,255,255,.1);color:#fff;border-right:3px solid var(--green);}
  .nav-item .ico{width:18px;text-align:center;font-size:14px;}
  .main{margin-left:200px;}
  .topbar{height:54px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:10;}
  .topbar .crumb{font-size:14px;color:var(--sub);}
  .topbar .crumb b{color:var(--text);font-weight:600;}
  .topbar .right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--sub);}
  .topbar .avatar{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
  .content{padding:20px 24px;}
  .apage{display:none;}.apage.active{display:block;animation:fadeUp .25s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
  .stat{background:var(--card);border-radius:12px;padding:18px 20px;}
  .stat .label{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px;}
  .stat .val{font-size:26px;font-weight:800;margin-top:6px;}
  .stat .sub{font-size:11px;color:var(--sub);margin-top:4px;}
  .stat .val.green{color:var(--green);}
  .stat .val.orange{color:var(--orange);}
  .stat .val.red{color:var(--red);}
  .card{background:var(--card);border-radius:12px;overflow:hidden;}
  .card-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);}
  .card-head h3{font-size:14px;font-weight:700;}
  table{width:100%;border-collapse:collapse;}
  th{font-size:11px;color:var(--sub);font-weight:600;text-align:left;padding:10px 20px;background:#fafbfc;border-bottom:1px solid var(--line);white-space:nowrap;}
  td{font-size:13px;padding:12px 20px;border-bottom:1px solid #f5f5f5;vertical-align:middle;}
  tr:hover td{background:#f9fafb;}
  .img-cell{width:44px;height:44px;border-radius:8px;overflow:hidden;flex:none;}
  .badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
  .badge.green{background:#e8f7ee;color:#178a49;}
  .badge.orange{background:#fff3e6;color:#e0702f;}
  .badge.red{background:#fff1f0;color:#ff4d4f;}
  .badge.gray{background:#f2f3f5;color:#8a8f99;}
  .badge.blue{background:#e6f4ff;color:#1677ff;}
  .btn{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;cursor:pointer;}
  .btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line);}
  .btn.red{background:var(--red);}
  .btn.orange{background:var(--orange);}
  .btn.sm{padding:4px 10px;font-size:11px;}
  .toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:center;}
  .toolbar input,.toolbar select{border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:13px;outline:none;}
  .toolbar input:focus{border-color:var(--green);}
  .tabs{display:flex;gap:6px;}
  .tabs span{padding:5px 12px;border-radius:6px;font-size:12px;color:var(--sub);background:var(--card);cursor:pointer;border:1px solid var(--line);}
  .tabs span.on{background:var(--green);color:#fff;border-color:var(--green);}
  .mask{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;display:none;}
  .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:12px;width:460px;max-height:80vh;overflow-y:auto;z-index:101;display:none;box-shadow:0 20px 40px rgba(0,0,0,.15);}
  .modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
  .modal-head h3{font-size:15px;}
  .modal-close{font-size:18px;cursor:pointer;color:var(--sub);padding:4px;}
  .modal-body{padding:20px;}
  .modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}
  .form-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .form-row label{width:72px;font-size:13px;color:var(--text);text-align:right;flex:none;}
  .form-row input,.form-row select,.form-row textarea{flex:1;border:1px solid var(--line);border-radius:6px;padding:7px 12px;font-size:13px;color:var(--text);outline:none;}
  .form-row input:focus,.form-row textarea:focus{border-color:var(--green);}
  .form-row textarea{height:60px;resize:vertical;}
  .flash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .flash-card{background:var(--card);border-radius:12px;padding:18px;border-left:4px solid var(--red);}
  .flash-card h4{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
  .flash-card .row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--sub);margin-bottom:8px;}
  .flash-card .row b{color:var(--text);font-weight:600;}
  .flash-card .bar-bg{height:6px;background:#eef0f2;border-radius:3px;margin-top:6px;overflow:hidden;}
  .flash-card .bar-fill{height:100%;background:var(--red);border-radius:3px;}
  a{color:var(--green);cursor:pointer;text-decoration:none;}
  a:hover{text-decoration:underline;}
  .empty{text-align:center;padding:50px 0;color:var(--sub);font-size:13px;}
  /* confirm */
  .cfm-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;display:none;}
  .cfm{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:12px;width:340px;z-index:201;display:none;box-shadow:0 12px 32px rgba(0,0,0,.18);text-align:center;}
  .cfm-head{padding:22px 20px 0;font-size:16px;font-weight:700;}
  .cfm-body{padding:10px 24px 22px;font-size:13px;color:var(--sub);line-height:1.6;}
  .cfm-foot{border-top:1px solid var(--line);display:flex;}
  .cfm-foot .btn{flex:1;border-radius:0;padding:12px;font-size:13px;justify-content:center;}
  .cfm-foot .ghost{border-right:1px solid var(--line);}
  /* toggle */
  .toggle{width:40px;height:22px;background:#d8dbe0;border-radius:11px;cursor:pointer;position:relative;transition:background .2s;flex:none;}
  .toggle.on{background:var(--green);}
  .toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
  .toggle.on::after{left:20px;}
  /* detail panel */
  .detail-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;}
  .detail-grid .dk{color:var(--sub);text-align:right;}
  .detail-grid .dv{color:var(--text);font-weight:500;}
  .detail-section{margin-bottom:16px;}
  .detail-section h4{font-size:13px;font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line);}
  /* settings */
  .set-section{background:var(--card);border-radius:12px;margin-bottom:16px;overflow:hidden;}
  .set-head{padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;}
  .set-body{padding:20px;}
  .set-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5;}
  .set-row:last-child{border-bottom:none;}
  .set-row label{width:100px;font-size:13px;color:var(--text);flex:none;}
  .set-row input,.set-row select{flex:1;max-width:300px;border:1px solid var(--line);border-radius:6px;padding:7px 12px;font-size:13px;outline:none;}
  .set-row input:focus{border-color:var(--green);}
  .set-row .hint{font-size:11px;color:var(--sub);margin-left:8px;}
  /* stats page */
  .st-tabs{display:flex;gap:0;margin-bottom:20px;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--line);}
  .st-tabs span{flex:1;text-align:center;padding:10px 0;font-size:13px;color:var(--sub);cursor:pointer;transition:all .2s;border-right:1px solid var(--line);}
  .st-tabs span:last-child{border-right:none;}
  .st-tabs span.on{background:var(--green);color:#fff;font-weight:600;}
  .st-tabs span:hover:not(.on){background:#f5f6f8;}
  .stat-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
  .stat-mini .sm-card{background:var(--card);border-radius:10px;padding:16px;text-align:center;}
  .stat-mini .sm-card .sm-val{font-size:24px;font-weight:800;margin:6px 0 2px;}
  .stat-mini .sm-card .sm-lab{font-size:11px;color:var(--sub);}
  .chart-col{display:flex;align-items:flex-end;gap:10px;height:160px;padding:0 8px;}
  .chart-col .col-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
  .chart-col .col-bar{width:100%;border-radius:4px 4px 0 0;transition:height .4s;min-height:2px;}
  .chart-col .col-lab{font-size:10px;color:var(--sub);white-space:nowrap;}
  .chart-col .col-val{font-size:10px;font-weight:600;color:var(--text);}
  .chart-hbar{display:flex;flex-direction:column;gap:10px;}
  .chart-hbar .hbar-row{display:flex;align-items:center;gap:10px;}
  .chart-hbar .hbar-label{width:90px;font-size:12px;color:var(--text);text-align:right;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chart-hbar .hbar-track{flex:1;height:22px;background:#eef0f2;border-radius:4px;overflow:hidden;position:relative;}
  .chart-hbar .hbar-fill{height:100%;border-radius:4px;transition:width .5s;display:flex;align-items:center;padding-left:8px;}
  .chart-hbar .hbar-fill span{font-size:10px;color:#fff;font-weight:600;white-space:nowrap;}
  .chart-hbar .hbar-num{width:60px;font-size:12px;font-weight:600;color:var(--text);text-align:right;}
  .pie-wrap{display:flex;align-items:center;gap:32px;justify-content:center;padding:20px 0;}
  .pie{width:140px;height:140px;border-radius:50%;position:relative;}
  .pie-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;}
  .pie-hole .pie-total{font-size:18px;font-weight:800;color:var(--text);}
  .pie-hole .pie-lab{font-size:10px;color:var(--sub);}
  .pie-legend{display:flex;flex-direction:column;gap:8px;}
  .pie-legend .leg-item{display:flex;align-items:center;gap:8px;font-size:12px;}
  .pie-legend .leg-dot{width:10px;height:10px;border-radius:3px;flex:none;}
  .rank-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5;font-size:13px;}
  .rank-row:last-child{border-bottom:none;}
  .rank-num{width:22px;height:22px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;color:#fff;}
  @media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr);}.flash-grid{grid-template-columns:1fr;}.stat-mini{grid-template-columns:repeat(2,1fr);}}
  /* distribute */
  .comm-card{background:var(--card);border-radius:12px;padding:20px;text-align:center;border-top:3px solid var(--green);}
  .comm-card .cc-val{font-size:28px;font-weight:800;margin:8px 0 4px;}
  .comm-card .cc-lab{font-size:12px;color:var(--sub);}
  .comm-card .cc-sub{font-size:11px;color:var(--sub);margin-top:4px;}
  .dist-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
  .dist-badge.approved{background:#e8f7ee;color:#178a49;}
  .dist-badge.pending{background:#fff3e6;color:#e0702f;}
  .dist-badge.rejected{background:#fff1f0;color:#ff4d4f;}
  .dist-badge.disabled{background:#f2f3f5;color:#8a8f99;}
  .inv-code{background:#f5f6f8;border:1px dashed var(--line);border-radius:6px;padding:4px 10px;font-family:monospace;font-size:12px;color:var(--green-dark);letter-spacing:1px;}
</style>
</head>
<body>
<div class="sidebar">
  <div class="logo"><b>鲜丰果蔬</b><span>团购管理后台</span></div>
  <div class="nav-group">
    <div class="nav-lab">概览</div>
    <div class="nav-item active" onclick="go('dashboard')"><span class="ico">📊</span>工作台</div>
  </div>
  <div class="nav-group">
    <div class="nav-lab">业务管理</div>
    <div class="nav-item" onclick="go('products')"><span class="ico">🍎</span>商品管理</div>
    <div class="nav-item" onclick="go('orders')"><span class="ico">📋</span>订单管理</div>
    <div class="nav-item" onclick="go('flash')"><span class="ico">⚡</span>秒杀配置</div>
    <div class="nav-item" onclick="go('coupons')"><span class="ico">🎫</span>优惠券管理</div>
  </div>
  <div class="nav-group">
    <div class="nav-lab">数据分析</div>
    <div class="nav-item" onclick="go('stats')"><span class="ico">📈</span>数据统计</div>
  </div>
  <div class="nav-group">
    <div class="nav-lab">分销系统</div>
    <div class="nav-item" onclick="go('distribute')"><span class="ico">🔗</span>分销管理</div>
  </div>
  <div class="nav-group">
    <div class="nav-lab">系统</div>
    <div class="nav-item" onclick="go('users')"><span class="ico">👥</span>用户管理</div>
    <div class="nav-item" onclick="go('settings')"><span class="ico">⚙️</span>系统设置</div>
  </div>
</div>
<div class="main">
  <div class="topbar">
    <div class="crumb" id="crumb">首页 / <b>工作台</b></div>
    <div class="right"><span>鲜丰果蔬团购</span><div class="avatar">管</div></div>
  </div>
  <div class="content">
    <!-- 工作台 -->
    <div class="apage active" id="p-dashboard">
      <div class="stats" id="dashStats"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div class="card"><div class="card-head"><h3>📈 本周订单趋势</h3></div><div style="padding:20px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;" id="dashChart"></div></div>
        <div class="card"><div class="card-head"><h3>🛒 热销商品 TOP5</h3></div><div id="dashTop5" style="padding:6px 0;"></div></div>
      </div>
      <div class="card" style="margin-top:16px;"><div class="card-head"><h3>📋 最近订单</h3><a onclick="go('orders')">查看全部 ›</a></div><table><thead><tr><th>订单号</th><th>下单人</th><th>商品</th><th>金额</th><th>状态</th><th>时间</th></tr></thead><tbody id="dashOrders"></tbody></table></div>
    </div>
    <!-- 商品管理 -->
    <div class="apage" id="p-products">
      <div class="toolbar"><input placeholder="🔍 搜索商品名称" id="prodSearch" oninput="renderProducts()"><div style="flex:1"></div><button class="btn" onclick="openProdModal()">＋ 新增商品</button></div>
      <div class="card"><table><thead><tr><th>图片</th><th>商品名称</th><th>团购价</th><th>原价</th><th>已售</th><th>状态</th><th>操作</th></tr></thead><tbody id="prodTable"></tbody></table></div>
    </div>
    <!-- 订单管理 -->
    <div class="apage" id="p-orders">
      <div class="toolbar"><input placeholder="🔍 搜索订单号/用户名" id="orderSearch" oninput="renderOrders()"><div class="tabs" id="orderTabs"><span class="on" data-t="all">全部</span><span data-t="待付款">待付款</span><span data-t="待成团">待成团</span><span data-t="待收货">待收货</span><span data-t="已完成">已完成</span></div></div>
      <div class="card"><table><thead><tr><th>订单号</th><th>下单人</th><th>商品</th><th>金额</th><th>配送</th><th>状态</th><th>操作</th></tr></thead><tbody id="orderTable"></tbody></table></div>
    </div>
    <!-- 秒杀配置 -->
    <div class="apage" id="p-flash">
      <div class="toolbar"><span style="font-size:14px;font-weight:700">当前秒杀场次</span><div style="flex:1"></div><button class="btn" onclick="openFlashModal()">＋ 添加秒杀商品</button></div>
      <div class="flash-grid" id="flashConfig"></div>
    </div>
    <!-- 优惠券管理 -->
    <div class="apage" id="p-coupons">
      <div class="toolbar"><div class="tabs" id="cpTabs"><span class="on" data-t="all">全部</span><span data-t="ok">进行中</span><span data-t="off">已结束</span></div><div style="flex:1"></div><button class="btn" onclick="openCpModal()">＋ 新建优惠券</button></div>
      <div class="card"><table><thead><tr><th>券名称</th><th>面额</th><th>使用条件</th><th>已领/总量</th><th>有效期</th><th>状态</th><th>操作</th></tr></thead><tbody id="cpTable"></tbody></table></div>
    </div>
    <!-- 用户管理 -->
    <div class="apage" id="p-users">
      <div class="toolbar"><input placeholder="🔍 搜索昵称/手机号" id="userSearch" oninput="renderUsers()"><span id="userCount" style="font-size:13px;color:var(--sub)"></span></div>
      <div class="card"><table><thead><tr><th>用户</th><th>手机号</th><th>下单数</th><th>总消费</th><th>注册时间</th><th>状态</th><th>操作</th></tr></thead><tbody id="userTable"></tbody></table></div>
    </div>
    <!-- 系统设置 -->
    <div class="apage" id="p-settings">
      <div id="settingsPage"></div>
    </div>
    <!-- 数据统计 -->
    <div class="apage" id="p-stats">
      <div class="st-tabs" id="statsTabs"><span class="on" data-t="sales">销售概览</span><span data-t="prod">商品分析</span><span data-t="order">订单分析</span><span data-t="user">用户分析</span></div>
      <div id="statsContent"></div>
    </div>
    <!-- 分销管理 -->
    <div class="apage" id="p-distribute">
      <div class="st-tabs" id="distTabs"><span class="on" data-t="overview">分销概览</span><span data-t="members">分销员管理</span><span data-t="orders">分销订单</span><span data-t="settings">佣金设置</span></div>
      <div id="distContent"></div>
    </div>
  </div>
</div>
<!-- toast -->
<div id="toast" style="position:fixed;top:24%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;font-size:13px;padding:12px 24px;border-radius:10px;z-index:999;display:none;white-space:nowrap;"></div>
<!-- mask + all modals -->
<div class="mask" id="mask"></div>
<div class="cfm-mask" id="cfmMask"></div>
<div class="cfm" id="cfmDialog"><div class="cfm-head" id="cfmTitle">确认操作</div><div class="cfm-body" id="cfmMsg"></div><div class="cfm-foot"><button class="btn ghost" onclick="cfmCancel()">取消</button><button class="btn" id="cfmOk" onclick="cfmOk()">确定</button></div></div>
<!-- product modal -->
<div class="modal" id="prodModal"><div class="modal-head"><h3 id="modalTitle">新增商品</h3><span class="modal-close" onclick="closeModal('prodModal')">x</span></div><div class="modal-body">
  <div class="form-row"><label>商品名称</label><input id="fmName" placeholder="如：红富士苹果 5斤装"></div>
  <div class="form-row"><label>团购价</label><input id="fmPrice" type="number" step="0.1" placeholder="9.90"></div>
  <div class="form-row"><label>原价</label><input id="fmOld" type="number" step="0.1" placeholder="19.90"></div>
  <div class="form-row"><label>已售数量</label><input id="fmSold" type="number" placeholder="0"></div>
  <div class="form-row"><label>商品简介</label><textarea id="fmDesc" placeholder="商品卖点...">
编辑页面

新建优惠券

编辑秒杀

订单详情

用户详情
