DeveloperandClaude Opus 4.6
0a50c09dba
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>
44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
// 菜品卡片组件
|
|
|
|
// 渲染菜品卡片
|
|
function renderDishCard(dish, isInOrder = false) {
|
|
const indicatorClass = isInOrder ? 'in-order' : 'not-in-order';
|
|
const indicatorIcon = isInOrder ? '✓' : '+';
|
|
|
|
return `
|
|
<div class="dish-card" data-id="${dish.id}">
|
|
<div class="img-wrapper">
|
|
<img src="${dish.cover_image || getDefaultImage()}" alt="${dish.name}">
|
|
${dish.category_name ? `<span class="category-tag">${dish.category_name}</span>` : ''}
|
|
<span class="order-indicator ${indicatorClass}">${indicatorIcon}</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="dish-name">${dish.name}</div>
|
|
<div class="dish-meta">${dish.view_count || 0} 次浏览</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 渲染菜品网格
|
|
function renderDishGrid(dishes, containerSelector, onCardClick) {
|
|
const container = document.querySelector(containerSelector);
|
|
if (!container) return;
|
|
|
|
container.innerHTML = dishes.map(dish => renderDishCard(dish)).join('');
|
|
|
|
container.querySelectorAll('.dish-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
if (onCardClick) {
|
|
onCardClick(card.dataset.id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 导出
|
|
window.DishCard = {
|
|
render: renderDishCard,
|
|
renderGrid: renderDishGrid
|
|
};
|