综述: 新增商家端注册模块和平台端市场配置功能
- 在商家端APP中新增注册功能模块,包含注册角色选择页面,支持两种商家类型:自主经营店主和菜市场统一管理下店主 - 新增菜市场创建和摊位创建页面,完善商家端注册流程 - 在平台端web菜市场管理模块中新增settings.json配置文件,包含状态栏和钩子功能配置 - 更新大妈集市.rp原型文件内容
This commit is contained in:
		
							parent
							
								
									f7ca95a898
								
							
						
					
					
						commit
						4088cd03d1
					
				|  | @ -0,0 +1,566 @@ | |||
| <!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: #f5f5f5; | ||||
|         } | ||||
| 
 | ||||
|         .header { | ||||
|             background-color: #fff; | ||||
|             padding: 16px; | ||||
|             border-bottom: 1px solid #e5e5e5; | ||||
|         } | ||||
| 
 | ||||
|         .header h1 { | ||||
|             font-size: 18px; | ||||
|             font-weight: 500; | ||||
|             color: #333; | ||||
|         } | ||||
| 
 | ||||
|         .section { | ||||
|             background-color: #fff; | ||||
|             margin-top: 10px; | ||||
|             padding: 16px; | ||||
|         } | ||||
| 
 | ||||
|         .section-title { | ||||
|             font-size: 16px; | ||||
|             font-weight: 500; | ||||
|             color: #333; | ||||
|             margin-bottom: 16px; | ||||
|             padding-bottom: 8px; | ||||
|             border-bottom: 2px solid #4CAF50; | ||||
|         } | ||||
| 
 | ||||
|         .form-item { | ||||
|             margin-bottom: 20px; | ||||
|         } | ||||
| 
 | ||||
|         .form-label { | ||||
|             display: block; | ||||
|             font-size: 14px; | ||||
|             color: #666; | ||||
|             margin-bottom: 8px; | ||||
|         } | ||||
| 
 | ||||
|         .form-label .required { | ||||
|             color: #f44336; | ||||
|             margin-right: 4px; | ||||
|         } | ||||
| 
 | ||||
|         .form-input { | ||||
|             width: 100%; | ||||
|             padding: 12px; | ||||
|             font-size: 15px; | ||||
|             border: 1px solid #ddd; | ||||
|             border-radius: 4px; | ||||
|             background-color: #fff; | ||||
|             -webkit-appearance: none; | ||||
|         } | ||||
| 
 | ||||
|         .form-input:focus { | ||||
|             outline: none; | ||||
|             border-color: #4CAF50; | ||||
|         } | ||||
| 
 | ||||
|         .form-input::placeholder { | ||||
|             color: #bbb; | ||||
|         } | ||||
| 
 | ||||
|         select.form-input { | ||||
|             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); | ||||
|             background-repeat: no-repeat; | ||||
|             background-position: right 12px center; | ||||
|             padding-right: 36px; | ||||
|         } | ||||
| 
 | ||||
|         .image-upload { | ||||
|             width: 120px; | ||||
|             height: 120px; | ||||
|             border: 1px dashed #ddd; | ||||
|             border-radius: 4px; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: center; | ||||
|             background-color: #fafafa; | ||||
|             cursor: pointer; | ||||
|             position: relative; | ||||
|         } | ||||
| 
 | ||||
|         .image-upload-large { | ||||
|             width: 100%; | ||||
|             height: 160px; | ||||
|         } | ||||
| 
 | ||||
|         .image-upload svg { | ||||
|             width: 40px; | ||||
|             height: 40px; | ||||
|             color: #bbb; | ||||
|         } | ||||
| 
 | ||||
|         .image-upload input { | ||||
|             position: absolute; | ||||
|             width: 100%; | ||||
|             height: 100%; | ||||
|             opacity: 0; | ||||
|             cursor: pointer; | ||||
|         } | ||||
| 
 | ||||
|         .image-preview { | ||||
|             width: 100%; | ||||
|             height: 100%; | ||||
|             object-fit: cover; | ||||
|             border-radius: 4px; | ||||
|         } | ||||
| 
 | ||||
|         .image-upload-container { | ||||
|             display: flex; | ||||
|             gap: 10px; | ||||
|             flex-wrap: wrap; | ||||
|         } | ||||
| 
 | ||||
|         .switch-container { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: space-between; | ||||
|             padding: 12px 0; | ||||
|         } | ||||
| 
 | ||||
|         .switch { | ||||
|             position: relative; | ||||
|             display: inline-block; | ||||
|             width: 50px; | ||||
|             height: 28px; | ||||
|         } | ||||
| 
 | ||||
|         .switch input { | ||||
|             opacity: 0; | ||||
|             width: 0; | ||||
|             height: 0; | ||||
|         } | ||||
| 
 | ||||
|         .slider { | ||||
|             position: absolute; | ||||
|             cursor: pointer; | ||||
|             top: 0; | ||||
|             left: 0; | ||||
|             right: 0; | ||||
|             bottom: 0; | ||||
|             background-color: #ccc; | ||||
|             transition: .3s; | ||||
|             border-radius: 28px; | ||||
|         } | ||||
| 
 | ||||
|         .slider:before { | ||||
|             position: absolute; | ||||
|             content: ""; | ||||
|             height: 22px; | ||||
|             width: 22px; | ||||
|             left: 3px; | ||||
|             bottom: 3px; | ||||
|             background-color: white; | ||||
|             transition: .3s; | ||||
|             border-radius: 50%; | ||||
|         } | ||||
| 
 | ||||
|         input:checked + .slider { | ||||
|             background-color: #4CAF50; | ||||
|         } | ||||
| 
 | ||||
|         input:checked + .slider:before { | ||||
|             transform: translateX(22px); | ||||
|         } | ||||
| 
 | ||||
|         .time-input-group { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             gap: 10px; | ||||
|         } | ||||
| 
 | ||||
|         .time-input { | ||||
|             flex: 1; | ||||
|             padding: 12px; | ||||
|             font-size: 15px; | ||||
|             border: 1px solid #ddd; | ||||
|             border-radius: 4px; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-group { | ||||
|             display: flex; | ||||
|             gap: 20px; | ||||
|             margin-bottom: 12px; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-item { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             gap: 6px; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-item input[type="checkbox"] { | ||||
|             width: 18px; | ||||
|             height: 18px; | ||||
|             cursor: pointer; | ||||
|         } | ||||
| 
 | ||||
|         .radio-group { | ||||
|             display: flex; | ||||
|             gap: 20px; | ||||
|             margin-top: 12px; | ||||
|         } | ||||
| 
 | ||||
|         .radio-item { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             gap: 6px; | ||||
|         } | ||||
| 
 | ||||
|         .radio-item input[type="radio"] { | ||||
|             width: 18px; | ||||
|             height: 18px; | ||||
|             cursor: pointer; | ||||
|         } | ||||
| 
 | ||||
|         .time-range { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             gap: 10px; | ||||
|             margin-top: 12px; | ||||
|         } | ||||
| 
 | ||||
|         .time-range input { | ||||
|             flex: 1; | ||||
|         } | ||||
| 
 | ||||
|         .submit-btn { | ||||
|             padding: 16px; | ||||
|             background-color: #fff; | ||||
|             border-top: 1px solid #e5e5e5; | ||||
|             margin-top: 10px; | ||||
|         } | ||||
| 
 | ||||
|         .submit-btn button { | ||||
|             width: 100%; | ||||
|             padding: 14px; | ||||
|             font-size: 16px; | ||||
|             font-weight: 500; | ||||
|             color: #fff; | ||||
|             background-color: #4CAF50; | ||||
|             border: none; | ||||
|             border-radius: 4px; | ||||
|             cursor: pointer; | ||||
|             -webkit-appearance: none; | ||||
|         } | ||||
| 
 | ||||
|         .submit-btn button:active { | ||||
|             background-color: #45a049; | ||||
|         } | ||||
| 
 | ||||
|         .form-hint { | ||||
|             font-size: 12px; | ||||
|             color: #999; | ||||
|             margin-top: 6px; | ||||
|         } | ||||
| 
 | ||||
|         .image-item { | ||||
|             position: relative; | ||||
|             display: inline-block; | ||||
|         } | ||||
| 
 | ||||
|         .image-item .remove-btn { | ||||
|             position: absolute; | ||||
|             top: -8px; | ||||
|             right: -8px; | ||||
|             width: 24px; | ||||
|             height: 24px; | ||||
|             background-color: #f44336; | ||||
|             color: white; | ||||
|             border: none; | ||||
|             border-radius: 50%; | ||||
|             cursor: pointer; | ||||
|             font-size: 16px; | ||||
|             line-height: 1; | ||||
|             padding: 0; | ||||
|         } | ||||
|     </style> | ||||
| </head> | ||||
| <body> | ||||
|     <div class="header"> | ||||
|         <h1>创建摊位</h1> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="section"> | ||||
|         <div class="section-title">店铺基础信息</div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>摊位名称 | ||||
|             </label> | ||||
|             <input type="text" class="form-input" placeholder="请输入摊位名称" required> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>主营类目 | ||||
|             </label> | ||||
|             <select class="form-input" required> | ||||
|                 <option value="">请选择主营类目</option> | ||||
|                 <option value="vegetable">蔬菜</option> | ||||
|                 <option value="fruit">水果</option> | ||||
|                 <option value="meat">肉类</option> | ||||
|                 <option value="seafood">海鲜</option> | ||||
|                 <option value="grain">粮油</option> | ||||
|                 <option value="other">其他</option> | ||||
|             </select> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>摊位背景图 | ||||
|             </label> | ||||
|             <div class="image-upload image-upload-large" id="bgImageUpload"> | ||||
|                 <input type="file" accept="image/*" onchange="handleImageUpload(event, 'bgImagePreview')"> | ||||
|                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||
|                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | ||||
|                 </svg> | ||||
|                 <img id="bgImagePreview" class="image-preview" style="display: none;"> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">摊位联系电话</label> | ||||
|             <input type="tel" class="form-input" placeholder="请输入联系电话/手机号"> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">摊位照片</label> | ||||
|             <div class="image-upload-container" id="photoContainer"> | ||||
|                 <div class="image-upload"> | ||||
|                     <input type="file" accept="image/*" multiple onchange="handleMultipleImages(event)"> | ||||
|                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||
|                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | ||||
|                     </svg> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>摊位位置 | ||||
|             </label> | ||||
|             <input type="text" class="form-input" placeholder="请输入摊位位置" required> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>摊位详细地址 | ||||
|             </label> | ||||
|             <input type="text" class="form-input" placeholder="请输入摊位详细地址" required> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">许可证</label> | ||||
|             <div class="image-upload-container"> | ||||
|                 <div class="image-upload"> | ||||
|                     <input type="file" accept="image/*" onchange="handleImageUpload(event, 'license1Preview')"> | ||||
|                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||
|                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | ||||
|                     </svg> | ||||
|                     <img id="license1Preview" class="image-preview" style="display: none;"> | ||||
|                 </div> | ||||
|                 <div class="image-upload"> | ||||
|                     <input type="file" accept="image/*" onchange="handleImageUpload(event, 'license2Preview')"> | ||||
|                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||
|                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | ||||
|                     </svg> | ||||
|                     <img id="license2Preview" class="image-preview" style="display: none;"> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="section"> | ||||
|         <div class="form-item"> | ||||
|             <div class="switch-container"> | ||||
|                 <label class="form-label" style="margin: 0;">是否自动开放</label> | ||||
|                 <div style="display: flex; align-items: center; gap: 12px;"> | ||||
|                     <span style="font-size: 14px; color: #666;">手动营业</span> | ||||
|                     <label class="switch"> | ||||
|                         <input type="checkbox" id="autoOpen" onchange="toggleBusinessMode()"> | ||||
|                         <span class="slider"></span> | ||||
|                     </label> | ||||
|                     <span style="font-size: 14px; color: #4CAF50;">自动营业</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="radio-group" id="timeRadioGroup" style="display: none;"> | ||||
|                 <div class="radio-item"> | ||||
|                     <input type="radio" name="timeMode" value="all" id="timeAll"> | ||||
|                     <label for="timeAll">00:00:00</label> | ||||
|                 </div> | ||||
|                 <div class="radio-item"> | ||||
|                     <span>至</span> | ||||
|                 </div> | ||||
|                 <div class="radio-item"> | ||||
|                     <input type="radio" name="timeMode" value="end" id="timeEnd"> | ||||
|                     <label for="timeEnd">23:59:00</label> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>服务目摊点位置 | ||||
|             </label> | ||||
|             <input type="text" class="form-input" placeholder="请输入服务目摊点位置" required> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label"> | ||||
|                 <span class="required">*</span>目摊点详细地址 | ||||
|             </label> | ||||
|             <input type="text" class="form-input" placeholder="请输入目摊点详细地址" required> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">目摊点示意图</label> | ||||
|             <div class="image-upload image-upload-large"> | ||||
|                 <input type="file" accept="image/*" onchange="handleImageUpload(event, 'mapPreview')"> | ||||
|                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||
|                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | ||||
|                 </svg> | ||||
|                 <img id="mapPreview" class="image-preview" style="display: none;"> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="section"> | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">营业时间</label> | ||||
|             <div class="checkbox-group"> | ||||
|                 <div class="checkbox-item"> | ||||
|                     <input type="checkbox" id="everyday" checked> | ||||
|                     <label for="everyday">每天</label> | ||||
|                 </div> | ||||
|                 <div class="checkbox-item"> | ||||
|                     <input type="checkbox" id="workday"> | ||||
|                     <label for="workday">工作日</label> | ||||
|                 </div> | ||||
|                 <div class="checkbox-item"> | ||||
|                     <input type="checkbox" id="custom"> | ||||
|                     <label for="custom">自定义</label> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="time-range"> | ||||
|                 <input type="time" class="time-input" value="00:00"> | ||||
|                 <span>至</span> | ||||
|                 <input type="time" class="time-input" value="23:59"> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="form-item"> | ||||
|             <label class="form-label">承诺送达时间</label> | ||||
|             <input type="number" class="form-input" placeholder="请输入小时数" min="0" step="1"> | ||||
|             <div class="form-hint">小时以内</div> | ||||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="submit-btn"> | ||||
|         <button type="button" onclick="handleSubmit()">保存</button> | ||||
|     </div> | ||||
| 
 | ||||
|     <script> | ||||
|         function handleImageUpload(event, previewId) { | ||||
|             const file = event.target.files[0]; | ||||
|             if (file) { | ||||
|                 const reader = new FileReader(); | ||||
|                 reader.onload = function(e) { | ||||
|                     const preview = document.getElementById(previewId); | ||||
|                     preview.src = e.target.result; | ||||
|                     preview.style.display = 'block'; | ||||
|                     event.target.style.display = 'none'; | ||||
|                 } | ||||
|                 reader.readAsDataURL(file); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         function handleMultipleImages(event) { | ||||
|             const files = event.target.files; | ||||
|             const container = document.getElementById('photoContainer'); | ||||
| 
 | ||||
|             Array.from(files).forEach(file => { | ||||
|                 const reader = new FileReader(); | ||||
|                 reader.onload = function(e) { | ||||
|                     const imageItem = document.createElement('div'); | ||||
|                     imageItem.className = 'image-item'; | ||||
|                     imageItem.innerHTML = ` | ||||
|                         <div class="image-upload"> | ||||
|                             <img src="${e.target.result}" class="image-preview" style="display: block;"> | ||||
|                         </div> | ||||
|                         <button class="remove-btn" onclick="removeImage(this)">×</button> | ||||
|                     `; | ||||
|                     container.insertBefore(imageItem, container.firstChild); | ||||
|                 } | ||||
|                 reader.readAsDataURL(file); | ||||
|             }); | ||||
| 
 | ||||
|             event.target.value = ''; | ||||
|         } | ||||
| 
 | ||||
|         function removeImage(btn) { | ||||
|             btn.parentElement.remove(); | ||||
|         } | ||||
| 
 | ||||
|         function toggleBusinessMode() { | ||||
|             const autoOpen = document.getElementById('autoOpen'); | ||||
|             const timeRadioGroup = document.getElementById('timeRadioGroup'); | ||||
|             timeRadioGroup.style.display = autoOpen.checked ? 'flex' : 'none'; | ||||
|         } | ||||
| 
 | ||||
|         function handleSubmit() { | ||||
|             const requiredFields = document.querySelectorAll('[required]'); | ||||
|             let isValid = true; | ||||
| 
 | ||||
|             requiredFields.forEach(field => { | ||||
|                 if (!field.value.trim()) { | ||||
|                     isValid = false; | ||||
|                     field.style.borderColor = '#f44336'; | ||||
|                 } else { | ||||
|                     field.style.borderColor = '#ddd'; | ||||
|                 } | ||||
|             }); | ||||
| 
 | ||||
|             if (isValid) { | ||||
|                 alert('表单提交成功!'); | ||||
|                 // 这里添加实际的提交逻辑 | ||||
|             } else { | ||||
|                 alert('请填写所有必填项!'); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         // 防止页面缩放 | ||||
|         document.addEventListener('gesturestart', function(e) { | ||||
|             e.preventDefault(); | ||||
|         }); | ||||
| 
 | ||||
|         // 优化移动端输入体验 | ||||
|         document.querySelectorAll('.form-input').forEach(input => { | ||||
|             input.addEventListener('focus', function() { | ||||
|                 setTimeout(() => { | ||||
|                     this.scrollIntoView({ behavior: 'smooth', block: 'center' }); | ||||
|                 }, 300); | ||||
|             }); | ||||
|         }); | ||||
|     </script> | ||||
| </body> | ||||
| </html> | ||||
|  | @ -0,0 +1,258 @@ | |||
| <!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', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; | ||||
|             background-color: #f5f5f5; | ||||
|             min-height: 100vh; | ||||
|             display: flex; | ||||
|             flex-direction: column; | ||||
|             align-items: center; | ||||
|             padding: 40px 20px; | ||||
|         } | ||||
| 
 | ||||
|         .container { | ||||
|             width: 100%; | ||||
|             max-width: 500px; | ||||
|             margin: 0 auto; | ||||
|         } | ||||
| 
 | ||||
|         .header { | ||||
|             text-align: center; | ||||
|             margin-bottom: 60px; | ||||
|             margin-top: 80px; | ||||
|         } | ||||
| 
 | ||||
|         .title { | ||||
|             font-size: 28px; | ||||
|             font-weight: bold; | ||||
|             color: #333; | ||||
|             margin-bottom: 20px; | ||||
|         } | ||||
| 
 | ||||
|         .subtitle { | ||||
|             font-size: 16px; | ||||
|             color: #999; | ||||
|             font-weight: normal; | ||||
|         } | ||||
| 
 | ||||
|         .selection-area { | ||||
|             display: flex; | ||||
|             flex-direction: column; | ||||
|             gap: 20px; | ||||
|             margin-bottom: 40px; | ||||
|         } | ||||
| 
 | ||||
|         .identity-option { | ||||
|             background-color: #fff; | ||||
|             border-radius: 12px; | ||||
|             padding: 30px 24px; | ||||
|             cursor: pointer; | ||||
|             transition: all 0.3s ease; | ||||
|             border: 2px solid transparent; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | ||||
|         } | ||||
| 
 | ||||
|         .identity-option:hover { | ||||
|             transform: translateY(-2px); | ||||
|             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); | ||||
|         } | ||||
| 
 | ||||
|         .identity-option.selected { | ||||
|             border-color: #1a6b3a; | ||||
|             background-color: #f0f7f3; | ||||
|         } | ||||
| 
 | ||||
|         .option-title { | ||||
|             font-size: 20px; | ||||
|             font-weight: bold; | ||||
|             color: #333; | ||||
|             margin-bottom: 12px; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: space-between; | ||||
|         } | ||||
| 
 | ||||
|         .option-description { | ||||
|             font-size: 14px; | ||||
|             color: #666; | ||||
|             line-height: 1.6; | ||||
|         } | ||||
| 
 | ||||
|         .radio-icon { | ||||
|             width: 24px; | ||||
|             height: 24px; | ||||
|             border: 2px solid #ddd; | ||||
|             border-radius: 50%; | ||||
|             position: relative; | ||||
|             transition: all 0.3s ease; | ||||
|         } | ||||
| 
 | ||||
|         .identity-option.selected .radio-icon { | ||||
|             border-color: #1a6b3a; | ||||
|             background-color: #1a6b3a; | ||||
|         } | ||||
| 
 | ||||
|         .identity-option.selected .radio-icon::after { | ||||
|             content: ''; | ||||
|             position: absolute; | ||||
|             top: 50%; | ||||
|             left: 50%; | ||||
|             transform: translate(-50%, -50%); | ||||
|             width: 8px; | ||||
|             height: 8px; | ||||
|             background-color: white; | ||||
|             border-radius: 50%; | ||||
|         } | ||||
| 
 | ||||
|         .confirm-button { | ||||
|             width: 100%; | ||||
|             padding: 18px; | ||||
|             background-color: #1a6b3a; | ||||
|             color: white; | ||||
|             font-size: 18px; | ||||
|             font-weight: 500; | ||||
|             border: none; | ||||
|             border-radius: 50px; | ||||
|             cursor: pointer; | ||||
|             transition: all 0.3s ease; | ||||
|             margin-top: 20px; | ||||
|         } | ||||
| 
 | ||||
|         .confirm-button:hover { | ||||
|             background-color: #145230; | ||||
|         } | ||||
| 
 | ||||
|         .confirm-button:active { | ||||
|             transform: scale(0.98); | ||||
|         } | ||||
| 
 | ||||
|         .confirm-button:disabled { | ||||
|             background-color: #ccc; | ||||
|             cursor: not-allowed; | ||||
|         } | ||||
| 
 | ||||
|         .icon-wrapper { | ||||
|             width: 50px; | ||||
|             height: 50px; | ||||
|             background-color: #e8f5e9; | ||||
|             border-radius: 12px; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: center; | ||||
|             margin-bottom: 16px; | ||||
|             font-size: 24px; | ||||
|         } | ||||
| 
 | ||||
|         .identity-option.selected .icon-wrapper { | ||||
|             background-color: #1a6b3a; | ||||
|             color: white; | ||||
|         } | ||||
| 
 | ||||
|         @media (max-width: 480px) { | ||||
|             .header { | ||||
|                 margin-top: 40px; | ||||
|                 margin-bottom: 40px; | ||||
|             } | ||||
| 
 | ||||
|             .title { | ||||
|                 font-size: 24px; | ||||
|             } | ||||
| 
 | ||||
|             .subtitle { | ||||
|                 font-size: 14px; | ||||
|             } | ||||
| 
 | ||||
|             .identity-option { | ||||
|                 padding: 24px 20px; | ||||
|             } | ||||
| 
 | ||||
|             .option-title { | ||||
|                 font-size: 18px; | ||||
|             } | ||||
|         } | ||||
|     </style> | ||||
| </head> | ||||
| <body> | ||||
|     <div class="container"> | ||||
|         <div class="header"> | ||||
|             <h1 class="title">欢迎加入大妈集市!</h1> | ||||
|             <p class="subtitle">请选择您的店铺类型</p> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="selection-area"> | ||||
|             <div class="identity-option" data-type="independent" onclick="selectIdentity(this)"> | ||||
|                 <div class="icon-wrapper">🏪</div> | ||||
|                 <div class="option-title"> | ||||
|                     <span>自主经营的店主</span> | ||||
|                     <div class="radio-icon"></div> | ||||
|                 </div> | ||||
|                 <div class="option-description"> | ||||
| 					自行备货、自行配送、拥有完整的管理权限 | ||||
|                 </div> | ||||
|             </div> | ||||
| 
 | ||||
|             <div class="identity-option" data-type="market-managed" onclick="selectIdentity(this)"> | ||||
|                 <div class="icon-wrapper">🏬</div> | ||||
|                 <div class="option-title"> | ||||
|                     <span>菜市场统一管理下的店主</span> | ||||
|                     <div class="radio-icon"></div> | ||||
|                 </div> | ||||
|                 <div class="option-description"> | ||||
|                     在菜市场统一管理体系下经营,享受市场提供的统一服务和支持 | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <button class="confirm-button" id="confirmBtn" disabled onclick="confirmSelection()"> | ||||
|             确认选择 | ||||
|         </button> | ||||
|     </div> | ||||
| 
 | ||||
|     <script> | ||||
|         let selectedType = null; | ||||
| 
 | ||||
|         function selectIdentity(element) { | ||||
|             // 移除所有选中状态 | ||||
|             document.querySelectorAll('.identity-option').forEach(option => { | ||||
|                 option.classList.remove('selected'); | ||||
|             }); | ||||
| 
 | ||||
|             // 添加当前选中状态 | ||||
|             element.classList.add('selected'); | ||||
|             selectedType = element.getAttribute('data-type'); | ||||
| 
 | ||||
|             // 启用确认按钮 | ||||
|             document.getElementById('confirmBtn').disabled = false; | ||||
|         } | ||||
| 
 | ||||
|         function confirmSelection() { | ||||
|             if (!selectedType) { | ||||
|                 alert('请先选择店铺类型'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             console.log('选择的身份类型:', selectedType); | ||||
| 
 | ||||
|             // 这里可以添加跳转逻辑或提交数据到后端 | ||||
|             if (selectedType === 'independent') { | ||||
|                 alert('您选择了:自主经营的店主'); | ||||
|                 // window.location.href = 'independent-register.html'; | ||||
|             } else if (selectedType === 'market-managed') { | ||||
|                 alert('您选择了:菜市场统一管理下的店主'); | ||||
|                 // window.location.href = 'market-managed-register.html'; | ||||
|             } | ||||
|         } | ||||
|     </script> | ||||
| </body> | ||||
| </html> | ||||
|  | @ -0,0 +1,671 @@ | |||
| <!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: 0; | ||||
|             font-size: 14px; | ||||
|             line-height: 1.5; | ||||
|         } | ||||
| 
 | ||||
|         /* 头部样式 */ | ||||
|         .header { | ||||
|             background: #409eff; | ||||
|             color: white; | ||||
|             padding: 12px 15px; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: space-between; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .header h1 { | ||||
|             font-size: 18px; | ||||
|             font-weight: 500; | ||||
|         } | ||||
| 
 | ||||
|         .header-back { | ||||
|             font-size: 20px; | ||||
|             cursor: pointer; | ||||
|             padding: 5px; | ||||
|         } | ||||
| 
 | ||||
|         /* 内容区域 */ | ||||
|         .container { | ||||
|             padding: 0; | ||||
|             margin: 0; | ||||
|             background: white; | ||||
|         } | ||||
| 
 | ||||
|         /* 表单样式 */ | ||||
|         .form-section { | ||||
|             margin-bottom: 10px; | ||||
|             background: white; | ||||
|         } | ||||
| 
 | ||||
|         .form-section-title { | ||||
|             font-size: 15px; | ||||
|             color: #303133; | ||||
|             font-weight: 500; | ||||
|             padding: 15px; | ||||
|             background-color: #f5f7fa; | ||||
|             border-left: 3px solid #409eff; | ||||
|         } | ||||
| 
 | ||||
|         .form-group { | ||||
|             padding: 15px; | ||||
|             border-bottom: 1px solid #f0f0f0; | ||||
|         } | ||||
| 
 | ||||
|         .form-group:last-child { | ||||
|             border-bottom: none; | ||||
|         } | ||||
| 
 | ||||
|         .form-label { | ||||
|             color: #606266; | ||||
|             font-size: 14px; | ||||
|             margin-bottom: 8px; | ||||
|             display: block; | ||||
|         } | ||||
| 
 | ||||
|         .form-label.required::before { | ||||
|             content: "*"; | ||||
|             color: #f56c6c; | ||||
|             margin-right: 4px; | ||||
|         } | ||||
| 
 | ||||
|         .form-input, | ||||
|         .form-select, | ||||
|         .form-textarea { | ||||
|             width: 100%; | ||||
|             padding: 10px 12px; | ||||
|             border: 1px solid #dcdfe6; | ||||
|             border-radius: 4px; | ||||
|             font-size: 14px; | ||||
|             outline: none; | ||||
|             transition: border-color 0.3s; | ||||
|             -webkit-appearance: none; | ||||
|         } | ||||
| 
 | ||||
|         .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: 100%; | ||||
|             height: 120px; | ||||
|             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:active { | ||||
|             background-color: #f0f0f0; | ||||
|         } | ||||
| 
 | ||||
|         .upload-box-text { | ||||
|             color: #909399; | ||||
|             font-size: 14px; | ||||
|             text-align: center; | ||||
|         } | ||||
| 
 | ||||
|         .upload-icon { | ||||
|             font-size: 32px; | ||||
|             color: #c0c4cc; | ||||
|             margin-bottom: 8px; | ||||
|         } | ||||
| 
 | ||||
|         /* 开关样式 */ | ||||
|         .switch-group { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: space-between; | ||||
|         } | ||||
| 
 | ||||
|         .switch-labels { | ||||
|             display: flex; | ||||
|             gap: 15px; | ||||
|         } | ||||
| 
 | ||||
|         .switch { | ||||
|             position: relative; | ||||
|             display: inline-block; | ||||
|             width: 50px; | ||||
|             height: 28px; | ||||
|             flex-shrink: 0; | ||||
|         } | ||||
| 
 | ||||
|         .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: 28px; | ||||
|         } | ||||
| 
 | ||||
|         .switch-slider:before { | ||||
|             position: absolute; | ||||
|             content: ""; | ||||
|             height: 22px; | ||||
|             width: 22px; | ||||
|             left: 3px; | ||||
|             bottom: 3px; | ||||
|             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; | ||||
|             font-weight: 500; | ||||
|         } | ||||
| 
 | ||||
|         /* 复选框组样式 */ | ||||
|         .checkbox-group { | ||||
|             display: flex; | ||||
|             gap: 20px; | ||||
|             margin-top: 12px; | ||||
|             flex-wrap: wrap; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-option { | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             gap: 6px; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-option input[type="checkbox"] { | ||||
|             width: 18px; | ||||
|             height: 18px; | ||||
|             margin: 0; | ||||
|         } | ||||
| 
 | ||||
|         .checkbox-option label { | ||||
|             color: #606266; | ||||
|             font-size: 14px; | ||||
|             cursor: pointer; | ||||
|         } | ||||
| 
 | ||||
|         /* 时间输入样式 */ | ||||
|         .time-group { | ||||
|             display: flex; | ||||
|             gap: 10px; | ||||
|             align-items: center; | ||||
|             margin-top: 12px; | ||||
|         } | ||||
| 
 | ||||
|         .time-input { | ||||
|             flex: 1; | ||||
|         } | ||||
| 
 | ||||
|         /* 说明文字样式 */ | ||||
|         .form-hint { | ||||
|             color: #909399; | ||||
|             font-size: 12px; | ||||
|             margin-top: 8px; | ||||
|             line-height: 1.5; | ||||
|         } | ||||
| 
 | ||||
|         .form-hint-icon { | ||||
|             margin-right: 4px; | ||||
|         } | ||||
| 
 | ||||
|         /* 地图位置选择 */ | ||||
|         .map-placeholder { | ||||
|             width: 100%; | ||||
|             height: 200px; | ||||
|             border: 1px solid #dcdfe6; | ||||
|             border-radius: 4px; | ||||
|             background-color: #f5f7fa; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             justify-content: center; | ||||
|             cursor: pointer; | ||||
|             transition: background-color 0.3s; | ||||
|         } | ||||
| 
 | ||||
|         .map-placeholder:active { | ||||
|             background-color: #e8ebf0; | ||||
|         } | ||||
| 
 | ||||
|         .map-placeholder-content { | ||||
|             text-align: center; | ||||
|         } | ||||
| 
 | ||||
|         .map-icon { | ||||
|             font-size: 48px; | ||||
|             margin-bottom: 10px; | ||||
|         } | ||||
| 
 | ||||
|         .map-text { | ||||
|             color: #909399; | ||||
|             font-size: 14px; | ||||
|         } | ||||
| 
 | ||||
|         .location-text { | ||||
|             font-size: 12px; | ||||
|             margin-top: 5px; | ||||
|             color: #f56c6c; | ||||
|         } | ||||
| 
 | ||||
|         .location-text.selected { | ||||
|             color: #67c23a; | ||||
|         } | ||||
| 
 | ||||
|         /* 发送验证码按钮组 */ | ||||
|         .code-group { | ||||
|             display: flex; | ||||
|             gap: 10px; | ||||
|         } | ||||
| 
 | ||||
|         .code-input { | ||||
|             flex: 1; | ||||
|         } | ||||
| 
 | ||||
|         /* 按钮样式 */ | ||||
|         .btn { | ||||
|             padding: 10px 20px; | ||||
|             border: none; | ||||
|             border-radius: 4px; | ||||
|             font-size: 14px; | ||||
|             cursor: pointer; | ||||
|             transition: all 0.3s; | ||||
|             white-space: nowrap; | ||||
|         } | ||||
| 
 | ||||
|         .btn:active { | ||||
|             opacity: 0.8; | ||||
|         } | ||||
| 
 | ||||
|         .btn-primary { | ||||
|             background-color: #409eff; | ||||
|             color: white; | ||||
|         } | ||||
| 
 | ||||
|         .btn-primary:disabled { | ||||
|             background-color: #a0cfff; | ||||
|             cursor: not-allowed; | ||||
|         } | ||||
| 
 | ||||
|         .btn-code { | ||||
|             min-width: 100px; | ||||
|         } | ||||
| 
 | ||||
|         /* 底部按钮区 */ | ||||
|         .footer-buttons { | ||||
|             padding: 15px; | ||||
|             background: white; | ||||
|             border-top: 1px solid #ebeef5; | ||||
|             box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); | ||||
|             display: flex; | ||||
|             gap: 10px; | ||||
|             margin-top: 20px; | ||||
|         } | ||||
| 
 | ||||
|         .btn-cancel { | ||||
|             flex: 1; | ||||
|             background-color: white; | ||||
|             color: #606266; | ||||
|             border: 1px solid #dcdfe6; | ||||
|             padding: 12px; | ||||
|             font-size: 15px; | ||||
|         } | ||||
| 
 | ||||
|         .btn-submit { | ||||
|             flex: 2; | ||||
|             background-color: #409eff; | ||||
|             color: white; | ||||
|             padding: 12px; | ||||
|             font-size: 15px; | ||||
|         } | ||||
| 
 | ||||
|         /* 隐藏元素 */ | ||||
|         .hidden { | ||||
|             display: none !important; | ||||
|         } | ||||
| 
 | ||||
|         /* 页面内间距调整 */ | ||||
|         .spacer { | ||||
|             height: 10px; | ||||
|             background-color: #f5f7fa; | ||||
|         } | ||||
|     </style> | ||||
| </head> | ||||
| <body> | ||||
|     <!-- 头部 --> | ||||
|     <div class="header"> | ||||
|         <span class="header-back" onclick="goBack()">←</span> | ||||
|         <h1>创建菜市场</h1> | ||||
|         <span style="width: 30px;"></span> | ||||
|     </div> | ||||
| 
 | ||||
|     <!-- 内容区域 --> | ||||
|     <div class="container"> | ||||
|         <form id="createMarketForm"> | ||||
|             <!-- 基础配置 --> | ||||
|             <div class="form-section"> | ||||
|                 <div class="form-section-title">基础配置</div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场名称</label> | ||||
|                     <input type="text" class="form-input" id="marketName" placeholder="请输入菜市场名称25字符内" maxlength="25"> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">商品类目类型</label> | ||||
|                     <select class="form-select" id="categoryType"> | ||||
|                         <option value="">请选择商品类目类型</option> | ||||
|                         <option value="offline">线下菜市场</option> | ||||
|                         <option value="cloud">云店</option> | ||||
|                     </select> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场背景图</label> | ||||
|                     <div class="upload-box" onclick="uploadImage('background')"> | ||||
|                         <div class="upload-box-text"> | ||||
|                             <div class="upload-icon">📷</div> | ||||
|                             <div>点击上传图片</div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场营业执照</label> | ||||
|                     <div class="upload-box" onclick="uploadImage('license')"> | ||||
|                         <div class="upload-box-text"> | ||||
|                             <div class="upload-icon">📷</div> | ||||
|                             <div>点击上传营业执照</div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场实拍图</label> | ||||
|                     <div class="upload-box" onclick="uploadImage('photo')"> | ||||
|                         <div class="upload-box-text"> | ||||
|                             <div class="upload-icon">📷</div> | ||||
|                             <div>点击上传实拍图</div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场地址</label> | ||||
|                     <select class="form-select" id="regionSelect"> | ||||
|                         <option value="">请选择省市区</option> | ||||
|                         <option value="shanghai">上海市</option> | ||||
|                         <option value="beijing">北京市</option> | ||||
|                         <option value="fujian">福建省</option> | ||||
|                     </select> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">详细地址</label> | ||||
|                     <input type="text" class="form-input" id="detailAddress" placeholder="请输入具体地址"> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场定位</label> | ||||
|                     <div class="map-placeholder" onclick="selectLocation()"> | ||||
|                         <div class="map-placeholder-content"> | ||||
|                             <div class="map-icon">📍</div> | ||||
|                             <div class="map-text">点击选择地图定位</div> | ||||
|                             <div class="location-text" id="selectedLocationText">请选择定位</div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <input type="hidden" id="locationLat" value=""> | ||||
|                     <input type="hidden" id="locationLng" value=""> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场营业时间</label> | ||||
|                     <div class="switch-group"> | ||||
|                         <div class="switch-labels"> | ||||
|                             <span class="switch-label">手动营业</span> | ||||
|                             <span class="switch-label active" id="autoLabel">自动营业</span> | ||||
|                         </div> | ||||
|                         <label class="switch"> | ||||
|                             <input type="checkbox" id="autoBusinessTime" checked onchange="toggleBusinessTimeOptions()"> | ||||
|                             <span class="switch-slider"></span> | ||||
|                         </label> | ||||
|                     </div> | ||||
|                     <div class="checkbox-group" id="businessDayOptions"> | ||||
|                         <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" id="businessTimeRange"> | ||||
|                         <input type="time" class="form-input time-input" id="startTime" placeholder="开始营业时间"> | ||||
|                         <span>至</span> | ||||
|                         <input type="time" class="form-input time-input" id="endTime" placeholder="结束营业时间"> | ||||
|                     </div> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <div class="form-group"> | ||||
|                     <label class="form-label required">菜市场状态</label> | ||||
|                     <div class="switch-group"> | ||||
|                         <div class="switch-labels"> | ||||
|                             <span class="switch-label">禁用</span> | ||||
|                             <span class="switch-label active" id="statusLabel">启用</span> | ||||
|                         </div> | ||||
|                         <label class="switch"> | ||||
|                             <input type="checkbox" id="marketStatus" checked onchange="toggleStatusLabel()"> | ||||
|                             <span class="switch-slider"></span> | ||||
|                         </label> | ||||
|                     </div> | ||||
|                     <div class="form-hint">禁用后,用户端不展示该菜市场</div> | ||||
|                 </div> | ||||
|             </div> | ||||
| 
 | ||||
|         </form> | ||||
|     </div> | ||||
| 
 | ||||
|     <!-- 底部按钮 --> | ||||
|     <div class="footer-buttons"> | ||||
|         <button type="button" class="btn btn-cancel" onclick="goBack()">取消</button> | ||||
|         <button type="button" class="btn btn-submit" onclick="submitForm()">确认创建</button> | ||||
|     </div> | ||||
| 
 | ||||
|     <script> | ||||
|         // 返回上一页 | ||||
|         function goBack() { | ||||
|             if (confirm('确定要放弃创建菜市场吗?')) { | ||||
|                 window.history.back(); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         // 切换营业时间选项的显示/隐藏 | ||||
|         function toggleBusinessTimeOptions() { | ||||
|             const autoBusinessTime = document.getElementById('autoBusinessTime'); | ||||
|             const businessDayOptions = document.getElementById('businessDayOptions'); | ||||
|             const businessTimeRange = document.getElementById('businessTimeRange'); | ||||
|             const autoLabel = document.getElementById('autoLabel'); | ||||
|             const manualLabel = autoLabel.previousElementSibling; | ||||
| 
 | ||||
|             if (autoBusinessTime.checked) { | ||||
|                 // 自动营业,显示时间范围和日期选项 | ||||
|                 businessDayOptions.classList.remove('hidden'); | ||||
|                 businessTimeRange.classList.remove('hidden'); | ||||
|                 autoLabel.classList.add('active'); | ||||
|                 manualLabel.classList.remove('active'); | ||||
|             } else { | ||||
|                 // 手动营业,隐藏时间范围和日期选项 | ||||
|                 businessDayOptions.classList.add('hidden'); | ||||
|                 businessTimeRange.classList.add('hidden'); | ||||
|                 autoLabel.classList.remove('active'); | ||||
|                 manualLabel.classList.add('active'); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         // 切换状态标签 | ||||
|         function toggleStatusLabel() { | ||||
|             const marketStatus = document.getElementById('marketStatus'); | ||||
|             const statusLabel = document.getElementById('statusLabel'); | ||||
|             const disabledLabel = statusLabel.previousElementSibling; | ||||
| 
 | ||||
|             if (marketStatus.checked) { | ||||
|                 statusLabel.classList.add('active'); | ||||
|                 disabledLabel.classList.remove('active'); | ||||
|             } else { | ||||
|                 statusLabel.classList.remove('active'); | ||||
|                 disabledLabel.classList.add('active'); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         // 选择地图定位 | ||||
|         function selectLocation() { | ||||
|             // 这里应该打开地图选择器,实际应调用地图API | ||||
|             alert('此处应打开地图选择器,实际开发时需要集成地图API(如高德地图、百度地图等)'); | ||||
| 
 | ||||
|             // 模拟选择了一个位置 | ||||
|             const mockLat = 31.230416; | ||||
|             const mockLng = 121.473701; | ||||
| 
 | ||||
|             document.getElementById('locationLat').value = mockLat; | ||||
|             document.getElementById('locationLng').value = mockLng; | ||||
|             document.getElementById('selectedLocationText').textContent = '已选择: ' + mockLat + ', ' + mockLng; | ||||
|             document.getElementById('selectedLocationText').classList.add('selected'); | ||||
|         } | ||||
| 
 | ||||
|         // 上传图片 | ||||
|         function uploadImage(type) { | ||||
|             // 这里应该调用图片上传功能 | ||||
|             alert('上传' + type + '图片功能待实现\n实际开发时需要调用相机或相册API'); | ||||
|         } | ||||
| 
 | ||||
|         // 提交表单 | ||||
|         function submitForm() { | ||||
|             const marketName = document.getElementById('marketName').value; | ||||
|             const categoryType = document.getElementById('categoryType').value; | ||||
|             const regionSelect = document.getElementById('regionSelect').value; | ||||
|             const detailAddress = document.getElementById('detailAddress').value; | ||||
|             const locationLat = document.getElementById('locationLat').value; | ||||
|             const locationLng = document.getElementById('locationLng').value; | ||||
| 
 | ||||
|             // 验证必填项 | ||||
|             if (!marketName || marketName.trim() === '') { | ||||
|                 alert('请输入菜市场名称'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             if (!categoryType || categoryType === '') { | ||||
|                 alert('请选择商品类目类型'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             if (!regionSelect || regionSelect === '') { | ||||
|                 alert('请选择省市区'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             if (!detailAddress || detailAddress.trim() === '') { | ||||
|                 alert('请输入详细地址'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             if (!locationLat || !locationLng) { | ||||
|                 alert('请选择菜市场定位'); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             // 构建提交数据 | ||||
|             const formData = { | ||||
|                 marketName: marketName, | ||||
|                 categoryType: categoryType, | ||||
|                 region: regionSelect, | ||||
|                 detailAddress: detailAddress, | ||||
|                 location: { | ||||
|                     lat: locationLat, | ||||
|                     lng: locationLng | ||||
|                 }, | ||||
|                 autoBusinessTime: document.getElementById('autoBusinessTime').checked, | ||||
|                 businessDays: { | ||||
|                     everyday: document.getElementById('everyday').checked, | ||||
|                     workday: document.getElementById('workday').checked, | ||||
|                     custom: document.getElementById('custom').checked | ||||
|                 }, | ||||
|                 businessTime: { | ||||
|                     start: document.getElementById('startTime').value, | ||||
|                     end: document.getElementById('endTime').value | ||||
|                 }, | ||||
|                 marketStatus: document.getElementById('marketStatus').checked | ||||
|             }; | ||||
| 
 | ||||
|             console.log('提交数据:', formData); | ||||
| 
 | ||||
|             // 这里应该调用后端API提交表单 | ||||
|             alert('表单提交功能待实现\n已填写信息:\n' + | ||||
|                 '市场名称: ' + formData.marketName + '\n' + | ||||
|                 '类目类型: ' + (formData.categoryType === 'offline' ? '线下菜市场' : '云店')); | ||||
|         } | ||||
| 
 | ||||
|         // 页面加载完成后初始化 | ||||
|         document.addEventListener('DOMContentLoaded', function() { | ||||
|             // 初始化营业时间选项显示状态 | ||||
|             toggleBusinessTimeOptions(); | ||||
|         }); | ||||
|     </script> | ||||
| </body> | ||||
| </html> | ||||
|  | @ -0,0 +1,24 @@ | |||
| { | ||||
|   "statusLine": { | ||||
|     "type": "command", | ||||
|     "command": "npx ccsp@latest --preset PMBTUS --theme capsule" | ||||
|   }, | ||||
|   "alwaysThinkingEnabled": false, | ||||
|   "hooks": { | ||||
|     "Stop": [ | ||||
|       { | ||||
|         "matcher": "", | ||||
|         "hooks": [ | ||||
|           { | ||||
|             "type": "command", | ||||
|             "command": "/Users/linbin/SynologyDrive/附件/592/hooks/task-complete-notify.sh" | ||||
|           }, | ||||
|           { | ||||
|             "type": "command", | ||||
|             "command": "/Users/linbin/SynologyDrive/附件/592/hooks/notify-task-final.sh" | ||||
|           } | ||||
|         ] | ||||
|       } | ||||
|     ] | ||||
|   } | ||||
| } | ||||
		Loading…
	
		Reference in New Issue