最佳实践|商品加购及金额结算

场景效果

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

数据模型

由于一个商品会被多个人进行购买,一个人也可以加购多个商品,我们就用一张中间表购物车(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
      • 成功时
        依旧需要在数据修改成功时还需要去刷新一下当前商品详情页面,使得条件式容器的条件重新计算,以及刷新当前商品的购物数额。

购物车金额结算

购物车页面需要展示用户加购的商品信息,一个人会加购多条商品,因此可以使用「列表」组件来展示多条加购商品。其中的项组件中的数据,根据获取到的列表项数据一一绑定即可。

购物车商品数量修改

且购物车中商品的增加和减少,思路同商品详情页的增加、减少一直,唯一需要注意的点在于,数据修改成功时刷新行为要刷新的是「列表」和「当前页面」(在后面计算金额时页面会用到远程数据,所以页面也需要进行刷新)。

勾选开关

同时在列表中有一个勾选的开关组件,他的作用是确认是否购买该件购物车中的商品。当被勾选时,在结算时就会统计该件商品的价格,否则就不计算。因此需要为开关添加一个改变商品状态的行为。
过滤条件:

  • account_账户 等于 已登录用户/ID
  • product_product 等于 项数据/cart/item/product_pproduct
    成功时:
    刷新 列表和当前页面

结算购买金额

这里需要计算的金额就是,在购物车中确认要购买商品的金额总和。所以首先需要去请求一条远程数据,获取到当前在购物车中确认购买的商品。
过滤条件:

  • account_账户 等于 已登录用户/ID
  • status 等于 true

「总价_文字」组件绑定一下远程数据,由于远程数据cart表中的price字段是加购商品 多件的总额,所以只需聚合cart中每件商品的price(多件的总额)就能得到加购确认购买商品的总额了。

2022-09-08
1 0