用户登录

如果发生变化的是项目的 inputNumber .. 可以执行 this.updateCartItem .. 把 id ... 还有数字值交给这个方法 ..

下面再去定义这个方法 .. updateCartItem .. 方法有 id ,还有 value 参数 .. 把方法标记成一个 async 方法 ..

添加一个 response .. 执行 Taro.request .. 请求的方法设置成 PUT .. 请求的地址是 API_WS .. cart-item 后面再加上具体的 id 号 ..

请求里要带着 data .. 需要一个 quantity 属性 .. 值是 value ..

然后用一个 switch 检查 response 里的 statusCode .. 响应的状态码 .. 如果状态码的值是 200 ... 就可以去设置页面的状态 .. 让 cart 它的值等于 newCart ..

在上面需要去组织一个新的购物车数据 .. 先把 cart 从 state 里解构出来 .. 下面添加一个 newItems 它的值用 cart.items.map 处理 .. 当前项目叫 item ... 在里面判断一下 .. 如果 item 的 product_id 的值等于 id 的值 .. 可以重新设置这个 item ..

下面再打开 json-server .. 找到更新购物车项目的接口 ... 更新之后可以让接口返回更新之后的项目 .. 响应的就是 item ..

复制一下 .. 也把它放在上面的 patch 方法接口里面 ..

回到购物车页面 .. 现在我们就可以让这个 item 的值等于 response 里的 data .. 它就是更新之后的购物车项目 ..

最后再 return item ..

下面再添加一个 newCart .. 它的值先把 cart 里的东西放进来 .. 然后重新设置它的 items 的值,可以是 newItems ..

回到模拟器 ... 暂时先关掉开发者工具的自动编译功能 .. 设置 .. 编辑设置 .. 取消勾选 保存时自动编译小程序 ..

勾选一个项目 .. 打开 编辑模式 .. 现在这个项目的数量是 1 ,修改一下它的值 .. 没有变化 .. 可以刷新一下 .. 你会发现这个数量变成了 2 .. 不过刚才没有立即看到结果 .. 是因为在执行 Taro.request 的时候 .. 前面忘了加 await ..

再试一下 .. 勾选一个项目 .. . 打开 编辑模式 .. 修改一个项目里的要购买的商品数量 ... 你会发现,商品的数量还有总计的金额都会发生变化 ..

这个变化的事件处理,会去请求后端服务的购物车项目接口 .. 更新购物车项目里的要购买的商品数量 ..

更新购物车项目购买数量(updateCartItem)《 电商小程序案例:购物车编辑 》

统计

10482
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点