综述: 优化商品添加页面和同城运费配置功能
- 在商品添加页面中调整标签页顺序,将"发布店铺"标签页移到首位,并添加店铺选择下拉框和相关说明文字 - 更新商品添加页面中的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