修复套餐选择后默认服务时长未带出问题：1)优化元素获取方式，确保能找到正确的表单和输入框；2)添加全面的错误处理和调试信息；3)触发change事件确保所有依赖功能更新
This commit is contained in:
+147
-61
@@ -798,115 +798,201 @@ try {
|
||||
|
||||
// 更新套餐信息
|
||||
function updatePackageInfo(submissionId) {
|
||||
console.log('updatePackageInfo called with submissionId:', submissionId);
|
||||
console.log('=== updatePackageInfo called with submissionId:', submissionId, '===');
|
||||
|
||||
// 直接获取表单元素，确保在正确的表单上下文中操作
|
||||
const packageSelect = document.getElementById('selected_package_' + submissionId);
|
||||
if (!packageSelect) {
|
||||
console.error('Package select not found for submissionId:', submissionId);
|
||||
console.error('❌ Package select not found for submissionId:', submissionId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取当前表单
|
||||
const form = packageSelect.closest('form');
|
||||
if (!form) {
|
||||
console.error('❌ Form not found for submissionId:', submissionId);
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedOption = packageSelect.options[packageSelect.selectedIndex];
|
||||
const packageInfoDiv = document.getElementById('packageInfo_' + submissionId);
|
||||
const durationInput = document.getElementById('duration_' + submissionId);
|
||||
const totalPriceInput = document.getElementById('total_price_' + submissionId);
|
||||
|
||||
console.log('Selected option:', selectedOption, 'value:', selectedOption ? selectedOption.value : 'null');
|
||||
|
||||
if (selectedOption && selectedOption.value) {
|
||||
// 直接从selectedOption的data-duration属性获取时长
|
||||
const duration = parseInt(selectedOption.dataset.duration);
|
||||
const price = parseFloat(selectedOption.dataset.price);
|
||||
const services = JSON.parse(selectedOption.dataset.services);
|
||||
// 使用getAttribute方法获取data属性，确保兼容所有浏览器
|
||||
const duration = parseInt(selectedOption.getAttribute('data-duration'));
|
||||
const price = parseFloat(selectedOption.getAttribute('data-price'));
|
||||
const servicesJSON = selectedOption.getAttribute('data-services');
|
||||
const services = servicesJSON ? JSON.parse(servicesJSON) : [];
|
||||
|
||||
console.log('Package data using dataset:', {duration, price});
|
||||
console.log('Package data:', {duration, price, services: services.length});
|
||||
|
||||
// 更新套餐信息显示
|
||||
document.getElementById('packageName_' + submissionId).textContent = selectedOption.textContent;
|
||||
document.getElementById('packageDuration_' + submissionId).textContent = `基础时长: ${duration}分钟`;
|
||||
document.getElementById('packagePrice_' + submissionId).textContent = `套餐价格: ￥${price.toFixed(2)}`;
|
||||
const packageNameElement = document.getElementById('packageName_' + submissionId);
|
||||
const packageDurationElement = document.getElementById('packageDuration_' + submissionId);
|
||||
const packagePriceElement = document.getElementById('packagePrice_' + submissionId);
|
||||
|
||||
if (packageNameElement) packageNameElement.textContent = selectedOption.textContent;
|
||||
if (packageDurationElement) packageDurationElement.textContent = `基础时长: ${duration}分钟`;
|
||||
if (packagePriceElement) packagePriceElement.textContent = `套餐价格: ￥${price.toFixed(2)}`;
|
||||
|
||||
// 更新服务项目显示
|
||||
const servicesContainer = document.getElementById('packageServices_' + submissionId);
|
||||
if (services && services.length > 0) {
|
||||
servicesContainer.innerHTML = '<strong>包含服务:</strong><br>' +
|
||||
services.map(service => `• ${service}`).join('<br>');
|
||||
} else {
|
||||
servicesContainer.innerHTML = '';
|
||||
if (servicesContainer) {
|
||||
if (services && services.length > 0) {
|
||||
servicesContainer.innerHTML = '<strong>包含服务:</strong><br>' +
|
||||
services.map(service => `• ${service}`).join('<br>');
|
||||
} else {
|
||||
servicesContainer.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 直接更新时长输入框
|
||||
// 使用两种方式获取时长输入框，确保万无一失
|
||||
const durationInputById = document.getElementById('duration_' + submissionId);
|
||||
const durationInputByName = form.querySelector('input[name="duration"]');
|
||||
|
||||
console.log('Duration inputs found - by ID:', durationInputById ? 'Yes' : 'No', 'by Name:', durationInputByName ? 'Yes' : 'No');
|
||||
|
||||
// 优先使用ID获取的元素，如果不存在则使用name获取的元素
|
||||
const durationInput = durationInputById || durationInputByName;
|
||||
|
||||
if (durationInput) {
|
||||
// 强制设置时长值
|
||||
durationInput.value = duration;
|
||||
console.log('Directly updated duration input to:', duration);
|
||||
// 触发change事件，确保所有依赖此输入的功能都能更新
|
||||
durationInput.dispatchEvent(new Event('change'));
|
||||
console.log('✅ Successfully updated duration input to:', duration);
|
||||
} else {
|
||||
console.error('Duration input not found for submissionId:', submissionId);
|
||||
console.error('❌ Cannot find duration input for submissionId:', submissionId);
|
||||
}
|
||||
|
||||
// 更新价格输入框
|
||||
const totalPriceInput = document.getElementById('total_price_' + submissionId);
|
||||
if (totalPriceInput) {
|
||||
totalPriceInput.value = price.toFixed(2);
|
||||
console.log('✅ Updated total price to:', price.toFixed(2));
|
||||
}
|
||||
|
||||
// 更新快捷选择按钮状态
|
||||
console.log('Calling selectDuration with:', submissionId, duration);
|
||||
selectDuration(submissionId, duration);
|
||||
|
||||
packageInfoDiv.style.display = 'block';
|
||||
// 显示套餐信息
|
||||
if (packageInfoDiv) {
|
||||
packageInfoDiv.style.display = 'block';
|
||||
}
|
||||
} else {
|
||||
packageInfoDiv.style.display = 'none';
|
||||
if (packageInfoDiv) {
|
||||
packageInfoDiv.style.display = 'none';
|
||||
}
|
||||
console.log('❌ No package selected');
|
||||
}
|
||||
}
|
||||
|
||||
// 快捷选择服务时长
|
||||
function selectDuration(submissionId, minutes) {
|
||||
console.log('selectDuration called with submissionId:', submissionId, 'minutes:', minutes);
|
||||
console.log('=== selectDuration called with submissionId:', submissionId, 'minutes:', minutes, '===');
|
||||
|
||||
// 直接通过ID获取时长输入框
|
||||
const durationInput = document.getElementById('duration_' + submissionId);
|
||||
const customDurationInput = document.getElementById('customDuration_' + submissionId);
|
||||
|
||||
// 更新时长输入框
|
||||
if (durationInput) {
|
||||
durationInput.value = minutes;
|
||||
console.log('selectDuration updated duration input to:', minutes);
|
||||
} else {
|
||||
console.error('Duration input not found in selectDuration for submissionId:', submissionId);
|
||||
// 先检查minutes是否有效
|
||||
if (isNaN(minutes) || minutes <= 0) {
|
||||
console.error('❌ Invalid minutes value:', minutes);
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新自定义时长输入框
|
||||
if (customDurationInput) {
|
||||
customDurationInput.value = minutes;
|
||||
// 使用两种方式获取表单，确保找到正确的表单
|
||||
let form = null;
|
||||
|
||||
// 方式1：通过套餐选择元素获取表单
|
||||
const packageSelect = document.getElementById('selected_package_' + submissionId);
|
||||
if (packageSelect) {
|
||||
form = packageSelect.closest('form');
|
||||
console.log('Form found via packageSelect:', form ? 'Yes' : 'No');
|
||||
}
|
||||
|
||||
// 直接通过ID获取packageInfo元素，然后找到其父表单
|
||||
const packageInfo = document.getElementById('packageInfo_' + submissionId);
|
||||
let form;
|
||||
if (packageInfo) {
|
||||
form = packageInfo.closest('form');
|
||||
} else {
|
||||
// 如果找不到packageInfo，尝试通过packageSelect找到表单
|
||||
const packageSelect = document.getElementById('selected_package_' + submissionId);
|
||||
if (packageSelect) {
|
||||
form = packageSelect.closest('form');
|
||||
// 方式2：如果方式1失败，通过时长输入框获取表单
|
||||
if (!form) {
|
||||
const durationInputById = document.getElementById('duration_' + submissionId);
|
||||
if (durationInputById) {
|
||||
form = durationInputById.closest('form');
|
||||
console.log('Form found via durationInputById:', form ? 'Yes' : 'No');
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Found form:', form);
|
||||
// 方式3：如果还是失败，尝试通过packageInfo找到表单
|
||||
if (!form) {
|
||||
const packageInfo = document.getElementById('packageInfo_' + submissionId);
|
||||
if (packageInfo) {
|
||||
form = packageInfo.closest('form');
|
||||
console.log('Form found via packageInfo:', form ? 'Yes' : 'No');
|
||||
}
|
||||
}
|
||||
|
||||
if (form) {
|
||||
// 获取表单内的所有时长按钮
|
||||
const durationButtons = form.querySelectorAll('.duration-btn');
|
||||
console.log('Found duration buttons:', durationButtons.length);
|
||||
// 方式4：如果还是失败，尝试通过自定义时长输入框找到表单
|
||||
if (!form) {
|
||||
const customDurationInput = document.getElementById('customDuration_' + submissionId);
|
||||
if (customDurationInput) {
|
||||
form = customDurationInput.closest('form');
|
||||
console.log('Form found via customDurationInput:', form ? 'Yes' : 'No');
|
||||
}
|
||||
}
|
||||
|
||||
if (!form) {
|
||||
console.error('❌ Form not found for submissionId:', submissionId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用两种方式获取时长输入框，确保万无一失
|
||||
const durationInputById = document.getElementById('duration_' + submissionId);
|
||||
const durationInputByName = form.querySelector('input[name="duration"]');
|
||||
const durationInput = durationInputById || durationInputByName;
|
||||
|
||||
if (durationInput) {
|
||||
// 强制设置时长值
|
||||
durationInput.value = minutes;
|
||||
// 触发change事件，确保所有依赖此输入的功能都能更新
|
||||
durationInput.dispatchEvent(new Event('change'));
|
||||
console.log('✅ Duration input updated to:', minutes);
|
||||
} else {
|
||||
console.error('❌ Duration input not found for submissionId:', submissionId);
|
||||
}
|
||||
|
||||
// 更新自定义时长输入框
|
||||
const customDurationInput = document.getElementById('customDuration_' + submissionId);
|
||||
if (customDurationInput) {
|
||||
customDurationInput.value = minutes;
|
||||
console.log('✅ Custom duration input updated to:', minutes);
|
||||
} else {
|
||||
console.error('❌ Custom duration input not found for submissionId:', submissionId);
|
||||
}
|
||||
|
||||
// 获取当前表单的时长按钮
|
||||
const durationButtons = form.querySelectorAll('.duration-btn');
|
||||
console.log('Found duration buttons:', durationButtons.length);
|
||||
|
||||
if (durationButtons.length === 0) {
|
||||
console.warn('⚠️ No duration buttons found in form');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新按钮选中状态
|
||||
let buttonFound = false;
|
||||
durationButtons.forEach(btn => {
|
||||
// 使用getAttribute获取data属性，确保兼容所有浏览器
|
||||
const btnDuration = parseInt(btn.getAttribute('data-duration'));
|
||||
console.log('Checking button:', btn.textContent, 'data-duration:', btnDuration);
|
||||
|
||||
// 更新按钮选中状态
|
||||
durationButtons.forEach(btn => {
|
||||
const btnDuration = parseInt(btn.dataset.duration);
|
||||
if (btnDuration === minutes) {
|
||||
btn.classList.add('selected');
|
||||
console.log('Added selected class to button with duration:', btnDuration);
|
||||
} else {
|
||||
btn.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
if (btnDuration === minutes) {
|
||||
btn.classList.add('selected');
|
||||
console.log('✅ Added selected class to button with duration:', btnDuration);
|
||||
buttonFound = true;
|
||||
} else {
|
||||
btn.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
|
||||
if (!buttonFound) {
|
||||
console.warn('⚠️ No matching duration button found for:', minutes, 'minutes');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user