Vue.js 超详细入门与项目实战（微课视频版）课件 第18章 购物车开发

第18章购物车开发课件V1.0

教学内容第一节

购物车列表显示功能第二节自动计算总价功能第三节

增减购物车商品功能第四节删除购物车商品功能知识目标教学目标理解和掌握父子组件间相互传参的方法掌握

showConfirmDialog组件的使用方法理解并掌握

van-submit-bar组件的使用过程知识点预览#节知识点难点重点应用18C18-01购物车列表显示功能1、页面效果

2、组件代码3、组件调用C18-02自动计算总价功能1、页面效果2、组件代码C18-03

增减购物车商品功能1、页面效果2、组件代码3、全局状态与方法C18-04删除购物车商品功能1、页面效果2、组件代码3、全局状态与方法

购物车是商城的核心功能，通常以一个单独的功能模块进行开发，当用户在商品详细页或其他页面点击购物车链接可图标后，便跳转到购物车列表页中；如果重复添加某件商品到购物车中，那么，该商品仍然只有一条记录，但数量累加1。购物车列表显示功能

在src/components目录下，新建一个名称为cart的文件夹，该文件夹保存所有与商品购物车相关的组件，目录结构如图所示。在目录结构中，RtItem是购物车列表中商品组件，在组件中，根据父组件传入的商品对象，并显示在列表中。在代码中，RtItem作为子组件，将接收调用它的父组件通过属性名为item传入的商品信息，并将该信息通过数据绑定的方式显示在模板中，同时，为了能在列表中可以勾选多个商品进行批量操作，模板中添加了van-checkbox组件，并将item对象的Id号，作为该组件name属性的动态值，以确保选择某个商品时的唯一性。组件代码

RtItem组件是一个子类组件，它将会被cart文件夹中的RtIndex组件所调用，在调用过程中，将会向RtItem组件传入单个商品信息。在代码中，先获取全局状态变量carts，并以遍历的形式，循环调用RtItem子组件，在调用过程中，通过item属性传入商品对象信息，由于子组件中包含了复选项组件

van-checkbox，因此，必须把全部循环调用的内容，包裹到van-checkbox-group组件中，以形成复选按钮组的元素结构，便于后续的批量选择操作。组件调用

在购物车列表页中，当选中某个商品或多个商品时，底部订单提交栏将会自动计算商品的总价格，提交订单按钮也同时变为可用，如果取消所有的选中项，那么，底部订单提交栏将自动清空原数据，并还原到初始状态。自动计算总价功能在代码中，当用户在购物车列表中点击复选框按钮，选择某件商品时，将触发绑定的自定义函数handleChecked，在该函数中，先检测用户是否选择了全部的商品。否则，“全选”复选框将处于未选中状态。接下来，再调用自定义的函数countSumPrice，在该函数中，先清空保存总价格的变量_sumPrice，再遍历整个购物车carts数组，在遍历时，调用blnCheckedById函数检测某个商品是否在选中列表中，如果在选中列表中，则计算它的价格，并累计到总价格变量中，最后，将总变量_sumPrice赋值给变量sumPrice中，用于页元素的绑定显示。组件代码在购物车列表中，为了方便用户对象购物车中商品数量的操作，通常会在数量显示的左右两边添加增加和减少按钮，当点击增加按钮时，将会在现有数量上累加1，当点击减少按钮时，将会在现有数量上减少1，无论增加或减少数量，总价格将会自动同步更新。增减购物车商品功能在RtItem组件中触发增加或减少商品的操作。在代码中，当用户点击购物车中某件商品数量左侧的减少按钮时，将会调用自定义的函数editNum，并向该函数传递该商品的信息和“reduce”类型，在函数editNum中，将接收到的参数，再传入全局方法edit_carts_num_act，由该方法做实质的数据处理，并同步到购物车列表中对应的商品数量中，点击右侧的增加按钮时，也会执行同样的函数，只是在传参数时，第二个类型参数的值为“add”。无论是操作了增加或减少数量的按钮，都会向父组件定义一个名称为“sendUpdate”的事件，父组件绑定该事件后，将会自动触发对应的事件函数。组件代码打开本项目src/store目录下的shopStore文件，它用于管理本项目的全部状态和定义状态管理的方法。在代码中，先通过传入的商品信息获取到对应商品的数量值，再根据操作类型type的值，决定是增加数量，还是减少数量，如果该值为“add”，表示增加数量，即在原数量的基础上，再增加1，反之，表示减少数量，减少数量之前，先判断该数量值是否大于1，如果大于1时，才减少，否则，将会出现负数。全局状态与方法在购物车列表中，对一些过期或不想要的商品可以进行删除的操作，删除时，为了排除误操作，点击删除按钮时，需要进行二次确认，如果确认，才进行删除，否则，不会删除。删除购物车商品功能在RtItem组件中触发删除指定商品的操作。在上述代码中，当用户点击购物车列表中，某个商品右侧的“删除”按钮图标时，在触发绑定的事件函数deleCart，同时，传入需要删除商品的Id号，在deleCart函数中，先调用Vant框架中的showConfirmDialog方法，询问是否要真的删除，如果确定，则执行方法中的第一个回调函数，传入Id号执行全局的删除商品函数。删除完成后，向父组件定义“sendUpdate”事件，父组件绑定该事件后，将同步更新删除某个商品信息后的总价格。组件代码打开