jiebanke/website/js/animal.js

// 动物认领功能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 = `
                <div class="col-12 text-center">
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle me-2"></i>
                        暂无可用动物，请稍后再来查看
                    </div>
                </div>
            `;
            return;
        }

        const animalsHTML = animals.map(animal => `
            <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up">
                <div class="card animal-card h-100">
                    <img src="${animal.image}" class="card-img-top" alt="${animal.name}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <h5 class="animal-name">${animal.name}</h5>
                            <span class="status-badge status-${animal.status}">
                                ${animal.status === 'available' ? '可认领' : '已被认领'}
                            </span>
                        </div>
                        
                        <div class="animal-type">
                            <i class="fa fa-paw me-2"></i>
                            ${animal.typeName}
                        </div>
                        
                        <div class="animal-age">
                            <i class="fa fa-birthday-cake me-2"></i>
                            ${animal.ageText}
                        </div>

                        <p class="animal-description">
                            ${animal.description}
                        </p>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-primary fw-bold">¥${animal.price}</span>
                            <small class="text-muted">${animal.location}</small>
                        </div>

                        <div class="action-buttons">
                            <button class="btn btn-primary btn-sm" 
                                onclick="animalManager.viewAnimalDetail(${animal.id})"
                                ${animal.status !== 'available' ? 'disabled' : ''}>
                                ${animal.status === 'available' ? '立即认领' : '已被认领'}
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" 
                                onclick="animalManager.showAnimalInfo(${animal.id})">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `).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 = `
            <div class="modal fade" id="claimModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content animal-modal">
                        <div class="modal-header">
                            <h5 class="modal-title">认领申请</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="claimForm" class="claim-form">
                                <input type="hidden" id="animalId" value="${animalId}">
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="fullName" class="form-label">姓名</label>
                                        <input type="text" class="form-control" id="fullName" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">手机号</label>
                                        <input type="tel" class="form-control" id="phone" required>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="email" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="purpose" class="form-label">认领目的</label>
                                    <textarea class="form-control" id="purpose" rows="3" required></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="experience" class="form-label">饲养经验</label>
                                    <select class="form-select" id="experience" required>
                                        <option value="">请选择饲养经验</option>
                                        <option value="none">无经验</option>
                                        <option value="little">少量经验</option>
                                        <option value="rich">丰富经验</option>
                                    </select>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="agreeTerms" required>
                                    <label class="form-check-label" for="agreeTerms">
                                        我已阅读并同意<a href="#" onclick="animalManager.showTerms()">认领协议</a>
                                    </label>
                                </div>
                                
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    提交认领申请
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // 添加模态框到页面
        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}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // 插入到页面顶部
        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
        });
    }
});