From db31d02151d7ce5e7b6dad34502d79f6a19e9273 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Mon, 20 Oct 2025 18:29:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=91=8A=E4=BD=8D=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E5=92=8C?=
 =?UTF-8?q?=E8=8F=9C=E5=B8=82=E5=9C=BA=E5=AE=A1=E6=A0=B8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在商家端web/index.html中添加了摊位管理菜单项，方便用户导航到摊位列表页面
- 在商家端web/摊位管理/摊位列表.html中实现了以下功能：
  * 新增配置收益人功能，包括弹窗界面和相关表单元素
  * 添加了操作类型选择下拉框，支持绑定市场经营者或创建新供货商收益人
  * 实现了表单验证逻辑，确保用户在保存前选择操作类型并填写必要信息
  * 添加了收益人配置弹窗的显示/隐藏控制和交互处理
---
 商家端web/index.html             |   9 +
 商家端web/摊位管理/摊位列表.html | 273 +++++++++++++++++++++++++++++++
 2 files changed, 282 insertions(+)

diff --git a/商家端web/index.html b/商家端web/index.html
index 259e92e..0632ed6 100644
--- a/商家端web/index.html
+++ b/商家端web/index.html
@@ -451,6 +451,15 @@
                 </div>
             </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">
                 <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
diff --git a/商家端web/摊位管理/摊位列表.html b/商家端web/摊位管理/摊位列表.html
index 8baa9a9..a631f24 100644
--- a/商家端web/摊位管理/摊位列表.html
+++ b/商家端web/摊位管理/摊位列表.html
@@ -215,6 +215,130 @@
             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>
@@ -262,6 +386,7 @@
                             <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>
@@ -276,6 +401,7 @@
                             <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>
@@ -290,6 +416,7 @@
                             <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>
@@ -304,6 +431,7 @@
                             <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>
@@ -318,6 +446,7 @@
                             <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>
@@ -341,6 +470,42 @@
         </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>
         // 搜索功能
         function searchBooths() {
@@ -439,6 +604,114 @@
                 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>