linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 新增摊位管理模块和菜市场审核功能 

- 在商家端web/index.html中添加了摊位管理菜单项，方便用户导航到摊位列表页面
- 在商家端web/摊位管理/摊位列表.html中实现了以下功能：
  * 新增配置收益人功能，包括弹窗界面和相关表单元素
  * 添加了操作类型选择下拉框，支持绑定市场经营者或创建新供货商收益人
  * 实现了表单验证逻辑，确保用户在保存前选择操作类型并填写必要信息
  * 添加了收益人配置弹窗的显示/隐藏控制和交互处理
This commit is contained in:
linbin 2025-10-20 18:29:19 +08:00
parent f6125ad566
commit db31d02151
2 changed files with 282 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
商家端web/index.html
View File

@ -451,6 +451,15 @@
</div> </div>
</li> </li>
<li class="menu-item">
<a href="#" class="menu-link" onclick="loadContent('./摊位管理/摊位列表.html', this)">
<span class="menu-icon">
<i class="fas fa-store"></i>
</span>
<span class="menu-text">摊位管理</span>
</a>
</li>
<li class="menu-item"> <li class="menu-item">
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)"> <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
<span class="menu-icon"> <span class="menu-icon">

273
商家端web/摊位管理/摊位列表.html
View File

@ -215,6 +215,130 @@
color: #606266; color: #606266;
font-size: 14px; 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> </style>
</head> </head>
<body> <body>
@ -262,6 +386,7 @@
<div class="action-buttons"> <div class="action-buttons">
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button> <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-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> <button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
</div> </div>
</td> </td>
@ -276,6 +401,7 @@
<div class="action-buttons"> <div class="action-buttons">
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button> <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-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> <button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
</div> </div>
</td> </td>
@ -290,6 +416,7 @@
<div class="action-buttons"> <div class="action-buttons">
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button> <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-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> <button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
</div> </div>
</td> </td>
@ -304,6 +431,7 @@
<div class="action-buttons"> <div class="action-buttons">
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button> <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-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> <button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
</div> </div>
</td> </td>
@ -318,6 +446,7 @@
<div class="action-buttons"> <div class="action-buttons">
<button class="btn btn-primary btn-small" onclick="viewBoothDetail(this)">详情</button> <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-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> <button class="btn btn-danger btn-small" onclick="deleteBooth(this)">删除</button>
</div> </div>
</td> </td>
@ -341,6 +470,42 @@
</div> </div>
</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()">&times;</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> <script>
// 搜索功能 // 搜索功能
function searchBooths() { function searchBooths() {
@ -439,6 +604,114 @@
searchBooths(); 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> </script>
</body> </body>
</html> </html>