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