feat(预约表单): 添加价格编辑字段并改进表单验证逻辑

添加可编辑的最终价格输入字段,支持自定义价格
根据客户类型实现不同的表单验证逻辑
改进套餐价格显示格式并添加价格自动填充功能
This commit is contained in:
2025-11-19 12:35:14 +08:00
parent 76ba21f57a
commit e88ef332ff
+42 -10
View File
@@ -437,9 +437,15 @@ $packages_json = json_encode(array_map(function($package) {
<h4 id="packageName"></h4>
<p id="packageDescription"></p>
<div class="package-meta">
<span id="packageDuration"></span>
<span id="packagePrice"></span>
</div>
<span id="packageDuration"></span>
<span id="packagePrice"></span>
</div>
<!-- 可编辑的价格输入字段 -->
<div class="form-group" style="margin-top: 15px;">
<label for="total_price">最终价格 (¥)</label>
<input type="number" id="total_price" name="total_price" min="0" step="0.01" value="0" placeholder="输入最终价格" required>
<input type="hidden" id="package_price" value="0">
</div>
<div id="packageServices"></div>
</div>
</div>
@@ -1144,7 +1150,7 @@ $packages_json = json_encode(array_map(function($package) {
document.getElementById('packageName').textContent = package.package_name;
document.getElementById('packageDescription').textContent = package.description;
document.getElementById('packageDuration').textContent = `基础时长: ${package.base_duration}分钟`;
document.getElementById('packagePrice').textContent = `价格: ¥${package.price}`;
document.getElementById('packagePrice').textContent = `套餐价格: ¥${package.price}`;
// 显示服务项目
const servicesContainer = document.getElementById('packageServices');
@@ -1158,9 +1164,17 @@ $packages_json = json_encode(array_map(function($package) {
// 自动设置基础时长
document.getElementById('duration').value = package.base_duration;
selectDuration(package.base_duration);
// 设置价格输入字段的值为套餐价格
document.getElementById('package_price').value = package.price;
document.getElementById('total_price').value = package.price;
console.log('已设置价格:', package.price);
}
} else {
packageInfoDiv.style.display = 'none';
document.getElementById('package_price').value = 0;
document.getElementById('total_price').value = 0;
}
updateSubmitButton();
@@ -1168,14 +1182,32 @@ $packages_json = json_encode(array_map(function($package) {
function updateSubmitButton() {
const submitBtn = document.getElementById('submitBtn');
const isFormValid = selectedDate && selectedTime &&
document.getElementById('customer_name').value &&
document.getElementById('phone').value &&
document.getElementById('car_model').value &&
document.getElementById('car_number').value &&
document.getElementById('package_id').value;
const customerType = document.getElementById('customer_type').value;
// 根据客户类型进行不同的验证
let isFormValid;
if (customerType === 'vip') {
// VIP模式:验证VIP选择和其他必要字段,但不验证新客户字段
isFormValid = selectedDate && selectedTime &&
document.getElementById('vip_id').value &&
document.getElementById('car_model').value &&
document.getElementById('car_number').value &&
document.getElementById('package_id').value &&
document.getElementById('total_price').value;
} else {
// 新客户模式:验证所有必填字段
isFormValid = selectedDate && selectedTime &&
document.getElementById('customer_name').value &&
document.getElementById('phone').value &&
document.getElementById('car_model').value &&
document.getElementById('car_number').value &&
document.getElementById('package_id').value &&
document.getElementById('total_price').value;
}
submitBtn.disabled = !isFormValid;
console.log('更新提交按钮状态:', isFormValid ? '可点击' : '禁用');
}
function resetForm() {