178 lines
5.2 KiB
JavaScript
178 lines
5.2 KiB
JavaScript
// 积分订单页面 - H5版本
|
|
|
|
let orderData = [];
|
|
let filteredData = [];
|
|
|
|
// 页面初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadOrderData();
|
|
});
|
|
|
|
// 加载积分订单数据
|
|
function loadOrderData() {
|
|
// 使用模拟数据
|
|
orderData = [
|
|
{
|
|
id: 'PO202407010001',
|
|
memberName: '张三',
|
|
productName: '5元优惠券',
|
|
points: 500,
|
|
orderTime: '2024-07-01 10:30',
|
|
status: '已完成'
|
|
},
|
|
{
|
|
id: 'PO202407010002',
|
|
memberName: '李四',
|
|
productName: '精美水杯',
|
|
points: 2000,
|
|
orderTime: '2024-07-01 14:20',
|
|
status: '已发货'
|
|
},
|
|
{
|
|
id: 'PO202407010003',
|
|
memberName: '王五',
|
|
productName: '10元优惠券',
|
|
points: 1000,
|
|
orderTime: '2024-07-01 16:45',
|
|
status: '待发货'
|
|
},
|
|
{
|
|
id: 'PO202407010004',
|
|
memberName: '赵六',
|
|
productName: '手机支架',
|
|
points: 1500,
|
|
orderTime: '2024-07-01 18:30',
|
|
status: '待发货'
|
|
},
|
|
{
|
|
id: 'PO202407010005',
|
|
memberName: '钱七',
|
|
productName: '购物袋',
|
|
points: 800,
|
|
orderTime: '2024-07-01 09:15',
|
|
status: '已取消'
|
|
},
|
|
{
|
|
id: 'PO202407010006',
|
|
memberName: '孙八',
|
|
productName: '20元优惠券',
|
|
points: 2000,
|
|
orderTime: '2024-07-01 20:10',
|
|
status: '已完成'
|
|
}
|
|
];
|
|
|
|
filteredData = [...orderData];
|
|
renderTable();
|
|
}
|
|
|
|
// 渲染表格
|
|
function renderTable() {
|
|
const tableBody = document.getElementById('order-table-body');
|
|
tableBody.innerHTML = filteredData.map(order => `
|
|
<tr>
|
|
<td style="font-size: 11px;">${order.id}</td>
|
|
<td>${order.memberName}</td>
|
|
<td>${order.productName}</td>
|
|
<td>${order.points}</td>
|
|
<td style="font-size: 11px;">${order.orderTime}</td>
|
|
<td>
|
|
<span style="color: ${getStatusColor(order.status)};">
|
|
${order.status}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
${getActionButtons(order)}
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
// 获取状态颜色
|
|
function getStatusColor(status) {
|
|
switch(status) {
|
|
case '待发货': return '#ff9800';
|
|
case '已发货': return '#2196F3';
|
|
case '已完成': return '#4CAF50';
|
|
case '已取消': return '#f44336';
|
|
default: return '#333';
|
|
}
|
|
}
|
|
|
|
// 获取操作按钮
|
|
function getActionButtons(order) {
|
|
let buttons = `<button class="btn btn-small btn-primary" onclick="viewOrderDetail('${order.id}')">详情</button>`;
|
|
|
|
if (order.status === '待发货') {
|
|
buttons += `<button class="btn btn-small" style="background: #4CAF50; color: white;" onclick="shipOrder('${order.id}')">发货</button>`;
|
|
buttons += `<button class="btn btn-small" style="background: #f44336; color: white;" onclick="cancelOrder('${order.id}')">取消</button>`;
|
|
} else if (order.status === '已发货') {
|
|
buttons += `<button class="btn btn-small" style="background: #4CAF50; color: white;" onclick="completeOrder('${order.id}')">完成</button>`;
|
|
}
|
|
|
|
return buttons;
|
|
}
|
|
|
|
// 筛选订单
|
|
function filterOrders() {
|
|
const statusFilter = document.getElementById('status-filter').value;
|
|
|
|
filteredData = orderData.filter(order => {
|
|
return !statusFilter || order.status === statusFilter;
|
|
});
|
|
|
|
renderTable();
|
|
showNotification(`筛选结果:${filteredData.length} 个订单`, 'info');
|
|
}
|
|
|
|
// 查看订单详情
|
|
function viewOrderDetail(orderId) {
|
|
const order = orderData.find(o => o.id === orderId);
|
|
if (order) {
|
|
showNotification(`查看订单:${orderId}`, 'info');
|
|
console.log('订单详情:', order);
|
|
}
|
|
}
|
|
|
|
// 发货
|
|
function shipOrder(orderId) {
|
|
const order = orderData.find(o => o.id === orderId);
|
|
if (order) {
|
|
confirmAction(`确定要发货订单"${orderId}"吗?`, () => {
|
|
order.status = '已发货';
|
|
renderTable();
|
|
showNotification(`订单"${orderId}"已发货`, 'success');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 完成订单
|
|
function completeOrder(orderId) {
|
|
const order = orderData.find(o => o.id === orderId);
|
|
if (order) {
|
|
confirmAction(`确定要完成订单"${orderId}"吗?`, () => {
|
|
order.status = '已完成';
|
|
renderTable();
|
|
showNotification(`订单"${orderId}"已完成`, 'success');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 取消订单
|
|
function cancelOrder(orderId) {
|
|
const order = orderData.find(o => o.id === orderId);
|
|
if (order) {
|
|
confirmAction(`确定要取消订单"${orderId}"吗?`, () => {
|
|
order.status = '已取消';
|
|
renderTable();
|
|
showNotification(`订单"${orderId}"已取消`, 'success');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 导出函数到全局
|
|
window.filterOrders = filterOrders;
|
|
window.viewOrderDetail = viewOrderDetail;
|
|
window.shipOrder = shipOrder;
|
|
window.completeOrder = completeOrder;
|
|
window.cancelOrder = cancelOrder; |