加入购物车及金额计算

场景效果

商品加购以及购物车商品结算的操作，在商城类小程序中非常常见。本案例将要实现的效果是选择商品后可以进行数量的选择，可以对加入购物车的商品再次选择是否确认购买，结算的商品总金额会随着数量以及选择而发生变化。（本片最佳实践有些长，可以选择自己感兴趣的部分进行学习）

加购与结算效果动画

数据模型

由于一个商品会被多个人进行购买，一个人也可以加购多个商品，我们就用一张中间表购物车（cart）表来建立商品和消费者之间多对多的关系。在购物车表（cart）还需要添加amount、price两个字段来记录加购的该件商品的加购数量和该商品总额。status字段用来记录该商品在结算时是否被勾选。

购物车数据模型结构

商品详情

获取该商品详情

设置链接数据商品详情页是从商品目录页面跳转过来，我们想要查看跳转过来的具体商品内容，需要通过链接数据进行页面间的数据传递。然后还需要在”商品详情”页添加一个链接数据idx，用于接收传递过来的数据。之后还需要在”商品目录”页的跳转行为中设置参数项数据/product/item/ID，即该商品的ID。（这个参数就是通过跳转行为携带到”商品详情”页面有关商品的信息，后续需要利用这个信息去进行数据的过滤。）

商品详情页数据绑定

页面数据源的条件过滤查询product表，过滤条件为 ID 等于 链接数据/idx。

商品详情页页面数据源配置

加购商品

加购分为”已加购”和”未加购”两种情况，因此可以使用条件式容器来展示这两种情况下的不同交互效果。

加购商品交互效果

“未加购”
- 子容器的条件未加购时，需要用户的购物车里不存在当前商品。所以需要先去请求一下用户购物车中该件商品的记录。
- 添加页面数据源。
  - account_账户 等于 已登录用户/ID
  - product_product 等于 链接数据/ID
- 设置”未加购”子容器条件
  - 页面数据源/cart/ID 为空
- “加入购物车”按钮的行为向cart表中新增一条数据，
  - account_账户 等于 已登录用户/ID
  - product_product 等于 链接数据/ID（也可以是页面数据源/product/ID）
  - amount 为 1
  - price 为 页面数据源/product/price
  - status 为 true
- 在数据添加成功时还需要去刷新一下当前商品详情页面，使得条件式容器的条件重新计算。
“加购” “加购”子容器中一共有三个组件分别为，“添加”按钮；“减少”按钮；数量_文字组件
- 数量_文字组件
  - 只需要绑定对应的商品数量即可，页面数据源/cart/amount
- “添加”按钮每次点击”添加”按钮，也就是在原有的商品数量上加1，商品总价也就在原基础上再添加一份商品价格。可以将amount和price的修改行为改为”increment”，输入框中输入对应要增加的值。
  - amount increment（增加）1
  - price increment 页面数据源/product/price
- 过滤条件要过滤出当前用户加购的商品
  - account_账户 等于 已登录用户/ID
  - product_product 等于 链接数据/ID
- 成功时依旧需要在数据修改成功时还需要去刷新一下当前商品详情页面，使得条件式容器的条件重新计算，以及刷新当前商品的购物数额。
- “减少”按钮”减少”按钮的配置会相应复杂一些，由于当商品减少到只剩一件时，就需要从购物车中把这件商品给删除（不然会出现购买负数的情况，这当然是不符合实际情况的）。所以需要判断一下当前商品在购物车中的个数情况。根据数量不同会执行不同的行为。
- 数量等于1当商品数量等于1时，就从购物车中删除该件商品。
执行的行为就是删除cart表中该条商品的记录，之后执行刷新商品详情页的行为
- 成功时依旧需要在数据修改成功时还需要去刷新一下当前商品详情页面，使得条件式容器的条件重新计算，以及刷新当前商品的购物数额。
- 数量大于1在数量大于1时每次点击”减少”按钮，也就是在原有的商品数量上减1，商品总价也就在原基础上再减少一份商品价格。可以将amount和price的修改行为改为”decrement”，输入框中输入对应要增加的值。
  - amount decrement（减少）1
  - price decrement 页面数据源/product/price
- 成功时依旧需要在数据修改成功时还需要去刷新一下当前商品详情页面，使得条件式容器的条件重新计算，以及刷新当前商品的购物数额。