619 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			619 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="zh-CN">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>商品管理 - 大妈集市商户端</title>
 | |
|     <style>
 | |
|         * {
 | |
|             margin: 0;
 | |
|             padding: 0;
 | |
|             box-sizing: border-box;
 | |
|         }
 | |
| 
 | |
|         body {
 | |
|             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 | |
|             background-color: #f5f5f5;
 | |
|             color: #333;
 | |
|         }
 | |
| 
 | |
|         .container {
 | |
|             max-width: 1600px;
 | |
|             margin: 0 auto;
 | |
|             padding: 20px;
 | |
|         }
 | |
| 
 | |
|         .page-header {
 | |
|             background: white;
 | |
|             padding: 16px 24px;
 | |
|             margin-bottom: 16px;
 | |
|             border-radius: 8px;
 | |
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 | |
|         }
 | |
| 
 | |
|         .page-title {
 | |
|             font-size: 24px;
 | |
|             font-weight: 600;
 | |
|             color: #262626;
 | |
|             margin-bottom: 16px;
 | |
|         }
 | |
| 
 | |
|         .search-form {
 | |
|             display: grid;
 | |
|             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 | |
|             gap: 16px;
 | |
|             margin-bottom: 16px;
 | |
|         }
 | |
| 
 | |
|         .form-item {
 | |
|             display: flex;
 | |
|             flex-direction: column;
 | |
|             gap: 8px;
 | |
|         }
 | |
| 
 | |
|         .form-label {
 | |
|             font-size: 14px;
 | |
|             color: #666;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         .form-input, .form-select {
 | |
|             padding: 10px 12px;
 | |
|             border: 1px solid #d9d9d9;
 | |
|             border-radius: 6px;
 | |
|             font-size: 14px;
 | |
|             transition: border-color 0.3s;
 | |
|         }
 | |
| 
 | |
|         .form-input:focus, .form-select:focus {
 | |
|             outline: none;
 | |
|             border-color: #1890ff;
 | |
|             box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 | |
|         }
 | |
| 
 | |
|         .search-buttons {
 | |
|             grid-column: 1 / -1;
 | |
|             display: flex;
 | |
|             gap: 12px;
 | |
|             margin-top: 16px;
 | |
|         }
 | |
| 
 | |
|         .search-section {
 | |
|             background: white;
 | |
|             padding: 24px;
 | |
|             margin-bottom: 16px;
 | |
|             border-radius: 8px;
 | |
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 | |
|         }
 | |
| 
 | |
|         .btn {
 | |
|             padding: 10px 20px;
 | |
|             border: none;
 | |
|             border-radius: 6px;
 | |
|             font-size: 14px;
 | |
|             cursor: pointer;
 | |
|             transition: all 0.3s;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         .btn-primary {
 | |
|             background-color: #1890ff;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         .btn-primary:hover {
 | |
|             background-color: #40a9ff;
 | |
|         }
 | |
| 
 | |
|         .btn-default {
 | |
|             background-color: #f5f5f5;
 | |
|             color: #666;
 | |
|             border: 1px solid #d9d9d9;
 | |
|         }
 | |
| 
 | |
|         .btn-default:hover {
 | |
|             border-color: #40a9ff;
 | |
|             color: #1890ff;
 | |
|         }
 | |
| 
 | |
|         .stats-section {
 | |
|             background: white;
 | |
|             padding: 20px;
 | |
|             border-radius: 8px;
 | |
|             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 | |
|             margin-bottom: 20px;
 | |
|         }
 | |
| 
 | |
|         .stats-grid {
 | |
|             display: grid;
 | |
|             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 | |
|             gap: 20px;
 | |
|         }
 | |
| 
 | |
|         .stat-item {
 | |
|             text-align: center;
 | |
|             padding: 20px;
 | |
|             background: #f8f9fa;
 | |
|             border-radius: 8px;
 | |
|             border-left: 4px solid #1890ff;
 | |
|         }
 | |
| 
 | |
|         .stat-label {
 | |
|             font-size: 14px;
 | |
|             color: #666;
 | |
|             margin-bottom: 8px;
 | |
|         }
 | |
| 
 | |
|         .stat-value {
 | |
|             font-size: 28px;
 | |
|             font-weight: 600;
 | |
|             color: #1890ff;
 | |
|         }
 | |
| 
 | |
|         .content-section {
 | |
|             background: white;
 | |
|             border-radius: 8px;
 | |
|             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 | |
|         }
 | |
| 
 | |
|         .section-header {
 | |
|             padding: 20px;
 | |
|             border-bottom: 1px solid #f0f0f0;
 | |
|             display: flex;
 | |
|             justify-content: space-between;
 | |
|             align-items: center;
 | |
|         }
 | |
| 
 | |
|         .tabs {
 | |
|             display: flex;
 | |
|             gap: 20px;
 | |
|         }
 | |
| 
 | |
|         .tab {
 | |
|             padding: 10px 16px;
 | |
|             border-radius: 6px;
 | |
|             cursor: pointer;
 | |
|             transition: all 0.3s;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         .tab.active {
 | |
|             background-color: #1890ff;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         .tab:not(.active):hover {
 | |
|             background-color: #f5f5f5;
 | |
|         }
 | |
| 
 | |
|         .action-buttons {
 | |
|             display: flex;
 | |
|             gap: 12px;
 | |
|         }
 | |
| 
 | |
|         .btn-success {
 | |
|             background-color: #52c41a;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         .btn-success:hover {
 | |
|             background-color: #73d13d;
 | |
|         }
 | |
| 
 | |
|         .btn-danger {
 | |
|             background-color: #ff4d4f;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         .btn-danger:hover {
 | |
|             background-color: #ff7875;
 | |
|         }
 | |
| 
 | |
|         .btn-danger:disabled {
 | |
|             background-color: #f5f5f5;
 | |
|             color: #d9d9d9;
 | |
|             cursor: not-allowed;
 | |
|         }
 | |
| 
 | |
|         .table-section {
 | |
|             padding: 20px;
 | |
|         }
 | |
| 
 | |
|         .product-table {
 | |
|             width: 100%;
 | |
|             border-collapse: collapse;
 | |
|             margin-bottom: 20px;
 | |
|         }
 | |
| 
 | |
|         .product-table th {
 | |
|             background-color: #fafafa;
 | |
|             padding: 12px 16px;
 | |
|             text-align: left;
 | |
|             font-weight: 600;
 | |
|             border-bottom: 2px solid #f0f0f0;
 | |
|             font-size: 14px;
 | |
|         }
 | |
| 
 | |
|         .product-table td {
 | |
|             padding: 16px 16px;
 | |
|             border-bottom: 1px solid #f0f0f0;
 | |
|             font-size: 14px;
 | |
|             vertical-align: middle;
 | |
|         }
 | |
| 
 | |
|         .product-table tbody tr:hover {
 | |
|             background-color: #f8f9fa;
 | |
|         }
 | |
| 
 | |
|         .product-image {
 | |
|             width: 50px;
 | |
|             height: 50px;
 | |
|             object-fit: cover;
 | |
|             border-radius: 6px;
 | |
|         }
 | |
| 
 | |
|         .product-name {
 | |
|             font-weight: 500;
 | |
|             color: #1a1a1a;
 | |
|         }
 | |
| 
 | |
|         .price {
 | |
|             font-weight: 600;
 | |
|             color: #f5222d;
 | |
|         }
 | |
| 
 | |
|         .status-badge {
 | |
|             padding: 4px 12px;
 | |
|             border-radius: 12px;
 | |
|             font-size: 12px;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         .status-online {
 | |
|             background-color: #f6ffed;
 | |
|             color: #52c41a;
 | |
|             border: 1px solid #b7eb8f;
 | |
|         }
 | |
| 
 | |
|         .action-buttons-cell {
 | |
|             display: flex;
 | |
|             gap: 8px;
 | |
|         }
 | |
| 
 | |
|         .btn-small {
 | |
|             padding: 6px 12px;
 | |
|             font-size: 12px;
 | |
|         }
 | |
| 
 | |
|         .btn-small:disabled {
 | |
|             background-color: #f5f5f5;
 | |
|             color: #d9d9d9;
 | |
|             cursor: not-allowed;
 | |
|         }
 | |
| 
 | |
|         .pagination {
 | |
|             display: flex;
 | |
|             justify-content: space-between;
 | |
|             align-items: center;
 | |
|             padding-top: 16px;
 | |
|             border-top: 1px solid #f0f0f0;
 | |
|         }
 | |
| 
 | |
|         .pagination-left {
 | |
|             display: flex;
 | |
|             gap: 8px;
 | |
|             align-items: center;
 | |
|         }
 | |
| 
 | |
|         .pagination-center {
 | |
|             display: flex;
 | |
|             gap: 12px;
 | |
|             align-items: center;
 | |
|         }
 | |
| 
 | |
|         .page-size-select {
 | |
|             padding: 6px 8px;
 | |
|             border: 1px solid #d9d9d9;
 | |
|             border-radius: 4px;
 | |
|             font-size: 14px;
 | |
|         }
 | |
| 
 | |
|         .page-input {
 | |
|             width: 60px;
 | |
|             padding: 6px 8px;
 | |
|             border: 1px solid #d9d9d9;
 | |
|             border-radius: 4px;
 | |
|             text-align: center;
 | |
|             font-size: 14px;
 | |
|         }
 | |
| 
 | |
|         .page-btn {
 | |
|             padding: 6px 12px;
 | |
|             border: 1px solid #d9d9d9;
 | |
|             background: white;
 | |
|             border-radius: 4px;
 | |
|             cursor: pointer;
 | |
|             font-size: 14px;
 | |
|         }
 | |
| 
 | |
|         .page-btn:hover {
 | |
|             border-color: #1890ff;
 | |
|             color: #1890ff;
 | |
|         }
 | |
| 
 | |
|         .page-btn.active {
 | |
|             background-color: #1890ff;
 | |
|             color: white;
 | |
|             border-color: #1890ff;
 | |
|         }
 | |
| 
 | |
|         .checkbox {
 | |
|             width: 16px;
 | |
|             height: 16px;
 | |
|             cursor: pointer;
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
|     <div class="container">
 | |
|         <!-- 页面头部 -->
 | |
|         <!-- 页面标题 -->
 | |
|         <div class="page-header">
 | |
|             <h1 class="page-title">商品管理</h1>
 | |
|         </div>
 | |
| 
 | |
|         <!-- 搜索区域 -->
 | |
|         <div class="search-section">
 | |
|             <div class="search-form">
 | |
|                 <div class="form-item">
 | |
|                     <label class="form-label">商品搜索</label>
 | |
|                     <input type="text" class="form-input" placeholder="请输入商品名称">
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="form-item">
 | |
|                     <label class="form-label">店铺</label>
 | |
|                     <select class="form-select">
 | |
|                         <option value="">牛牛蔬菜店</option>
 | |
|                         <option value="">其他店铺</option>
 | |
|                     </select>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="form-item">
 | |
|                     <label class="form-label">状态</label>
 | |
|                     <select class="form-select">
 | |
|                         <option value="">全部</option>
 | |
|                         <option value="">在售</option>
 | |
|                         <option value="">下架</option>
 | |
|                     </select>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="form-item">
 | |
|                     <label class="form-label">折扣</label>
 | |
|                     <select class="form-select">
 | |
|                         <option value="">-</option>
 | |
|                         <option value="">有</option>
 | |
|                         <option value="">无</option>
 | |
|                     </select>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="search-buttons">
 | |
|                     <button class="btn btn-primary">查询</button>
 | |
|                     <button class="btn btn-default">重置</button>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
| 
 | |
|         <!-- 统计信息 -->
 | |
|         <div class="stats-section">
 | |
|             <div class="stats-grid">
 | |
|                 <div class="stat-item">
 | |
|                     <div class="stat-label">总商品数量(个)</div>
 | |
|                     <div class="stat-value">13</div>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="stat-item">
 | |
|                     <div class="stat-label">上架中商品数量(个)</div>
 | |
|                     <div class="stat-value">3</div>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="stat-item">
 | |
|                     <div class="stat-label">折扣商品数量(个)</div>
 | |
|                     <div class="stat-value">0</div>
 | |
|                 </div>
 | |
| 
 | |
|                 <div class="stat-item">
 | |
|                     <div class="stat-label">仓库中商品数量(个)</div>
 | |
|                     <div class="stat-value">10</div>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
| 
 | |
|         <!-- 主内容区域 -->
 | |
|         <div class="content-section">
 | |
|             <div class="section-header">
 | |
| 
 | |
|                 <div class="action-buttons">
 | |
|                     <button class="btn btn-success" onclick="window.location.href='添加商品.html'">添加商品</button>
 | |
|                     <button class="btn btn-danger" disabled>批量删除</button>
 | |
|                 </div>
 | |
|             </div>
 | |
| 
 | |
|             <div class="table-section">
 | |
|                 <!-- 商品列表表格 -->
 | |
|                 <table class="product-table">
 | |
|                     <thead>
 | |
|                         <tr>
 | |
|                             <th><input type="checkbox" class="checkbox"></th>
 | |
|                             <th>商品图</th>
 | |
|                             <th>商品名称</th>
 | |
|                             <th>店铺名称</th>
 | |
|                             <th>商品售价</th>
 | |
|                             <th>折扣</th>
 | |
|                             <th>销量</th>
 | |
|                             <th>库存</th>
 | |
|                             <th>状态</th>
 | |
|                             <th>操作<br><small>(提示:下架后可进行操作)</small></th>
 | |
|                         </tr>
 | |
|                     </thead>
 | |
|                     <tbody>
 | |
|                         <tr>
 | |
|                             <td><input type="checkbox" class="checkbox"></td>
 | |
|                             <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0yNSAyMEMyNi42NTY5IDIwIDI4IDIxLjM0MzEgMjggMjNDMjggMjQuNjU2OSAyNi42NTY5IDI2IDI1IDI2QzIzLjM0MzEgMjYgMjIgMjQuNjU2OSAyMiAyM0MyMiAyMS4zNDMxIDIzLjM0MzEgMjAgMjUgMjBaIiBmaWxsPSIjOTk5OTk5Ii8+CjxwYXRoIGQ9Ik0zNCAyMEg0MEMzOC44OTU0IDIwIDM4IDIwLjg5NTQgMzggMjJWMzRDMzggMzUuMTA0NiAzNy4xMDQ2IDM2IDM2IDM2SDIyQzIwLjg5NTQgMzYgMjAgMzUuMTA0NiAyMCAzNFYyMkMyMCAyMC44OTU0IDIwLjg5NTQgMjAgMjIgMjBIMjhNMzQgMjBWMThDMzQgMTYuODk1NCAzMy4xMDQ2IDE2IDMyIDE2SDI2QzI0Ljg5NTQgMTYgMjQgMTYuODk1NCAyNCAxOFYyME0zNCAyMEg0MiIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+" alt="冬瓜" class="product-image"></td>
 | |
|                             <td class="product-name">冬瓜500g</td>
 | |
|                             <td>牛牛蔬菜店</td>
 | |
|                             <td class="price">¥2</td>
 | |
|                             <td>-</td>
 | |
|                             <td>0</td>
 | |
|                             <td>10</td>
 | |
|                             <td><span class="status-badge status-online">上架中</span></td>
 | |
|                             <td>
 | |
|                                 <div class="action-buttons-cell">
 | |
|                                     <button class="btn btn-small btn-default" disabled>编辑</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改价</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改库存</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>设置折扣</button>
 | |
|                                 </div>
 | |
|                             </td>
 | |
|                         </tr>
 | |
| 
 | |
|                         <tr>
 | |
|                             <td><input type="checkbox" class="checkbox"></td>
 | |
|                             <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0yNSAyMEMyNi42NTY5IDIwIDI4IDIxLjM0MzEgMjggMjNDMjggMjQuNjU2OSAyNi42NTY5IDI2IDI1IDI2QzIzLjM0MzEgMjYgMjIgMjQuNjU2OSAyMiAyM0MyMiAyMS4zNDMxIDIzLjM0MzEgMjAgMjUgMjBaIiBmaWxsPSIjOTk5OTk5Ii8+CjxwYXRoIGQ9Ik0zNCAyMEg0MEMzOC44OTU0IDIwIDM4IDIwLjg5NTQgMzggMjJWMzRDMzggMzUuMTA0NiAzNy4xMDQ2IDM2IDM2IDM2SDIyQzIwLjg5NTQgMzYgMjAgMzUuMTA0NiAyMCAzNFYyMkMyMCAyMC44OTU0IDIwLjg5NTQgMjAgMjIgMjBIMjhNMzQgMjBWMThDMzQgMTYuODk1NCAzMy4xMDQ2IDE2IDMyIDE2SDI2QzI0Ljg5NTQgMTYgMjQgMTYuODk1NCAyNCAxOFYyME0zNCAyMEg0MiIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+" alt="西蓝花" class="product-image"></td>
 | |
|                             <td class="product-name">西蓝花约500g</td>
 | |
|                             <td>牛牛蔬菜店</td>
 | |
|                             <td class="price">¥1</td>
 | |
|                             <td>-</td>
 | |
|                             <td>2</td>
 | |
|                             <td>3</td>
 | |
|                             <td><span class="status-badge status-online">上架中</span></td>
 | |
|                             <td>
 | |
|                                 <div class="action-buttons-cell">
 | |
|                                     <button class="btn btn-small btn-default" disabled>编辑</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改价</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改库存</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>设置折扣</button>
 | |
|                                 </div>
 | |
|                             </td>
 | |
|                         </tr>
 | |
| 
 | |
|                         <tr>
 | |
|                             <td><input type="checkbox" class="checkbox"></td>
 | |
|                             <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0yNSAyMEMyNi42NTY5IDIwIDI4IDIxLjM0MzEgMjggMjNDMjggMjQuNjU2OSAyNi42NTY5IDI2IDI1IDI2QzIzLjM0MzEgMjYgMjIgMjQuNjU2OSAyMiAyM0MyMiAyMS4zNDMxIDIzLjM0MzEgMjAgMjUgMjBaIiBmaWxsPSIjOTk5OTk5Ii8+CjxwYXRoIGQ9Ik0zNCAyMEg0MEMzOC44OTU0IDIwIDM4IDIwLjg5NTQgMzggMjJWMzRDMzggMzUuMTA0NiAzNy4xMDQ2IDM2IDM2IDM2SDIyQzIwLjg5NTQgMzYgMjAgMzUuMTA0NiAyMCAzNFYyMkMyMCAyMC44OTU0IDIwLjg5NTQgMjAgMjIgMjBIMjhNMzQgMjBWMThDMzQgMTYuODk1NCAzMy4xMDQ2IDE2IDMyIDE2SDI2QzI0Ljg5NTQgMTYgMjQgMTYuODk1NCAyNCAxOFYyME0zNCAyMEg0MiIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+" alt="上海青" class="product-image"></td>
 | |
|                             <td class="product-name">上海青约300g</td>
 | |
|                             <td>牛牛蔬菜店</td>
 | |
|                             <td class="price">¥2</td>
 | |
|                             <td>-</td>
 | |
|                             <td>1</td>
 | |
|                             <td>5</td>
 | |
|                             <td><span class="status-badge status-online">上架中</span></td>
 | |
|                             <td>
 | |
|                                 <div class="action-buttons-cell">
 | |
|                                     <button class="btn btn-small btn-default" disabled>编辑</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改价</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>改库存</button>
 | |
|                                     <button class="btn btn-small btn-default" disabled>设置折扣</button>
 | |
|                                 </div>
 | |
|                             </td>
 | |
|                         </tr>
 | |
|                     </tbody>
 | |
|                 </table>
 | |
| 
 | |
|                 <!-- 分页控件 -->
 | |
|                 <div class="pagination">
 | |
|                     <div class="pagination-left">
 | |
|                         <button class="page-btn">上一页</button>
 | |
|                         <button class="page-btn active">1</button>
 | |
|                         <button class="page-btn">下一页</button>
 | |
|                     </div>
 | |
| 
 | |
|                     <div class="pagination-center">
 | |
|                         <select class="page-size-select">
 | |
|                             <option value="10">10条/页</option>
 | |
|                             <option value="20">20条/页</option>
 | |
|                             <option value="50">50条/页</option>
 | |
|                         </select>
 | |
| 
 | |
|                         <span>前往</span>
 | |
|                         <input type="number" class="page-input" value="1" min="1">
 | |
|                         <span>页</span>
 | |
|                     </div>
 | |
| 
 | |
|                     <div class="pagination-right">
 | |
|                         <span>共 3 条记录</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
|     </div>
 | |
| 
 | |
|     <script>
 | |
|         // 简单的交互功能
 | |
|         document.addEventListener('DOMContentLoaded', function() {
 | |
|             // 标签页切换
 | |
|             const tabs = document.querySelectorAll('.tab');
 | |
|             tabs.forEach(tab => {
 | |
|                 tab.addEventListener('click', function() {
 | |
|                     tabs.forEach(t => t.classList.remove('active'));
 | |
|                     this.classList.add('active');
 | |
|                 });
 | |
|             });
 | |
| 
 | |
|             // 全选功能
 | |
|             const selectAllCheckbox = document.querySelector('.product-table thead .checkbox');
 | |
|             const rowCheckboxes = document.querySelectorAll('.product-table tbody .checkbox');
 | |
|             const batchDeleteBtn = document.querySelector('.btn-danger');
 | |
| 
 | |
|             selectAllCheckbox.addEventListener('change', function() {
 | |
|                 rowCheckboxes.forEach(checkbox => {
 | |
|                     checkbox.checked = this.checked;
 | |
|                 });
 | |
|                 updateBatchDeleteButton();
 | |
|             });
 | |
| 
 | |
|             rowCheckboxes.forEach(checkbox => {
 | |
|                 checkbox.addEventListener('change', function() {
 | |
|                     const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
 | |
|                     selectAllCheckbox.checked = checkedCount === rowCheckboxes.length;
 | |
|                     selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;
 | |
|                     updateBatchDeleteButton();
 | |
|                 });
 | |
|             });
 | |
| 
 | |
|             function updateBatchDeleteButton() {
 | |
|                 const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
 | |
|                 batchDeleteBtn.disabled = checkedCount === 0;
 | |
|             }
 | |
| 
 | |
|             // 搜索功能
 | |
|             const searchBtn = document.querySelector('.btn-primary');
 | |
|             const resetBtn = document.querySelector('.btn-default');
 | |
| 
 | |
|             searchBtn.addEventListener('click', function() {
 | |
|                 // 这里可以添加搜索逻辑
 | |
|                 console.log('执行搜索');
 | |
|             });
 | |
| 
 | |
|             resetBtn.addEventListener('click', function() {
 | |
|                 // 重置表单
 | |
|                 document.querySelectorAll('.form-input, .form-select').forEach(input => {
 | |
|                     if (input.tagName === 'SELECT') {
 | |
|                         input.selectedIndex = 0;
 | |
|                     } else {
 | |
|                         input.value = '';
 | |
|                     }
 | |
|                 });
 | |
|                 console.log('重置表单');
 | |
|             });
 | |
| 
 | |
|             // 分页功能
 | |
|             const pageInput = document.querySelector('.page-input');
 | |
|             pageInput.addEventListener('change', function() {
 | |
|                 const page = parseInt(this.value);
 | |
|                 if (page >= 1) {
 | |
|                     console.log(`跳转到第 ${page} 页`);
 | |
|                 }
 | |
|             });
 | |
|         });
 | |
|     </script>
 | |
| </body>
 | |
| </html> |