订单模块制作 核心功能-1
添加商品到订单页面
我们在vue的构造器里加入methods方法，在methods方法里再加入addOrderList方法。这个方法的作用是点击右侧的商品，然后把商品添加到左边的列表里。
addOrderList方法(也许你只看文字版无法理解，推荐查看视频)：
methods:{ //添加订单列表的方法 addOrderList(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.tableData.forEach((element) => { this.totalCount+=element.count; this.totalMoney=this.totalMoney+(element.price*element.count); }); } }
在作这个方法的时候，在订单列表的下方又添加了订单的统计功能，其实也就两项：订单价格汇总和订单商品数量汇总。我们在data里声明的值是totalMoney和totalCount。
写完这个方法后，我们还需要在我们的商品上绑定方法，来进行调用添加方法。
@click="addOrderList(goods)"
这样在点击商品时订单列表就会根据我们的程序逻辑发生变化。
订单列表中的增加按钮
商品中绑定addOrderList方法是非常容易的，如果在订单列表中绑定是需要特殊处理一下的，需要用到template的scope值，让后进行绑定。
<el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
订单模块制作 核心功能-2
删除单个商品
在veu构造器methods属性里增加一个delSingleGoods方法，并接收goods对象为参数，用数组的filter可以轻松删除数组中单个的商品。
//删除单个商品 delSingleGoods(goods){ console.log(goods); this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId); },
现在可以npm run dev试一下了，会发现现在商品可以正确的删除了，但是统计的数量和金额是不正确的，我们需要写一些统计的代码。在下手之前你会发现在增加商品方法中也有类似统计的方法，既然两个功能很像，我们就重新写一个方法。
//汇总数量和金额 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); }); } }
需要注意的是，以前我们是单独使用的，所以不用把totoalCount和totalMoney清零，但是做成公用方法了，记得清零。方法做好了，我们在需要的地方直接用this.getAllMoney()引用就可以了。
功能做好了，我们还需要为删除按钮绑定事件：
<el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
这样我们就把删除单个订单商品的功能做好了，我们可以测试调试一下。
删除全部订单商品
这个功能其实很简单，只要把this.tableData清空就可以了，在methods属性中写一个delAllGoods的方法。
//删除所有商品 delAllGoods() { this.tableData = []; this.totalCount = 0; this.totalMoney = 0; },
有的小伙伴会好奇，你完全可以再次复用getAllMoney()方法进行汇总，为什么不用那？汇总方法里毕竟是有业务逻辑的，我们只做两个清零，这样消耗的资源更少，所以我们没有使用。
模拟结账
因为模拟结账需要Post数据到后台，我的服务器又不能提供这样的借口给大家，所以我只说制作思路，大家可以在自己的服务器上去实现。
1、设置我们Aixos的Pos方法。
2、接受返回值进行处理。
3、如果成功，清空现有构造器里的tableData，totalMoney，totalCount数据。
4、进行用户的友好提示。
由于前两个步骤不能演示，所以这里我们只模拟3和4步。在methods里作一个结账方法，清空数据和进行友好提示。
checkout() { if (this.totalCount!=0) { this.tableData = []; this.totalCount = 0; this.totalMoney = 0; this.$message({ message: '结账成功，感谢你又为店里出了一份力!', type: 'success' }); }else{ this.$message.error('不能空结。老板了解你急切的心情！'); } }
项目打包和上线
打包注意事项：
1、把绝对路径改为相对路径
我们打开config/index.js 会看到一个build属性，这里就我们打包的基本配置了。你在这里可以修改打包的目录，打包的文件名。最重要的是一定要把绝对目录改为相对目录。
assetsPublicPath:'./'
这样才能保证我们打包出去的项目可以正常预览。
2、在命令行中用npm run build 进行打包。
npm run build