综述: 优化商品添加页面和同城运费配置功能
- 在商品添加页面中调整标签页顺序,将"发布店铺"标签页移到首位,并添加店铺选择下拉框和相关说明文字 - 更新商品添加页面中的tab切换逻辑,适配新增的发布店铺标签页 - 在同城运费配置页面中新增免运费条件配置功能,包括开关控制和满额免运费设置 - 添加相应的JavaScript事件处理逻辑和表单数据收集功能
This commit is contained in:
		
							parent
							
								
									633d7f7302
								
							
						
					
					
						commit
						a6739b9548
					
				|  | @ -575,7 +575,8 @@ | |||
|             <!-- 标签页导航 --> | ||||
|             <div class="tabs-container"> | ||||
|                 <div class="tabs"> | ||||
|                     <div class="tab active" data-tab="basic">基础信息</div> | ||||
|                     <div class="tab active" data-tab="store">发布店铺</div> | ||||
|                     <div class="tab" data-tab="basic">基础信息</div> | ||||
|                     <div class="tab" data-tab="sales">销售信息</div> | ||||
|                     <div class="tab" data-tab="other">其他信息</div> | ||||
|                 </div> | ||||
|  | @ -583,8 +584,40 @@ | |||
| 
 | ||||
|             <!-- 表单内容 --> | ||||
|             <form id="addProductForm"> | ||||
|                 <!-- 发布店铺标签页 --> | ||||
|                 <div id="store" class="tab-pane active"> | ||||
|                     <div class="tab-content"> | ||||
|                         <div class="form-group"> | ||||
|                             <label class="form-label"> | ||||
|                                 <span class="required">*</span>选择店铺 | ||||
|                             </label> | ||||
|                             <div class="select-wrapper"> | ||||
|                                 <select class="form-select" id="storeSelect" required> | ||||
|                                     <option value="">请选择需要发布的店铺</option> | ||||
|                                     <option value="store1">旗舰店</option> | ||||
|                                     <option value="store2">生鲜直营店</option> | ||||
|                                     <option value="store3">水果专营店</option> | ||||
|                                     <option value="store4">蔬菜专卖店</option> | ||||
|                                     <option value="store5">海鲜市场店</option> | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                             <div class="error-message" id="storeSelectError" style="display: none;">不能为空。</div> | ||||
|                         </div> | ||||
| 
 | ||||
|                         <div class="form-group"> | ||||
|                             <label class="form-label">店铺说明</label> | ||||
|                             <div style="padding: 16px; background: #f5f5f5; border-radius: 6px; color: #666; font-size: 14px; line-height: 1.6;"> | ||||
|                                 <p style="margin: 0 0 8px 0;"><strong>提示:</strong></p> | ||||
|                                 <p style="margin: 0;">• 请先选择要发布商品的店铺</p> | ||||
|                                 <p style="margin: 4px 0 0 0;">• 商品发布后将在所选店铺中展示</p> | ||||
|                                 <p style="margin: 4px 0 0 0;">• 同一商品可以发布到多个店铺</p> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
| 
 | ||||
|                 <!-- 基础信息标签页 --> | ||||
|                 <div id="basic" class="tab-pane active"> | ||||
|                 <div id="basic" class="tab-pane"> | ||||
|                     <div class="tab-content"> | ||||
|                         <div class="form-group"> | ||||
|                             <label class="form-label"> | ||||
|  | @ -945,7 +978,7 @@ | |||
|             const saveBtn = document.getElementById('saveBtn'); | ||||
|             const publishBtn = document.getElementById('publishBtn'); | ||||
| 
 | ||||
|             if (currentTabIndex < 2) { | ||||
|             if (currentTabIndex < 3) { | ||||
|                 nextBtn.style.display = 'block'; | ||||
|                 saveBtn.style.display = 'none'; | ||||
|                 publishBtn.style.display = 'none'; | ||||
|  | @ -958,7 +991,7 @@ | |||
| 
 | ||||
|         function nextStep() { | ||||
|             if (validateCurrentTab()) { | ||||
|                 if (currentTabIndex < 2) { | ||||
|                 if (currentTabIndex < 3) { | ||||
|                     switchTab(currentTabIndex + 1); | ||||
|                 } | ||||
|             } | ||||
|  | @ -983,8 +1016,8 @@ | |||
|                 } | ||||
|             }); | ||||
| 
 | ||||
|             // 特殊验证:图片上传 | ||||
|             if (currentTabIndex === 0) { | ||||
|             // 特殊验证:图片上传(基础信息页) | ||||
|             if (currentTabIndex === 1) { | ||||
|                 const imagePreview = document.getElementById('imagePreview'); | ||||
|                 const imageError = document.getElementById('imageError'); | ||||
|                 if (imagePreview.children.length === 0) { | ||||
|  | @ -1481,7 +1514,7 @@ | |||
| 
 | ||||
|         function validateAllTabs() { | ||||
|             let allValid = true; | ||||
|             for (let i = 0; i < 3; i++) { | ||||
|             for (let i = 0; i < 4; i++) { | ||||
|                 const originalIndex = currentTabIndex; | ||||
|                 currentTabIndex = i; | ||||
|                 if (!validateCurrentTab()) { | ||||
|  |  | |||
|  | @ -460,6 +460,35 @@ | |||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="divider"></div> | ||||
| 
 | ||||
|         <!-- 免运费条件 --> | ||||
|         <div class="section"> | ||||
|             <div class="section-header"> | ||||
|                 <div class="section-title">免运费条件</div> | ||||
|                 <div class="section-help">字段说明</div> | ||||
|             </div> | ||||
| 
 | ||||
|             <div class="form-item"> | ||||
|                 <label class="form-label">订单满额免运费</label> | ||||
|                 <div class="form-value"> | ||||
|                     <label class="switch"> | ||||
|                         <input type="checkbox" id="freeShippingEnabled"> | ||||
|                         <span class="slider"></span> | ||||
|                     </label> | ||||
|                     <span class="switch-label" id="freeShippingLabel">已关闭</span> | ||||
|                 </div> | ||||
|             </div> | ||||
| 
 | ||||
|             <div class="form-item" id="freeShippingAmountItem" style="display: none;"> | ||||
|                 <label class="form-label required">订单满</label> | ||||
|                 <div class="form-value"> | ||||
|                     <input type="number" class="form-input" id="freeShippingAmount" value="50" min="0" step="0.1"> | ||||
|                     <span class="form-unit">元,免运费</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
| 
 | ||||
| 
 | ||||
|         <!-- 底部按钮 --> | ||||
|         <div class="footer"> | ||||
|  | @ -507,6 +536,23 @@ | |||
|             console.log('运费收益方切换为:', beneficiary === 'market' ? '市场经营者' : '专员'); | ||||
|         }); | ||||
| 
 | ||||
|         // 免运费条件开关 | ||||
|         const freeShippingEnabledSwitch = document.getElementById('freeShippingEnabled'); | ||||
|         const freeShippingLabel = document.getElementById('freeShippingLabel'); | ||||
|         const freeShippingAmountItem = document.getElementById('freeShippingAmountItem'); | ||||
| 
 | ||||
|         freeShippingEnabledSwitch.addEventListener('change', function() { | ||||
|             if (this.checked) { | ||||
|                 freeShippingLabel.textContent = '已开启'; | ||||
|                 freeShippingAmountItem.style.display = 'flex'; | ||||
|                 console.log('免运费条件已开启'); | ||||
|             } else { | ||||
|                 freeShippingLabel.textContent = '已关闭'; | ||||
|                 freeShippingAmountItem.style.display = 'none'; | ||||
|                 console.log('免运费条件已关闭'); | ||||
|             } | ||||
|         }); | ||||
| 
 | ||||
|         // 取消按钮 | ||||
|         function handleCancel() { | ||||
|             if (confirm('确定要取消吗?未保存的更改将丢失。')) { | ||||
|  | @ -519,6 +565,7 @@ | |||
|             const mode = freightModeSelect.value; | ||||
|             const beneficiary = document.getElementById('beneficiary').value; | ||||
|             const deliveryEnabled = deliveryEnabledSwitch.checked; | ||||
|             const freeShippingEnabled = freeShippingEnabledSwitch.checked; | ||||
| 
 | ||||
|             // 收集表单数据 | ||||
|             const formData = { | ||||
|  | @ -536,6 +583,9 @@ | |||
|                 }, | ||||
|                 运费计算: { | ||||
|                     运费模式: mode === 'distance' ? '距离运费' : '固定费用' | ||||
|                 }, | ||||
|                 免运费条件: { | ||||
|                     是否启用: freeShippingEnabled | ||||
|                 } | ||||
|             }; | ||||
| 
 | ||||
|  | @ -548,6 +598,11 @@ | |||
|                 formData.运费计算.配送费用 = parseFloat(document.getElementById('fixedPrice').value); | ||||
|             } | ||||
| 
 | ||||
|             // 添加免运费条件 | ||||
|             if (freeShippingEnabled) { | ||||
|                 formData.免运费条件.订单满额 = parseFloat(document.getElementById('freeShippingAmount').value); | ||||
|             } | ||||
| 
 | ||||
|             console.log('提交的数据:', formData); | ||||
| 
 | ||||
|             // TODO: 这里添加实际的提交逻辑 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue