跟我一起做技術胖的快餐店收銀系統項目

本文轉載自查看原文 2019-07-22 19:10 457 vue

我們先看一下頁面的效果為

接下來我們進行下面的開發
第一步是安裝Mockplus，我們使用mockplus畫一個快餐店點餐頁面的線圖。
我們在里面創建項目
寬1000，高600

這個是使用mockPlus拖拽生成的原型項目圖

第二步：搭建項目

mpm install vue-cli -g
vue init webpack newdemo
cd newdemo 
npm run dev

第二步：上阿里圖標庫選一些我們需要的圖標

這次不是一個一個使用的單個圖標，而是直接在index.html中引入圖標css樣式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>快餐店收銀系統</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1307406_b3oprhr1ycw.css">
    <style>
      html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

第三步：添加組件，leftNav作為左側的公共組件，Pos組件為功能組件

修改router文件

//src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import Pos from '@/components//page/Pos'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pos',
      component: Pos
    }
  ]
})

//src\App.vue
<template>
  <div id="app">
    <leftNav/>
   <div class="main">
      <router-view/>
   </div>
  </div>
</template>

<script>
import leftNav from '@/components/common/leftNav'
export default {
  name: 'App',
  components: {
    leftNav
  }
}
</script>

<style>
#app {
  font-family: 'Microsoft Yahei''Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
.main{
  float: left;
  width: 95%;
  background-color: #EFF2F7;
  height: 100%;
  overflow: hidden;
}
</style>

//src\components\common\leftNav.vue
<template>
    <div class="left-nav">
<ul>
    <li>
        <i class="i iconfont icongoumai"></i>
        <div>收銀</div>
    </li>
     <li>
        <i class="i iconfont icondianpu"></i>
        <div>店鋪</div>
    </li>
     <li>
        <i class="i iconfont icondianpu"></i>
        <div>商品</div>
    </li>
     <li>
        <i class="i iconfont iconhuiyuanqia"></i>
        <div>會員</div>
    </li>
     <li>
        <i class="i iconfont iconzuanshi"></i>
        <div>統計</div>
    </li>
     <li>
        <i class="i iconfont icongongnengjianyi"></i>
        <div>設置</div>
    </li>
</ul>
    </div>
</template>
<script>
export default {

}
</script>
<style>
.left-nav{
    color: #fff;
    font-size: 10px;
    height: 100%;
    background-color: #1D8CE0;
    float: left;
    width: 5%;
}
.confont{
    font-size: 24px;
}
.left-nav ul{
    padding: 0px;
    margin: 0px;
}
.left-nav li{
    list-style: none;
    text-align: center;
    border-bottom: 1px solid #20a0ff;
    padding: 10px;
}
</style>

關於右側的點餐頁面

我們使用的是element-ui，以及使用了axios和mock數據，模擬從后端獲取數據
（一開始的時候，也是前端寫死數據的）
關於核心的邏輯部分，點擊常用商品，還有下面的有圖標的各類商品，會在左側的點餐頁面中出現，並且還會計算金額和數量
當我們對點餐頁面進行操作，進行刪除和增加可以改變點餐頁面中的數量以及金額，當我們點擊刪除的時候，點餐頁面一切清空。
當我們點擊結賬頁面，我們通過模擬結賬，會彈出一個成功的提示或者失敗的提示。
安裝element-ui和axios

npm n install element-ui --save
npm n install axios --save

模擬的mock數據

  created: function () {
    let baseUrl =
      'https://www.easy-mock.com/mock/5c07a781d292dd2dc4f9caa8/mockapi'
    axios
      .get(baseUrl + '/oftenGoods')
      .then(response => {
        console.log('response', response)
        this.oftenGoods = response.data
      })
      .catch(error => {
        console.log(error)
        alert('網絡錯誤，不能訪問')
      })
    axios
      .get(baseUrl + '/typeGoods')
      .then(response => {
        console.log('......response', response)
        this.type0Goods = response.data[0]
        this.type1Goods = response.data[1]
        this.type2Goods = response.data[2]
        this.type3Goods = response.data[3]
      })
      .catch(error => {
        console.log(error)
        alert('網絡錯誤，不能訪問')
      })
  },

我們模擬添加商品刪除商品以及計算金額

 addOrderList (goods) {
      // 添加商品，商品是否已經在訂單列表中
      this.totalMoney = 0
      this.totalCount = 0
      let isHave = false
      // 根據判斷的值編寫業務邏輯
      // 判斷是否存在商品
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId === goods.goodsId) {
          isHave = true // 存在
        }
      }
      // 根據判斷的值編寫業務邏輯
      if (isHave) {
        // 改變列表中商品的數量 這個過濾的是什么？
        let arr = this.tableData.filter(o => o.goodsId === goods.goodsId)
        arr[0].count++
        console.log('arr....是什么', arr)
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        }
        this.tableData.push(newGoods)
      }
      // 計算匯總金額和數量
      this.tableData.forEach(element => {
        this.totalCount += element.count
        this.totalMoney = this.totalMoney + element.price * element.count
      })
      this.getAllMoney()
    },
    // 刪除單個商品
    delSingleGoods (goods) {
      this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId)
      this.getAllMoney()
    },
    delAllGoods () {
      this.tableData = []
      this.totalMoney = 0
      this.totalCount = 0
    },
    // 匯總數量和金額
    getAllMoney () {
      this.totalCount = 0
      this.totalMoney = 0
      this.tableData.forEach(element => {
        this.totalCount += element.count
        this.totalMoney = this.totalMoney + element.price * element.count
      })
    },

模擬結賬

//
    // 結賬 模擬結賬
    checkout () {
      if (this.totalCount !== 0) {
        this.tableData = []
        this.totalCount = 0
        this.totalMoney = 0
        this.$message({
          message: '結賬成功，感謝你的光顧啊',
          type: 'success'
        })
      } else {
        this.$message.error('不能為空')
      }
    }

整個頁面的代碼為

//src\components\page\Pos.vue
<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs>
          <el-tab-pane label="點餐">
            <el-table :data="tableData" border style="width:100%;">
              <el-table-column prop="goodsName" label="商品名稱"></el-table-column>
              <el-table-column prop="count" label="數量" width="50"></el-table-column>
              <el-table-column prop="price" label="金額" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">刪除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <span>
                <small>金額:</small>
                {{totalMoney}}
              </span>
              <span>
                <small>數量:</small>
                {{totalCount}}
              </span>
            </div>
            <div class="div-btn">
              <el-button type="warning">掛單</el-button>
              <el-button type="danger" @click="delAllGoods">刪除</el-button>
              <el-button type="success" @click="checkout">結賬</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="掛單">掛單</el-tab-pane>
          <el-tab-pane label="外賣">外賣</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="ofen-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="goods in oftenGoods" :key="goods.goodsId" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}</span>
                <span class="o-price">{{goods.price}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="漢堡">
              <div>
                <ul class="cookList">
                  <li v-for="goods in type0Goods" :key="goods.goodsId" @click="addOrderList(goods)">
                    <span class="foodImg">
                      <img
                        src="https://img.4008823823.com.cn/kfcios/Version/635_667540.jpg"
                        width="100%"
                      />
                    </span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">{{goods.price}}$</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <ul class="cookList">
                <li v-for="goods in type1Goods" :key="goods.goodsId" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img
                      src="https://img.4008823823.com.cn/kfcios/Version/635_667540.jpg"
                      width="100%"
                    />
                  </span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">{{goods.price}}$</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="飲料">
              <ul class="cookList">
                <li v-for="goods in type2Goods" :key="goods.goodsId" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img
                      src="https://img.4008823823.com.cn/kfcios/Version/635_667540.jpg"
                      width="100%"
                    />
                  </span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">{{goods.price}}$</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <ul class="cookList">
                <li v-for="goods in type3Goods" :key="goods.goodsId" @click="addOrderList(goods)">
                  <span class="foodImg">
                    <img
                      src="https://img.4008823823.com.cn/kfcios/Version/635_667540.jpg"
                      width="100%"
                    />
                  </span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">{{goods.price}}$</span>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
// import { Message } from 'element-ui'
export default {
  name: 'Pos',
  data () {
    return {
      tableData: [
        // {
        //   goodName: '香辣雞腿堡',
        //   price: 15,
        //   count: 1
        // },
        // {
        //   goodName: '愛心薯條',
        //   price: 8,
        //   count: 1
        // },
        // {
        //   goodName: '甜筒',
        //   price: 8,
        //   count: 1
        // }
      ],
      oftenGoods: [
        // {
        //   goodsId: 1,
        //   goodsName: '香辣雞腿堡',
        //   price: 18
        // },
        // {
        //   goodsId: 2,
        //   goodsName: '薯條',
        //   price: 10
        // },
        // {
        //   goodsId: 3,
        //   goodsName: '可樂',
        //   price: 8
        // },
        // {
        //   goodsId: 4,
        //   goodsName: '雞塊',
        //   price: 21
        // },
        // {
        //   goodsId: 5,
        //   goodsName: '大份雞腿',
        //   price: 18
        // }
      ],
      // type0Goods: [
      //   {
      //     goodsId: 1,
      //     goodsImg: 'https://img.4008823823.com.cn/kfcios/Version/621_626971.jpg',
      //     goodsName: '芝士厚菇素堡',
      //     price: 18
      //   },
      //   {
      //     goodsId: 2,
      //     goodsImg: 'https://img.4008823823.com.cn/kfcios/Version/640_684737.jpg',
      //     goodsName: '芝士澳牛堡',
      //     price: 10

      //   },
      //   {
      //     goodsId: 3,
      //     goodsImg: 'https://img.4008823823.com.cn/kfcios/Version/635_667540.jpg',
      //     goodsName: '臟臟大蝦雞堡',
      //     price: 12
      //   }
      // ],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0
    }
  },
  created: function () {
    let baseUrl =
      'https://www.easy-mock.com/mock/5c07a781d292dd2dc4f9caa8/mockapi'
    axios
      .get(baseUrl + '/oftenGoods')
      .then(response => {
        console.log('response', response)
        this.oftenGoods = response.data
      })
      .catch(error => {
        console.log(error)
        alert('網絡錯誤，不能訪問')
      })
    axios
      .get(baseUrl + '/typeGoods')
      .then(response => {
        console.log('......response', response)
        this.type0Goods = response.data[0]
        this.type1Goods = response.data[1]
        this.type2Goods = response.data[2]
        this.type3Goods = response.data[3]
      })
      .catch(error => {
        console.log(error)
        alert('網絡錯誤，不能訪問')
      })
  },
  mounted: function () {
    var orderHeight = document.body.clientHeight
    console.log('orderHeight....', orderHeight)
    document.getElementById('order-list').style.height = orderHeight + 'px'
  },
  methods: {
    addOrderList (goods) {
      // 添加商品，商品是否已經在訂單列表中
      this.totalMoney = 0
      this.totalCount = 0
      let isHave = false
      // 根據判斷的值編寫業務邏輯
      // 判斷是否存在商品
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId === goods.goodsId) {
          isHave = true // 存在
        }
      }
      // 根據判斷的值編寫業務邏輯
      if (isHave) {
        // 改變列表中商品的數量 這個過濾的是什么？
        let arr = this.tableData.filter(o => o.goodsId === goods.goodsId)
        arr[0].count++
        console.log('arr....是什么', arr)
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        }
        this.tableData.push(newGoods)
      }
      // 計算匯總金額和數量
      this.tableData.forEach(element => {
        this.totalCount += element.count
        this.totalMoney = this.totalMoney + element.price * element.count
      })
      this.getAllMoney()
    },
    // 刪除單個商品
    delSingleGoods (goods) {
      this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId)
      this.getAllMoney()
    },
    delAllGoods () {
      this.tableData = []
      this.totalMoney = 0
      this.totalCount = 0
    },
    // 匯總數量和金額
    getAllMoney () {
      this.totalCount = 0
      this.totalMoney = 0
      this.tableData.forEach(element => {
        this.totalCount += element.count
        this.totalMoney = this.totalMoney + element.price * element.count
      })
    },
    // 結賬 模擬結賬
    checkout () {
      if (this.totalCount !== 0) {
        this.tableData = []
        this.totalCount = 0
        this.totalMoney = 0
        this.$message({
          message: '結賬成功，感謝你的光顧啊',
          type: 'success'
        })
      } else {
        this.$message.error('不能為空')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.pos-order {
  background-color: #f9fafc;
}
.div-btn {
  margin-top: 10px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}
.often-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  cursor: pointer;
}
.o-price {
  color: #58b7ff;
}
.goods-type {
  clear: both;
  margin-left: 20px;
  border-top: 1px solid #d3dce6;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.totalDiv {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid#D3dce6;
  color: red;
}
</style>

我將我做的項目傳到了github：https://github.com/JserJser/dailyPush/tree/master/newdemo，歡迎大家star

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 O2O快餐店實干啟示錄快餐觸摸屏收銀系統用【快餐店】理解日均億級高並發分布式架構，秒懂！從零開始，跟我一起做jblog項目（三）從Maven到Gradle 跟我一起做一個vue的小項目（二）跟我一起做一個vue的小項目（八）跟我一起做一個vue的小項目(一) 跟我一起使用Vue.js + Docker 部署項目跟我一起學.NetCore之文件系統應用及核心淺析跟我一起ggplot2（1）