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; |