【Vue】快餐店收银系统

最新推荐文章于 2024-08-20 17:42:03 发布

「已注销」

最新推荐文章于 2024-08-20 17:42:03 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_54468192/article/details/112693447

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js、Axios和Element UI开发一个快餐店收银系统，包括订单管理、商品列表操作和结算流程。通过表格展示订单，允许用户添加商品、调整数量并计算总价，提供清空和结算功能。

摘要由CSDN通过智能技术生成

功能介绍

在这里插入图片描述

点击商品列表中的商品可以将该商品添加到订单，再次点击，可以增加数量，也可以在订单列表中，点击加号增加数量，点击减号减少数量

提供了计算总数和总价的功能，点击清空按钮，可以清空订单列表，点击结算按钮，可以提交订单

代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快餐店收银系统</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<body>
    <div id="app" v-cloak>
        <el-row>
            <el-col :span="7" id="left-col">
                <div class="left-container">
                    <el-table :data="tableData">
                        <el-table-column prop="name" label="商品名称"> </el-table-column>
                        <el-table-column prop="count" label="数量"> </el-table-column>
                        <el-table-column prop="price" label="价格"> </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="add(scope.row)"><i
                                        class="el-icon-circle-plus-outline"></i>
                                </el-button>
                                <el-button type="text" size="medium" @click="minus(scope.row)"><i
                                        class="el-icon-remove-outline"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="info" v-show="tableData.length!==0">
                        <span>总数：{{totalCount}}</span>
                        <span>合计：￥{{totalPrice}}</span>
                    </div>
                    <div class="btn">
                        <el-button type="success" round @click="buy">结算</el-button>
                        <el-button type="danger" round @click="clear">清空</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="17" id="right-col">
                <el-tabs type="card">
                    <el-tab-pane label="汉堡">
                        <div class="items">
                            <ul>
                                <li v-for="item in type0Items" @click="addItem(item)">
                                    <el-card style="height: 200px; width: 210px;">
                                        <img :src="item.image_src" alt="image" class="image"
                                            style="height: 100px; width: 100px; text-align: center;">
                                        <div style="padding: 5px; text-align: center;">
                                            <span style="color: #999;">{{item.name}}</span>
                                            <div class="bottom clearfix">
                                                <span style="color: red;">￥{{item.price}}</span>
                                            </div>
                                        </div>
                                    </el-card>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="饮料">
                        <div class="items">
                            <ul>
                                <li v-for="item in type1Items" @click="addItem(item)">
                                    <el-card style="height: 200px; width: 210px;">
                                        <img :src="item.image_src" alt="image" class="image"
                                            style="height: 100px; width: 100px; text-align: center;">
                                        <div style="padding: 5px; text-align: center;">
                                            <span style="color: #999;">{{item.name}}</span>
                                            <div class="bottom clearfix">
                                                <span style="color: red;">￥{{item.price}}</span>
                                            </div>
                                        </div>
                                    </el-card>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="全家桶">
                        <div class="items">
                            <ul>
                                <li v-for="item in type2Items" @click="addItem(item)">
                                    <el-card style="height: 200px; width: 210px;">
                                        <img :src="item.image_src" alt="image" class="image"
                                            style="height: 100px; width: 100px; text-align: center;">
                                        <div style="padding: 5px; text-align: center;">
                                            <span style="color: #999;">{{item.name}}</span>
                                            <div class="bottom clearfix">
                                                <span style="color: red;">￥{{item.price}}</span>
                                            </div>
                                        </div>
                                    </el-card>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/main.js"></script>
    </head>
</body>

</html>

点击获取完整代码

设计思路

Vue+Axios+ElementUI

布局分为左右两栏，左边是订单列表，右边是商品列表

订单列表使用table表格实现，商品列表使用了Tabs标签页

具体使用方法，可以查看ElementUI的官方文档

官方文档

添加商品到订单列表的实现方法：

    addItem: function (item) {
      var flag = false;
      for (var i = 0; i < this.tableData.length; i++) {
        if (item.id === this.tableData[i].id) {
          flag = true;
          this.tableData[i].count++;
          break;
        }
      }
      if (flag === false) {
        this.tableData.push({
          id: item.id,
          name: item.name,
          price: item.price,
          count: 1,
        });
      }
      this.calcTotal();
    }