综述: 优化商品添加页面和同城运费配置功能
- 在商品添加页面中调整标签页顺序,将"发布店铺"标签页移到首位,并添加店铺选择下拉框和相关说明文字 - 更新商品添加页面中的tab切换逻辑,适配新增的发布店铺标签页 - 在同城运费配置页面中新增免运费条件配置功能,包括开关控制和满额免运费设置 - 添加相应的JavaScript事件处理逻辑和表单数据收集功能
This commit is contained in:
		
							parent
							
								
									633d7f7302
								
							
						
					
					
						commit
						a6739b9548
					
				|  | @ -575,7 +575,8 @@ | ||||||
|             <!-- 标签页导航 --> |             <!-- 标签页导航 --> | ||||||
|             <div class="tabs-container"> |             <div class="tabs-container"> | ||||||
|                 <div class="tabs"> |                 <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="sales">销售信息</div> | ||||||
|                     <div class="tab" data-tab="other">其他信息</div> |                     <div class="tab" data-tab="other">其他信息</div> | ||||||
|                 </div> |                 </div> | ||||||
|  | @ -583,8 +584,40 @@ | ||||||
| 
 | 
 | ||||||
|             <!-- 表单内容 --> |             <!-- 表单内容 --> | ||||||
|             <form id="addProductForm"> |             <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="tab-content"> | ||||||
|                         <div class="form-group"> |                         <div class="form-group"> | ||||||
|                             <label class="form-label"> |                             <label class="form-label"> | ||||||
|  | @ -945,7 +978,7 @@ | ||||||
|             const saveBtn = document.getElementById('saveBtn'); |             const saveBtn = document.getElementById('saveBtn'); | ||||||
|             const publishBtn = document.getElementById('publishBtn'); |             const publishBtn = document.getElementById('publishBtn'); | ||||||
| 
 | 
 | ||||||
|             if (currentTabIndex < 2) { |             if (currentTabIndex < 3) { | ||||||
|                 nextBtn.style.display = 'block'; |                 nextBtn.style.display = 'block'; | ||||||
|                 saveBtn.style.display = 'none'; |                 saveBtn.style.display = 'none'; | ||||||
|                 publishBtn.style.display = 'none'; |                 publishBtn.style.display = 'none'; | ||||||
|  | @ -958,7 +991,7 @@ | ||||||
| 
 | 
 | ||||||
|         function nextStep() { |         function nextStep() { | ||||||
|             if (validateCurrentTab()) { |             if (validateCurrentTab()) { | ||||||
|                 if (currentTabIndex < 2) { |                 if (currentTabIndex < 3) { | ||||||
|                     switchTab(currentTabIndex + 1); |                     switchTab(currentTabIndex + 1); | ||||||
|                 } |                 } | ||||||
|             } |             } | ||||||
|  | @ -983,8 +1016,8 @@ | ||||||
|                 } |                 } | ||||||
|             }); |             }); | ||||||
| 
 | 
 | ||||||
|             // 特殊验证:图片上传 |             // 特殊验证:图片上传(基础信息页) | ||||||
|             if (currentTabIndex === 0) { |             if (currentTabIndex === 1) { | ||||||
|                 const imagePreview = document.getElementById('imagePreview'); |                 const imagePreview = document.getElementById('imagePreview'); | ||||||
|                 const imageError = document.getElementById('imageError'); |                 const imageError = document.getElementById('imageError'); | ||||||
|                 if (imagePreview.children.length === 0) { |                 if (imagePreview.children.length === 0) { | ||||||
|  | @ -1481,7 +1514,7 @@ | ||||||
| 
 | 
 | ||||||
|         function validateAllTabs() { |         function validateAllTabs() { | ||||||
|             let allValid = true; |             let allValid = true; | ||||||
|             for (let i = 0; i < 3; i++) { |             for (let i = 0; i < 4; i++) { | ||||||
|                 const originalIndex = currentTabIndex; |                 const originalIndex = currentTabIndex; | ||||||
|                 currentTabIndex = i; |                 currentTabIndex = i; | ||||||
|                 if (!validateCurrentTab()) { |                 if (!validateCurrentTab()) { | ||||||
|  |  | ||||||
|  | @ -460,6 +460,35 @@ | ||||||
|             </div> |             </div> | ||||||
|         </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"> |         <div class="footer"> | ||||||
|  | @ -507,6 +536,23 @@ | ||||||
|             console.log('运费收益方切换为:', beneficiary === 'market' ? '市场经营者' : '专员'); |             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() { |         function handleCancel() { | ||||||
|             if (confirm('确定要取消吗?未保存的更改将丢失。')) { |             if (confirm('确定要取消吗?未保存的更改将丢失。')) { | ||||||
|  | @ -519,6 +565,7 @@ | ||||||
|             const mode = freightModeSelect.value; |             const mode = freightModeSelect.value; | ||||||
|             const beneficiary = document.getElementById('beneficiary').value; |             const beneficiary = document.getElementById('beneficiary').value; | ||||||
|             const deliveryEnabled = deliveryEnabledSwitch.checked; |             const deliveryEnabled = deliveryEnabledSwitch.checked; | ||||||
|  |             const freeShippingEnabled = freeShippingEnabledSwitch.checked; | ||||||
| 
 | 
 | ||||||
|             // 收集表单数据 |             // 收集表单数据 | ||||||
|             const formData = { |             const formData = { | ||||||
|  | @ -536,6 +583,9 @@ | ||||||
|                 }, |                 }, | ||||||
|                 运费计算: { |                 运费计算: { | ||||||
|                     运费模式: mode === 'distance' ? '距离运费' : '固定费用' |                     运费模式: mode === 'distance' ? '距离运费' : '固定费用' | ||||||
|  |                 }, | ||||||
|  |                 免运费条件: { | ||||||
|  |                     是否启用: freeShippingEnabled | ||||||
|                 } |                 } | ||||||
|             }; |             }; | ||||||
| 
 | 
 | ||||||
|  | @ -548,6 +598,11 @@ | ||||||
|                 formData.运费计算.配送费用 = parseFloat(document.getElementById('fixedPrice').value); |                 formData.运费计算.配送费用 = parseFloat(document.getElementById('fixedPrice').value); | ||||||
|             } |             } | ||||||
| 
 | 
 | ||||||
|  |             // 添加免运费条件 | ||||||
|  |             if (freeShippingEnabled) { | ||||||
|  |                 formData.免运费条件.订单满额 = parseFloat(document.getElementById('freeShippingAmount').value); | ||||||
|  |             } | ||||||
|  | 
 | ||||||
|             console.log('提交的数据:', formData); |             console.log('提交的数据:', formData); | ||||||
| 
 | 
 | ||||||
|             // TODO: 这里添加实际的提交逻辑 |             // TODO: 这里添加实际的提交逻辑 | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue