718 lines
24 KiB
HTML
718 lines
24 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;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #ebeef5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
color: #303133;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: #909399;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background-color: #f5f7fa;
|
|
color: #606266;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 15px 20px;
|
|
border-top: 1px solid #ebeef5;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-label.required::before {
|
|
content: "*";
|
|
color: #f56c6c;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.form-input,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #c0c4cc;
|
|
}
|
|
|
|
.btn-text {
|
|
background-color: #909399;
|
|
color: white;
|
|
}
|
|
|
|
.btn-text:hover {
|
|
background-color: #a6a9ad;
|
|
}
|
|
</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-primary btn-small" onclick="configureBeneficiary(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-primary btn-small" onclick="configureBeneficiary(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-primary btn-small" onclick="configureBeneficiary(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-primary btn-small" onclick="configureBeneficiary(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-primary btn-small" onclick="configureBeneficiary(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>
|
|
|
|
<!-- 配置收益人弹窗 -->
|
|
<div id="beneficiaryModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">配置收益人</h3>
|
|
<button class="modal-close" onclick="closeBeneficiaryModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="beneficiaryForm">
|
|
<div class="form-group">
|
|
<label class="form-label required">操作类型</label>
|
|
<select class="form-select" id="modalOperationType" onchange="handleModalOperationTypeChange()">
|
|
<option value="">请选择操作类型</option>
|
|
<option value="bind_market_manager">绑定收益人是市场经营者</option>
|
|
<option value="create_supplier">创建新收益人(供货商)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="modalSupplierAccountGroup" style="display: none;">
|
|
<label class="form-label required">供货商账号</label>
|
|
<input type="text" class="form-input" id="modalSupplierAccount" placeholder="请输入供货商账号" maxlength="11">
|
|
</div>
|
|
|
|
<div class="form-group" id="modalSupplierPasswordGroup" style="display: none;">
|
|
<label class="form-label required">密码</label>
|
|
<input type="password" class="form-input" id="modalPassword" placeholder="请输入密码">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-cancel" onclick="closeBeneficiaryModal()">取消</button>
|
|
<button class="btn btn-primary" onclick="saveBeneficiary()">保存</button>
|
|
</div>
|
|
</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();
|
|
}
|
|
});
|
|
|
|
// 配置收益人 - 打开弹窗
|
|
let currentBoothRow = null;
|
|
function configureBeneficiary(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
|
|
};
|
|
|
|
currentBoothRow = row;
|
|
|
|
console.log('配置收益人:', boothData);
|
|
|
|
// 重置表单
|
|
document.getElementById('modalOperationType').value = '';
|
|
document.getElementById('modalSupplierAccount').value = '';
|
|
document.getElementById('modalPassword').value = '';
|
|
document.getElementById('modalSupplierAccountGroup').style.display = 'none';
|
|
document.getElementById('modalSupplierPasswordGroup').style.display = 'none';
|
|
|
|
// 显示弹窗
|
|
document.getElementById('beneficiaryModal').classList.add('show');
|
|
}
|
|
|
|
// 关闭弹窗
|
|
function closeBeneficiaryModal() {
|
|
document.getElementById('beneficiaryModal').classList.remove('show');
|
|
currentBoothRow = null;
|
|
}
|
|
|
|
// 处理弹窗中的操作类型变化
|
|
function handleModalOperationTypeChange() {
|
|
const operationType = document.getElementById('modalOperationType').value;
|
|
const supplierAccountGroup = document.getElementById('modalSupplierAccountGroup');
|
|
const supplierPasswordGroup = document.getElementById('modalSupplierPasswordGroup');
|
|
|
|
// 根据选择的操作类型显示或隐藏供货商账号和密码字段
|
|
if (operationType === 'create_supplier') {
|
|
// 创建新收益人(供货商) - 显示账号和密码
|
|
supplierAccountGroup.style.display = 'block';
|
|
supplierPasswordGroup.style.display = 'block';
|
|
} else {
|
|
// 绑定收益人是市场经营者 - 隐藏账号和密码
|
|
supplierAccountGroup.style.display = 'none';
|
|
supplierPasswordGroup.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// 保存收益人配置
|
|
function saveBeneficiary() {
|
|
const operationType = document.getElementById('modalOperationType').value;
|
|
|
|
// 验证操作类型
|
|
if (!operationType) {
|
|
alert('请选择操作类型');
|
|
return;
|
|
}
|
|
|
|
const beneficiaryData = {
|
|
operationType: operationType
|
|
};
|
|
|
|
// 如果选择了"创建新收益人(供货商)",需要验证供货商账号和密码
|
|
if (operationType === 'create_supplier') {
|
|
const supplierAccount = document.getElementById('modalSupplierAccount').value;
|
|
const password = document.getElementById('modalPassword').value;
|
|
|
|
if (!supplierAccount) {
|
|
alert('请输入供货商账号');
|
|
return;
|
|
}
|
|
|
|
if (!password) {
|
|
alert('请输入密码');
|
|
return;
|
|
}
|
|
|
|
beneficiaryData.supplierAccount = supplierAccount;
|
|
beneficiaryData.password = password;
|
|
}
|
|
|
|
console.log('保存收益人配置:', beneficiaryData);
|
|
|
|
// 这里应该调用后端API保存收益人配置
|
|
alert('收益人配置已保存!');
|
|
|
|
// 可选:更新表格中的收益人信息
|
|
if (currentBoothRow && operationType === 'create_supplier') {
|
|
const cells = currentBoothRow.querySelectorAll('td');
|
|
// cells[2].textContent = '新收益人'; // 可以根据实际需求更新
|
|
// cells[3].textContent = beneficiaryData.supplierAccount;
|
|
}
|
|
|
|
// 关闭弹窗
|
|
closeBeneficiaryModal();
|
|
}
|
|
|
|
// 点击弹窗外部区域关闭弹窗
|
|
document.getElementById('beneficiaryModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeBeneficiaryModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|