点餐收款应用项目实践

最近利用vue框架做了一个点餐收款的前端项目，实现的功能包括：点餐、增减商品数量、结账、模拟前后端数据交互等。主要用到的技术包括Html+Css+Vue+Webpack+Element+vueRouter等，通过该项目提升了自身的前端实践能力。效果图如下所示：

 项目部分代码如下所示：

methods:{
    // 添加点餐列表的方法
    addGoods(goods){
      // 判断该商品是否已经存在点餐列表中
      this.allCount = 0;
      this.allMoney = 0;
      let flag = false;
      for(let i=0;i<this.tableData.length;i++){
        if(goods.goodsId == this.tableData[i].goodsId){
          flag = true;
          console.log(flag);
        }
      }
      // 根据判断结果进行点餐列表的数据更新
      if(flag){
        let arr = this.tableData.filter(o=> o.goodsId == goods.goodsId);
        console.log(arr);
        arr[0].count++;
        
      }else{
        var newGoods = {goodsId:goods.goodsId, goodsName:goods.goodsName, price:goods.price,count:1};
        this.tableData.push(newGoods);
        console.log(newGoods);
      }
      this.getallCount();
    },
    getallCount(){
      this.allCount = 0;
      this.allMoney = 0;
      for(var i=0;i<this.tableData.length;i++){
        this.allCount +=this.tableData[i].count;
        this.allMoney +=this.tableData[i].price*this.tableData[i].count;
      }
    },
    upGetallCount(){
      this.upAllCount= 0;
      this.upAllMoney = 0;
      for(var i=0;i<this.upData.length;i++){
        this.upAllCount +=this.upData[i].count;
        this.upAllMoney +=this.upData[i].price*this.upData[i].count;
      }
    },
    delGoods(goods){

      var sum= --goods.count;
      console.log(sum);
      // 如果商品数量不为0，返回;此时如果商品数量为0，则删除该商品表中所有信息
      if(sum>0){
        this.getallCount();
        return;
      }else{
        // for(let j=0;j<this.tableData.length;j++){
        //   if(this.tableData[j].count == 0){
        //     this.tableData.splice(j,1);
        //     this.getallCount();
        //   }
        // }
        this.tableData = this.tableData.filter(q=>q.count != 0);
        this.getallCount();
      }
    },
    upDelGoods(goods){
      var sum= --goods.count;
      console.log(sum);
      if(sum>0){
        this.upGetallCount();
        return;
      }else{
        this.upData = this.upData.filter(q=>q.count != 0);
        this.upGetallCount();
      }
    },
    upAddGoods(goods){
      // 判断该商品是否已经存在挂单列表中
      let flag = false;
      for(let i=0;i<this.upData.length;i++){
        if(goods.goodsId == this.upData[i].goodsId){
          flag = true;
          console.log(flag);
        }
      }
      // 根据判断结果进行点餐列表的数据更新
      if(flag){
        let arr = this.upData.filter(o=> o.goodsId == goods.goodsId);
        console.log(arr);
        arr[0].count++;
        
      }else{
        var newGoods = {goodsId:goods.goodsId, goodsName:goods.goodsName, price:goods.price,count:1};
        this.upData.push(newGoods);
        console.log(newGoods);
      }
      this.upGetallCount();
    },
    solveMenu(){
      if(this.tableData.length ==0){
        // alert("请您先进行点餐！");
        this.$message.error('不能空结！');
        return
      }
      this.tableData = [];
      this.allCount = 0;
      this.allMoney = 0;
      alert("结账成功!");
    },
    upMenu(){
      this.upData = this.tableData;
      this.tableData = [];
      this.allCount = 0;
      this.allMoney = 0;
      this.upGetallCount();
    },
    delMenu(){
      this.tableData = [];
      this.allCount = 0;
      this.allMoney = 0;
    },
    returnMenu(){
      this.tableData = this.upData;
      this.upData = [];
      this.upAllCount = 0;
      this.upAllMoney = 0;
      this.getallCount();
    }

  }

　　源代码github地址：https://github.com/sllhappy/order_pos

参考资料：

https://element.eleme.cn/#/zh-CN/component/layout

https://www.cnblogs.com/mumu122GIS/p/11208815.html

https://jspang.com/