1114 lines
		
	
	
		
			43 KiB
		
	
	
	
		
			HTML
		
	
	
	
		
		
			
		
	
	
			1114 lines
		
	
	
		
			43 KiB
		
	
	
	
		
			HTML
		
	
	
	
|  | <!DOCTYPE html> | |||
|  | <html lang="zh-CN"> | |||
|  | <head> | |||
|  |     <meta charset="UTF-8"> | |||
|  |     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
|  |     <title>菜市场管理</title> | |||
|  |     <style> | |||
|  |         * { | |||
|  |             margin: 0; | |||
|  |             padding: 0; | |||
|  |             box-sizing: border-box; | |||
|  |         } | |||
|  | 
 | |||
|  |         body { | |||
|  |             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |||
|  |             background-color: #f5f7fa; | |||
|  |             padding: 20px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .container { | |||
|  |             max-width: 1600px; | |||
|  |             margin: 0 auto; | |||
|  |             background: white; | |||
|  |             padding: 20px; | |||
|  |             border-radius: 8px; | |||
|  |             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 搜索栏样式 */ | |||
|  |         .search-bar { | |||
|  |             display: flex; | |||
|  |             gap: 15px; | |||
|  |             margin-bottom: 20px; | |||
|  |             align-items: center; | |||
|  |             flex-wrap: wrap; | |||
|  |         } | |||
|  | 
 | |||
|  |         .search-bar input, | |||
|  |         .search-bar select { | |||
|  |             padding: 8px 12px; | |||
|  |             border: 1px solid #dcdfe6; | |||
|  |             border-radius: 4px; | |||
|  |             font-size: 14px; | |||
|  |             outline: none; | |||
|  |             min-width: 180px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .search-bar input:focus, | |||
|  |         .search-bar select:focus { | |||
|  |             border-color: #409eff; | |||
|  |         } | |||
|  | 
 | |||
|  |         .search-bar input::placeholder { | |||
|  |             color: #c0c4cc; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn { | |||
|  |             padding: 8px 20px; | |||
|  |             border: none; | |||
|  |             border-radius: 4px; | |||
|  |             font-size: 14px; | |||
|  |             cursor: pointer; | |||
|  |             transition: all 0.3s; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-primary { | |||
|  |             background-color: #409eff; | |||
|  |             color: white; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-primary:hover { | |||
|  |             background-color: #66b1ff; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-success { | |||
|  |             background-color: #67c23a; | |||
|  |             color: white; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-success:hover { | |||
|  |             background-color: #85ce61; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-small { | |||
|  |             padding: 5px 12px; | |||
|  |             font-size: 12px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-danger { | |||
|  |             background-color: #f56c6c; | |||
|  |             color: white; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-danger:hover { | |||
|  |             background-color: #f78989; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 新增按钮 */ | |||
|  |         .add-section { | |||
|  |             margin-bottom: 15px; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 表格样式 */ | |||
|  |         .table-wrapper { | |||
|  |             overflow-x: auto; | |||
|  |         } | |||
|  | 
 | |||
|  |         table { | |||
|  |             width: 100%; | |||
|  |             border-collapse: collapse; | |||
|  |             font-size: 14px; | |||
|  |         } | |||
|  | 
 | |||
|  |         thead { | |||
|  |             background-color: #f5f7fa; | |||
|  |         } | |||
|  | 
 | |||
|  |         th { | |||
|  |             padding: 12px 8px; | |||
|  |             text-align: center; | |||
|  |             font-weight: 500; | |||
|  |             color: #606266; | |||
|  |             border-bottom: 1px solid #ebeef5; | |||
|  |             white-space: nowrap; | |||
|  |         } | |||
|  | 
 | |||
|  |         td { | |||
|  |             padding: 12px 8px; | |||
|  |             text-align: center; | |||
|  |             border-bottom: 1px solid #ebeef5; | |||
|  |             color: #606266; | |||
|  |         } | |||
|  | 
 | |||
|  |         tbody tr:hover { | |||
|  |             background-color: #f5f7fa; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 操作按钮组 */ | |||
|  |         .action-buttons { | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |             gap: 8px; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .action-row { | |||
|  |             display: flex; | |||
|  |             gap: 5px; | |||
|  |             justify-content: center; | |||
|  |             flex-wrap: wrap; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 状态标签 */ | |||
|  |         .status-normal { | |||
|  |             color: #67c23a; | |||
|  |         } | |||
|  | 
 | |||
|  |         .status-disabled { | |||
|  |             color: #909399; | |||
|  |         } | |||
|  | 
 | |||
|  |         .business-status { | |||
|  |             color: #606266; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 模态框样式 */ | |||
|  |         .modal { | |||
|  |             display: none; | |||
|  |             position: fixed; | |||
|  |             top: 0; | |||
|  |             left: 0; | |||
|  |             width: 100%; | |||
|  |             height: 100%; | |||
|  |             background-color: rgba(0, 0, 0, 0.5); | |||
|  |             z-index: 1000; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal.active { | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |             justify-content: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-content { | |||
|  |             background: white; | |||
|  |             width: 90%; | |||
|  |             max-width: 650px; | |||
|  |             max-height: 90vh; | |||
|  |             border-radius: 8px; | |||
|  |             overflow: hidden; | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-header { | |||
|  |             padding: 20px; | |||
|  |             border-bottom: 1px solid #ebeef5; | |||
|  |             display: flex; | |||
|  |             justify-content: space-between; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-header h3 { | |||
|  |             font-size: 18px; | |||
|  |             color: #303133; | |||
|  |             margin: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-close { | |||
|  |             font-size: 24px; | |||
|  |             color: #909399; | |||
|  |             cursor: pointer; | |||
|  |             border: none; | |||
|  |             background: none; | |||
|  |             padding: 0; | |||
|  |             width: 24px; | |||
|  |             height: 24px; | |||
|  |             line-height: 1; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-close:hover { | |||
|  |             color: #606266; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-body { | |||
|  |             padding: 20px; | |||
|  |             overflow-y: auto; | |||
|  |             flex: 1; | |||
|  |         } | |||
|  | 
 | |||
|  |         .modal-footer { | |||
|  |             padding: 15px 20px; | |||
|  |             border-top: 1px solid #ebeef5; | |||
|  |             display: flex; | |||
|  |             justify-content: flex-end; | |||
|  |             gap: 10px; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 表单样式 */ | |||
|  |         .form-section { | |||
|  |             margin-bottom: 25px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-section-title { | |||
|  |             font-size: 16px; | |||
|  |             color: #303133; | |||
|  |             font-weight: 500; | |||
|  |             margin-bottom: 15px; | |||
|  |             padding-bottom: 10px; | |||
|  |             border-bottom: 1px solid #ebeef5; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-group { | |||
|  |             margin-bottom: 18px; | |||
|  |             display: flex; | |||
|  |             align-items: flex-start; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-label { | |||
|  |             width: 120px; | |||
|  |             padding-top: 8px; | |||
|  |             color: #606266; | |||
|  |             font-size: 14px; | |||
|  |             text-align: right; | |||
|  |             padding-right: 12px; | |||
|  |             flex-shrink: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-label.required::before { | |||
|  |             content: "*"; | |||
|  |             color: #f56c6c; | |||
|  |             margin-right: 4px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-input-wrapper { | |||
|  |             flex: 1; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-input, | |||
|  |         .form-select, | |||
|  |         .form-textarea { | |||
|  |             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, | |||
|  |         .form-textarea:focus { | |||
|  |             border-color: #409eff; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-input::placeholder, | |||
|  |         .form-textarea::placeholder { | |||
|  |             color: #c0c4cc; | |||
|  |         } | |||
|  | 
 | |||
|  |         .form-textarea { | |||
|  |             resize: vertical; | |||
|  |             min-height: 80px; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 图片上传样式 */ | |||
|  |         .upload-box { | |||
|  |             width: 140px; | |||
|  |             height: 140px; | |||
|  |             border: 1px dashed #dcdfe6; | |||
|  |             border-radius: 4px; | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |             justify-content: center; | |||
|  |             cursor: pointer; | |||
|  |             background-color: #fafafa; | |||
|  |             transition: border-color 0.3s; | |||
|  |         } | |||
|  | 
 | |||
|  |         .upload-box:hover { | |||
|  |             border-color: #409eff; | |||
|  |         } | |||
|  | 
 | |||
|  |         .upload-box-text { | |||
|  |             color: #909399; | |||
|  |             font-size: 14px; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 开关样式 */ | |||
|  |         .switch-group { | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |             gap: 15px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch { | |||
|  |             position: relative; | |||
|  |             display: inline-block; | |||
|  |             width: 44px; | |||
|  |             height: 22px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch input { | |||
|  |             opacity: 0; | |||
|  |             width: 0; | |||
|  |             height: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch-slider { | |||
|  |             position: absolute; | |||
|  |             cursor: pointer; | |||
|  |             top: 0; | |||
|  |             left: 0; | |||
|  |             right: 0; | |||
|  |             bottom: 0; | |||
|  |             background-color: #dcdfe6; | |||
|  |             transition: 0.3s; | |||
|  |             border-radius: 22px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch-slider:before { | |||
|  |             position: absolute; | |||
|  |             content: ""; | |||
|  |             height: 18px; | |||
|  |             width: 18px; | |||
|  |             left: 2px; | |||
|  |             bottom: 2px; | |||
|  |             background-color: white; | |||
|  |             transition: 0.3s; | |||
|  |             border-radius: 50%; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch input:checked + .switch-slider { | |||
|  |             background-color: #409eff; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch input:checked + .switch-slider:before { | |||
|  |             transform: translateX(22px); | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch-label { | |||
|  |             color: #606266; | |||
|  |             font-size: 14px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .switch-label.active { | |||
|  |             color: #409eff; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 单选框组样式 */ | |||
|  |         .radio-group { | |||
|  |             display: flex; | |||
|  |             gap: 15px; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .radio-option { | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |             gap: 5px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .radio-option input[type="radio"] { | |||
|  |             margin: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |         .radio-option label { | |||
|  |             color: #606266; | |||
|  |             font-size: 14px; | |||
|  |             cursor: pointer; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 复选框组样式 */ | |||
|  |         .checkbox-group { | |||
|  |             display: flex; | |||
|  |             gap: 15px; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .checkbox-option { | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |             gap: 5px; | |||
|  |         } | |||
|  | 
 | |||
|  |         .checkbox-option input[type="checkbox"] { | |||
|  |             margin: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |         .checkbox-option label { | |||
|  |             color: #606266; | |||
|  |             font-size: 14px; | |||
|  |             cursor: pointer; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 时间输入样式 */ | |||
|  |         .time-group { | |||
|  |             display: flex; | |||
|  |             gap: 10px; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |         .time-input { | |||
|  |             width: 180px; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 说明文字样式 */ | |||
|  |         .form-hint { | |||
|  |             color: #909399; | |||
|  |             font-size: 12px; | |||
|  |             margin-top: 5px; | |||
|  |             line-height: 1.5; | |||
|  |         } | |||
|  | 
 | |||
|  |         /* 地图位置选择 */ | |||
|  |         .location-input { | |||
|  |             position: relative; | |||
|  |         } | |||
|  | 
 | |||
|  |         .location-icon { | |||
|  |             position: absolute; | |||
|  |             right: 10px; | |||
|  |             top: 50%; | |||
|  |             transform: translateY(-50%); | |||
|  |             color: #409eff; | |||
|  |             cursor: pointer; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-cancel { | |||
|  |             background-color: white; | |||
|  |             color: #606266; | |||
|  |             border: 1px solid #dcdfe6; | |||
|  |         } | |||
|  | 
 | |||
|  |         .btn-cancel:hover { | |||
|  |             background-color: #f5f7fa; | |||
|  |             border-color: #c0c4cc; | |||
|  |         } | |||
|  |     </style> | |||
|  | </head> | |||
|  | <body> | |||
|  |     <div class="container"> | |||
|  |         <!-- 搜索栏 --> | |||
|  |         <div class="search-bar"> | |||
|  |             <input type="text" placeholder="市场名称"> | |||
|  |             <select> | |||
|  |                 <option value="">地区</option> | |||
|  |                 <option value="shanghai">上海市</option> | |||
|  |                 <option value="beijing">北京市</option> | |||
|  |                 <option value="fujian">福建省</option> | |||
|  |             </select> | |||
|  |             <select> | |||
|  |                 <option value="">经营模式</option> | |||
|  |                 <option value="operator">经营者</option> | |||
|  |                 <option value="platform">平台</option> | |||
|  |             </select> | |||
|  |             <select> | |||
|  |                 <option value="">状态</option> | |||
|  |                 <option value="normal">正常</option> | |||
|  |                 <option value="disabled">禁用</option> | |||
|  |             </select> | |||
|  |             <button class="btn btn-primary">搜索</button> | |||
|  |         </div> | |||
|  | 
 | |||
|  |         <!-- 新增按钮 --> | |||
|  |         <div class="add-section"> | |||
|  |             <button class="btn btn-success">新增</button> | |||
|  |         </div> | |||
|  | 
 | |||
|  |         <!-- 表格 --> | |||
|  |         <div class="table-wrapper"> | |||
|  |             <table> | |||
|  |                 <thead> | |||
|  |                     <tr> | |||
|  |                         <th>市场名</th> | |||
|  |                         <th>地址</th> | |||
|  |                         <th>经营模式</th> | |||
|  |                         <th>经营者姓名</th> | |||
|  |                         <th>经营者账号</th> | |||
|  |                         <th>第三方配送</th> | |||
|  |                         <th>状态</th> | |||
|  |                         <th>摊位数</th> | |||
|  |                         <th>营业状态</th> | |||
|  |                         <th>操作</th> | |||
|  |                     </tr> | |||
|  |                 </thead> | |||
|  |                 <tbody> | |||
|  |                     <tr> | |||
|  |                         <td>权限测试市场</td> | |||
|  |                         <td>上海市市辖区闵行区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>权限测试</td> | |||
|  |                         <td>13800001500</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>2</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>测试菜市场-权限</td> | |||
|  |                         <td>福建省福州市台江区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td></td> | |||
|  |                         <td></td> | |||
|  |                         <td>是</td> | |||
|  |                         <td class="status-disabled">禁用</td> | |||
|  |                         <td>0</td> | |||
|  |                         <td class="business-status">休息</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>测试菜市场-葡萄</td> | |||
|  |                         <td>北京市市辖区东城区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>林xx</td> | |||
|  |                         <td>17750208698</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>0</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>华光农贸市场</td> | |||
|  |                         <td>上海市市辖区闵行区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>华光</td> | |||
|  |                         <td>13800001300</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>2</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>四季菜市场</td> | |||
|  |                         <td>上海市市辖区闵行区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>春申</td> | |||
|  |                         <td>13800001200</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>1</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>筱埕海产市场</td> | |||
|  |                         <td>福建省福州市连江县</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>邱浩榆</td> | |||
|  |                         <td>13850103997</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>1</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>红梅菜市场</td> | |||
|  |                         <td>上海市市辖区闵行区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>红梅</td> | |||
|  |                         <td>13800001100</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>1</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>楚逸农贸市场</td> | |||
|  |                         <td>福建省福州市连江县</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>林道铃</td> | |||
|  |                         <td>13799430688</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>3</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>华径菜场</td> | |||
|  |                         <td>上海市市辖区闵行区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>华径菜市场</td> | |||
|  |                         <td>13800001000</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>1</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                     <tr> | |||
|  |                         <td>春申菜市场</td> | |||
|  |                         <td>上海市市辖区徐汇区</td> | |||
|  |                         <td>经营者</td> | |||
|  |                         <td>华径</td> | |||
|  |                         <td>13800000200</td> | |||
|  |                         <td>否</td> | |||
|  |                         <td class="status-normal">正常</td> | |||
|  |                         <td>7</td> | |||
|  |                         <td class="business-status">营业</td> | |||
|  |                         <td> | |||
|  |                             <div class="action-buttons"> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">设置结算比例</button> | |||
|  |                                     <button class="btn btn-primary btn-small">分销推广</button> | |||
|  |                                     <button class="btn btn-primary btn-small">调定经营者账号</button> | |||
|  |                                     <button class="btn btn-primary btn-small">查询详情</button> | |||
|  |                                 </div> | |||
|  |                                 <div class="action-row"> | |||
|  |                                     <button class="btn btn-primary btn-small">详情</button> | |||
|  |                                     <button class="btn btn-primary btn-small">编辑</button> | |||
|  |                                     <button class="btn btn-danger btn-small">删除</button> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </td> | |||
|  |                     </tr> | |||
|  |                 </tbody> | |||
|  |             </table> | |||
|  |         </div> | |||
|  |     </div> | |||
|  | 
 | |||
|  |     <!-- 设置结算比例模态框 --> | |||
|  |     <div class="modal" id="settlementRatioModal"> | |||
|  |         <div class="modal-content" style="max-width: 500px;"> | |||
|  |             <div class="modal-header"> | |||
|  |                 <h3>设置结算比例</h3> | |||
|  |                 <button class="modal-close" onclick="closeSettlementModal()">×</button> | |||
|  |             </div> | |||
|  |             <div class="modal-body"> | |||
|  |                 <form id="settlementRatioForm"> | |||
|  |                     <div class="form-group"> | |||
|  |                         <div class="form-label required">结算比例</div> | |||
|  |                         <div class="form-input-wrapper"> | |||
|  |                             <input type="number" class="form-input" id="settlementRatio" value="0.000" step="0.001" min="0" max="1" placeholder="请输入结算比例"> | |||
|  |                         </div> | |||
|  |                     </div> | |||
|  |                 </form> | |||
|  |             </div> | |||
|  |             <div class="modal-footer"> | |||
|  |                 <button class="btn btn-cancel" onclick="closeSettlementModal()">关闭</button> | |||
|  |                 <button class="btn btn-primary" onclick="submitSettlementRatio()">确定</button> | |||
|  |             </div> | |||
|  |         </div> | |||
|  |     </div> | |||
|  | 
 | |||
|  |     <!-- 新增菜市场模态框 --> | |||
|  |     <div class="modal" id="addMarketModal"> | |||
|  |         <div class="modal-content"> | |||
|  |             <div class="modal-header"> | |||
|  |                 <h3>新增菜市场</h3> | |||
|  |                 <button class="modal-close" onclick="closeModal()">×</button> | |||
|  |             </div> | |||
|  |             <div class="modal-body"> | |||
|  |                 <form id="addMarketForm"> | |||
|  |                     <!-- 关联商圈 --> | |||
|  |                     <div class="form-section"> | |||
|  |                         <div class="form-section-title">关联商圈</div> | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">选择商圈</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <select class="form-select" id="businessDistrict"> | |||
|  |                                     <option value="">请选择商圈</option> | |||
|  |                                     <option value="1">商圈1</option> | |||
|  |                                     <option value="2">商圈2</option> | |||
|  |                                     <option value="3">商圈3</option> | |||
|  |                                     <option value="4">商圈4</option> | |||
|  |                                 </select> | |||
|  |                                 <div class="form-hint">请选择菜市场所属的商圈</div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                     </div> | |||
|  | 
 | |||
|  |                     <!-- 是否经营者 --> | |||
|  |                     <div class="form-section"> | |||
|  |                         <div class="form-section-title">是否经营者</div> | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label"></div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="form-hint">ℹ️ 无代理状态下,代理结算比例归到平台;</div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label">是否有菜市场经营者</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="switch-group"> | |||
|  |                                     <span class="switch-label">无</span> | |||
|  |                                     <label class="switch"> | |||
|  |                                         <input type="checkbox" id="hasOperator"> | |||
|  |                                         <span class="switch-slider"></span> | |||
|  |                                     </label> | |||
|  |                                     <span class="switch-label active">有</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                     </div> | |||
|  | 
 | |||
|  |                     <!-- 基础配置 --> | |||
|  |                     <div class="form-section"> | |||
|  |                         <div class="form-section-title">基础配置</div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场名称</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <input type="text" class="form-input" placeholder="请输入菜市场名称25字符内" maxlength="25"> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场背景图</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="upload-box"> | |||
|  |                                     <span class="upload-box-text">选择图片</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场营业执照</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="upload-box"> | |||
|  |                                     <span class="upload-box-text">选择图片</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场实拍图</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="upload-box"> | |||
|  |                                     <span class="upload-box-text">选择图片</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场营业执照</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="upload-box"> | |||
|  |                                     <span class="upload-box-text">选择图片</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场实拍图</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="upload-box"> | |||
|  |                                     <span class="upload-box-text">选择图片</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场地址</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <select class="form-select"> | |||
|  |                                     <option value="">请选择省市区</option> | |||
|  |                                     <option value="shanghai">上海市</option> | |||
|  |                                     <option value="beijing">北京市</option> | |||
|  |                                     <option value="fujian">福建省</option> | |||
|  |                                 </select> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">详细地址</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <input type="text" class="form-input" placeholder="请输入具体地址"> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场定位</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="location-input"> | |||
|  |                                     <input type="text" class="form-input" placeholder="请在地图上选择定位"> | |||
|  |                                     <span class="location-icon">📍</span> | |||
|  |                                 </div> | |||
|  |                                 <div class="form-hint" style="color: #f56c6c;">请选择定位</div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场营业时间</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="switch-group"> | |||
|  |                                     <span class="switch-label">手动营业</span> | |||
|  |                                     <label class="switch"> | |||
|  |                                         <input type="checkbox" id="autoBusinessTime" checked> | |||
|  |                                         <span class="switch-slider"></span> | |||
|  |                                     </label> | |||
|  |                                     <span class="switch-label active">自动营业</span> | |||
|  |                                 </div> | |||
|  |                                 <div class="checkbox-group" style="margin-top: 10px;"> | |||
|  |                                     <div class="checkbox-option"> | |||
|  |                                         <input type="checkbox" id="everyday"> | |||
|  |                                         <label for="everyday">每天</label> | |||
|  |                                     </div> | |||
|  |                                     <div class="checkbox-option"> | |||
|  |                                         <input type="checkbox" id="workday"> | |||
|  |                                         <label for="workday">工作日</label> | |||
|  |                                     </div> | |||
|  |                                     <div class="checkbox-option"> | |||
|  |                                         <input type="checkbox" id="custom"> | |||
|  |                                         <label for="custom">自定义</label> | |||
|  |                                     </div> | |||
|  |                                 </div> | |||
|  |                                 <div class="time-group" style="margin-top: 10px;"> | |||
|  |                                     <input type="time" class="form-input time-input" placeholder="开始营业时间"> | |||
|  |                                     <input type="time" class="form-input time-input" placeholder="结束营业时间"> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  | 
 | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label required">菜市场状态</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="switch-group"> | |||
|  |                                     <span class="switch-label">禁用</span> | |||
|  |                                     <label class="switch"> | |||
|  |                                         <input type="checkbox" id="marketStatus" checked> | |||
|  |                                         <span class="switch-slider"></span> | |||
|  |                                     </label> | |||
|  |                                     <span class="switch-label active">启用</span> | |||
|  |                                 </div> | |||
|  |                                 <div class="form-hint">禁用后,用户端不展示该菜市场</div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                     </div> | |||
|  | 
 | |||
|  |                     <!-- 配送设置 --> | |||
|  |                     <div class="form-section"> | |||
|  |                         <div class="form-section-title">配送设置</div> | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label"></div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="form-hint">ℹ️ 开启后,将允许该菜市场经营者/摊主(无经营者) 自由配置是否使用第三方配送:</div> | |||
|  |                                 <div class="form-hint">第三方配送费用配置简,天气、时段等因素产生不同程度的浮动;将根据实际配送费用扣行扣除。</div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                         <div class="form-group"> | |||
|  |                             <div class="form-label">是否允许第三方骑手配送</div> | |||
|  |                             <div class="form-input-wrapper"> | |||
|  |                                 <div class="switch-group"> | |||
|  |                                     <span class="switch-label">禁用</span> | |||
|  |                                     <label class="switch"> | |||
|  |                                         <input type="checkbox" id="thirdPartyDelivery" checked> | |||
|  |                                         <span class="switch-slider"></span> | |||
|  |                                     </label> | |||
|  |                                     <span class="switch-label active">启用</span> | |||
|  |                                 </div> | |||
|  |                             </div> | |||
|  |                         </div> | |||
|  |                     </div> | |||
|  |                 </form> | |||
|  |             </div> | |||
|  |             <div class="modal-footer"> | |||
|  |                 <button class="btn btn-cancel" onclick="closeModal()">取消</button> | |||
|  |                 <button class="btn btn-primary" onclick="submitForm()">确认</button> | |||
|  |             </div> | |||
|  |         </div> | |||
|  |     </div> | |||
|  | 
 | |||
|  |     <script> | |||
|  |         // 搜索功能 | |||
|  |         document.querySelector('.search-bar .btn-primary').addEventListener('click', function() { | |||
|  |             alert('搜索功能待实现'); | |||
|  |         }); | |||
|  | 
 | |||
|  |         // 新增功能 - 打开模态框 | |||
|  |         document.querySelector('.btn-success').addEventListener('click', function() { | |||
|  |             openModal(); | |||
|  |         }); | |||
|  | 
 | |||
|  |         // 打开模态框 | |||
|  |         function openModal() { | |||
|  |             document.getElementById('addMarketModal').classList.add('active'); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 关闭模态框 | |||
|  |         function closeModal() { | |||
|  |             document.getElementById('addMarketModal').classList.remove('active'); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 提交表单 | |||
|  |         function submitForm() { | |||
|  |             alert('表单提交功能待实现'); | |||
|  |             closeModal(); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 点击模态框背景关闭 | |||
|  |         document.getElementById('addMarketModal').addEventListener('click', function(e) { | |||
|  |             if (e.target === this) { | |||
|  |                 closeModal(); | |||
|  |             } | |||
|  |         }); | |||
|  | 
 | |||
|  |         // 打开设置结算比例模态框 | |||
|  |         function openSettlementModal() { | |||
|  |             document.getElementById('settlementRatioModal').classList.add('active'); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 关闭设置结算比例模态框 | |||
|  |         function closeSettlementModal() { | |||
|  |             document.getElementById('settlementRatioModal').classList.remove('active'); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 提交结算比例 | |||
|  |         function submitSettlementRatio() { | |||
|  |             const ratio = document.getElementById('settlementRatio').value; | |||
|  |             if (ratio === '' || ratio < 0 || ratio > 1) { | |||
|  |                 alert('请输入有效的结算比例(0-1之间)'); | |||
|  |                 return; | |||
|  |             } | |||
|  |             alert('结算比例已设置为: ' + ratio); | |||
|  |             closeSettlementModal(); | |||
|  |         } | |||
|  | 
 | |||
|  |         // 点击结算比例模态框背景关闭 | |||
|  |         document.getElementById('settlementRatioModal').addEventListener('click', function(e) { | |||
|  |             if (e.target === this) { | |||
|  |                 closeSettlementModal(); | |||
|  |             } | |||
|  |         }); | |||
|  | 
 | |||
|  |         // 为所有操作按钮添加事件监听 | |||
|  |         document.querySelectorAll('.action-buttons button').forEach(button => { | |||
|  |             button.addEventListener('click', function(e) { | |||
|  |                 e.stopPropagation(); | |||
|  |                 const buttonText = this.textContent; | |||
|  | 
 | |||
|  |                 // 如果是设置结算比例按钮,打开对应的模态框 | |||
|  |                 if (buttonText === '设置结算比例') { | |||
|  |                     openSettlementModal(); | |||
|  |                 } else { | |||
|  |                     alert(buttonText + ' 功能待实现'); | |||
|  |                 } | |||
|  |             }); | |||
|  |         }); | |||
|  |     </script> | |||
|  | </body> | |||
|  | </html> |