zhangmenu/static/js/components/order-card.js

// 订单卡片组件

// 渲染订单卡片
function renderOrderCard(order) {
    const statusClass = order.status === 'in_progress' ? 'status-progress' : 'status-done';
    const statusText = order.status === 'in_progress' ? '进行中' : '已完成';

    // 显示聚会时间或创建时间
    const displayDate = order.party_date
        ? new Date(order.party_date).toLocaleDateString()
        : (order.created_at ? new Date(order.created_at).toLocaleDateString() : '');

    const dishCount = order.dishes_detail ? order.dishes_detail.length : 0;

    return `
        <div class="order-card" data-id="${order.id}">
            <div class="order-top">
                <span class="order-name">${order.name}</span>
                <span class="order-status ${statusClass}">${statusText}</span>
            </div>
            <div class="order-date">${displayDate} · ${dishCount} 道菜</div>
            <div class="dish-list">
                ${(order.dishes_detail || []).map(d => {
                    const isCold = d.category_name && d.category_name.includes('凉菜');
                    return `<span class="dish-tag ${isCold ? 'dish-tag-cold' : ''}">${d.name}</span>`;
                }).join('')}
            </div>
        </div>
    `;
}

// 渲染订单列表
function renderOrderList(orders, containerSelector, onCardClick) {
    const container = document.querySelector(containerSelector);
    if (!container) return;

    container.innerHTML = orders.map(order => renderOrderCard(order)).join('');

    container.querySelectorAll('.order-card').forEach(card => {
        card.addEventListener('click', () => {
            if (onCardClick) {
                onCardClick(card.dataset.id);
            }
        });
    });
}

// 导出
window.OrderCard = {
    render: renderOrderCard,
    renderList: renderOrderList
};