购物车（七）-计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

• 通过计算属性计算商品总价

allPrice() {
  // 计算购物车所有商品的总价格
  // 单价 X 数量 再进行累加操作
  let sum = 0
  //计算总价
  for(let key in this.cart) {
    let p = this.cart[key]
    if(p.checked) {
      // 选中的商品
      // 单价 X 数量 再进行累加操作
      sum += p.goods_price * p.num
    }
  }
  return sum
}

附：

calcTotalPrice () {
  // 计算总价
  // 计算商品的总价：单价 * 数量 再相加
  let sum = 0
  // 计算总价
  this.products.forEach(item => {
    // 单价 * 数量 再相加
    sum += item.goods_price * item.num
  })
  return sum
}

实例

结构

    <!-- 底部菜单 -->
    <div class="cart-total">
      <!-- 左侧CheckBox -->
      <div class="total-button">
        <icon @click='toggleAll' :color="isAll?'red': '#eee'" type='success' size='18'/>全选
      </div>
      <!-- 中间的价格 -->
      <div class="total-center">
        <div class="total-price">合计：
          <text class="colorRed">
            <text>￥</text>{{calcTotal}}
          </text>
        </div>
        <div class="price-tips">包含运费</div>
      </div>
      <!-- 右侧结算按钮 -->
      <div @click='toPay' class="accounts" >
        结算
      </div>
    </div>

逻辑

<script>
export default {
  data () {
    return {
      address: null,
      cart: null
    }
  },
  computed: {
    calcTotal: function () {
      // 计算商品总价：单价 * 数量 再进行累加操作
      let total = 0
      for (let key in this.cart) {
        let p = this.cart[key]
        if (p.checked) {
          total += p.goods_price * p.num
        }
      }
      return total
    },
  }
}

单种商品计算

全选商品计算

注意：

如果跳转页面，再返回不进行数据缓存，商品计算会清零，恢复原始状态

小程序-数据缓存api：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

<script>
export default {
  onHide () {
    // 隐藏页面时，把最新的cart数据同步到本地缓存
    wx.setStorageSync('mycart', this.cart)
  },
}

数据缓存后效果