购物车页(-- 郑郑日上项目【Vue2】【PC 端】【商城】)

165 阅读1分钟

已选择的件数

原理: 使用 filter 筛选出 selected 为 true 的字段,然后在返回数组长度 this.shopCartList.items.filter(item => item.selected).length

全选 功能

(一)根据选中的商品自动开启和关闭全选功能

原理: 使用 every 方法判断 selected 是否全部为 true this.selectAllState = this.shopCartList.items.every(item => item.selected)

【BUG】使用遍历发送请求来改变所有的 selected 属性值,但是在重新获商品列表的时候,有些 selected 属性值改变成功有些没改变,这是随机的,重新刷新后才显示正常

原因: 应该是后端还没有处理完毕,给个定时器,等待后端处理完毕在请求

setTimeout(async() => {
  await this.getShopCarInfo()
}, 100)

已选择的商品数量

原理: 筛选出 selected 为 true 的元素,然后在 .length,就拿到了已选择的商品数量

async getShopCarInfo() { // 获取 购物车信息
  this.shopCarInfo = await getShopCarInfo()
  this.selectedQuantity = this.shopCarInfo.items.filter(item => item.selected === true).length
},