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>
105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
// 订单页面模块
|
|
|
|
const OrdersPage = {
|
|
// 初始化
|
|
init() {
|
|
this.loadOrders();
|
|
},
|
|
|
|
// 加载订单
|
|
async loadOrders() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/orders/`);
|
|
const data = await res.json();
|
|
AppState.setOrders(data);
|
|
this.renderOrders();
|
|
} catch (e) {
|
|
console.error('加载订单失败:', e);
|
|
}
|
|
},
|
|
|
|
// 渲染订单
|
|
renderOrders() {
|
|
const container = document.getElementById('order-list');
|
|
if (!container) return;
|
|
|
|
const orders = AppState.getFilteredOrders();
|
|
|
|
if (orders.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-icon">📋</div>
|
|
<div class="empty-title">暂无聚会</div>
|
|
<div class="empty-desc">点击下方按钮创建第一个聚会吧</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = orders.map(order => OrderCard.render(order)).join('');
|
|
|
|
// 绑定点击事件
|
|
container.querySelectorAll('.order-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
showOrderDetail(card.dataset.id);
|
|
});
|
|
});
|
|
},
|
|
|
|
// 筛选订单
|
|
filterOrders(status) {
|
|
AppState.setCurrentOrderFilter(status);
|
|
this.renderOrders();
|
|
},
|
|
|
|
// 创建订单
|
|
async createOrder(name, dishIds, partyDate) {
|
|
try {
|
|
const data = {
|
|
name,
|
|
dish_ids: dishIds,
|
|
party_date: partyDate
|
|
};
|
|
const res = await fetch(`${API_BASE}/orders/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
const order = await res.json();
|
|
await this.loadOrders();
|
|
return order;
|
|
} catch (e) {
|
|
console.error('创建订单失败:', e);
|
|
throw e;
|
|
}
|
|
},
|
|
|
|
// 完成订单
|
|
async completeOrder(orderId) {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/orders/${orderId}/complete/`, {
|
|
method: 'POST'
|
|
});
|
|
await res.json();
|
|
await this.loadOrders();
|
|
} catch (e) {
|
|
console.error('完成订单失败:', e);
|
|
throw e;
|
|
}
|
|
},
|
|
|
|
// 删除订单
|
|
async deleteOrder(orderId) {
|
|
try {
|
|
await fetch(`${API_BASE}/orders/${orderId}/`, { method: 'DELETE' });
|
|
await this.loadOrders();
|
|
} catch (e) {
|
|
console.error('删除订单失败:', e);
|
|
throw e;
|
|
}
|
|
}
|
|
};
|
|
|
|
// 导出
|
|
window.OrdersPage = OrdersPage;
|