vue.js学习进阶之基于element-ui的快餐系统

这是我在学习vue.js 时模仿视频做的一个项目，应用到了vue、vue-router,axios的一些东西。
效果图如下：
话不多说

1.项目准备

新建一个文件来放我们项目需要的文件

1. npm install vue-cli -g 全局安装我们的cli脚手架
2. vue init webpack projectname （projectname ）是我们需要建的项目名称，可以写也可以不写
3. npm install (如果网络不行的话可以使用 cnpm install)
4. 安装我们需要到的其他东西,axios 和element-ui
5. npm install axios --save npm i element-ui -S安装需要的东西
   在main.js 文件中在全局使用axios，element-ui就行了。项目准备就完成了

2.导航

由于是侧边导航的的设计，所以为了方便，我把侧边导航做成了一个组件，放在了app.vue中，代码如下

<template>
  <div id="leftNav" class="left-nav">
    <ul>
      <li>
        <i class="icon iconfont icon-pos"></i>
        <div>
          收银
        </div>
      </li>
      <li>
        <i class="icon iconfont icon-4"></i>
        <div>
          店铺
        </div>
      </li>
      <li>
        <i class="icon iconfont icon-hanbao1"></i>
        <div>
          商品
        </div>
      </li>
      <li>
        <i class="icon iconfont icon-VIP"></i>
        <div>
          会员
        </div>
      </li>
      <li>
        <i class="icon iconfont icon-shezhi"></i>
        <div>
          设置
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "leftNav",
  data: () => ({})
};
</script>
<style scoped>
.left-nav {
  color: #fff;
  font-size: 16px;
  height: 100%;
  background-color: rgba(50, 50, 41, 0.5);
  margin: 0;
  float: left;
  width: 3%;
}
.iconfont {
  font-size: 14px;
  margin: 0 auto;
}
.left-nav ul {
  padding: 0;
  margin: 0;
}
.left-nav li {
  list-style: none;
  text-align: center;
  /* padding: 10px; */
  padding: 30px 0;
   cursor: pointer;
}
.left-nav li:hover {
  background-color: #e59f71;
  transition: 0.5s;
 
}
</style>

在app.vue中引入 使用就可以了。

3.点餐页面

点餐页是一个三栏布局，使用了element布局，商品信息是一个json文件。代码如下

<template>
  <div id="pos">
      <el-row>
        <el-col :span='6' class="pos-order">
              <el-tabs boder id='order-list'>
                <el-tab-pane label="点餐">
                   <el-table
                    border :data="tableData">
                    <el-table-column
                      prop="name"
                      label="商品名称" width="100">
                    </el-table-column>
                    <el-table-column
                      prop="count"
                      label="量"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="金额"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      label="操作"  fixed="right" width="150" border>
                        <el-button type="success" size='small'>增加</el-button>
                        <el-button type="danger" size='small'>删除</el-button>
                    </el-table-column>
                  </el-table>
                  <div class="mon-text">
                    <p><span>数量：0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>金额: 0</span></p>
                  </div>
                  <div class="btn">
                    <el-button type="primary" >挂单</el-button> 
                    <el-button type="danger" >删除</el-button> 
                    <el-button type="warning" >结账</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='18' class="goods-order" id='goodList'>
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
              <ul>
                  <li v-for="(item,index) in oftenGoods" :key="index" @click="addOrderList(item)">
                      <span>{{item.name}}</span>
                      <span class="o-price">￥{{item.price}}元</span>
                  </li>

              </ul>
          </div>
        </div>
        <div class="goods-type">

          <el-tabs class="goodstype">
              <el-tab-pane  v-for="(goods,index) in type0Goods" :key="index" :label="goods.name">
                <ul class='cookList'>
                      <li v-for="(foods,key) in goods.foods" :key="key" @click='addFoods(foods)'> 
                          <span class="foodImg"><img :src="foods.image" width="100%"></span>
                          <span class="foodName">{{foods.name}}</span><br>
                          <span class="foodPrice">￥{{foods.price}}元</span>
                      </li> 
                </ul> 
              </el-tab-pane>
          </el-tabs>
        </div>
     </el-col>       
      </el-row>
  </div>
</template>

当我们点击某商品时，商品信息会显示在结账一栏，进行操作，如果接站栏里有该商品了，只需要增加数量，如果没有。代码如下

import axios from 'axios';
export default {
  name: "pos",
  data: () => ({
   tableData:[],
   oftenGoods:[],
   type0Goods:[],
   typeName:[]        
  }),
  created(){
    axios.get('../../static/data.json').then(res =>{
      // console.log(res.data);
      // 食品
      this.oftenGoods = res.data.foods;
      // 食品分类
      this.type0Goods = res.data.goods;
      // console.log(this.oftenGoods);
      // console.log(this.type0Goods);
      for(let index in this.type0Goods){
        // console.log(this.type0Goods[index].name);
        this.typeName.push(this.type0Goods[index]);
      }
      // console.log(this.typeName);
    }).catch( res =>{
      console.log('erroe');
      
    })
  },
  mounted() {
    //do something after mounting vue instance
    var orderHeight = document.body.clientHeight;
    console.log(orderHeight);
    document.getElementById('order-list').style.height=orderHeight+'px';
    document.getElementById('goodList').style.height=orderHeight+'px';
  },
  methods:{
    addOrderList:function(item){
      //先判断是否存在订单中
      // 据判断结果编写逻辑
      let isHave = false;
      for(let i=0;i < this.tableData.length;i++){
        if(this.tableData[i].name == item.name){
          isHave = true;
        }
      }
      if(isHave){
        // 改变列表中商品数量
        let arr = this.tableData.filter(o => o.name == item.name);
        arr[0].count++;
        console.log('数量增加了');
      }else{
        // 新添加商品信息,把新信息push进 商品数组内
        let newList={
          name:item.name,
          price:item.price,
          count:1
        };
        this.tableData.push(newList);
        console.log('新添加了商品');
      }
    },
    addFoods:function(foods){

    }
  }
}

然后我们将我们的结账总额传入vuex中，点击结账后传入vuex，并记录下订单次数，使用this.$store.commit()提交到store.js中进行修改。

并在店铺页中使用vuex中数据

这样一个简单的点单收银系统就做好了。
里面所用到的json数据是我在别人的项目中拿的，如有侵犯，请及时告知
源码已上传github：https://github.com/zyh0yh/vue-