53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
|
// 订单卡片组件
|
||
|
|
|
||
|
|
// 渲染订单卡片
|
||
|
|
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
|
||
|
|
};
|