vue实现结账单基本方法

 <script>
 import axios from 'axios';
 export default {
     name: 'Pos',
     mounted: function () {
         var orderHeight = document.body.clientHeight;
         document.getElementById("order-list").style.height = orderHeight + 'px';
     },
     created() {
         //读取常用商品列表
         axios.get('http://jspang.com/DemoApi/oftenGoods.php')
             .then(response => {
                 //console.log(response);
                 this.oftenGoods = response.data;
             })
             .catch(error => {
                 console.log(error);
                 alert('网络错误，不能访问');
             })
         //读取分类商品列表
         axios.get('http://jspang.com/DemoApi/typeGoods.php')
             .then(response => {
                 //console.log(response);
                 //this.oftenGoods=response.data;
                 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('网络错误，不能访问');
             })
     },
     data() {
         return {
             tableData: [], //订单列表的值
             oftenGoods: [],
             type0Goods: [],
             type1Goods: [],
             type2Goods: [],
             type3Goods: [],
             totalMoney: 0, //订单总价格
             totalCount: 0  //订单商品总数量

         }
     },
     methods: {
         //添加订单列表的方法
         addOrderList(goods) {
             //console.log(goods);
             this.totalCount = 0; //汇总数量清0
             this.totalMoney = 0;
             let isHave = false;
             //判断是否这个商品已经存在于订单列表
             for (let i = 0; i < this.tableData.length; i++) {
                 console.log(this.tableData[i].goodsId);
                 if (this.tableData[i].goodsId == goods.goodsId) {

                     isHave = true; //存在

                 }
             }
             //根据isHave的值判断订单列表中是否已经有此商品
             if (isHave) {
                 //存在就进行数量添加
                 let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
                 arr[0].count++;
                 //console.log(arr);
             } else {
                 //不存在就推入数组
                 let newGoods = { goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1 };
                 this.tableData.push(newGoods);

             }

             this.getAllMoney();
         },
         //删除单个商品
         delSingleGoods(goods) {
             console.log(goods);
             this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
             this.getAllMoney();

         },
         //删除所有商品
         delAllGoods() {
             this.tableData = [];
             this.totalCount = 0;
             this.totalMoney = 0;
         },
         //汇总数量和金额
         getAllMoney() {
             this.totalCount = 0;
             this.totalMoney = 0;
             if (this.tableData) {
                 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>