持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

之前一篇中，我们已经完成了基本页面的编辑，接下来我们需要完成js文件中的逻辑代码。基本上包括商品加一减一，金额做出相应的变化。

添加商品

  onAddPrice(event) {
    this.data.goodsData.forEach((item) =>{
      if (item.id === goodId) {
        this.setData({totalPrice: this.data.totalPrice += (item.SaleAmount * 100)})
      }
    })
  },

这里面使用了forEach遍历每一个商品，并且将商品价格乘于了100，使得价格末尾有两位小数。forEach遍历的是每个人数据库里的商品数据，以便获得每个商品的价格，用于后面的计算。

删除商品

  onSubPrice(event) {
    this.data.goodsData.forEach((item) =>{
      if (item.id === goodId) {
        this.setData({totalPrice: this.data.totalPrice -= (item.SaleAmount * 100)})
      }
    })
  },

同理，这里的foreach遍历的商品数据库和添加商品的数据库是一样的。

wxml文件中渲染商品总额

<view bindtap="jumpDetail">
 <van-submit-bar
  price="{{ totalPrice }}"
  button-text="提交订单"
/>
</view>

这里使用了vant weapp组件库的van-submin-bar组件,官网链接：youzan.github.io/vant-weapp/…

我们只需要将price="{{ 3050 }}"中的数字改为商品总额就行，不需要写死，他是随用户添加和删除商品而变化的，改为 price="{{ totalPrice }}"，这个totalPrice需要在js文件中定义一下

这样这个totalPrice就是个活数据了。

至此，我们的商品结算总额就完成了，可以加减商品并且通过数量乘以价格来计算总价。具体展示效果如下图：