编辑页面

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>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f0f2f5;
            color: #333;
            font-size: 14px;
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 220px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }
        .logo {
            padding: 25px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .logo h2 { font-size: 18px; margin-bottom: 4px; }
        .logo span { font-size: 12px; opacity: 0.6; }
        .nav-menu { padding: 15px 0; }
        .nav-item {
            display: flex;
            align-items: center;
            padding: 13px 20px;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }
        .nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
        .nav-item.active { background: rgba(255,255,255,0.1); color: #fff; border-left-color: #ff6b00; }
        .nav-item span { font-size: 20px; margin-right: 12px; }
        
        .main-content {
            flex: 1;
            margin-left: 220px;
            min-height: 100vh;
        }
        .top-bar {
            background: #fff;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .search-box {
            display: flex;
            background: #f5f7fa;
            border-radius: 20px;
            overflow: hidden;
        }
        .search-box input { border: none; background: transparent; padding: 10px 20px; width: 280px; outline: none; }
        .search-box button { background: #ff6b00; color: #fff; border: none; padding: 10px 20px; cursor: pointer; }
        .user-info { display: flex; align-items: center; gap: 20px; }
        .notifications { position: relative; cursor: pointer; font-size: 20px; }
        .notifications .badge { position: absolute; top: -5px; right: -8px; background: #ff4500; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; }
        .admin-user { display: flex; align-items: center; gap: 10px; }
        .admin-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #ff6b00, #ff4500); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
        
        .page-content { display: none; padding: 25px; }
        .page-content.active { display: block; }
        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .page-header h1 { font-size: 20px; font-weight: 600; }
        .page-header .date { color: #999; font-size: 13px; }
        
        /* 统计卡片 */
        .stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 25px; }
        .stat-card { background: #fff; padding: 20px; border-radius: 10px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); cursor: pointer; }
        .stat-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .stat-icon.blue { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .stat-icon.orange { background: linear-gradient(135deg, #fa709a, #fee140); }
        .stat-icon.green { background: linear-gradient(135deg, #0ba360, #3cba92); }
        .stat-icon.red { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .stat-info { flex: 1; }
        .stat-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
        .stat-label { color: #999; font-size: 12px; }
        
        /* 仪表盘网格 */
        .dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .panel { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden; }
        .panel-header { padding: 15px 18px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .panel-header h3 { font-size: 15px; font-weight: 600; }
        .panel-header .more { color: #ff6b00; font-size: 12px; text-decoration: none; cursor: pointer; }
        .panel-body { padding: 15px 18px; }
        
        .todo-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .todo-item:last-child { border-bottom: none; }
        .todo-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; margin-right: 10px; }
        .todo-dot.warning { background: #faad14; }
        .todo-dot.danger { background: #ff4d4f; }
        .todo-dot.info { background: #1890ff; }
        .todo-item span:nth-child(2) { flex: 1; }
        .todo-count { background: #f5f5f5; color: #666; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
        
        /* 迷你表格 */
        .mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .mini-table th, .mini-table td { padding: 8px; text-align: left; border-bottom: 1px solid #f5f5f5; }
        .mini-table th { color: #999; font-weight: 500; }
        
        .hot-product { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .hot-product:last-child { border-bottom: none; }
        .hot-product .rank { width: 20px; height: 20px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-right: 10px; }
        .hot-product img { width: 40px; height: 40px; border-radius: 6px; margin-right: 10px; object-fit: cover; }
        .hot-product .info { flex: 1; }
        .hot-product .name { font-size: 13px; margin-bottom: 2px; }
        .hot-product .sales { color: #999; font-size: 11px; }
        
        /* 筛选栏 */
        .filter-bar { background: #fff; padding: 15px 18px; border-radius: 10px; margin-bottom: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .filter-select { padding: 8px 12px; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff; min-width: 110px; outline: none; cursor: pointer; }
        .search-input { padding: 8px 12px; border: 1px solid #e8e8e8; border-radius: 6px; flex: 1; min-width: 150px; outline: none; }
        .date-input { padding: 8px 12px; border: 1px solid #e8e8e8; border-radius: 6px; outline: none; }
        
        /* 数据表格 */
        .data-table { width: 100%; background: #fff; border-radius: 10px; border-collapse: collapse; overflow: hidden; }
        .data-table th { background: #fafafa; padding: 12px 15px; text-align: left; font-weight: 500; color: #666; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
        .data-table td { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
        .data-table tbody tr:hover { background: #fafafa; }
        .data-table tbody tr:last-child td { border-bottom: none; }
.product-thumb { width: 45px; height: 45px; border-radius: 6px; object-fit: cover; }
        .avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
        .price { color: #ff4500; font-weight: 600; }
        
        /* 状态标签 */
        .status { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; }
        .status.online, .status.completed { background: #e6f7e6; color: #52c41a; }
        .status.offline { background: #f5f5f5; color: #999; }
        .status.pending { background: #fff7e6; color: #faad14; }
        .status.shipping { background: #e6f4ff; color: #1890ff; }
        .status.processing { background: #fff1f0; color: #ff4d4f; }
        
        /* 会员标签 */
        .vip-tag { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; background: #f5f5f5; color: #666; }
        .vip-tag.gold { background: linear-gradient(135deg, #ffd700, #ffb347); color: #fff; }
        .vip-tag.silver { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
        .vip-tag.diamond { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
        
        /* 类型标签 */
        .type-tag { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; }
        .type-tag.delivery { background: #e6f4ff; color: #1890ff; }
        .type-tag.order { background: #fff7e6; color: #faad14; }
        .type-tag.system { background: #f9f0ff; color: #722ed1; }
        
        /* 按钮 */
        .btn { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; border: none; }
        .btn-primary { background: linear-gradient(135deg, #ff6b00, #ff4500); color: #fff; }
        .btn-success { background: #52c41a; color: #fff; }
        .btn-default { background: #fff; color: #666; border: 1px solid #e8e8e8; }
        .btn-link { background: none; border: none; color: #ff6b00; cursor: pointer; font-size: 12px; padding: 0 5px; }
        .btn-link:hover { text-decoration: underline; }
        .btn-link.danger { color: #ff4d4f; }
        .btn-link.warning { color: #faad14; }
        .gray { color: #999; font-size: 12px; }
        
        /* 分页 */
        .pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 20px 0; }
        .pagination .total { color: #999; font-size: 12px; margin-right: 15px; }
        .page-btn { padding: 5px 12px; border: 1px solid #e8e8e8; background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; }
        .page-num { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #e8e8e8; border-radius: 4px; cursor: pointer; font-size: 12px; }
        .page-num.active { background: #ff6b00; color: #fff; border-color: #ff6b00; }
        
        /* 模态框 */
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
        .modal.active { display: flex; }
        .modal-content { background: #fff; border-radius: 10px; width: 480px; max-height: 90vh; overflow-y: auto; animation: modalIn 0.3s; }
        .modal-sm { width: 380px; }
        @keyframes modalIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .modal-header { padding: 15px 18px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { font-size: 16px; font-weight: 600; }
        .close-btn { background: none; border: none; font-size: 22px; color: #999; cursor: pointer; }
        .modal-body { padding: 18px; }
        .modal-footer { padding: 12px 18px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 10px; }
        
        /* 表单 */
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 6px; font-size: 13px; color: #666; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid #e8e8e8; border-radius: 6px; font-size: 13px; outline: none; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #ff6b00; }
        .form-group textarea { resize: vertical; }
        .form-row { display: flex; gap: 12px; }
        .form-row .form-group { flex: 1; }
        .upload-area { border: 2px dashed #e8e8e8; border-radius: 8px; padding: 25px; text-align: center; cursor: pointer; transition: border-color 0.3s; }
        .upload-area:hover { border-color: #ff6b00; }
        .upload-area span { font-size: 28px; color: #ccc; }
        .upload-area p { color: #999; font-size: 12px; margin-top: 6px; }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="logo">
            <h2>优选拼团</h2>
            <span>管理后台</span>
        </div>
        <nav class="nav-menu">
            <div class="nav-item active" onclick="switchPage('dashboard')">
                <span>📊</span>
                <span>工作台</span>
            </div>
            <div class="nav-item" onclick="switchPage('groupbuy')">
                <span>👥</span>
                <span>拼团管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('products')">
                <span>📦</span>
                <span>商品管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('orders')">
                <span>🧾</span>
                <span>订单管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('messages')">
                <span>💬</span>
                <span>消息管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('members')">
                <span>👤</span>
                <span>会员管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('addresses')">
                <span>📍</span>
                <span>地址管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('coupons')">
                <span>🎫</span>
                <span>优惠券管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('service')">
                <span>💁</span>
                <span>客服管理</span>
            </div>
        </nav>
    </div>
    
    <main class="main-content">
        <header class="top-bar">
            <div class="search-box">
                <input type="text" placeholder="搜索商品、订单、会员...">
                <button onclick="alert('搜索功能')">搜索</button>
            </div>
            <div class="user-info">
                <div class="notifications">
                    🔔
                    <span class="badge">3</span>
                </div>
                <div class="admin-user">
                    <div class="admin-avatar">管</div>
                    <span>管理员</span>
                </div>
            </div>
        </header>
        
        <!-- 工作台 -->
        <div id="dashboard" class="page-content active">
            <div class="page-header">
                <h1>工作台</h1>
                <span class="date">2026年4月25日 星期五</span>
            </div>
            
            <div class="stats-cards">
                <div class="stat-card" onclick="switchPage('products')">
                    <div class="stat-icon blue">📦</div>
                    <div class="stat-info">
                        <div class="stat-value">128</div>
                        <div class="stat-label">商品总数</div>
                    </div>
                </div>
                <div class="stat-card" onclick="switchPage('orders')">
                    <div class="stat-icon orange">🧾</div>
                    <div class="stat-info">
                        <div class="stat-value">56</div>
                        <div class="stat-label">今日订单</div>
                    </div>
                </div>
                <div class="stat-card" onclick="switchPage('members')">
                    <div class="stat-icon green">👤</div>
                    <div class="stat-info">
                        <div class="stat-value">1,256</div>
                        <div class="stat-label">会员总数</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon red">💰</div>
                    <div class="stat-info">
                        <div class="stat-value">¥8,952</div>
                        <div class="stat-label">今日销售额</div>
                    </div>
                </div>
            </div>
            
            <div class="dashboard-grid">
                <div class="panel">
                    <div class="panel-header">
                        <h3>待处理事项</h3>
                    </div>
                    <div class="panel-body">
                        <div class="todo-item" onclick="switchPage('orders')">
                            <span class="todo-dot warning"></span>
                            <span>待发货订单</span>
                            <span class="todo-count">12</span>
                        </div>
                        <div class="todo-item" onclick="switchPage('service')">
                            <span class="todo-dot danger"></span>
                            <span>待处理售后</span>
                            <span class="todo-count">3</span>
                        </div>
                        <div class="todo-item" onclick="switchPage('coupons')">
                            <span class="todo-dot info"></span>
                            <span>待审核优惠券</span>
                            <span class="todo-count">5</span>
                        </div>
                        <div class="todo-item" onclick="switchPage('groupbuy')">
                            <span class="todo-dot"></span>
                            <span>拼团进行中</span>
                            <span class="todo-count">8</span>
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-header">
                        <h3>最新订单</h3>
                        <span class="more" onclick="switchPage('orders')">查看全部</span>
                    </div>
                    <div class="panel-body">
                        <table class="mini-table">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>会员</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>DD20260425015</td>
                                    <td>张小明</td>
                                    <td>¥39.8</td>
                                    <td><span class="status pending">待发货</span></td>
                                </tr>
                                <tr>
                                    <td>DD20260425014</td>
                                    <td>李小红</td>
                                    <td>¥128.0</td>
                                    <td><span class="status completed">已完成</span></td>
                                </tr>
                                <tr>
                                    <td>DD20260425013</td>
                                    <td>王大力</td>
                                    <td>¥56.0</td>
                                    <td><span class="status shipping">配送中</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-header">
                        <h3>热销商品</h3>
                    </div>
                    <div class="panel-body">
                        <div class="hot-product" onclick="switchPage('products')">
                            <span class="rank">1</span>
                            <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=80&h=80&fit=crop">
                            <div class="info">
                                <div class="name">陕西红富士苹果</div>
                                <div class="sales">销量 256</div>
                            </div>
                        </div>
                        <div class="hot-product" onclick="switchPage('products')">
                            <span class="rank">2</span>
                            <img src="https://images.unsplash.com/photo-1546548970-71785318a17b?w=80&h=80&fit=crop">
                            <div class="info">
                                <div class="name">新奇士有机脐橙</div>
                                <div class="sales">销量 198</div>
                            </div>
                        </div>
                        <div class="hot-product" onclick="switchPage('products')">
                            <span class="rank">3</span>
                            <img src="https://images.unsplash.com/photo-1518977676601-b28b5e4dd746?w=80&h=80&fit=crop">
                            <div class="info">
                                <div class="name">有机生菜</div>
                                <div class="sales">销量 156</div>
</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 拼团管理 -->
        <div id="groupbuy" class="page-content">
            <div class="page-header">
                <h1>拼团管理</h1>
                <button class="btn btn-primary" onclick="showModal('addGroupbuy')">创建拼团</button>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部状态</option>
                    <option>进行中</option>
                    <option>已结束</option>
                    <option>未开始</option>
                </select>
                <input type="text" placeholder="拼团名称" class="search-input">
                <button class="btn btn-default" onclick="alert('筛选中...')">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>拼团名称</th>
                        <th>商品</th>
                        <th>成团人数</th>
                        <th>已参与</th>
                        <th>时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>当季特惠水果拼团</td>
                        <td><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>10人</td>
                        <td>18人</td>
                        <td>4.21-4.25</td>
                        <td><span class="status online">进行中</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('groupDetail')">详情</button>
                            <button class="btn-link warning" onclick="alert('已结束拼团')">结束</button>
                        </td>
                    </tr>
                    <tr>
                        <td>新鲜蔬菜拼团</td>
                        <td><img src="https://images.unsplash.com/photo-1518977676601-b28b5e4dd746?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>20人</td>
                        <td>8人</td>
                        <td>4.20-4.24</td>
                        <td><span class="status online">进行中</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('groupDetail')">详情</button>
                            <button class="btn-link warning">结束</button>
                        </td>
                    </tr>
                    <tr>
                        <td>春季水果节</td>
                        <td><img src="https://images.unsplash.com/photo-1546548970-71785318a17b?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>15人</td>
                        <td>0人</td>
                        <td>4.28-5.02</td>
                        <td><span class="status pending">未开始</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('groupDetail')">详情</button>
                            <button class="btn-link">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="pagination">
                <span class="total">共 15 条</span>
                <button class="page-btn">上一页</button>
                <span class="page-num active">1</span>
                <span class="page-num">2</span>
                <button class="page-btn">下一页</button>
            </div>
        </div>
        
        <!-- 商品管理 -->
        <div id="products" class="page-content">
            <div class="page-header">
                <h1>商品管理</h1>
                <button class="btn btn-primary" onclick="showModal('addProduct')">添加商品</button>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部分类</option>
                    <option>水果生鲜</option>
                    <option>蔬菜豆制品</option>
                    <option>肉禽蛋类</option>
                </select>
                <select class="filter-select">
                    <option>全部状态</option>
                    <option>上架中</option>
                    <option>已下架</option>
                </select>
                <input type="text" placeholder="搜索商品名称" class="search-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>销量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>陕西红富士苹果 脆甜多汁</td>
                        <td>水果生鲜</td>
                        <td class="price">¥19.9</td>
                        <td>256</td>
                        <td>128</td>
                        <td><span class="status online">上架</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editProduct')">编辑</button>
                            <button class="btn-link">下架</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="https://images.unsplash.com/photo-1546548970-71785318a17b?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>新奇士有机脐橙</td>
                        <td>水果生鲜</td>
                        <td class="price">¥15.9</td>
                        <td>188</td>
                        <td>89</td>
                        <td><span class="status online">上架</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editProduct')">编辑</button>
                            <button class="btn-link">下架</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="https://images.unsplash.com/photo-1518977676601-b28b5e4dd746?w=50&h=50&fit=crop" class="product-thumb"></td>
                        <td>有机生菜 新鲜蔬菜</td>
                        <td>蔬菜豆制品</td>
                        <td class="price">¥4.9</td>
                        <td>320</td>
                        <td>156</td>
                        <td><span class="status online">上架</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editProduct')">编辑</button>
                            <button class="btn-link">下架</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="pagination">
                <span class="total">共 128 条</span>
                <button class="page-btn">上一页</button>
                <span class="page-num active">1</span>
                <span class="page-num">2</span>
                <span class="page-num">...</span>
                <span class="page-num">13</span>
                <button class="page-btn">下一页</button>
            </div>
        </div>
        
        <!-- 订单管理 -->
        <div id="orders" class="page-content">
            <div class="page-header">
                <h1>订单管理</h1>
                <button class="btn btn-success" onclick="alert('导出订单中...')">导出订单</button>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部状态</option>
                    <option>待付款</option>
                    <option>待发货</option>
                    <option>配送中</option>
                    <option>已完成</option>
                    <option>已取消</option>
                </select>
                <input type="text" placeholder="订单号/会员名" class="search-input">
                <input type="date" class="date-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>会员</th>
                        <th>商品</th>
                        <th>收货地址</th>
                        <th>金额</th>
                        <th>状态</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>DD20260425015</td>
                        <td>张小明<br><span class="gray">138****8888</span></td>
                        <td>红富士苹果 x1</td>
                        <td>广东省深圳市...</td>
                        <td class="price">¥39.8</td>
                        <td><span class="status pending">待发货</span></td>
                        <td>2026-04-25 09:15</td>
                        <td>
                            <button class="btn-link" onclick="showModal('shipOrder')">发货</button>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                    <tr>
                        <td>DD20260425014</td>
                        <td>李小红<br><span class="gray">139****6666</span></td>
                        <td>有机脐橙 x2</td>
                        <td>北京市朝阳区...</td>
                        <td class="price">¥128.0</td>
                        <td><span class="status completed">已完成</span></td>
                        <td>2026-04-25 08:30</td>
                        <td>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                    <tr>
                        <td>DD20260425013</td>
                        <td>王大力<br><span class="gray">137****5555</span></td>
                        <td>有机生菜 x1</td>
                        <td>上海市浦东新区...</td>
                        <td class="price">¥56.0</td>
                        <td><span class="status shipping">配送中</span></td>
                        <td>2026-04-24 18:45</td>
                        <td>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="pagination">
                <span class="total">共 56 条</span>
                <button class="page-btn">上一页</button>
                <span class="page-num active">1</span>
                <span class="page-num">2</span>
                <span class="page-num">3</span>
                <button class="page-btn">下一页</button>
            </div>
        </div>
        
        <!-- 消息管理 -->
        <div id="messages" class="page-content">
            <div class="page-header">
                <h1>消息管理</h1>
                <button class="btn btn-primary" onclick="showModal('sendMessage')">发送消息</button>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部类型</option>
                    <option>发货通知</option>
                    <option>下单成功</option>
                    <option>系统通知</option>
                </select>
                <input type="text" placeholder="搜索消息内容" class="search-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>类型</th>
                        <th>标题</th>
                        <th>内容</th>
                        <th>发送对象</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="type-tag delivery">发货通知</span></td>
                        <td>您的订单已发货</td>
                        <td>订单号：DD20260425001 顺丰...</td>
                        <td>张小明</td>
                        <td>2026-04-25 10:30</td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="type-tag order">下单成功</span></td>
                        <td>下单成功通知</td>
                        <td>感谢您的购买！订单号...</td>
                        <td>张小明</td>
                        <td>2026-04-25 09:15</td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="type-tag delivery">发货通知</span></td>
                        <td>您的订单已发货</td>
                        <td>订单号：DD20260424045...</td>
                        <td>李小红</td>
                        <td>2026-04-24 15:22</td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 会员管理 -->
        <div id="members" class="page-content">
            <div class="page-header">
                <h1>会员管理</h1>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部等级</option>
                    <option>普通会员</option>
                    <option>白银会员</option>
                    <option>黄金会员</option>
                    <option>钻石会员</option>
                </select>
                <input type="text" placeholder="搜索会员名/手机号" class="search-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>头像</th>
                        <th>会员名</th>
                        <th>手机号</th>
                        <th>等级</th>
                        <th>订单数</th>
                        <th>累计消费</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="https://picsum.photos/40/40?random=10" class="avatar-sm"></td>
                        <td>张小明</td>
                        <td>138****8888</td>
                        <td><span class="vip-tag gold">黄金会员</span></td>
                        <td>12</td>
                        <td class="price">¥1,256</td>
                        <td>2026-01-15</td>
                        <td>
                            <button class="btn-link" onclick="showModal('memberDetail')">详情</button>
                            <button class="btn-link">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="https://picsum.photos/40/40?random=11" class="avatar-sm"></td>
                        <td>李小红</td>
                        <td>139****6666</td>
                        <td><span class="vip-tag">普通会员</span></td>
                        <td>5</td>
                        <td class="price">¥456</td>
                        <td>2026-03-20</td>
                        <td>
                            <button class="btn-link" onclick="showModal('memberDetail')">详情</button>
                            <button class="btn-link">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="https://picsum.photos/40/40?random=12" class="avatar-sm"></td>
                        <td>王大力</td>
                        <td>137****5555</td>
                        <td><span class="vip-tag silver">白银会员</span></td>
                        <td>8</td>
                        <td class="price">¥888</td>
                        <td>2026-02-10</td>
                        <td>
                            <button class="btn-link" onclick="showModal('memberDetail')">详情</button>
                            <button class="btn-link">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="pagination">
                <span class="total">共 1,256 条</span>
                <button class="page-btn">上一页</button>
                <span class="page-num active">1</span>
                <span class="page-num">2</span>
                <span class="page-num">3</span>
                <button class="page-btn">下一页</button>
            </div>
        </div>
        
        <!-- 地址管理 -->
        <div id="addresses" class="page-content">
            <div class="page-header">
                <h1>地址管理</h1>
            </div>
            
            <div class="filter-bar">
                <input type="text" placeholder="搜索收货人/手机号/地址" class="search-input" style="flex:1">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>收货人</th>
                        <th>手机号</th>
                        <th>所在地区</th>
                        <th>详细地址</th>
                        <th>是否默认</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张小明</td>
                        <td>138****8888</td>
                        <td>广东省深圳市南山区</td>
                        <td>科技园南区高新南七道R2-B栋3楼</td>
                        <td><span class="status online">默认</span></td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>李小红</td>
                        <td>139****6666</td>
                        <td>北京市朝阳区</td>
                        <td>望京SOHO T3 20层</td>
                        <td>-</td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>王大力</td>
                        <td>137****5555</td>
                        <td>上海市浦东新区</td>
                        <td>陆家嘴环路1000号</td>
                        <td>-</td>
                        <td>
                            <button class="btn-link">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 优惠券管理 -->
        <div id="coupons" class="page-content">
            <div class="page-header">
                <h1>优惠券管理</h1>
                <button class="btn btn-primary" onclick="showModal('addCoupon')">添加优惠券</button>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部状态</option>
                    <option>进行中</option>
                    <option>已过期</option>
                    <option>未开始</option>
                </select>
                <input type="text" placeholder="优惠券名称" class="search-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>优惠券名称</th>
                        <th>面额</th>
                        <th>使用条件</th>
                        <th>发放数量</th>
                        <th>已使用</th>
                        <th>有效期</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>新人专享券</td>
                        <td class="price">¥20</td>
                        <td>满99可用</td>
                        <td>500</td>
                        <td>128</td>
                        <td>2026.04.01-2026.05.01</td>
                        <td><span class="status online">进行中</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editCoupon')">编辑</button>
                            <button class="btn-link warning">暂停</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>会员专属券</td>
                        <td class="price">¥50</td>
                        <td>满299可用</td>
                        <td>200</td>
                        <td>45</td>
                        <td>2026.04.15-2026.05.15</td>
                        <td><span class="status online">进行中</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editCoupon')">编辑</button>
                            <button class="btn-link warning">暂停</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>限时秒杀券</td>
                        <td class="price">¥10</td>
                        <td>无门槛</td>
                        <td>100</td>
                        <td>89</td>
                        <td>2026.04.20-2026.04.25</td>
                        <td><span class="status offline">已过期</span></td>
                        <td>
                            <button class="btn-link" onclick="showModal('editCoupon')">编辑</button>
                            <button class="btn-link danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 客服管理 -->
        <div id="service" class="page-content">
            <div class="page-header">
                <h1>客服管理</h1>
            </div>
            
            <div class="filter-bar">
                <select class="filter-select">
                    <option>全部状态</option>
                    <option>待处理</option>
                    <option>处理中</option>
                    <option>已解决</option>
                </select>
                <input type="text" placeholder="搜索工单号/用户" class="search-input">
                <button class="btn btn-default">筛选</button>
            </div>
            
            <table class="data-table">
                <thead>
                    <tr>
                        <th>工单号</th>
                        <th>用户</th>
                        <th>问题类型</th>
                        <th>问题描述</th>
                        <th>状态</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>TK20260425001</td>
                        <td>张小明</td>
                        <td>物流咨询</td>
                        <td>请问我的订单什么时候发货？</td>
                        <td><span class="status pending">待处理</span></td>
                        <td>2026-04-25 10:30</td>
                        <td>
                            <button class="btn-link" onclick="showModal('replyTicket')">回复</button>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                    <tr>
                        <td>TK20260424008</td>
                        <td>李小红</td>
                        <td>售后申请</td>
                        <td>商品有损坏，申请退款</td>
                        <td><span class="status processing">处理中</span></td>
                        <td>2026-04-24 15:22</td>
                        <td>
                            <button class="btn-link" onclick="showModal('replyTicket')">回复</button>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                    <tr>
                        <td>TK20260423005</td>
                        <td>王大力</td>
                        <td>商品咨询</td>
                        <td>苹果是脆的还是面的？</td>
                        <td><span class="status completed">已解决</span></td>
                        <td>2026-04-23 09:45</td>
                        <td>
                            <button class="btn-link">详情</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
    
    <!-- 模态框：添加商品 -->
    <div id="addProduct" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加商品</h3>
                <button class="close-btn" onclick="hideModal('addProduct')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>商品名称</label>
                    <input type="text" placeholder="请输入商品名称">
                </div>
                <div class="form-group">
                    <label>商品分类</label>
                    <select>
                        <option>水果生鲜</option>
                        <option>蔬菜豆制品</option>
                        <option>肉禽蛋类</option>
                        <option>粮油调味</option>
                    </select>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>商品价格</label>
                        <input type="text" placeholder="现价">
                    </div>
                    <div class="form-group">
                        <label>原价</label>
                        <input type="text" placeholder="划线价">
                    </div>
                </div>
                <div class="form-group">
                    <label>库存数量</label>
                    <input type="number" placeholder="库存">
                </div>
                <div class="form-group">
                    <label>商品图片</label>
                    <div class="upload-area">
                        <span>+</span>
                        <p>点击上传图片</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="hideModal('addProduct')">取消</button>
                <button class="btn btn-primary" onclick="hideModal('addProduct'); alert('商品添加成功！')">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 模态框：编辑商品 -->
    <div id="editProduct" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑商品</h3>
                <button class="close-btn" onclick="hideModal('editProduct')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>商品名称</label>
                    <input type="text" value="陕西红富士苹果 脆甜多汁">
                </div>
                <div class="form-group">
                    <label>商品分类</label>
                    <select>
                        <option selected>水果生鲜</option>
                        <option>蔬菜豆制品</option>
                    </select>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>商品价格</label>
                        <input type="text" value="19.9">
                    </div>
                    <div class="form-group">
                        <label>原价</label>
                        <input type="text" value="39.9">
                    </div>
                </div>
                <div class="form-group">
                    <label>库存数量</label>
                    <input type="number" value="256">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="hideModal('editProduct')">取消</button>
                <button class="btn btn-primary" onclick="hideModal('editProduct'); alert('商品更新成功！')">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 模态框：订单发货 -->
    <div id="shipOrder" class="modal">
        <div class="modal-content modal-sm">
            <div class="modal-header">
                <h3>订单发货</h3>
                <button class="close-btn" onclick="hideModal('shipOrder')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>订单号</label>
                    <input type="text" value="DD20260425015" disabled>
                </div>
                <div class="form-group">
                    <label>快递公司</label>
                    <select>
                        <option>顺丰快递</option>
                        <option>中通快递</option>
                        <option>圆通快递</option>
                        <option>韵达快递</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>快递单号</label>
                    <input type="text" placeholder="请输入快递单号">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="hideModal('shipOrder')">取消</button>
                <button class="btn btn-primary" onclick="hideModal('shipOrder'); alert('发货成功！'); location.reload()">确认发货</button>
            </div>
        </div>
    </div>
    
    <!-- 模态框：发送消息 -->
    <div id="sendMessage" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>发送消息</h3>
                <button class="close-btn" onclick="hideModal('sendMessage')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>消息类型</label>
                    <select>
                        <option>发货通知</option>
                        <option>下单成功</option>
                        <option>系统通知</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>发送对象</label>
                    <select>
                        <option>全部会员</option>
                        <option>指定会员</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>消息标题</label>
                    <input type="text" placeholder="请输入消息标题">
                </div>
                <div class="form-group">
                    <label>消息内容</label>
                    <textarea rows="3" placeholder="请输入消息内容">
用户	商品	数量	时间
张小明	红富士苹果	x1	09:15
李小红	有机脐橙	x2	08:30
王大力	红富士苹果	x1	08:15
编辑页面

添加优惠券

编辑优惠券

创建拼团

拼团详情

会员详情

回复工单
