/* ===== 开元云科技 官网交互脚本 ===== */ document.addEventListener('DOMContentLoaded', function() { initScrollAnimations(); initProductCards(); initFloatingWidget(); initSmoothScroll(); }); /* === Scroll Fade-in Animations === */ function initScrollAnimations() { var elements = document.querySelectorAll('.fade-in'); if (!elements.length) return; var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 }); elements.forEach(function(el) { observer.observe(el); }); } /* === Product Card Expand === */ function initProductCards() { var cards = document.querySelectorAll('.product-card'); cards.forEach(function(card) { card.addEventListener('click', function() { var wasActive = card.classList.contains('active'); // Close all cards.forEach(function(c) { c.classList.remove('active'); }); // Toggle current if (!wasActive) { card.classList.add('active'); } }); }); } /* === Floating Contact Widget === */ function initFloatingWidget() { var avatar = document.querySelector('.float-avatar'); var panel = document.querySelector('.float-panel'); if (!avatar || !panel) return; avatar.addEventListener('click', function(e) { e.stopPropagation(); panel.classList.toggle('active'); }); // Close panel on outside click document.addEventListener('click', function(e) { if (!panel.contains(e.target) && !avatar.contains(e.target)) { panel.classList.remove('active'); } }); // Panel option clicks -> show form var options = panel.querySelectorAll('.panel-option'); options.forEach(function(opt) { opt.addEventListener('click', function() { var formType = opt.getAttribute('data-form'); var panelBody = panel.querySelector('.panel-body'); var panelForm = panel.querySelector('.panel-form'); if (panelBody) panelBody.style.display = 'none'; if (panelForm) { panelForm.classList.add('active'); panelForm.setAttribute('data-type', formType); } }); }); // Back button var backBtn = panel.querySelector('.back-btn'); if (backBtn) { backBtn.addEventListener('click', function() { var panelBody = panel.querySelector('.panel-body'); var panelForm = panel.querySelector('.panel-form'); if (panelBody) panelBody.style.display = 'block'; if (panelForm) panelForm.classList.remove('active'); }); } // Form submit var submitBtn = panel.querySelector('.submit-btn'); if (submitBtn) { submitBtn.addEventListener('click', function(e) { e.preventDefault(); var form = panel.querySelector('.panel-form'); var name = form.querySelector('[name="name"]'); var phone = form.querySelector('[name="phone"]'); var company = form.querySelector('[name="company"]'); var message = form.querySelector('[name="message"]'); if (!phone || !phone.value.trim()) { alert('请填写联系电话'); return; } var data = { name: name ? name.value : '', phone: phone ? phone.value : '', company: company ? company.value : '', message: message ? message.value : '', interest_products: form.getAttribute('data-type') || '' }; // Submit via fetch var submitUrl = form.getAttribute('data-submit-url'); if (!submitUrl) { alert('提交成功,我们会尽快联系您!'); panel.classList.remove('active'); return; } fetch(submitUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) }) .then(function(r) { return r.json(); }) .then(function(resp) { alert('感谢您的留言,我们会尽快联系您!'); panel.classList.remove('active'); // Reset form if (name) name.value = ''; if (phone) phone.value = ''; if (company) company.value = ''; if (message) message.value = ''; }) .catch(function(err) { console.error('Submit error:', err); alert('提交失败,请稍后重试'); }); }); } } /* === Smooth Scroll for Nav Links === */ function initSmoothScroll() { var links = document.querySelectorAll('.nav-links a[href^="#"]'); links.forEach(function(link) { link.addEventListener('click', function(e) { var target = document.querySelector(this.getAttribute('href')); if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); }