Data = {
product: selectedProduct,
dimensions: document.getElementById('dimensions').value,
material: document.getElementById('material').value,
color: document.getElementById('color').value,
quantity: parseInt(document.getElementById('quantity').value) || 1,
installation: document.getElementById('installation').value,
specialRequirements: document.getElementById('specialRequirements').value
};
console.log('报价数据已更新:', quoteData);
}
// 更新价格
function updatePrice() {
// 基础价格
let basePrice = 0;
switch(selectedProduct) {
case 'led':
basePrice = 800;
break;
case 'signage':
basePrice = 500;
break;
case 'outdoor':
basePrice = 1200;
break;
}
// 数量调整
const quantity = parseInt(document.getElementById('quantity')?.value) || 1;
let totalPrice = basePrice * quantity;
// 材质调整
const material = document.getElementById('material')?.value;
if (material) {
switch(material) {
case 'stainless':
totalPrice *= 1.5;
break;
case 'aluminum':
totalPrice *= 1.3;
break;
case 'acrylic':
totalPrice *= 1.2;
break;
case 'composite':
totalPrice *= 1.4;
break;
}
}
// 安装方式调整
const installation = document.getElementById('installation')?.value;
if (installation === 'wall' || installation === 'ground') {
totalPrice += 200;
} else if (installation === 'hanging') {
totalPrice += 300;
}
// 显示价格
document.getElementById('priceValue').textContent = '¥ ' + totalPrice.toFixed(2);
return totalPrice;
}
// 更新预览
function updatePreview() {
const previewContainer = document.getElementById('previewContainer');
// 产品类型映射
const productMap = {
'led': 'LED发光字',
'signage': '标识标牌',
'outdoor': '户外广告'
};
// 材质映射
const materialMap = {
'acrylic': '亚克力',
'stainless': '不锈钢',
'aluminum': '铝型材',
'pvc': 'PVC',
'composite': '复合材料'
};
// 安装方式映射
const installationMap = {
'wall': '墙面安装',
'ground': '地面安装',
'hanging': '悬挂安装',
'self': '客户自提'
};
const previewHTML = `
产品类型：
${productMap[selectedProduct] || selectedProduct}
尺寸规格：
${quoteData.dimensions || '未指定'}
材质要求：
${materialMap[quoteData.material] || quoteData.material || '未指定'}
颜色要求：
${quoteData.color || '未指定'}
数量：
${quoteData.quantity || 1} 件
安装方式：
${installationMap[quoteData.installation] || quoteData.installation || '未指定'}
特殊要求：
${quoteData.specialRequirements || '无'}
`;
previewContainer.innerHTML = previewHTML;
}
// 验证步骤
function validateStep(step) {
const errorAlert = document.getElementById('errorAlert');
switch(step) {
case 1:
// 步骤1：必须选择产品
if (!selectedProduct) {
errorAlert.textContent = '请选择一个产品类型';
errorAlert.style.display = 'block';
return false;
}
break;
case 2:
// 步骤2：验证必填字段
const dimensions = document.getElementById('dimensions').value.trim();
const material = document.getElementById('material').value;
const color = document.getElementById('color').value.trim();
const quantity = document.getElementById('quantity').value.trim();
if (!dimensions) {
errorAlert.textContent = '请填写尺寸规格';
errorAlert.style.display = 'block';
return false;
}
if (!material) {
errorAlert.textContent = '请选择材质要求';
errorAlert.style.display = 'block';
return false;
}
if (!color) {
errorAlert.textContent = '请填写颜色要求';
errorAlert.style.display = 'block';
return false;
}
if (!quantity || parseInt(quantity) < 1) {
errorAlert.textContent = '请填写有效的数量';
errorAlert.style.display = 'block';
return false;
}
break;
}
// 隐藏错误提示
errorAlert.style.display = 'none';
return true;
}
// 提交报价
function submitQuote() {
console.log('提交报价数据:', quoteData);
// 这里可以添加实际提交到服务器的代码
// 例如：fetch('/api/quote', { method: 'POST', body: JSON.stringify(quoteData) })
// 显示成功提示
const successAlert = document.getElementById('successAlert');
successAlert.style.display = 'block';
// 生成报价编号
const now = new Date();
const quoteNumber = 'Q' + now.getFullYear() +
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0') +
String(now.getHours()).padStart(2, '0') +
String(now.getMinutes()).padStart(2, '0');
document.getElementById('quoteNumber').textContent = quoteNumber;
// 保存报价数据到本地存储
saveQuoteData(quoteData);
return true;
}
// 打开邮件客户端
function openMailClient() {
const subject = '广告标识报价需求 - ' + document.getElementById('quoteNumber').textContent;
const body = `
产品类型：${selectedProduct}
尺寸规格：${quoteData.dimensions}
材质要求：${quoteData.material}
颜色要求：${quoteData.color}
数量：${quoteData.quantity}
安装方式：${quoteData.installation}
特殊要求：${quoteData.specialRequirements}
预估价格：${document.getElementById('priceValue').textContent}
请尽快与我联系，谢谢！
`.trim();
const mailtoLink = `mailto:contact@company.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;
}
// 保存报价数据
function saveQuoteData(data) {
try {
// 保存到localStorage
const savedQuotes = JSON.parse(localStorage.getItem('jingling_quotes') || '[]');
savedQuotes.push({
...data,
timestamp: new Date().toISOString(),
quoteNumber: document.getElementById('quoteNumber').textContent,
price: document.getElementById('priceValue').textContent
});
localStorage.setItem('jingling_quotes', JSON.stringify(savedQuotes));
console.log('报价数据已保存到本地存储');
} catch (error) {
console.error('保存报价数据失败:', error);
}
}
// 重置表单
function resetForm() {
// 重置步骤
document.getElementById('step1').classList.add('active');
document.getElementById('step2').classList.remove('active');
document.getElementById('step3').classList.remove('active');
document.getElementById('step4').classList.remove('active');
document.getElementById('step1-indicator').classList.add('active');
document.getElementById('step2-indicator').classList.remove('active');
document.getElementById('step3-indicator').classList.remove('active');
document.getElementById('step4-indicator').classList.remove('active');
currentStep = 1;
// 重置表单字段
document.getElementById('dimensions').value = '';
document.getElementById('material').value = '';
document.getElementById('color').value = '';
document.getElementById('quantity').value = '1';
document.getElementById('installation').value = '';
document.getElementById('specialRequirements').value = '';
// 重置产品选择
selectProduct('led');
// 隐藏提示
document.getElementById('errorAlert').style.display = 'none';
document.getElementById('successAlert').style.display = 'none';
// 更新价格
updatePrice();
}
// 自动提交（第4步自动执行）
async function autoSubmitQuote() {
console.log('开始自动提交报价...');
// 显示加载状态
const submitBtn = document.querySelector('#step3 .btn-primary');
if (submitBtn) {
submitBtn.textContent = '提交中...';
submitBtn.disabled = true;
}
try {
// 模拟API调用延迟
await new Promise(resolve => setTimeout(resolve, 1500));
// 提交报价
const success = submitQuote();
if (success) {
console.log('报价提交成功');
}
} catch (error) {
console.error('提交报价失败:', error);
alert('提交失败，请稍后重试');
} finally {
// 恢复按钮状态
if (submitBtn) {
submitBtn.textContent = '提交报价';
submitBtn.disabled = false;
}
}
}
// 开始新的报价
function newQuote() {
resetForm();
// 滚动到顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// 页面加载时初始化
window.onload = function() {
// 设置默认产品
selectProduct('led');
// 绑定输入事件实时更新价格
const priceInputs = ['dimensions', 'material', 'quantity', 'installation'];
priceInputs.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.addEventListener('change', updatePrice);
element.addEventListener('input', updatePrice);
}
});
// 初始化价格
updatePrice();
console.log('在线报价系统已初始化');
};