暂时还没有汇总出食材，等选好菜后这里会自动整理。
'; } - // Render participants - const participantsContainer = document.getElementById('order-detail-participants'); - if (order.participants && order.participants.length > 0) { - participantsContainer.innerHTML = `这次还没记录参与人。
'; - } + // Render participants with edit capability + window.detailOrderParticipants = order && order.participants ? [...order.participants] : []; + renderDetailParticipantTags(); + setupDetailParticipantInput(); + + // Update summary to reflect changes + updateDetailSummary(); document.getElementById('btn-complete-order').style.display = order.status === 'in_progress' ? 'block' : 'none'; @@ -5792,6 +5950,89 @@ new bootstrap.Modal(document.getElementById('order-detail-modal')).show(); } + function renderDetailParticipantTags() { + const container = document.getElementById('detail-participants-tags'); + if (!container) return; + container.innerHTML = window.detailOrderParticipants.map(name => ` + + ${name} + + + `).join(''); + } + + function setupDetailParticipantInput() { + const input = document.getElementById('detail-participant-input'); + if (!input) return; + input.onkeypress = function(e) { + if (e.key === 'Enter' && this.value.trim()) { + e.preventDefault(); + const name = this.value.trim(); + if (name && !window.detailOrderParticipants.includes(name)) { + window.detailOrderParticipants.push(name); + renderDetailParticipantTags(); + saveDetailParticipants(); + } + this.value = ''; + } + }; + } + + function removeDetailParticipant(name) { + window.detailOrderParticipants = window.detailOrderParticipants.filter(p => p !== name); + renderDetailParticipantTags(); + saveDetailParticipants(); + } + + async function saveDetailParticipants() { + const modal = document.getElementById('order-detail-modal'); + const orderId = modal.dataset.orderId; + if (!orderId) return; + + try { + const res = await fetch(`${API_BASE}/orders/${orderId}/`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ participants: window.detailOrderParticipants }) + }); + if (res.ok) { + const updatedOrder = await res.json(); + // Update local orders cache + const idx = orders.findIndex(o => o.id == orderId); + if (idx !== -1) { + orders[idx] = updatedOrder; + } + updateDetailSummary(); + // Refresh ranking if exists + if (window.participantRanking) { + calculateParticipantRanking(); + if (document.getElementById('participant-ranking-modal').classList.contains('show')) { + showParticipantRanking(); + } + } + } + } catch (err) { + console.error('Failed to save participants:', err); + } + } + + function updateDetailSummary() { + const modal = document.getElementById('order-detail-modal'); + const orderId = modal.dataset.orderId; + const order = orders.find(o => o.id == orderId); + if (!order) return; + + const dishCount = order.dishes_detail ? order.dishes_detail.length : 0; + const participantCount = window.detailOrderParticipants ? window.detailOrderParticipants.length : 0; + + const summaryEl = document.getElementById('order-detail-summary'); + if (summaryEl) { + summaryEl.textContent = order.status === 'in_progress' + ? `这张备菜清单里有 ${dishCount} 道菜${participantCount > 0 ? `，共 ${participantCount} 位参与人` : ''}。` + : `这次聚会已经完成，留下了 ${dishCount} 道上桌菜品${participantCount > 0 ? `和 ${participantCount} 位参与人` : ''}的记录。`; + } + } + // Render party images function renderOrderImages(order) { @@ -5996,19 +6237,30 @@ const maxCount = Math.max(...ranking.map(r => r.count)); container.innerHTML = ranking.map((item, index) => { const percentage = maxCount > 0 ? (item.count / maxCount) * 100 : 0; - let rankBadge = ''; - if (index === 0) rankBadge = '🥇'; - else if (index === 1) rankBadge = '🥈'; - else if (index === 2) rankBadge = '🥉'; + let rankClass = ''; + let gradient = ''; + if (index === 0) { + rankClass = 'rank-gold'; + gradient = 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%)'; + } else if (index === 1) { + rankClass = 'rank-silver'; + gradient = 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)'; + } else if (index === 2) { + rankClass = 'rank-bronze'; + gradient = 'linear-gradient(135deg, #d97706 0%, #b45309 100%)'; + } else { + gradient = 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)'; + } return ` -