445 lines
14 KiB
HTML
445 lines
14 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", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
|
|
background-color: #f5f7fa;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 24px;
|
||
|
|
color: #303133;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 2px solid #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 搜索栏样式 */
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input,
|
||
|
|
.search-bar select {
|
||
|
|
padding: 8px 12px;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
outline: none;
|
||
|
|
min-width: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input:focus,
|
||
|
|
.search-bar select:focus {
|
||
|
|
border-color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input::placeholder {
|
||
|
|
color: #c0c4cc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
padding: 8px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background-color: #409eff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background-color: #66b1ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success {
|
||
|
|
background-color: #67c23a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success:hover {
|
||
|
|
background-color: #85ce61;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-small {
|
||
|
|
padding: 5px 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger {
|
||
|
|
background-color: #f56c6c;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger:hover {
|
||
|
|
background-color: #f78989;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning {
|
||
|
|
background-color: #e6a23c;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning:hover {
|
||
|
|
background-color: #ebb563;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 新增按钮 */
|
||
|
|
.add-section {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表格样式 */
|
||
|
|
.table-wrapper {
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead {
|
||
|
|
background-color: #f5f7fa;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
padding: 12px 8px;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #606266;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
padding: 12px 8px;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr:hover {
|
||
|
|
background-color: #f5f7fa;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 操作按钮组 */
|
||
|
|
.action-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 5px;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 状态标签 */
|
||
|
|
.status-open {
|
||
|
|
color: #67c23a;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-closed {
|
||
|
|
color: #909399;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分页样式 */
|
||
|
|
.pagination {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
margin-top: 20px;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid #ebeef5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button {
|
||
|
|
padding: 6px 12px;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
background-color: white;
|
||
|
|
color: #606266;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button:hover:not(:disabled) {
|
||
|
|
background-color: #409eff;
|
||
|
|
color: white;
|
||
|
|
border-color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button:disabled {
|
||
|
|
cursor: not-allowed;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button.active {
|
||
|
|
background-color: #409eff;
|
||
|
|
color: white;
|
||
|
|
border-color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination .page-info {
|
||
|
|
color: #606266;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="page-title">摊位列表</h1>
|
||
|
|
|
||
|
|
<!-- 搜索栏 -->
|
||
|
|
<div class="search-bar">
|
||
|
|
<input type="text" placeholder="摊位名称" id="searchBoothName">
|
||
|
|
<select id="searchStatus">
|
||
|
|
<option value="">营业状态</option>
|
||
|
|
<option value="open">营业中</option>
|
||
|
|
<option value="closed">休息中</option>
|
||
|
|
</select>
|
||
|
|
<button class="btn btn-primary" onclick="searchBooths()">搜索</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 新增按钮 -->
|
||
|
|
<div class="add-section">
|
||
|
|
<button class="btn btn-success" onclick="goToCreateBooth()">新增摊位</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格 -->
|
||
|
|
<div class="table-wrapper">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>摊位名称</th>
|
||
|
|
<th>主营类目</th>
|
||
|
|
<th>收益人账号名称</th>
|
||
|
|
<th>收益人手机号</th>
|
||
|
|
<th>营业状态</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="boothTableBody">
|
||
|
|
<!-- 示例数据 -->
|
||
|
|
<tr>
|
||
|
|
<td>张记海鲜</td>
|
||
|
|
<td>海鲜水产</td>
|
||
|
|
<td>张三</td>
|
||
|
|
<td>13800138000</td>
|
||
|
|
<td class="status-open">营业中</td>
|
||
|
|
<td>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>李氏鲜肉</td>
|
||
|
|
<td>肉禽蛋</td>
|
||
|
|
<td>李四</td>
|
||
|
|
<td>13900139000</td>
|
||
|
|
<td class="status-open">营业中</td>
|
||
|
|
<td>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>王家蔬菜</td>
|
||
|
|
<td>蔬菜</td>
|
||
|
|
<td>王五</td>
|
||
|
|
<td>13700137000</td>
|
||
|
|
<td class="status-closed">休息中</td>
|
||
|
|
<td>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>赵姐水果摊</td>
|
||
|
|
<td>水果</td>
|
||
|
|
<td>赵六</td>
|
||
|
|
<td>13600136000</td>
|
||
|
|
<td class="status-open">营业中</td>
|
||
|
|
<td>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>孙氏粮油</td>
|
||
|
|
<td>粮油调味</td>
|
||
|
|
<td>孙七</td>
|
||
|
|
<td>13500135000</td>
|
||
|
|
<td class="status-closed">休息中</td>
|
||
|
|
<td>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination">
|
||
|
|
<button onclick="goToPage('first')" id="firstPageBtn">首页</button>
|
||
|
|
<button onclick="goToPage('prev')" id="prevPageBtn">上一页</button>
|
||
|
|
<button class="active">1</button>
|
||
|
|
<button onclick="goToPage(2)">2</button>
|
||
|
|
<button onclick="goToPage(3)">3</button>
|
||
|
|
<button onclick="goToPage(4)">4</button>
|
||
|
|
<button onclick="goToPage(5)">5</button>
|
||
|
|
<button onclick="goToPage('next')" id="nextPageBtn">下一页</button>
|
||
|
|
<button onclick="goToPage('last')" id="lastPageBtn">尾页</button>
|
||
|
|
<span class="page-info">共 50 条</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 搜索功能
|
||
|
|
function searchBooths() {
|
||
|
|
const boothName = document.getElementById('searchBoothName').value;
|
||
|
|
const status = document.getElementById('searchStatus').value;
|
||
|
|
|
||
|
|
console.log('搜索条件:', {
|
||
|
|
boothName,
|
||
|
|
status
|
||
|
|
});
|
||
|
|
|
||
|
|
// 这里应该调用后端API进行搜索
|
||
|
|
alert('搜索功能待实现\n摊位名称: ' + boothName + '\n营业状态: ' + status);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 跳转到创建摊位页面
|
||
|
|
function goToCreateBooth() {
|
||
|
|
window.location.href = '摊位创建.html';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查看摊位详情
|
||
|
|
function viewBoothDetail(button) {
|
||
|
|
const row = button.closest('tr');
|
||
|
|
const cells = row.querySelectorAll('td');
|
||
|
|
const boothData = {
|
||
|
|
name: cells[0].textContent,
|
||
|
|
category: cells[1].textContent,
|
||
|
|
beneficiaryName: cells[2].textContent,
|
||
|
|
beneficiaryPhone: cells[3].textContent,
|
||
|
|
status: cells[4].textContent
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log('查看摊位详情:', boothData);
|
||
|
|
alert('查看摊位详情: ' + boothData.name);
|
||
|
|
// 实际应该跳转到详情页面或打开模态框
|
||
|
|
}
|
||
|
|
|
||
|
|
// 编辑摊位
|
||
|
|
function editBooth(button) {
|
||
|
|
const row = button.closest('tr');
|
||
|
|
const cells = row.querySelectorAll('td');
|
||
|
|
const boothName = cells[0].textContent;
|
||
|
|
|
||
|
|
console.log('编辑摊位:', boothName);
|
||
|
|
// 跳转到摊位创建页面,传递编辑标识
|
||
|
|
window.location.href = '摊位创建.html?mode=edit&id=xxx';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除摊位
|
||
|
|
function deleteBooth(button) {
|
||
|
|
const row = button.closest('tr');
|
||
|
|
const cells = row.querySelectorAll('td');
|
||
|
|
const boothName = cells[0].textContent;
|
||
|
|
|
||
|
|
if (confirm('确定要删除摊位"' + boothName + '"吗?')) {
|
||
|
|
console.log('删除摊位:', boothName);
|
||
|
|
// 这里应该调用后端API删除摊位
|
||
|
|
alert('删除成功');
|
||
|
|
// 删除表格行
|
||
|
|
row.remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 分页功能
|
||
|
|
function goToPage(page) {
|
||
|
|
console.log('跳转到页面:', page);
|
||
|
|
|
||
|
|
// 这里应该调用后端API获取对应页面的数据
|
||
|
|
alert('跳转到页面: ' + page);
|
||
|
|
|
||
|
|
// 更新分页按钮状态
|
||
|
|
updatePaginationButtons(page);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新分页按钮状态
|
||
|
|
function updatePaginationButtons(currentPage) {
|
||
|
|
// 移除所有active类
|
||
|
|
document.querySelectorAll('.pagination button').forEach(btn => {
|
||
|
|
btn.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加active类到当前页
|
||
|
|
if (typeof currentPage === 'number') {
|
||
|
|
const buttons = document.querySelectorAll('.pagination button');
|
||
|
|
buttons.forEach(btn => {
|
||
|
|
if (btn.textContent == currentPage) {
|
||
|
|
btn.classList.add('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 回车搜索
|
||
|
|
document.getElementById('searchBoothName').addEventListener('keypress', function(e) {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
searchBooths();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|