| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  | <!DOCTYPE html> | 
					
						
							|  |  |  | <html lang="zh-CN"> | 
					
						
							|  |  |  | <head> | 
					
						
							|  |  |  |     <meta charset="UTF-8"> | 
					
						
							|  |  |  |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | 
					
						
							|  |  |  |     <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-bottom: 20px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 头部标题 */ | 
					
						
							|  |  |  |         .header { | 
					
						
							|  |  |  |             position: sticky; | 
					
						
							|  |  |  |             top: 0; | 
					
						
							|  |  |  |             background: linear-gradient(135deg, #409eff, #66b1ff); | 
					
						
							|  |  |  |             color: white; | 
					
						
							|  |  |  |             padding: 15px; | 
					
						
							|  |  |  |             z-index: 100; | 
					
						
							|  |  |  |             box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .page-title { | 
					
						
							|  |  |  |             font-size: 18px; | 
					
						
							|  |  |  |             font-weight: 500; | 
					
						
							|  |  |  |             text-align: center; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 搜索栏 */ | 
					
						
							|  |  |  |         .search-section { | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             padding: 12px; | 
					
						
							|  |  |  |             border-bottom: 1px solid #ebeef5; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .search-bar { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             gap: 8px; | 
					
						
							|  |  |  |             margin-bottom: 8px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .search-bar input, | 
					
						
							|  |  |  |         .search-bar select { | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |             padding: 10px 12px; | 
					
						
							|  |  |  |             border: 1px solid #dcdfe6; | 
					
						
							|  |  |  |             border-radius: 6px; | 
					
						
							|  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |             outline: none; | 
					
						
							|  |  |  |             background: #f5f7fa; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .search-bar input:focus, | 
					
						
							|  |  |  |         .search-bar select:focus { | 
					
						
							|  |  |  |             border-color: #409eff; | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .search-actions { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             gap: 8px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn { | 
					
						
							|  |  |  |             padding: 10px 20px; | 
					
						
							|  |  |  |             border: none; | 
					
						
							|  |  |  |             border-radius: 6px; | 
					
						
							|  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |             transition: all 0.3s; | 
					
						
							|  |  |  |             font-weight: 500; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-primary { | 
					
						
							|  |  |  |             background: linear-gradient(135deg, #409eff, #66b1ff); | 
					
						
							|  |  |  |             color: white; | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-primary:active { | 
					
						
							|  |  |  |             transform: scale(0.98); | 
					
						
							|  |  |  |             opacity: 0.9; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-success { | 
					
						
							|  |  |  |             background: linear-gradient(135deg, #67c23a, #85ce61); | 
					
						
							|  |  |  |             color: white; | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-success:active { | 
					
						
							|  |  |  |             transform: scale(0.98); | 
					
						
							|  |  |  |             opacity: 0.9; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-invite { | 
					
						
							|  |  |  |             background: linear-gradient(135deg, #e6a23c, #ebb563); | 
					
						
							|  |  |  |             color: white; | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-invite:active { | 
					
						
							|  |  |  |             transform: scale(0.98); | 
					
						
							|  |  |  |             opacity: 0.9; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 摊位卡片列表 */ | 
					
						
							|  |  |  |         .booth-list { | 
					
						
							|  |  |  |             padding: 12px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-card { | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             border-radius: 12px; | 
					
						
							|  |  |  |             padding: 15px; | 
					
						
							|  |  |  |             margin-bottom: 12px; | 
					
						
							|  |  |  |             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | 
					
						
							|  |  |  |             transition: all 0.3s; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-card:active { | 
					
						
							|  |  |  |             transform: scale(0.99); | 
					
						
							|  |  |  |             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-header { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             justify-content: space-between; | 
					
						
							|  |  |  |             align-items: center; | 
					
						
							|  |  |  |             margin-bottom: 12px; | 
					
						
							|  |  |  |             padding-bottom: 12px; | 
					
						
							|  |  |  |             border-bottom: 1px solid #f0f0f0; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-name { | 
					
						
							|  |  |  |             font-size: 16px; | 
					
						
							|  |  |  |             font-weight: 600; | 
					
						
							|  |  |  |             color: #303133; | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-status { | 
					
						
							|  |  |  |             padding: 4px 12px; | 
					
						
							|  |  |  |             border-radius: 12px; | 
					
						
							|  |  |  |             font-size: 12px; | 
					
						
							|  |  |  |             font-weight: 500; | 
					
						
							|  |  |  |             white-space: nowrap; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .status-open { | 
					
						
							|  |  |  |             background: #f0f9ff; | 
					
						
							|  |  |  |             color: #67c23a; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .status-closed { | 
					
						
							|  |  |  |             background: #f4f4f5; | 
					
						
							|  |  |  |             color: #909399; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-info { | 
					
						
							|  |  |  |             margin-bottom: 12px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .info-row { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             padding: 6px 0; | 
					
						
							|  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .info-label { | 
					
						
							|  |  |  |             color: #909399; | 
					
						
							|  |  |  |             width: 100px; | 
					
						
							|  |  |  |             flex-shrink: 0; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .info-value { | 
					
						
							|  |  |  |             color: #606266; | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .booth-actions { | 
					
						
							|  |  |  |             display: grid; | 
					
						
							|  |  |  |             grid-template-columns: repeat(2, 1fr); | 
					
						
							|  |  |  |             gap: 8px; | 
					
						
							|  |  |  |             margin-top: 12px; | 
					
						
							|  |  |  |             padding-top: 12px; | 
					
						
							|  |  |  |             border-top: 1px solid #f0f0f0; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .action-btn { | 
					
						
							|  |  |  |             padding: 8px 12px; | 
					
						
							|  |  |  |             border: none; | 
					
						
							|  |  |  |             border-radius: 6px; | 
					
						
							|  |  |  |             font-size: 13px; | 
					
						
							|  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |             transition: all 0.2s; | 
					
						
							|  |  |  |             font-weight: 500; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .action-btn:active { | 
					
						
							|  |  |  |             transform: scale(0.96); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-detail { | 
					
						
							|  |  |  |             background: #ecf5ff; | 
					
						
							|  |  |  |             color: #409eff; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-edit { | 
					
						
							|  |  |  |             background: #fdf6ec; | 
					
						
							|  |  |  |             color: #e6a23c; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-config { | 
					
						
							|  |  |  |             background: #f0f9ff; | 
					
						
							|  |  |  |             color: #409eff; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-delete { | 
					
						
							|  |  |  |             background: #fef0f0; | 
					
						
							|  |  |  |             color: #f56c6c; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 空状态 */ | 
					
						
							|  |  |  |         .empty-state { | 
					
						
							|  |  |  |             text-align: center; | 
					
						
							|  |  |  |             padding: 60px 20px; | 
					
						
							|  |  |  |             color: #909399; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .empty-icon { | 
					
						
							|  |  |  |             font-size: 48px; | 
					
						
							|  |  |  |             margin-bottom: 12px; | 
					
						
							|  |  |  |             opacity: 0.5; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 弹窗 */ | 
					
						
							|  |  |  |         .modal { | 
					
						
							|  |  |  |             display: none; | 
					
						
							|  |  |  |             position: fixed; | 
					
						
							|  |  |  |             z-index: 1000; | 
					
						
							|  |  |  |             left: 0; | 
					
						
							|  |  |  |             top: 0; | 
					
						
							|  |  |  |             width: 100%; | 
					
						
							|  |  |  |             height: 100%; | 
					
						
							|  |  |  |             background-color: rgba(0, 0, 0, 0.5); | 
					
						
							|  |  |  |             animation: fadeIn 0.3s; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         @keyframes fadeIn { | 
					
						
							|  |  |  |             from { opacity: 0; } | 
					
						
							|  |  |  |             to { opacity: 1; } | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         @keyframes slideUp { | 
					
						
							|  |  |  |             from { transform: translateY(100%); } | 
					
						
							|  |  |  |             to { transform: translateY(0); } | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal.show { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             align-items: flex-end; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-content { | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             width: 100%; | 
					
						
							|  |  |  |             max-height: 80vh; | 
					
						
							|  |  |  |             border-radius: 16px 16px 0 0; | 
					
						
							|  |  |  |             animation: slideUp 0.3s; | 
					
						
							|  |  |  |             overflow-y: auto; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-header { | 
					
						
							|  |  |  |             position: sticky; | 
					
						
							|  |  |  |             top: 0; | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             padding: 16px; | 
					
						
							|  |  |  |             border-bottom: 1px solid #ebeef5; | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             justify-content: space-between; | 
					
						
							|  |  |  |             align-items: center; | 
					
						
							|  |  |  |             border-radius: 16px 16px 0 0; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-title { | 
					
						
							|  |  |  |             font-size: 17px; | 
					
						
							|  |  |  |             color: #303133; | 
					
						
							|  |  |  |             font-weight: 600; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-close { | 
					
						
							|  |  |  |             background: #f5f7fa; | 
					
						
							|  |  |  |             border: none; | 
					
						
							|  |  |  |             width: 32px; | 
					
						
							|  |  |  |             height: 32px; | 
					
						
							|  |  |  |             border-radius: 50%; | 
					
						
							|  |  |  |             font-size: 20px; | 
					
						
							|  |  |  |             color: #909399; | 
					
						
							|  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             align-items: center; | 
					
						
							|  |  |  |             justify-content: center; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-close:active { | 
					
						
							|  |  |  |             transform: scale(0.9); | 
					
						
							|  |  |  |             background: #e4e7ed; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-body { | 
					
						
							|  |  |  |             padding: 16px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-footer { | 
					
						
							|  |  |  |             position: sticky; | 
					
						
							|  |  |  |             bottom: 0; | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             padding: 12px 16px; | 
					
						
							|  |  |  |             border-top: 1px solid #ebeef5; | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             gap: 10px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .modal-footer .btn { | 
					
						
							|  |  |  |             flex: 1; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-cancel { | 
					
						
							|  |  |  |             background: #f5f7fa; | 
					
						
							|  |  |  |             color: #606266; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-confirm { | 
					
						
							|  |  |  |             background: linear-gradient(135deg, #1a5c3a, #2d7a4f); | 
					
						
							|  |  |  |             color: white; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .btn-confirm:active { | 
					
						
							|  |  |  |             transform: scale(0.98); | 
					
						
							|  |  |  |             opacity: 0.9; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 表单 */ | 
					
						
							|  |  |  |         .form-group { | 
					
						
							|  |  |  |             margin-bottom: 16px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .form-label { | 
					
						
							|  |  |  |             display: block; | 
					
						
							|  |  |  |             color: #606266; | 
					
						
							|  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |             margin-bottom: 8px; | 
					
						
							|  |  |  |             font-weight: 500; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .form-label.required::before { | 
					
						
							|  |  |  |             content: "*"; | 
					
						
							|  |  |  |             color: #f56c6c; | 
					
						
							|  |  |  |             margin-right: 4px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .form-input, | 
					
						
							|  |  |  |         .form-select { | 
					
						
							|  |  |  |             width: 100%; | 
					
						
							|  |  |  |             padding: 12px; | 
					
						
							|  |  |  |             border: 1px solid #dcdfe6; | 
					
						
							|  |  |  |             border-radius: 8px; | 
					
						
							|  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |             outline: none; | 
					
						
							|  |  |  |             background: #f5f7fa; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .form-input:focus, | 
					
						
							|  |  |  |         .form-select:focus { | 
					
						
							|  |  |  |             border-color: #409eff; | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 权限配置样式 */ | 
					
						
							|  |  |  |         .permission-section { | 
					
						
							|  |  |  |             background: #f9fafc; | 
					
						
							|  |  |  |             padding: 12px; | 
					
						
							|  |  |  |             border-radius: 8px; | 
					
						
							|  |  |  |             border: 1px solid #ebeef5; | 
					
						
							|  |  |  |             margin-top: 15px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .permission-all { | 
					
						
							|  |  |  |             padding: 12px; | 
					
						
							|  |  |  |             background: white; | 
					
						
							|  |  |  |             border-radius: 8px; | 
					
						
							|  |  |  |             margin-bottom: 12px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .permission-sub-items { | 
					
						
							|  |  |  |             display: flex; | 
					
						
							|  |  |  |             flex-direction: column; | 
					
						
							|  |  |  |             gap: 8px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .permission-sub-items .checkbox-option { | 
					
						
							|  |  |  |             padding-left: 30px; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         /* 加载动画 */ | 
					
						
							|  |  |  |         .loading { | 
					
						
							|  |  |  |             text-align: center; | 
					
						
							|  |  |  |             padding: 20px; | 
					
						
							|  |  |  |             color: #909399; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         .loading-spinner { | 
					
						
							|  |  |  |             display: inline-block; | 
					
						
							|  |  |  |             width: 24px; | 
					
						
							|  |  |  |             height: 24px; | 
					
						
							|  |  |  |             border: 3px solid #f3f3f3; | 
					
						
							|  |  |  |             border-top: 3px solid #409eff; | 
					
						
							|  |  |  |             border-radius: 50%; | 
					
						
							|  |  |  |             animation: spin 1s linear infinite; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         @keyframes spin { | 
					
						
							|  |  |  |             0% { transform: rotate(0deg); } | 
					
						
							|  |  |  |             100% { transform: rotate(360deg); } | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |     </style> | 
					
						
							|  |  |  | </head> | 
					
						
							|  |  |  | <body> | 
					
						
							|  |  |  |     <!-- 头部 --> | 
					
						
							|  |  |  |     <div class="header"> | 
					
						
							|  |  |  |         <h1 class="page-title">摊位列表</h1> | 
					
						
							|  |  |  |     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <!-- 搜索区域 --> | 
					
						
							|  |  |  |     <div class="search-section"> | 
					
						
							|  |  |  |         <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> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  |         <div class="search-actions"> | 
					
						
							|  |  |  |             <button class="btn btn-primary" onclick="searchBooths()">搜索</button> | 
					
						
							|  |  |  |             <button class="btn btn-success" onclick="goToCreateBooth()">新增摊位</button> | 
					
						
							|  |  |  |             <button class="btn btn-invite" onclick="openInviteModal()">邀请摊主</button> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  |     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <!-- 摊位列表 --> | 
					
						
							|  |  |  |     <div class="booth-list" id="boothList"> | 
					
						
							|  |  |  |         <!-- 示例数据 --> | 
					
						
							|  |  |  |         <div class="booth-card"> | 
					
						
							|  |  |  |             <div class="booth-header"> | 
					
						
							|  |  |  |                 <div class="booth-name">张记海鲜</div> | 
					
						
							|  |  |  |                 <div class="booth-status status-open">营业中</div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-info"> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">主营类目</div> | 
					
						
							|  |  |  |                     <div class="info-value">海鲜水产</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人账号</div> | 
					
						
							|  |  |  |                     <div class="info-value">张三</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人手机</div> | 
					
						
							|  |  |  |                     <div class="info-value">13800138000</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-actions"> | 
					
						
							|  |  |  |                 <button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         <div class="booth-card"> | 
					
						
							|  |  |  |             <div class="booth-header"> | 
					
						
							|  |  |  |                 <div class="booth-name">李氏鲜肉</div> | 
					
						
							|  |  |  |                 <div class="booth-status status-open">营业中</div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-info"> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">主营类目</div> | 
					
						
							|  |  |  |                     <div class="info-value">肉禽蛋</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人账号</div> | 
					
						
							|  |  |  |                     <div class="info-value">李四</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人手机</div> | 
					
						
							|  |  |  |                     <div class="info-value">13900139000</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-actions"> | 
					
						
							|  |  |  |                 <button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         <div class="booth-card"> | 
					
						
							|  |  |  |             <div class="booth-header"> | 
					
						
							|  |  |  |                 <div class="booth-name">王家蔬菜</div> | 
					
						
							|  |  |  |                 <div class="booth-status status-closed">休息中</div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-info"> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">主营类目</div> | 
					
						
							|  |  |  |                     <div class="info-value">蔬菜</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人账号</div> | 
					
						
							|  |  |  |                     <div class="info-value">王五</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人手机</div> | 
					
						
							|  |  |  |                     <div class="info-value">13700137000</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-actions"> | 
					
						
							|  |  |  |                 <button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         <div class="booth-card"> | 
					
						
							|  |  |  |             <div class="booth-header"> | 
					
						
							|  |  |  |                 <div class="booth-name">赵姐水果摊</div> | 
					
						
							|  |  |  |                 <div class="booth-status status-open">营业中</div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-info"> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">主营类目</div> | 
					
						
							|  |  |  |                     <div class="info-value">水果</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人账号</div> | 
					
						
							|  |  |  |                     <div class="info-value">赵六</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人手机</div> | 
					
						
							|  |  |  |                     <div class="info-value">13600136000</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-actions"> | 
					
						
							|  |  |  |                 <button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         <div class="booth-card"> | 
					
						
							|  |  |  |             <div class="booth-header"> | 
					
						
							|  |  |  |                 <div class="booth-name">孙氏粮油</div> | 
					
						
							|  |  |  |                 <div class="booth-status status-closed">休息中</div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-info"> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">主营类目</div> | 
					
						
							|  |  |  |                     <div class="info-value">粮油调味</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人账号</div> | 
					
						
							|  |  |  |                     <div class="info-value">孙七</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |                 <div class="info-row"> | 
					
						
							|  |  |  |                     <div class="info-label">收益人手机</div> | 
					
						
							|  |  |  |                     <div class="info-value">13500135000</div> | 
					
						
							|  |  |  |                 </div> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="booth-actions"> | 
					
						
							|  |  |  |                 <button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button> | 
					
						
							|  |  |  |                 <button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button> | 
					
						
							|  |  |  |             </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()">×</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> | 
					
						
							|  |  |  |                             <option value="bind_existing_supplier">绑定已存在的供货商账号</option> | 
					
						
							|  |  |  |                         </select> | 
					
						
							|  |  |  |                     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                     <div class="form-group" id="modalSupplierAccountGroup" style="display: none;"> | 
					
						
							|  |  |  |                         <label class="form-label required">供货商手机号</label> | 
					
						
							|  |  |  |                         <input type="tel" class="form-input" id="modalSupplierAccount" placeholder="请输入供货商手机号" maxlength="11"> | 
					
						
							|  |  |  |                     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                     <div class="form-group" id="modalSupplierNameGroup" style="display: none;"> | 
					
						
							|  |  |  |                         <label class="form-label required">供货商账号名称</label> | 
					
						
							|  |  |  |                         <input type="text" class="form-input" id="modalSupplierName" placeholder="请输入供货商账号名称"> | 
					
						
							|  |  |  |                     </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> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <!-- 邀请摊主弹窗 --> | 
					
						
							|  |  |  |     <div id="inviteModal" class="modal"> | 
					
						
							|  |  |  |         <div class="modal-content"> | 
					
						
							|  |  |  |             <div class="modal-header"> | 
					
						
							|  |  |  |                 <h3 class="modal-title">邀请摊主入驻</h3> | 
					
						
							|  |  |  |                 <button class="modal-close" onclick="closeInviteModal()">×</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="modal-body"> | 
					
						
							|  |  |  |                 <form id="inviteForm"> | 
					
						
							|  |  |  |                     <div class="form-group"> | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |                         <label class="form-label required">操作类型</label> | 
					
						
							|  |  |  |                         <select class="form-select" id="inviteOperationType" onchange="handleInviteOperationTypeChange()"> | 
					
						
							|  |  |  |                             <option value="">请选择操作类型</option> | 
					
						
							|  |  |  |                             <option value="bind_market_manager">绑定收益人是市场经营者</option> | 
					
						
							|  |  |  |                             <option value="create_supplier">创建新收益人(供货商)</option> | 
					
						
							|  |  |  |                             <option value="bind_existing_supplier">绑定已存在的供货商账号</option> | 
					
						
							|  |  |  |                         </select> | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |                     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |                     <div class="form-group" id="inviteSupplierAccountGroup" style="display: none;"> | 
					
						
							|  |  |  |                         <label class="form-label required">供货商手机号</label> | 
					
						
							|  |  |  |                         <input type="tel" class="form-input" id="inviteSupplierAccount" placeholder="请输入供货商手机号" maxlength="11"> | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |                     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |                     <div class="form-group" id="inviteSupplierNameGroup" style="display: none;"> | 
					
						
							|  |  |  |                         <label class="form-label required">供货商账号名称</label> | 
					
						
							|  |  |  |                         <input type="text" class="form-input" id="inviteSupplierName" placeholder="请输入供货商账号名称"> | 
					
						
							|  |  |  |                     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                     <div class="form-group" id="inviteSupplierPasswordGroup" style="display: none;"> | 
					
						
							|  |  |  |                         <label class="form-label required">密码</label> | 
					
						
							|  |  |  |                         <input type="password" class="form-input" id="invitePassword" placeholder="请输入密码"> | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |                     </div> | 
					
						
							|  |  |  |                 </form> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |             <div class="modal-footer"> | 
					
						
							|  |  |  |                 <button class="btn btn-cancel" onclick="closeInviteModal()">取消</button> | 
					
						
							|  |  |  |                 <button class="btn btn-confirm" onclick="submitInvite()">确定</button> | 
					
						
							|  |  |  |             </div> | 
					
						
							|  |  |  |         </div> | 
					
						
							|  |  |  |     </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <script> | 
					
						
							|  |  |  |         // 搜索功能 | 
					
						
							|  |  |  |         function searchBooths() { | 
					
						
							|  |  |  |             const boothName = document.getElementById('searchBoothName').value; | 
					
						
							|  |  |  |             const status = document.getElementById('searchStatus').value; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             console.log('搜索条件:', { boothName, status }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // TODO: 调用后端API进行搜索 | 
					
						
							|  |  |  |             alert('搜索功能\n摊位名称: ' + (boothName || '全部') + '\n营业状态: ' + (status || '全部')); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 跳转到创建摊位页面 | 
					
						
							|  |  |  |         function goToCreateBooth() { | 
					
						
							|  |  |  |             console.log('跳转到创建摊位页面'); | 
					
						
							|  |  |  |             window.location.href = '移动端摊位创建.html'; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 查看摊位详情 | 
					
						
							|  |  |  |         function viewBoothDetail(button) { | 
					
						
							|  |  |  |             const card = button.closest('.booth-card'); | 
					
						
							|  |  |  |             const boothName = card.querySelector('.booth-name').textContent; | 
					
						
							|  |  |  |             const category = card.querySelectorAll('.info-value')[0].textContent; | 
					
						
							|  |  |  |             const beneficiaryName = card.querySelectorAll('.info-value')[1].textContent; | 
					
						
							|  |  |  |             const beneficiaryPhone = card.querySelectorAll('.info-value')[2].textContent; | 
					
						
							|  |  |  |             const status = card.querySelector('.booth-status').textContent; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             const boothData = { | 
					
						
							|  |  |  |                 name: boothName, | 
					
						
							|  |  |  |                 category, | 
					
						
							|  |  |  |                 beneficiaryName, | 
					
						
							|  |  |  |                 beneficiaryPhone, | 
					
						
							|  |  |  |                 status | 
					
						
							|  |  |  |             }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             console.log('查看摊位详情:', boothData); | 
					
						
							|  |  |  |             alert('查看摊位详情\n摊位名称: ' + boothData.name); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 编辑摊位 | 
					
						
							|  |  |  |         function editBooth(button) { | 
					
						
							|  |  |  |             const card = button.closest('.booth-card'); | 
					
						
							|  |  |  |             const boothName = card.querySelector('.booth-name').textContent; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             console.log('编辑摊位:', boothName); | 
					
						
							|  |  |  |             // 跳转到摊位创建页面,传递编辑模式参数 | 
					
						
							|  |  |  |             window.location.href = '移动端摊位创建.html?mode=edit&id=xxx'; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 删除摊位 | 
					
						
							|  |  |  |         function deleteBooth(button) { | 
					
						
							|  |  |  |             const card = button.closest('.booth-card'); | 
					
						
							|  |  |  |             const boothName = card.querySelector('.booth-name').textContent; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             if (confirm('确定要删除摊位"' + boothName + '"吗?')) { | 
					
						
							|  |  |  |                 console.log('删除摊位:', boothName); | 
					
						
							|  |  |  |                 // TODO: 调用后端API删除摊位 | 
					
						
							|  |  |  |                 card.style.animation = 'fadeOut 0.3s'; | 
					
						
							|  |  |  |                 setTimeout(() => card.remove(), 300); | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 配置收益人 - 打开弹窗 | 
					
						
							|  |  |  |         let currentBoothCard = null; | 
					
						
							|  |  |  |         function configureBeneficiary(button) { | 
					
						
							|  |  |  |             const card = button.closest('.booth-card'); | 
					
						
							|  |  |  |             currentBoothCard = card; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // 重置表单 | 
					
						
							|  |  |  |             document.getElementById('modalOperationType').value = ''; | 
					
						
							|  |  |  |             document.getElementById('modalSupplierAccount').value = ''; | 
					
						
							|  |  |  |             document.getElementById('modalSupplierName').value = ''; | 
					
						
							|  |  |  |             document.getElementById('modalPassword').value = ''; | 
					
						
							|  |  |  |             document.getElementById('modalSupplierAccountGroup').style.display = 'none'; | 
					
						
							|  |  |  |             document.getElementById('modalSupplierNameGroup').style.display = 'none'; | 
					
						
							|  |  |  |             document.getElementById('modalSupplierPasswordGroup').style.display = 'none'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // 显示弹窗 | 
					
						
							|  |  |  |             document.getElementById('beneficiaryModal').classList.add('show'); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 关闭弹窗 | 
					
						
							|  |  |  |         function closeBeneficiaryModal() { | 
					
						
							|  |  |  |             document.getElementById('beneficiaryModal').classList.remove('show'); | 
					
						
							|  |  |  |             currentBoothCard = null; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 处理弹窗中的操作类型变化 | 
					
						
							|  |  |  |         function handleModalOperationTypeChange() { | 
					
						
							|  |  |  |             const operationType = document.getElementById('modalOperationType').value; | 
					
						
							|  |  |  |             const supplierAccountGroup = document.getElementById('modalSupplierAccountGroup'); | 
					
						
							|  |  |  |             const supplierNameGroup = document.getElementById('modalSupplierNameGroup'); | 
					
						
							|  |  |  |             const supplierPasswordGroup = document.getElementById('modalSupplierPasswordGroup'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             if (operationType === 'create_supplier') { | 
					
						
							|  |  |  |                 // 创建新收益人 - 显示手机号、账号名称和密码 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierNameGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierPasswordGroup.style.display = 'block'; | 
					
						
							|  |  |  |             } else if (operationType === 'bind_existing_supplier') { | 
					
						
							|  |  |  |                 // 绑定已存在的供货商 - 只显示手机号 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierNameGroup.style.display = 'none'; | 
					
						
							|  |  |  |                 supplierPasswordGroup.style.display = 'none'; | 
					
						
							|  |  |  |             } else { | 
					
						
							|  |  |  |                 // 绑定市场经营者 - 隐藏所有 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'none'; | 
					
						
							|  |  |  |                 supplierNameGroup.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 supplierName = document.getElementById('modalSupplierName').value; | 
					
						
							|  |  |  |                 const password = document.getElementById('modalPassword').value; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierAccount) { | 
					
						
							|  |  |  |                     alert('请输入供货商手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!/^1[3-9]\d{9}$/.test(supplierAccount)) { | 
					
						
							|  |  |  |                     alert('请输入正确的手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierName) { | 
					
						
							|  |  |  |                     alert('请输入供货商账号名称'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!password) { | 
					
						
							|  |  |  |                     alert('请输入密码'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 beneficiaryData.supplierAccount = supplierAccount; | 
					
						
							|  |  |  |                 beneficiaryData.supplierName = supplierName; | 
					
						
							|  |  |  |                 beneficiaryData.password = password; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |             // 绑定已存在的供货商 | 
					
						
							|  |  |  |             else if (operationType === 'bind_existing_supplier') { | 
					
						
							|  |  |  |                 const supplierAccount = document.getElementById('modalSupplierAccount').value; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierAccount) { | 
					
						
							|  |  |  |                     alert('请输入供货商手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!/^1[3-9]\d{9}$/.test(supplierAccount)) { | 
					
						
							|  |  |  |                     alert('请输入正确的手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 beneficiaryData.supplierAccount = supplierAccount; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             console.log('保存收益人配置:', beneficiaryData); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // TODO: 调用后端API保存收益人配置 | 
					
						
							|  |  |  |             alert('收益人配置已保存!'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // 关闭弹窗 | 
					
						
							|  |  |  |             closeBeneficiaryModal(); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 点击弹窗外部区域关闭弹窗 | 
					
						
							|  |  |  |         document.getElementById('beneficiaryModal').addEventListener('click', function(e) { | 
					
						
							|  |  |  |             if (e.target === this) { | 
					
						
							|  |  |  |                 closeBeneficiaryModal(); | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         document.getElementById('inviteModal').addEventListener('click', function(e) { | 
					
						
							|  |  |  |             if (e.target === this) { | 
					
						
							|  |  |  |                 closeInviteModal(); | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 回车搜索 | 
					
						
							|  |  |  |         document.getElementById('searchBoothName').addEventListener('keypress', function(e) { | 
					
						
							|  |  |  |             if (e.key === 'Enter') { | 
					
						
							|  |  |  |                 searchBooths(); | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 邀请摊主 - 打开弹窗 | 
					
						
							|  |  |  |         function openInviteModal() { | 
					
						
							|  |  |  |             // 重置表单 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |             document.getElementById('inviteOperationType').value = ''; | 
					
						
							|  |  |  |             document.getElementById('inviteSupplierAccount').value = ''; | 
					
						
							|  |  |  |             document.getElementById('inviteSupplierName').value = ''; | 
					
						
							|  |  |  |             document.getElementById('invitePassword').value = ''; | 
					
						
							|  |  |  |             document.getElementById('inviteSupplierAccountGroup').style.display = 'none'; | 
					
						
							|  |  |  |             document.getElementById('inviteSupplierNameGroup').style.display = 'none'; | 
					
						
							|  |  |  |             document.getElementById('inviteSupplierPasswordGroup').style.display = 'none'; | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |             // 显示弹窗 | 
					
						
							|  |  |  |             document.getElementById('inviteModal').classList.add('show'); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 关闭邀请摊主弹窗 | 
					
						
							|  |  |  |         function closeInviteModal() { | 
					
						
							|  |  |  |             document.getElementById('inviteModal').classList.remove('show'); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |         // 处理邀请弹窗中的操作类型变化 | 
					
						
							|  |  |  |         function handleInviteOperationTypeChange() { | 
					
						
							|  |  |  |             const operationType = document.getElementById('inviteOperationType').value; | 
					
						
							|  |  |  |             const supplierAccountGroup = document.getElementById('inviteSupplierAccountGroup'); | 
					
						
							|  |  |  |             const supplierNameGroup = document.getElementById('inviteSupplierNameGroup'); | 
					
						
							|  |  |  |             const supplierPasswordGroup = document.getElementById('inviteSupplierPasswordGroup'); | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |             if (operationType === 'create_supplier') { | 
					
						
							|  |  |  |                 // 创建新收益人 - 显示手机号、账号名称和密码 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierNameGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierPasswordGroup.style.display = 'block'; | 
					
						
							|  |  |  |             } else if (operationType === 'bind_existing_supplier') { | 
					
						
							|  |  |  |                 // 绑定已存在的供货商 - 只显示手机号 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'block'; | 
					
						
							|  |  |  |                 supplierNameGroup.style.display = 'none'; | 
					
						
							|  |  |  |                 supplierPasswordGroup.style.display = 'none'; | 
					
						
							|  |  |  |             } else { | 
					
						
							|  |  |  |                 // 绑定市场经营者 - 隐藏所有 | 
					
						
							|  |  |  |                 supplierAccountGroup.style.display = 'none'; | 
					
						
							|  |  |  |                 supplierNameGroup.style.display = 'none'; | 
					
						
							|  |  |  |                 supplierPasswordGroup.style.display = 'none'; | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |             } | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |         } | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |         // 提交邀请 | 
					
						
							|  |  |  |         function submitInvite() { | 
					
						
							|  |  |  |             const operationType = document.getElementById('inviteOperationType').value; | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |             if (!operationType) { | 
					
						
							|  |  |  |                 alert('请选择操作类型'); | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |                 return; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             const inviteData = { | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |                 operationType: operationType | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |             }; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-25 03:08:23 +00:00
										 |  |  |             // 创建新收益人 | 
					
						
							|  |  |  |             if (operationType === 'create_supplier') { | 
					
						
							|  |  |  |                 const supplierAccount = document.getElementById('inviteSupplierAccount').value; | 
					
						
							|  |  |  |                 const supplierName = document.getElementById('inviteSupplierName').value; | 
					
						
							|  |  |  |                 const password = document.getElementById('invitePassword').value; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierAccount) { | 
					
						
							|  |  |  |                     alert('请输入供货商手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!/^1[3-9]\d{9}$/.test(supplierAccount)) { | 
					
						
							|  |  |  |                     alert('请输入正确的手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierName) { | 
					
						
							|  |  |  |                     alert('请输入供货商账号名称'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!password) { | 
					
						
							|  |  |  |                     alert('请输入密码'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 inviteData.supplierAccount = supplierAccount; | 
					
						
							|  |  |  |                 inviteData.supplierName = supplierName; | 
					
						
							|  |  |  |                 inviteData.password = password; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |             // 绑定已存在的供货商 | 
					
						
							|  |  |  |             else if (operationType === 'bind_existing_supplier') { | 
					
						
							|  |  |  |                 const supplierAccount = document.getElementById('inviteSupplierAccount').value; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!supplierAccount) { | 
					
						
							|  |  |  |                     alert('请输入供货商手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 if (!/^1[3-9]\d{9}$/.test(supplierAccount)) { | 
					
						
							|  |  |  |                     alert('请输入正确的手机号'); | 
					
						
							|  |  |  |                     return; | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |                 inviteData.supplierAccount = supplierAccount; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-22 04:52:09 +00:00
										 |  |  |             console.log('邀请摊主数据:', inviteData); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // TODO: 调用后端API发送邀请 | 
					
						
							|  |  |  |             alert('邀请已发送!'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             // 关闭弹窗 | 
					
						
							|  |  |  |             closeInviteModal(); | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         // 添加淡出动画 | 
					
						
							|  |  |  |         const style = document.createElement('style'); | 
					
						
							|  |  |  |         style.textContent = ` | 
					
						
							|  |  |  |             @keyframes fadeOut { | 
					
						
							|  |  |  |                 from { opacity: 1; transform: scale(1); } | 
					
						
							|  |  |  |                 to { opacity: 0; transform: scale(0.9); } | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |         `; | 
					
						
							|  |  |  |         document.head.appendChild(style); | 
					
						
							|  |  |  |     </script> | 
					
						
							|  |  |  | </body> | 
					
						
							|  |  |  | </html> |