447 lines
17 KiB
JavaScript
447 lines
17 KiB
JavaScript
// 送花服务功能管理类
|
||
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 = `
|
||
<div class="col-12">
|
||
<div class="flower-empty">
|
||
<i class="fa fa-search"></i>
|
||
<h4>没有找到符合条件的鲜花</h4>
|
||
<p>请尝试调整筛选条件</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = this.filteredFlowers.map(flower => `
|
||
<div class="col-md-4 mb-4" data-aos="fade-up">
|
||
<div class="card flower-card h-100">
|
||
${flower.originalPrice > flower.price ?
|
||
`<span class="discount-badge">-${Math.round((1 - flower.price / flower.originalPrice) * 100)}%</span>` :
|
||
''
|
||
}
|
||
<img src="${flower.image}" class="card-img-top" alt="${flower.name}"
|
||
onerror="this.src='images/flower-placeholder.svg'">
|
||
<div class="card-body">
|
||
<div class="flower-tags">
|
||
${flower.tags.map(tag => `<span class="flower-tag ${tag}">${this.getTagName(tag)}</span>`).join('')}
|
||
</div>
|
||
<h5 class="card-title">${flower.name}</h5>
|
||
<p class="card-text text-muted">${flower.description}</p>
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<div>
|
||
<span class="flower-price">¥${flower.price}</span>
|
||
${flower.originalPrice > flower.price ?
|
||
`<span class="flower-original-price ms-2">¥${flower.originalPrice}</span>` :
|
||
''
|
||
}
|
||
</div>
|
||
<div class="text-warning">
|
||
<i class="fa fa-star"></i>
|
||
<span>${flower.rating}</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-grid">
|
||
<button class="btn btn-flower" onclick="flowerManager.showOrderForm(${flower.id})">
|
||
立即订购
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).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 = `
|
||
<div class="modal fade" id="orderModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">订购 ${flower.name}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<img src="${flower.image}" class="img-fluid rounded" alt="${flower.name}"
|
||
onerror="this.src='images/flower-placeholder.svg'">
|
||
<div class="mt-3">
|
||
<h4>${flower.name}</h4>
|
||
<p class="text-muted">${flower.description}</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="flower-price">¥${flower.price}</span>
|
||
<span class="badge bg-success">有货</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<form id="orderForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">收花人姓名</label>
|
||
<input type="text" class="form-control" name="recipientName" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">收花人电话</label>
|
||
<input type="tel" class="form-control" name="recipientPhone" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">配送地址</label>
|
||
<textarea class="form-control" name="deliveryAddress" rows="3" required></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">配送时间</label>
|
||
<input type="datetime-local" class="form-control" name="deliveryTime" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">祝福语</label>
|
||
<textarea class="form-control" name="greeting" rows="2"
|
||
placeholder="写下你的祝福..."></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">支付方式</label>
|
||
<select class="form-select" name="paymentMethod" required>
|
||
<option value="">请选择支付方式</option>
|
||
<option value="wechat">微信支付</option>
|
||
<option value="alipay">支付宝</option>
|
||
<option value="bank">银行转账</option>
|
||
</select>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-flower" onclick="flowerManager.submitOrder(${flower.id})">
|
||
确认订购 (¥${flower.price})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 添加模态框到页面
|
||
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: `
|
||
<div class="text-start">
|
||
<p><strong>订单详情：</strong></p>
|
||
<p>收花人：${orderData.recipientName}</p>
|
||
<p>电话：${orderData.recipientPhone}</p>
|
||
<p>配送地址：${orderData.deliveryAddress}</p>
|
||
<p>配送时间：${new Date(orderData.deliveryTime).toLocaleString()}</p>
|
||
<p class="mt-3">我们会在配送前与您确认，感谢您的订购！</p>
|
||
</div>
|
||
`,
|
||
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 = `
|
||
<div class="col-12">
|
||
<div class="flower-loading">
|
||
<div class="spinner-border" role="status">
|
||
<span class="visually-hidden">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 工具函数：显示错误信息
|
||
function showError(message) {
|
||
const container = document.getElementById('flowers-container');
|
||
container.innerHTML = `
|
||
<div class="col-12">
|
||
<div class="alert alert-danger" role="alert">
|
||
<i class="fa fa-exclamation-triangle me-2"></i>
|
||
${message}
|
||
</div>
|
||
</div>
|
||
`;
|
||
} |