2025-09-09 16:22:19 +00:00
|
|
|
<!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 {
|
2025-10-01 04:55:41 +00:00
|
|
|
max-width: 1600px;
|
2025-09-09 16:22:19 +00:00
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-header {
|
|
|
|
|
background: white;
|
2025-10-01 04:55:41 +00:00
|
|
|
padding: 16px 24px;
|
|
|
|
|
margin-bottom: 16px;
|
2025-09-09 16:22:19 +00:00
|
|
|
border-radius: 8px;
|
2025-10-01 04:55:41 +00:00
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
2025-09-09 16:22:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 600;
|
2025-10-01 04:55:41 +00:00
|
|
|
color: #262626;
|
|
|
|
|
margin-bottom: 16px;
|
2025-09-09 16:22:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-form {
|
|
|
|
|
display: grid;
|
2025-10-01 04:55:41 +00:00
|
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
2025-09-09 16:22:19 +00:00
|
|
|
gap: 16px;
|
2025-10-01 04:55:41 +00:00
|
|
|
margin-bottom: 16px;
|
2025-09-09 16:22:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-01 04:55:41 +00:00
|
|
|
.search-section {
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 24px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-09 16:22:19 +00:00
|
|
|
.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;
|
2025-10-01 04:55:41 +00:00
|
|
|
padding: 12px 16px;
|
2025-09-09 16:22:19 +00:00
|
|
|
text-align: left;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border-bottom: 2px solid #f0f0f0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-table td {
|
2025-10-01 04:55:41 +00:00
|
|
|
padding: 16px 16px;
|
2025-09-09 16:22:19 +00:00
|
|
|
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">
|
|
|
|
|
<!-- 页面头部 -->
|
2025-10-01 04:55:41 +00:00
|
|
|
<!-- 页面标题 -->
|
2025-09-09 16:22:19 +00:00
|
|
|
<div class="page-header">
|
|
|
|
|
<h1 class="page-title">商品管理</h1>
|
2025-10-01 04:55:41 +00:00
|
|
|
</div>
|
2025-09-09 16:22:19 +00:00
|
|
|
|
2025-10-01 04:55:41 +00:00
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="search-section">
|
2025-09-09 16:22:19 +00:00
|
|
|
<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">
|
2025-09-23 16:19:01 +00:00
|
|
|
<button class="btn btn-success" onclick="window.location.href='添加商品.html'">添加商品</button>
|
2025-09-09 16:22:19 +00:00
|
|
|
<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>
|
2025-09-23 20:06:57 +00:00
|
|
|
<th>店铺名称</th>
|
2025-09-09 16:22:19 +00:00
|
|
|
<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>
|
2025-09-23 20:06:57 +00:00
|
|
|
<td>牛牛蔬菜店</td>
|
2025-09-09 16:22:19 +00:00
|
|
|
<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>
|
2025-09-23 20:06:57 +00:00
|
|
|
<td>牛牛蔬菜店</td>
|
2025-09-09 16:22:19 +00:00
|
|
|
<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>
|
2025-09-23 20:06:57 +00:00
|
|
|
<td>牛牛蔬菜店</td>
|
2025-09-09 16:22:19 +00:00
|
|
|
<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>
|
