使用了HTML、CSS和JavaScript来构建简单的外卖点餐系统

发布于：2024-12-18 ⋅ 阅读:(45) ⋅ 点赞:(0)

实现了一个简单的外卖点餐系统的前端页面。这个系统使用了HTML、CSS和JavaScript来构建，并具备以下主要功能：

1.技术说明

技术栈

  1. HTML: 用于定义网页的结构。
  2. CSS: 用于美化网页，使其更具可读性和用户体验。
  3. JavaScript: 用于处理用户交互、动态更新内容以及实现打印小票等功能。

系统概述

该系统模拟了一个外卖平台的部分功能，允许用户浏览不同店铺的商品菜单，将商品添加到订单中，并最终结算订单。此外，还提供了编辑店铺信息的功能，并在结算后可以查看和打印订单详情。

2.功能描述

主要功能

  1. 商户展示:

    • 用户可以在首页看到所有可用的商户列表。
    • 每个商户名称都可以点击进入详细页面。

  2. 商户详情页面:

    • 显示所选商户的基本信息（如名称、地址、电话等）。
    • 提供编辑商户信息的功能，包括上传后厨卫生图片。
    • 展示商户的菜单，并允许用户将商品添加到订单中。

  3. 订单管理:

    • 用户可以查看已添加到订单中的商品列表，并移除不需要的商品。
    • 计算并显示总费用，包括商品总价、打包费、配送费及优惠后的实付总价。
    • 输入付款金额后，自动计算并显示应找零金额。

  4. 结算与打印小票:

    • 在确认订单无误后，用户可以输入付款金额并查看应找零金额。
    • 点击“结算”按钮后，会弹出一个模态框显示完整的订单详情。
    • 在模态框中，用户可以看到详细的订单信息，包括店铺名称、商品清单、各项费用及付款情况。
    • 用户可以选择“打印小票”，这将打开一个新的窗口，复制模态框的内容并在新窗口中打印出来。

页面布局与样式

  • 主页 (#homePage): 包含商户列表，每个商户名称均可点击以查看详情。
  • 详情页 (#detailPage): 包含商户详细信息、商品菜单、订单列表、总费用汇总、付款金额输入框、应找零显示以及结算按钮。
  • 模态框 (#receiptModal): 弹出式的订单详情页面，包含完整订单信息和打印小票按钮。

交互特性

  • 点击商户名称: 跳转到商户详情页面。
  • 编辑商户信息: 可以修改商户的各项信息并保存更改。
  • 添加商品到订单: 点击商品旁边的“加入订单”按钮即可。
  • 移除订单商品: 在订单列表中点击“移除”按钮即可从订单中移除商品。
  • 实时更新价格: 当商品被添加或移除时，总费用会自动更新。
  • 计算应找零: 根据用户输入的付款金额，自动计算并显示应找零金额。
  • 打印订单详情: 在模态框中点击“打印小票”按钮，会在新的窗口中显示并打印订单详情。

3.完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖点餐系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .merchant-container {
            border-bottom: 1px solid #ddd;
            padding: 15px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .menu-item {
            padding-left: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }
        .order-section {
            margin-top: 20px;
        }
        .order-list {
            list-style-type: none;
            padding: 0;
        }
        .order-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
        }
        .hidden {
            display: none;
        }
        button {
            background-color: #ff6700;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #e05706;
        }
        .total-price {
            font-weight: bold;
            margin-top: 10px;
        }
        .back-button {
            margin-top: 20px;
        }
        .receipt-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .receipt-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .edit-form {
            display: none;
            margin-top: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .save-button {
            background-color: #4CAF50;
        }
        .save-button:hover {
            background-color: #45a049;
        }
        .payment-input {
            margin-top: 10px;
        }
        .payment-input input[type="number"] {
            width: 100px; /* 改小付款金额输入框 */
            padding: 8px;
            box-sizing: border-box;
        }
        .summary-section {
            margin-top: 20px;
        }
        .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
        }
        .summary-total {
            font-weight: bold;
        }
        .image-upload {
            margin-top: 10px;
        }
        .image-preview {
            margin-top: 10px;
            max-width: 100%;
            height: auto;
        }
        .print-receipt-button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container" id="homePage">
        <h1>外卖点餐系统</h1>
        <div id="merchants"></div>
    </div>

    <div class="container" id="detailPage" style="display: none;">
        <button class="back-button" onclick="goBackToHome()">返回首页</button>
        <div class="merchant-header">
            <h1 id="merchantName" onclick="toggleEditForm()"></h1>
        </div>
        <div id="editForm" class="edit-form">
            <div class="form-group">
                <label for="nameInput">店铺名称:</label>
                <input type="text" id="nameInput">
            </div>
            <div class="form-group">
                <label for="addressInput">地址:</label>
                <input type="text" id="addressInput">
            </div>
            <div class="form-group">
                <label for="phoneInput">电话:</label>
                <input type="text" id="phoneInput">
            </div>
            <div class="form-group">
                <label for="ownerInput">负责人:</label>
                <input type="text" id="ownerInput">
            </div>
            <div class="form-group">
                <label for="hoursInput">营业时间:</label>
                <input type="text" id="hoursInput">
            </div>
            <div class="form-group">
                <label for="announcementInput">公告:</label>
                <textarea id="announcementInput"></textarea>
            </div>
            <div class="form-group">
                <label for="promiseInput">商家承诺:</label>
                <textarea id="promiseInput"></textarea>
            </div>
            <div class="form-group image-upload">
                <label for="kitchenImageInput">后厨卫生图片:</label>
                <input type="file" id="kitchenImageInput" accept="image/*">
                <img id="kitchenImagePreview" class="image-preview" src="" alt="后厨卫生图片预览" style="display: none;">
            </div>
            <button class="save-button" onclick="saveMerchantInfo()">保存</button>
        </div>
        <div id="merchantMenu"></div>
        <div class="order-section">
            <h2>您的订单：</h2>
            <ul id="orderList" class="order-list">
                <!-- 订单项将通过JavaScript动态插入 -->
            </ul>
            <div class="summary-section">
                <div class="summary-item">打包费：<span id="packingFee">5</span>元</div>
                <div class="summary-item">配送费：<span id="deliveryFee">8</span>元</div>
                <div class="summary-item">总优惠：<span id="totalDiscount">0</span>元</div>
                <div class="summary-item summary-total">实付总价：<span id="finalTotalPrice">0</span>元</div>
            </div>
            <div class="payment-input">
                <label for="paymentAmount">请输入付款金额:</label>
                <input type="number" id="paymentAmount" placeholder="付款金额" oninput="calculateChange()">
            </div>
            <div class="summary-item">应找零：<span id="changeAmount">0</span>元</div>
            <button onclick="showReceipt()">结算</button>
        </div>
    </div>

    <!-- 小票模态框 -->
    <div id="receiptModal" class="receipt-modal" style="display: none;">
        <div class="receipt-modal-content">
            <span class="close-button" onclick="closeReceipt()">&times;</span>
            <h2>订单详情</h2>
            <div class="summary-item">店铺名称：<span id="modalMerchantName"></span></div>
            <ul id="receiptOrderList" class="order-list">
                <!-- 订单项将通过JavaScript动态插入 -->
            </ul>
            <div class="summary-section">
                <div class="summary-item">打包费：<span id="modalPackingFee">5</span>元</div>
                <div class="summary-item">配送费：<span id="modalDeliveryFee">8</span>元</div>
                <div class="summary-item">总优惠：<span id="modalTotalDiscount">0</span>元</div>
                <div class="summary-item summary-total">实付总价：<span id="modalFinalTotalPrice">0</span>元</div>
            </div>
            <div class="summary-item">付款金额：<span id="modalPaymentAmount">0</span>元</div>
            <div class="summary-item">应找零：<span id="modalChangeAmount">0</span>元</div>
            <div class="summary-item">收货地址：<span id="modalAddress">北京市海淀区XX路XX号</span></div>
            <div class="summary-item">下单时间：<span id="modalOrderTime"></span></div>
            <div class="summary-item">送达时间：<span id="modalDeliveryTime"></span></div>
            <div class="summary-item">配送方式：<span id="modalDeliveryMethod">普通配送</span></div>
            <div class="summary-item">配送人员：<span id="modalDeliveryPerson">张三</span></div>
            <div class="summary-item">发票信息：<span id="modalInvoiceInfo">无</span></div>
            <div class="summary-item">订单号码：<span id="modalOrderNumber"></span></div>
            <div class="summary-item">备注：<span id="modalRemarks"></span></div>
            <button class="print-receipt-button" onclick="printReceipt()">打印小票</button>
        </div>
    </div>

    <script>
        // 模拟商户数据
        const merchantsData = [
            {
                id: 1,
                name: '美食街小吃店',
                address: '美食街1号',
                phone: '1234567890',
                owner: '张三',
                hours: '10:00 - 22:00',
                announcement: '欢迎光临美食街小吃店！',
                promise: '保证食材新鲜，服务周到。',
                kitchenImage: '',
                menu: [
                    { id: 1, name: '宫保鸡丁', price: 28 },
                    { id: 2, name: '鱼香肉丝', price: 30 },
                ]
            },
            {
                id: 2,
                name: '老北京炸酱面',
                address: '老北京路2号',
                phone: '0987654321',
                owner: '李四',
                hours: '09:00 - 21:00',
                announcement: '欢迎品尝正宗老北京炸酱面！',
                promise: '保证食材地道，味道纯正。',
                kitchenImage: '',
                menu: [
                    { id: 3, name: '炸酱面', price: 18 },
                    { id: 4, name: '豆汁儿', price: 6 },
                ]
            },
            {
                id: 3,
                name: '川菜馆',
                address: '川菜馆3号',
                phone: '1122334455',
                owner: '王五',
                hours: '11:00 - 23:00',
                announcement: '欢迎享用美味川菜！',
                promise: '保证菜品卫生，质量上乘。',
                kitchenImage: '',
                menu: [
                    { id: 5, name: '麻婆豆腐', price: 25 },
                    { id: 6, name: '清蒸鲈鱼', price: 40 },
                ]
            }
        ];

        let orderItems = [];
        let totalPrice = 0;
        const packingFee = 5;
        const deliveryFee = 8;

        function renderMerchants() {
            const merchantsContainer = document.getElementById('merchants');
            merchantsContainer.innerHTML = ''; // Clear existing content
            merchantsData.forEach(merchant => {
                const merchantDiv = document.createElement('div');
                merchantDiv.className = 'merchant-container';
                merchantDiv.textContent = merchant.name;
                merchantDiv.onclick = () => showMerchantDetails(merchant.id);
                merchantsContainer.appendChild(merchantDiv);
            });
        }

        function showMerchantDetails(merchantId) {
            const homePage = document.getElementById('homePage');
            const detailPage = document.getElementById('detailPage');
            homePage.style.display = 'none';
            detailPage.style.display = 'block';

            const selectedMerchant = merchantsData.find(merchant => merchant.id === merchantId);
            document.getElementById('merchantName').textContent = selectedMerchant.name;
            document.getElementById('nameInput').value = selectedMerchant.name;
            document.getElementById('addressInput').value = selectedMerchant.address;
            document.getElementById('phoneInput').value = selectedMerchant.phone;
            document.getElementById('ownerInput').value = selectedMerchant.owner;
            document.getElementById('hoursInput').value = selectedMerchant.hours;
            document.getElementById('announcementInput').value = selectedMerchant.announcement;
            document.getElementById('promiseInput').value = selectedMerchant.promise;

            if (selectedMerchant.kitchenImage) {
                document.getElementById('kitchenImagePreview').src = selectedMerchant.kitchenImage;
                document.getElementById('kitchenImagePreview').style.display = 'block';
            } else {
                document.getElementById('kitchenImagePreview').style.display = 'none';
            }

            const merchantMenuContainer = document.getElementById('merchantMenu');
            merchantMenuContainer.innerHTML = '';
            selectedMerchant.menu.forEach(item => {
                const menuItemDiv = document.createElement('div');
                menuItemDiv.className = 'menu-item';
                menuItemDiv.innerHTML = `
                    <span>${item.name} - ${item.price}元</span>
                    <button οnclick="addToOrder(${item.id})">加入订单</button>
                `;
                merchantMenuContainer.appendChild(menuItemDiv);
            });

            updateOrderList();
        }

        function goBackToHome() {
            const homePage = document.getElementById('homePage');
            const detailPage = document.getElementById('detailPage');
            homePage.style.display = 'block';
            detailPage.style.display = 'none';
        }

        function addToOrder(itemId) {
            const selectedItem = merchantsData.flatMap(merchant => merchant.menu).find(item => item.id === itemId);
            if (selectedItem) {
                orderItems.push(selectedItem);
                totalPrice += selectedItem.price;
                updateOrderList();
            }
        }

        function removeFromOrder(index) {
            const removedItem = orderItems.splice(index, 1)[0];
            totalPrice -= removedItem.price;
            updateOrderList();
        }

        function updateOrderList() {
            const orderListContainer = document.getElementById('orderList');
            orderListContainer.innerHTML = '';
            orderItems.forEach((item, index) => {
                const orderItemDiv = document.createElement('li');
                orderItemDiv.className = 'order-item';
                orderItemDiv.innerHTML = `
                    <span>${item.name} - ${item.price}元</span>
                    <button οnclick="removeFromOrder(${index})">移除</button>
                `;
                orderListContainer.appendChild(orderItemDiv);
            });
            totalPrice = orderItems.reduce((acc, item) => acc + item.price, 0);
            calculateFinalTotalPrice();
        }

        function calculateFinalTotalPrice() {
            const totalDiscount = Math.floor(Math.random() * 10); // 随机生成总优惠价格
            document.getElementById('totalDiscount').textContent = totalDiscount;
            document.getElementById('finalTotalPrice').textContent = totalPrice + packingFee + deliveryFee - totalDiscount;
            document.getElementById('modalFinalTotalPrice').textContent = totalPrice + packingFee + deliveryFee - totalDiscount;
        }

        function calculateChange() {
            const paymentAmount = parseFloat(document.getElementById('paymentAmount').value) || 0;
            const finalTotalPrice = parseFloat(document.getElementById('finalTotalPrice').textContent) || 0;
            const changeAmount = paymentAmount - finalTotalPrice;
            document.getElementById('changeAmount').textContent = changeAmount.toFixed(2);
            document.getElementById('modalChangeAmount').textContent = changeAmount.toFixed(2);
            document.getElementById('modalPaymentAmount').textContent = paymentAmount.toFixed(2);
        }

        function showReceipt() {
            const receiptModal = document.getElementById('receiptModal');
            const receiptOrderList = document.getElementById('receiptOrderList');
            receiptOrderList.innerHTML = '';
            orderItems.forEach((item, index) => {
                const orderItemDiv = document.createElement('li');
                orderItemDiv.className = 'order-item';
                orderItemDiv.textContent = `${item.name} - ${item.price}元`;
                receiptOrderList.appendChild(orderItemDiv);
            });

            const totalDiscount = parseInt(document.getElementById('totalDiscount').textContent, 10);
            const finalTotalPrice = parseFloat(document.getElementById('finalTotalPrice').textContent) || 0;
            const paymentAmount = parseFloat(document.getElementById('paymentAmount').value) || 0;
            const changeAmount = paymentAmount - finalTotalPrice;

            document.getElementById('modalMerchantName').textContent = document.getElementById('merchantName').textContent;
            document.getElementById('modalPackingFee').textContent = packingFee;
            document.getElementById('modalDeliveryFee').textContent = deliveryFee;
            document.getElementById('modalTotalDiscount').textContent = totalDiscount;
            document.getElementById('modalFinalTotalPrice').textContent = finalTotalPrice.toFixed(2);
            document.getElementById('modalPaymentAmount').textContent = paymentAmount.toFixed(2);
            document.getElementById('modalChangeAmount').textContent = changeAmount.toFixed(2);
            document.getElementById('modalAddress').textContent = '北京市海淀区XX路XX号';
            document.getElementById('modalOrderTime').textContent = new Date().toLocaleString();
            document.getElementById('modalDeliveryTime').textContent = new Date(Date.now() + 30 * 60000).toLocaleString(); // 30 minutes later
            document.getElementById('modalDeliveryMethod').textContent = '普通配送';
            document.getElementById('modalDeliveryPerson').textContent = '张三';
            document.getElementById('modalInvoiceInfo').textContent = '无';
            document.getElementById('modalOrderNumber').textContent = Math.floor(Math.random() * 1000000);
            document.getElementById('modalRemarks').textContent = '';

            receiptModal.style.display = 'block';
        }

        function closeReceipt() {
            const receiptModal = document.getElementById('receiptModal');
            receiptModal.style.display = 'none';
        }

        function toggleEditForm() {
            const editForm = document.getElementById('editForm');
            editForm.style.display = editForm.style.display === 'none' ? 'block' : 'none';
        }

        function saveMerchantInfo() {
            const merchantId = getCurrentMerchantId();
            const merchant = merchantsData.find(merchant => merchant.id === merchantId);

            merchant.name = document.getElementById('nameInput').value;
            merchant.address = document.getElementById('addressInput').value;
            merchant.phone = document.getElementById('phoneInput').value;
            merchant.owner = document.getElementById('ownerInput').value;
            merchant.hours = document.getElementById('hoursInput').value;
            merchant.announcement = document.getElementById('announcementInput').value;
            merchant.promise = document.getElementById('promiseInput').value;

            const kitchenImageInput = document.getElementById('kitchenImageInput');
            if (kitchenImageInput.files.length > 0) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    merchant.kitchenImage = e.target.result;
                    document.getElementById('kitchenImagePreview').src = e.target.result;
                    document.getElementById('kitchenImagePreview').style.display = 'block';
                };
                reader.readAsDataURL(kitchenImageInput.files[0]);
            }

            document.getElementById('merchantName').textContent = merchant.name;

            toggleEditForm();
            renderMerchants();
        }

        function getCurrentMerchantId() {
            const currentMerchantName = document.getElementById('merchantName').textContent;
            return merchantsData.find(merchant => merchant.name === currentMerchantName).id;
        }

        function printReceipt() {
            const modalContent = document.querySelector('.receipt-modal-content');
            const printWindow = window.open('', '', 'height=600,width=800');
            printWindow.document.write('<html><head><title>订单详情</title>');
            printWindow.document.write('<style>');
            printWindow.document.write(`
                body {
                    font-family: Arial, sans-serif;
                    background-color: white;
                    margin: 0;
                    padding: 20px;
                }
                .summary-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 5px 0;
                }
                .summary-total {
                    font-weight: bold;
                }
            `);
            printWindow.document.write('</style></head><body>');
            printWindow.document.write(modalContent.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
            printWindow.close();
        }

        // 初始化商户列表
        renderMerchants();

        // 处理图片上传预览
        document.getElementById('kitchenImageInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('kitchenImagePreview').src = e.target.result;
                    document.getElementById('kitchenImagePreview').style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                document.getElementById('kitchenImagePreview').style.display = 'none';
            }
        });
    </script>
</body>
</html>

4.效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布