Initial commit - Zhangmenu Django project

A menu management application built with Django, featuring: - Dish management with cover images - Order system with party dates and participants - REST API with Django REST Framework - Bootstrap-styled frontend Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:27:23 +08:00
commit 0a50c09dba
47 changed files with 10268 additions and 0 deletions
@@ -0,0 +1,98 @@
+// 菜单页面模块
+
+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;