1 <script>
  2 import axios from ‘axios‘;
  3 export default {
  4     name: ‘Pos‘,
  5     mounted: function () {
  6         var orderHeight = document.body.clientHeight;
  7         document.getElementById("order-list").style.height = orderHeight + ‘px‘;
  8     },
  9     created() {
 10
 
         //讀取常用商品列表
 11         axios.get(‘http://jspang.com/DemoApi/oftenGoods.php‘)
 12             .then(response => {
 13                 //console.log(response);
 14                 this.oftenGoods = response.data;
 15             })
 16             .catch(error => {
 17                 console.log(error);
 
 18                 alert(‘網絡錯誤，不能訪問‘);
 19             })
 20         //讀取分類商品列表
 21         axios.get(‘http://jspang.com/DemoApi/typeGoods.php‘)
 22             .then(response => {
 23                 //console.log(response);
 24                 //this.oftenGoods=response.data;
 25                 this.type0Goods 
 
= response.data[0];
 26                 this.type1Goods = response.data[1];
 27                 this.type2Goods = response.data[2];
 28                 this.type3Goods = response.data[3];
 29 
 30             })
 31             .catch(error => {
 32                 console.log(error);
 33                 alert(‘網絡錯誤，不能訪問‘);
 34             })
 35     },
 36     data() {
 37         return {
 38             tableData: [], //訂單列表的值
 39             oftenGoods: [],
 40             type0Goods: [],
 41             type1Goods: [],
 42             type2Goods: [],
 43             type3Goods: [],
 44             totalMoney: 0, //訂單總價格
 45             totalCount: 0  //訂單商品總數量
 46 
 47         }
 48     },
 49     methods: {
 50         //添加訂單列表的方法
 51         addOrderList(goods) {
 52             //console.log(goods);
 53             this.totalCount = 0; //匯總數量清0
 54             this.totalMoney = 0;
 55             let isHave = false;
 56             //判斷是否這個商品已經存在於訂單列表
 57             for (let i = 0; i < this.tableData.length; i++) {
 58                 console.log(this.tableData[i].goodsId);
 59                 if (this.tableData[i].goodsId == goods.goodsId) {
 60 
 61                     isHave = true; //存在
 62 
 63                 }
 64             }
 65             //根據isHave的值判斷訂單列表中是否已經有此商品
 66             if (isHave) {
 67                 //存在就進行數量添加
 68                 let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
 69                 arr[0].count++;
 70                 //console.log(arr);
 71             } else {
 72                 //不存在就推入數組
 73                 let newGoods = { goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1 };
 74                 this.tableData.push(newGoods);
 75 
 76             }
 77 
 78             this.getAllMoney();
 79         },
 80         //刪除單個商品
 81         delSingleGoods(goods) {
 82             console.log(goods);
 83             this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
 84             this.getAllMoney();
 85 
 86         },
 87         //刪除所有商品
 88         delAllGoods() {
 89             this.tableData = [];
 90             this.totalCount = 0;
 91             this.totalMoney = 0;
 92         },
 93         //匯總數量和金額
 94         getAllMoney() {
 95             this.totalCount = 0;
 96             this.totalMoney = 0;
 97             if (this.tableData) {
 98                 this.tableData.forEach((element) => {
 99                     this.totalCount += element.count;
100                     this.totalMoney = this.totalMoney + (element.price * element.count);
101                 });
102             }
103         },
104         //結賬方法模擬
105         checkout() {
106             if (this.totalCount!=0) {
107                 this.tableData = [];
108                 this.totalCount = 0;
109                 this.totalMoney = 0;
110                 this.$message({
111                     message: ‘結賬成功，感謝你又為店裏出了一份力!‘,
112                     type: ‘success‘
113                 });
114 
115             }else{
116                 this.$message.error(‘不能空結。老板了解你急切的心情！‘);
117 
118             }
119 
120         }
121 
122 
123     }
124 }
125 </script>

vue實現結賬單基本方法