Vue3仿美团项目--第四天

4 第四天

主要任务：结算按钮，编辑按钮，订单页面

4.1 结算按钮

在vuex里面创建一个空数组用于接收需要结算的商品，在mutations中定义一个方法，在点击结算按钮的时候商品信息添加到vuex这个数组中。

在结算按钮的组件中定义方法，判断当选中的商品的数组为0的时候就弹出失败提示框（Toast提示框），如果不为0，就通过commit方法，把选中要结算的商品数组传递给vuex中mutations里面定义的那个方法。

注意：用于判断的数组里面只包含选中的商品的id。所以需要定义一个方法获取新数组，通过与商品列表里面的数组匹配，当id相同的时候就把该商品的信息过滤出来，获得新数组储存在vuex。

 点击结算按钮跳转到生成订单界面：在src文件夹存放组件的pages中新建一个生成订单组件，需要在main.js中配置路由，给结算按钮绑定click事件，路由跳转到生成订单界面。

 4.2 编辑按钮

分析：点击编辑按钮的同时，下面的结算按钮需要变成删除，合计需要隐藏，编辑按钮变成完成。

4.2.1 全局事件总线

需要用到全局事件总线，在vue3中使用需要先在集成终端下载插件。在src的common目录下创建js文件夹，新建一个js文件，然后配置文件，需要在哪个组件用到就在哪个组件引用。

npm i mitt -S

src/common/js/index.js

import mitt from 'mitt'; //引入mitt

const emitter=mitt();

export default emitter;//导出

4.2.2 编辑按钮

在购物车中使用Header组件的时候绑定编辑按钮为true，这样的话这个编辑按钮只有在购物车才显示，其他组件应用Header的时候就没有。

4.2.3 结算和删除

在vuex中定义edit为true，当edit为true的时候显示编辑，如果为false就显示完成。当点击编辑的时候会触发mutations里面的方法，然后对应的就会改变Header里传入的edit是true还是false，实现编辑和完成的切换。

在vuex中定义一个删除方法。

下面的结算一栏如果用之前的组件需要改变很多，比较麻烦，所以就自己重写一个div存放全选和删除。在结算删除按钮组件中定义一个isDelete，默认为true，显示结算的盒子。

//订阅消息

emitter.on('edit', () => {

     data.isDelete = !data.isDelete;

})

点击删除按钮的时候，判断当选中的商品数组不为0 ，就用commit调用vuex里面的删除方法，并且把isDelete变为false，显示删除的div，并且删除该商品信息，通过update更新数组，传给vuex，如果选中数组为0，则弹出Toast提示框。

一个小bug：当从购物车中删除其中一个商品时，全选按钮不能在同步了。

在删除按钮定义的方法里面清空数组，获得删除后的选中项。

 给更新数据update传入参数值type，当为1的时候是从删除按钮来的更新，给选中项取反，如果是2，代表是从结算按钮来的，直接保留选中项。

4.2.4 头部返回的小箭头

在公共组件Header中引入路由，通过router.back()，返回到上一个页面。

4.3 生成订单页面

生成订单页面包含内容：头部，用户信息，商品信息，商品金额和生成订单。

4.3.1 头部组件

在生成商品订单里面引入公共组件Header，传递title为”生成订单“，

4.3.2 用户信息

用户信息使用的是vant组件的业务组件里面的ContactCard 联系人卡片，tel和name通过遍历用户地址信息获得（用户信息储存在vuex里面）。

编辑联系人：

<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />

4.3.3 商品信息

商品信息使用的是vant组件的业务组件里面的Card 卡片，展示的内容是vuex中储存的选中需要结算的商品的数组里面的商品。

基础用法：

<van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />

4.3.4 商品金额和生成订单

分成两个div，上面的商品金额和￥一前一后，下面生成订单按钮，直接使用vant的主要按钮。

<van-button type="primary">主要按钮</van-button>

 计算商品金额：定义一个函数，计算总金额，每一项的num乘以他的price然后相加，再把最后结果赋值给￥后面的价钱。

 4.4 生成订单按钮

当点击生成订单的时候出现弹窗，点击完成的时候会跳转到订单页面，出现弹窗，点击确定跳转到订单页面。在vuex创建一个已完成订单的数组，在mutations里面定义一下，已完成的订单需要跟之前的订单数据拼在一起，避免重复支付。

 UPDATEORDER(state){

            state.orderListed=state.orderListed.concat(state.orderList)

}

 弹出框：vant组件中的Dialog 弹出框里面的基础用法。

import { showDialog } from 'vant';

showDialog({

        title: '标题',

        message: '代码是写出来给人看的，附带能在机器上运行。',

}).then(() => {

         // on close

});

生成订单之后，点击确定按钮：

4.4.1 更新购物车列表

需要将已完成的订单从购物车中删除。

使用 route.query. 接收传递过来的数组，该数组是路由跳转的时候传递过来的，里面包含的是支付完成的商品，然后与购物车中的数组进行匹配，把购物车中不存在的项返回，最后过滤出来得到的数组就是未完成支付的，然后调用mutations里面的删除方法，传递个新数组，给购物车列表赋值，最后只剩未支付的，完成购物车更新。

router：操作路由，进行路由跳转。

route：获取路由信息。

4.4.2 已完成的订单

调用mutations里面的方法，把支付成功的数组赋值给vuex里面的已完成订单数组中。

4.4.3 跳转订单页面

当点击弹出框的确定的时候跳转到订单页面通过 router.push('/'); 实现。

 #难难难.......................................