综述: 优化商品添加页面和同城运费配置功能

- 在商品添加页面中调整标签页顺序,将"发布店铺"标签页移到首位,并添加店铺选择下拉框和相关说明文字
- 更新商品添加页面中的tab切换逻辑,适配新增的发布店铺标签页
- 在同城运费配置页面中新增免运费条件配置功能,包括开关控制和满额免运费设置
- 添加相应的JavaScript事件处理逻辑和表单数据收集功能
This commit is contained in:
linbin 2025-10-21 05:00:15 +08:00
parent 633d7f7302
commit a6739b9548
2 changed files with 95 additions and 7 deletions

View File

@ -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()) {

View File

@ -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: 这里添加实际的提交逻辑