猫鼬快递 JS 要求

简介

猫鼬快递是一家快递配送公司，他们需要一个JS程序来管理他们的快递订单。这个JS程序需要满足以下要求：

1. 管理员可以添加，编辑和删除订单；
2. 快递员可以查看他们需要投递的订单；
3. 用户可以查看他们的订单状态。

技术要求

为了能够完成这个JS程序，你需要掌握以下技术：

1. 对象和数组的使用；
2. DOM 操作；
3. 事件监听和委托；
4. ES6 最新特性；
5. 构建工具（如 Webpack，gulp 等）。

需求分析

管理员

管理员有以下功能：

1. 查看所有订单；
2. 添加新订单；
3. 编辑现有订单；
4. 删除订单。

此外，管理员还需要能够查看所有订单的状态。

快递员

快递员有以下功能：

1. 查看自己需要投递的订单；
2. 修改订单状态。

用户

用户有以下功能：

1. 查看自己的订单状态。

技术实现

数据

我们需要通过一个数组来处理订单信息。每个订单需要储存以下信息：

1. 订单号；
2. 用户名（可以用手机号或邮箱）；
3. 收件人；
4. 送货地址；
5. 订单状态。

const orders = [
    {
        id: 10001,
        username: 'user1@example.com',
        receiver: '张三',
        address: '北京市朝阳区',
        status: '已发货'
    },
    {
        ...
    },
    ...
];

界面布局

我们需要通过 HTML 和 CSS 来构建一个订单管理的界面。以下是一个基本的布局：

<div class="admin-page">
    <h1>订单管理</h1>
    <div class="admin-panel">
        <h2>添加订单</h2>
        <form id="order-form">
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="receiver" placeholder="收件人">
            <input type="text" name="address" placeholder="送货地址">
            <input type="text" name="status" placeholder="订单状态">
            <button type="submit">添加订单</button>
        </form>
    </div>
    <div class="admin-panel">
        <h2>订单列表</h2>
        <table>
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>用户名</th>
                    <th>收件人</th>
                    <th>送货地址</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="order-list">
                <!-- 订单列表数据 -->
            </tbody>
        </table>
    </div>
</div>

功能实现

1. 添加订单

管理员填写订单信息后，点击"添加订单"按钮，订单信息将会添加到订单列表中。

const orderForm = document.querySelector('#order-form');
const orderList = document.querySelector('#order-list');

orderForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(orderForm);
    const newOrder = {
        id: orders.length + 1,
        username: formData.get('username'), 
        receiver: formData.get('receiver'),
        address: formData.get('address'),
        status: formData.get('status')
    };
    orders.push(newOrder);
    renderOrders(orders);
});

function renderOrders(orders) {
    const html = orders.map((order) => `
        <tr>
            <td>${order.id}</td>
            <td>${order.username}</td>
            <td>${order.receiver}</td>
            <td>${order.address}</td>
            <td>${order.status}</td>
            <td>
                <button class="edit" data-id="${order.id}">编辑</button>
                <button class="delete" data-id="${order.id}">删除</button>
            </td>
        </tr>
    `).join('');
    orderList.innerHTML = html;
}

2. 编辑订单

管理员可以点击"编辑"按钮编辑订单信息。

orderList.addEventListener('click', (event) => {
    if (event.target.classList.contains('edit')) {
        const orderId = Number(event.target.dataset.id);
        const order = orders.find((order) => order.id === orderId);
        const { username, receiver, address, status } = order;
        orderForm.querySelector('input[name="username"]').value = username;
        orderForm.querySelector('input[name="receiver"]').value = receiver;
        orderForm.querySelector('input[name="address"]').value = address;
        orderForm.querySelector('input[name="status"]').value = status;
        orderForm.querySelector('button[type="submit"]').textContent = '保存';
        orderForm.setAttribute('data-id', orderId);
    }
});

3. 保存订单

管理员在编辑订单信息后，点击"保存"按钮，订单信息将会更新到订单列表中。

orderForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(orderForm);
    const orderId = Number(orderForm.getAttribute('data-id'));
    const orderIndex = orders.findIndex((order) => order.id === orderId);
    if (orderIndex !== -1) {
        orders[orderIndex].username = formData.get('username'); 
        orders[orderIndex].receiver = formData.get('receiver');
        orders[orderIndex].address = formData.get('address');
        orders[orderIndex].status = formData.get('status');
        renderOrders(orders);
        orderForm.reset();
        orderForm.querySelector('button[type="submit"]').textContent = '添加订单';
        orderForm.removeAttribute('data-id');
    }
});

4. 删除订单

管理员可以点击"删除"按钮删除订单。

orderList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete')) {
        const orderId = Number(event.target.dataset.id);
        const orderIndex = orders.findIndex((order) => order.id === orderId);
        if (orderIndex !== -1) {
            orders.splice(orderIndex, 1);
            renderOrders(orders);
        }
    }
});

5. 查看订单

管理员和用户都可以查看订单列表和订单详情。管理员可以查看所有订单，用户只能查看自己的订单。

function filterOrders(username) {
    return orders.filter((order) => {
        if (username === 'admin') {
            return true;
        } else {
            return order.username === username;
        }
    });
}

function renderOrders(orders) {
    const html = orders.map((order) => `
        <tr>
            <td>${order.id}</td>
            <td>${order.username}</td>
            <td>${order.receiver}</td>
            <td>${order.address}</td>
            <td>${order.status}</td>
            <td>
                <button class="edit" data-id="${order.id}">编辑</button>
                <button class="delete" data-id="${order.id}">删除</button>
            </td>
        </tr>
    `).join('');
    orderList.innerHTML = html;
}

// 查看所有订单
renderOrders(filterOrders('admin'));

// 查看用户订单
renderOrders(filterOrders('user1@example.com'));

6. 修改订单状态

快递员可以修改订单状态。

orderList.addEventListener('click', (event) => {
    if (event.target.classList.contains('edit')) {
        // 管理员编辑订单信息
    } else if (event.target.classList.contains('delete')) {
        // 管理员删除订单
    } else {
        // 快递员修改订单状态
        const orderId = Number(event.target.parentNode.parentNode.firstChild.textContent);
        const orderIndex = orders.findIndex((order) => order.id === orderId);
        if (orderIndex !== -1) {
            orders[orderIndex].status = '已完成';
            renderOrders(orders);
        }
    }
});

总结

通过本文的介绍，我们学习了一个快递订单管理的JS程序的实现方法。除此之外，还学习了一些常用的前端技术，如对象和数组的使用，DOM 操作，事件监听和委托，ES6 最新特性，以及构建工具。希望本文的内容对你有所帮助，祝你在编写 JS 程序的道路上越走越远！