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

原创

于 2024-12-12 14:42:27 发布 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

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

1.技术说明

技术栈

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

系统概述

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

2.功能描述

主要功能

商户展示:
- 用户可以在首页看到所有可用的商户列表。
- 每个商户名称都可以点击进入详细页面。
商户详情页面:
- 显示所选商户的基本信息（如名称、地址、电话等）。
- 提供编辑商户信息的功能，包括上传后厨卫生图片。
- 展示商户的菜单，并允许用户将商品添加到订单中。
订单管理:
- 用户可以查看已添加到订单中的商品列表，并移除不需要的商品。
- 计算并显示总费用，包括商品总价、打包费、配送费及优惠后的实付总价。
- 输入付款金额后，自动计算并显示应找零金额。
结算与打印小票:
- 在确认订单无误后，用户可以输入付款金额并查看应找零金额。
- 点击“结算”按钮后，会弹出一个模态框显示完整的订单详情。
- 在模态框中，用户可以看到详细的订单信息，包括店铺名称、商品清单、各项费用及付款情况。
- 用户可以选择“打印小票”，这将打开一个新的窗口，复制模态框的内容并在新窗口中打印出来。

页面布局与样式

主页 (#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">