// 动物认领功能JavaScript class AnimalManager { constructor() { this.apiBaseUrl = 'https://api.jiebanke.com/api/animals'; this.animalsContainer = document.getElementById('animals-container'); this.init(); } async init() { await this.loadAnimals(); this.bindFilterEvents(); } async loadAnimals() { try { // 模拟API调用，实际项目中替换为真实API const mockAnimals = [ { id: 1, name: "小白", type: "sheep", typeName: "绵羊", age: "baby", ageText: "3个月", gender: "female", description: "温顺可爱的小绵羊，喜欢和人亲近，非常适合初次认领者。", status: "available", image: "images/sheep1.svg", price: 800, location: "绿野农场", health: "健康", personality: "温顺、亲人" }, { id: 2, name: "小黑", type: "goat", typeName: "山羊", age: "young", ageText: "1岁", gender: "male", description: "活泼好动的小山羊，喜欢探索新环境，精力充沛。", status: "available", image: "images/goat1.svg", price: 600, location: "阳光牧场", health: "健康", personality: "活泼、好奇" }, { id: 3, name: "雪球", type: "rabbit", typeName: "兔子", age: "baby", ageText: "2个月", gender: "female", description: "洁白如雪的小兔子，性格温和，非常适合家庭认领。", status: "reserved", image: "images/rabbit1.svg", price: 300, location: "爱心农场", health: "健康", personality: "温和、安静" }, { id: 4, name: "金蛋", type: "chicken", typeName: "鸡", age: "adult", ageText: "2岁", gender: "female", description: "产蛋能力强的母鸡，每天都能提供新鲜鸡蛋。", status: "available", image: "images/chicken1.svg", price: 200, location: "丰收农场", health: "健康", personality: "勤劳、温顺" }, { id: 5, name: "花花", type: "duck", typeName: "鸭子", age: "young", ageText: "8个月", gender: "female", description: "可爱的鸭子，喜欢在水中嬉戏，性格活泼开朗。", status: "available", image: "images/duck1.svg", price: 250, location: "水乡农场", health: "健康", personality: "活泼、友善" }, { id: 6, name: "大角", type: "goat", typeName: "山羊", age: "adult", ageText: "3岁", gender: "male", description: "强壮的公山羊，有着漂亮的角，性格独立但温顺。", status: "available", image: "images/goat2.svg", price: 900, location: "山野牧场", health: "健康", personality: "独立、温顺" } ]; this.displayAnimals(mockAnimals); } catch (error) { console.error('加载动物列表失败:', error); this.showError('加载动物列表失败，请刷新页面重试'); } } displayAnimals(animals) { if (animals.length === 0) { this.animalsContainer.innerHTML = `
暂无可用动物，请稍后再来查看
`; return; } const animalsHTML = animals.map(animal => `
${animal.name}
${animal.name}
${animal.status === 'available' ? '可认领' : '已被认领'}
${animal.typeName}
${animal.ageText}

${animal.description}

¥${animal.price} ${animal.location}
`).join(''); this.animalsContainer.innerHTML = animalsHTML; } bindFilterEvents() { const filterType = document.getElementById('filter-type'); const filterAge = document.getElementById('filter-age'); const filterStatus = document.getElementById('filter-status'); if (filterType) filterType.addEventListener('change', () => this.filterAnimals()); if (filterAge) filterAge.addEventListener('change', () => this.filterAnimals()); if (filterStatus) filterStatus.addEventListener('change', () => this.filterAnimals()); } async filterAnimals() { const type = document.getElementById('filter-type').value; const age = document.getElementById('filter-age').value; const status = document.getElementById('filter-status').value; try { // 模拟筛选功能 const mockAnimals = await this.loadAnimals(); // 重新加载数据 let filteredAnimals = mockAnimals; if (type) { filteredAnimals = filteredAnimals.filter(animal => animal.type === type); } if (age) { filteredAnimals = filteredAnimals.filter(animal => animal.age === age); } if (status) { filteredAnimals = filteredAnimals.filter(animal => animal.status === status); } this.displayAnimals(filteredAnimals); } catch (error) { console.error('筛选动物失败:', error); this.showError('筛选失败，请刷新页面重试'); } } viewAnimalDetail(animalId) { // 在实际项目中，这里可以跳转到详情页或显示认领表单 console.log('查看动物详情:', animalId); // 显示认领表单模态框 this.showClaimForm(animalId); } showAnimalInfo(animalId) { // 显示动物详细信息模态框 console.log('显示动物信息:', animalId); // 这里可以显示一个包含动物详细信息的模态框 alert('动物详细信息功能开发中，即将上线'); } showClaimForm(animalId) { // 创建认领表单模态框 const modalHTML = ` `; // 添加模态框到页面 document.body.insertAdjacentHTML('beforeend', modalHTML); // 显示模态框 const modal = new bootstrap.Modal(document.getElementById('claimModal')); modal.show(); // 绑定表单提交事件 document.getElementById('claimForm').addEventListener('submit', this.handleClaimSubmit.bind(this)); // 模态框关闭时清理 document.getElementById('claimModal').addEventListener('hidden.bs.modal', function () { this.remove(); }); } async handleClaimSubmit(event) { event.preventDefault(); const formData = { animalId: document.getElementById('animalId').value, fullName: document.getElementById('fullName').value, phone: document.getElementById('phone').value, email: document.getElementById('email').value, purpose: document.getElementById('purpose').value, experience: document.getElementById('experience').value }; // 表单验证 if (!this.validateClaimForm(formData)) { return; } try { // 模拟API调用 console.log('提交认领申请:', formData); // 显示成功消息 this.showSuccess('认领申请提交成功！我们会尽快联系您'); // 关闭模态框 bootstrap.Modal.getInstance(document.getElementById('claimModal')).hide(); // 重新加载动物列表 await this.loadAnimals(); } catch (error) { console.error('提交认领申请失败:', error); this.showError('提交失败，请稍后重试'); } } validateClaimForm(data) { if (!data.fullName.trim()) { this.showError('请输入姓名'); return false; } if (!data.phone.trim() || !/^1[3-9]\d{9}$/.test(data.phone)) { this.showError('请输入正确的手机号'); return false; } if (!data.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) { this.showError('请输入正确的邮箱地址'); return false; } if (!data.purpose.trim()) { this.showError('请输入认领目的'); return false; } if (!data.experience) { this.showError('请选择饲养经验'); return false; } if (!document.getElementById('agreeTerms').checked) { this.showError('请同意认领协议'); return false; } return true; } showTerms() { alert('认领协议功能开发中，即将上线'); } showSuccess(message) { this.showAlert(message, 'success'); } showError(message) { this.showAlert(message, 'danger'); } showAlert(message, type) { const alertDiv = document.createElement('div'); alertDiv.className = `alert alert-${type} alert-dismissible fade show`; alertDiv.innerHTML = ` ${message} `; // 插入到页面顶部 const container = document.querySelector('.container'); container.insertBefore(alertDiv, container.firstChild); // 5秒后自动消失 setTimeout(() => { if (alertDiv.parentNode) { alertDiv.remove(); } }, 5000); } } // 初始化动物管理器 const animalManager = new AnimalManager(); // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { // AOS动画初始化 if (typeof AOS !== 'undefined') { AOS.init({ duration: 1000, once: true }); } });