项目笔记21（尚品汇）

2022-04-17 176 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情

完善购物车修改数量

根据之前的思想，通过不同的type来判断用户进行了什么操作。具体代码如下所示

在这里插入图片描述

此时功能基本完成，但是存在一个BUG，就是当用户点击‘-’过快的时候，会导致购买件数出现负数，如下所示。

在这里插入图片描述

针对这个问题，可以用节流解决具体步骤如下所示引入lodash

在这里插入图片描述

接下来限制handler一秒钟只可以发起一次。具体代码如下所示

在这里插入图片描述

此时该功能完善成功。接下来开始制作购物车删除产品的操作。

购物车删除产品

首先查阅文档找到删除产品的请求查阅完成后书写接口

在这里插入图片描述

接口书写完成继续写vuex三连环

在这里插入图片描述

接下来给删除按钮绑定点击事件，随后书写点击事件的逻辑

在这里插入图片描述

此时点击删除已经可以成功删除数据。

改变产品状态

此时出现如下问题，上面商品已经取消但是全选按钮还是勾选了。针对这个问题可以通过文档中给的接口进行修改产品的选择框的属性值，从而完善这个功能。

在这里插入图片描述

同样先写接口

在这里插入图片描述

vuex三连环

在这里插入图片描述

绑定事件发送action

在这里插入图片描述

此时这个问题就可以成功解决了。

删除全部选中商品

在这里插入图片描述

首先给‘删除选择的商品’绑定一个点击事件

在这里插入图片描述

接下来书写点击事件的逻辑

在这里插入图片描述

这个功能没有后台接口，因此我们可以换一种思路，就是遍历检查商品有没有被选中，如果被选中，我们就调用之前写好的删除自身产品的接口。具体代码如下所示

在这里插入图片描述

此时删除选中的商品功能完成。

全部商品的勾选状态修改

首先给全选按钮绑定一个点击事件或者change事件

在这里插入图片描述

接下来和上一个删除选择的商品一样。首先对仓库发起一个action,发起action的同时，记得传输按钮状态。

在这里插入图片描述

在仓库在，由于同样没有全部商品的勾选状态修改的接口，因此需要自己根据之前的接口进行书写具体代码如下所示

在这里插入图片描述

此时功能完成