zhangmenu/static/js/pages/menu.js

// 菜单页面模块

const MenuPage = {
    // 初始化
    init() {
        this.loadCategories();
        this.loadDishes();
    },

    // 加载分类
    async loadCategories() {
        try {
            const res = await fetch(`${API_BASE}/categories/`);
            const data = await res.json();
            AppState.setCategories(data);
            this.renderCategories();
        } catch (e) {
            console.error('加载分类失败:', e);
        }
    },

    // 加载菜品
    async loadDishes() {
        try {
            const params = {};
            if (AppState.currentCategory) {
                const category = AppState.categories.find(c => c.name === AppState.currentCategory);
                if (category) params.category = category.id;
            }

            const res = await fetch(`${API_BASE}/dishes/${new URLSearchParams(params).toString() ? '?' + new URLSearchParams(params).toString() : ''}`);
            const data = await res.json();
            AppState.setDishes(data);
            this.renderDishes();
        } catch (e) {
            console.error('加载菜品失败:', e);
        }
    },

    // 渲染分类
    renderCategories() {
        const container = document.getElementById('category-filter');
        if (!container) return;

        const html = `
            <span class="category-chip ${!AppState.currentCategory ? 'active' : ''}" data-category="">全部</span>
            ${AppState.categories.map(c => `
                <span class="category-chip ${AppState.currentCategory === c.name ? 'active' : ''}" data-category="${c.name}">${c.name}</span>
            `).join('')}
        `;
        container.innerHTML = html;

        // 绑定点击事件
        container.querySelectorAll('.category-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                AppState.setCurrentCategory(chip.dataset.category);
                this.renderCategories();
                this.loadDishes();
            });
        });
    },

    // 渲染菜品
    renderDishes() {
        const container = document.getElementById('dish-grid');
        if (!container) return;

        const currentOrder = AppState.getCurrentOrder();
        const dishes = AppState.getFilteredDishes();

        container.innerHTML = dishes.map(dish => {
            const isInOrder = currentOrder && currentOrder.dishes && currentOrder.dishes.includes(dish.id);
            return DishCard.render(dish, isInOrder);
        }).join('');

        // 绑定点击事件
        container.querySelectorAll('.dish-card').forEach(card => {
            card.addEventListener('click', () => {
                showDishDetail(card.dataset.id);
            });
        });
    },

    // 搜索菜品
    async searchDishes(keyword) {
        try {
            const res = await fetch(`${API_BASE}/dishes/?search=${encodeURIComponent(keyword)}`);
            const data = await res.json();
            AppState.setDishes(data);
            this.renderDishes();
        } catch (e) {
            console.error('搜索失败:', e);
        }
    }
};

// 导出
window.MenuPage = MenuPage;