// 送花服务功能管理类 class FlowerManager { constructor() { this.flowers = []; this.filteredFlowers = []; this.currentFilters = { category: '', price: '', occasion: '' }; this.init(); } // 初始化方法 init() { this.loadFlowers(); this.bindEvents(); AOS.init({ duration: 1000, once: true }); } // 绑定事件 bindEvents() { // 筛选器变化事件 document.getElementById('filter-category').addEventListener('change', (e) => { this.currentFilters.category = e.target.value; }); document.getElementById('filter-price').addEventListener('change', (e) => { this.currentFilters.price = e.target.value; }); document.getElementById('filter-occasion').addEventListener('change', (e) => { this.currentFilters.occasion = e.target.value; }); // 筛选按钮点击事件 document.querySelector('.flower-filter button').addEventListener('click', () => { this.filterFlowers(); }); // 页面加载完成后显示鲜花 document.addEventListener('DOMContentLoaded', () => { this.displayFlowers(); }); } // 加载鲜花数据（模拟数据） loadFlowers() { this.flowers = [ { id: 1, name: '浪漫红玫瑰', description: '99朵红玫瑰，象征永恒的爱情和浪漫', price: 299, originalPrice: 399, image: 'images/flower-rose.svg', category: 'love', occasion: 'valentine', tags: ['love', 'romantic'], inStock: true, rating: 4.8 }, { id: 2, name: '生日祝福花束', description: '多彩花束，包含康乃馨、百合和满天星', price: 199, originalPrice: 259, image: 'images/flower-birthday.svg', category: 'birthday', occasion: 'birthday', tags: ['birthday', 'celebration'], inStock: true, rating: 4.6 }, { id: 3, name: '商务庆典花篮', description: '大型花篮，适合开业、庆典等商务场合', price: 599, originalPrice: 699, image: 'images/flower-business.svg', category: 'celebration', occasion: 'anniversary', tags: ['business', 'celebration'], inStock: true, rating: 4.7 }, { id: 4, name: '温馨慰问花束', description: '淡雅花束，表达关怀和慰问之情', price: 159, originalPrice: 199, image: 'images/flower-sympathy.svg', category: 'sympathy', occasion: 'thanks', tags: ['sympathy', 'care'], inStock: true, rating: 4.5 }, { id: 5, name: '永恒爱意花盒', description: '精美礼盒装，包含玫瑰和配花，永久保存', price: 459, originalPrice: 599, image: 'images/flower-box.svg', category: 'love', occasion: 'anniversary', tags: ['love', 'premium'], inStock: true, rating: 4.9 }, { id: 6, name: '感恩花束', description: '向日葵为主的花束，表达感谢和敬意', price: 229, originalPrice: 279, image: 'images/flower-thanks.svg', category: 'celebration', occasion: 'thanks', tags: ['thanks', 'gratitude'], inStock: true, rating: 4.4 } ]; this.filteredFlowers = [...this.flowers]; } // 筛选鲜花 filterFlowers() { this.filteredFlowers = this.flowers.filter(flower => { let match = true; // 分类筛选 if (this.currentFilters.category && flower.category !== this.currentFilters.category) { match = false; } // 价格筛选 if (this.currentFilters.price) { const [min, max] = this.currentFilters.price.split('-'); if (max === '+') { if (flower.price < parseInt(min)) { match = false; } } else { if (flower.price < parseInt(min) || flower.price > parseInt(max)) { match = false; } } } // 场合筛选 if (this.currentFilters.occasion && flower.occasion !== this.currentFilters.occasion) { match = false; } return match; }); this.displayFlowers(); } // 显示鲜花列表 displayFlowers() { const container = document.getElementById('flowers-container'); if (this.filteredFlowers.length === 0) { container.innerHTML = `

没有找到符合条件的鲜花

请尝试调整筛选条件

`; return; } container.innerHTML = this.filteredFlowers.map(flower => `
${flower.originalPrice > flower.price ? `-${Math.round((1 - flower.price / flower.originalPrice) * 100)}%` : '' } ${flower.name}
${flower.tags.map(tag => `${this.getTagName(tag)}`).join('')}
${flower.name}

${flower.description}

¥${flower.price} ${flower.originalPrice > flower.price ? `¥${flower.originalPrice}` : '' }
${flower.rating}
`).join(''); } // 获取标签名称 getTagName(tag) { const tagNames = { 'love': '爱情', 'romantic': '浪漫', 'birthday': '生日', 'celebration': '庆典', 'business': '商务', 'sympathy': '慰问', 'care': '关怀', 'premium': '精品', 'thanks': '感谢', 'gratitude': '感恩' }; return tagNames[tag] || tag; } // 显示订购表单 showOrderForm(flowerId) { const flower = this.flowers.find(f => f.id === flowerId); if (!flower) return; // 创建模态框 const modalHtml = ` `; // 添加模态框到页面 if (!document.getElementById('orderModal')) { document.body.insertAdjacentHTML('beforeend', modalHtml); } // 显示模态框 const modal = new bootstrap.Modal(document.getElementById('orderModal')); modal.show(); } // 提交订单 submitOrder(flowerId) { const form = document.getElementById('orderForm'); if (!form.checkValidity()) { form.reportValidity(); return; } const formData = new FormData(form); const orderData = { flowerId, recipientName: formData.get('recipientName'), recipientPhone: formData.get('recipientPhone'), deliveryAddress: formData.get('deliveryAddress'), deliveryTime: formData.get('deliveryTime'), greeting: formData.get('greeting'), paymentMethod: formData.get('paymentMethod'), timestamp: new Date().toISOString() }; // 模拟提交订单 this.showOrderSuccess(orderData); } // 显示订单成功 showOrderSuccess(orderData) { // 关闭订购模态框 const modal = bootstrap.Modal.getInstance(document.getElementById('orderModal')); modal.hide(); // 显示成功提示 Swal.fire({ icon: 'success', title: '订购成功！', html: `

订单详情：

收花人：${orderData.recipientName}

电话：${orderData.recipientPhone}

配送地址：${orderData.deliveryAddress}

配送时间：${new Date(orderData.deliveryTime).toLocaleString()}

我们会在配送前与您确认，感谢您的订购！

`, confirmButtonText: '确定', confirmButtonColor: '#ff6b6b' }); } // 搜索鲜花 searchFlowers(query) { if (!query.trim()) { this.filteredFlowers = [...this.flowers]; } else { this.filteredFlowers = this.flowers.filter(flower => flower.name.toLowerCase().includes(query.toLowerCase()) || flower.description.toLowerCase().includes(query.toLowerCase()) || flower.tags.some(tag => tag.toLowerCase().includes(query.toLowerCase())) ); } this.displayFlowers(); } } // 页面加载完成后初始化 let flowerManager; document.addEventListener('DOMContentLoaded', function() { flowerManager = new FlowerManager(); // 添加搜索功能（如果需要） const searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.placeholder = '搜索鲜花...'; searchInput.className = 'form-control mb-3'; searchInput.style.maxWidth = '300px'; searchInput.addEventListener('input', (e) => { flowerManager.searchFlowers(e.target.value); }); const searchContainer = document.createElement('div'); searchContainer.className = 'd-flex justify-content-center'; searchContainer.appendChild(searchInput); const flowersSection = document.getElementById('flowers'); if (flowersSection) { flowersSection.querySelector('.container').insertBefore(searchContainer, flowersSection.querySelector('.row')); } }); // 工具函数：格式化价格 function formatPrice(price) { return '¥' + price.toFixed(2); } // 工具函数：显示加载状态 function showLoading() { const container = document.getElementById('flowers-container'); container.innerHTML = `
`; } // 工具函数：显示错误信息 function showError(message) { const container = document.getElementById('flowers-container'); container.innerHTML = `
`; }