vue项目中购物车的全选功能的实现

主要思路：

　　1、单个商品的复选框的选中状态标识flag需要存到数据库中，每个商品添加到购物车时的默认为选中状态，所以全选按钮初始值设置为选中状态。

　　2、mounted渲染页面时从数据库取出数据，遍历数据中的flag值，来设置全选按钮的状态

　　3、全选按钮的事件触发为click（有试过change的，有bug），在事件中对全选的changed值进行取反，调用接口函数将数据库中的所有商品的flag值设为和changed相同，前端效果的更新（节省服务器资源） - 全选选中，则全部选中，全选不选中，则全部不选中，即实现了全选按钮控制全部商品选中和不选中的功能。

　　4、单选按钮事件为change，传入当前点击商品信息为参数，如果当前flag为true，则使用every遍历所有购物车商品的flag值，将结果赋给全选的checked

，如果当前flag为false，则checked的值为false。

　　业务代码：

 data () {
    return {
      cartlist: [],
      checked: true, // 代表的全选是不是被选中
      testflag: true // 标识
    }
  },
  methods: {
    selectItem (item) {
      console.log(item)
      // 如果我当前点击的这个商品复选框是true，那么就去cartlist中去查询
      // 将every遍历的结果赋给全选框
      updateItemFlag({
        cartid: item.cartid,
        num: item.flag ? 1 : 0
      }).then(() => {
        if (item.flag) {
          const val = this.cartlist.every(item => {
            return item.flag
          })
          this.checked = val
          this.testflag = val
        } else {
        // 如果我当前点击的商品复选框是false,那么就直接将全选框设为false
          this.checked = false
          this.testflag = false
        }
      })
    },
    selectAll (event) {
      // console.log(event)
      // 每次点击都会切换标识
      this.testflag = !this.testflag
      // 选中的状态和标识一致
      this.checked = this.testflag
      console.log(this.checked)
      updataAllFlag({
        userid: localStorage.getItem('userid'),
        num: this.checked ? 1 : 0 // 后端接收的状态是number类型
      }).then(res => {
        // 前端效果的更新 - 全选选中，则全部选中，全选不选中，则全部不选中
        this.cartlist.map(item => {
          // 双向绑定，数据改变自动渲染view层
          item.flag = this.checked
        })
      })
    },
    onSubmit () {
      console.log('提交订单')
    },
    changeNum (value, detail) {
      console.log(value, detail)
      updateCart({
        cartid: detail.name,
        num: value
      }).then(res => {
        // 更新成功
      })
    },
    deleteItem (item, index) {
      Dialog.confirm({
        message: '亲，便宜不等人，请三思而行'
      }).then(() => {
        // on confirm
        deleteCart({
          cartid: item.cartid
        }).then(res => {
          // 删除之后更新列表数据
          this.cartlist.splice(index, 1)
          // 删除完数据，计算属性具有依赖性，删除数据时，原数据发生改变
          // 计算属性重新计算
          // if (this.cartlist.length === 0) {
          //   Toast('购物车空空如也')
          //   this.flag = true
          // } else {
          //   this.flag = false
          // }
        })
      }).catch(() => {
        // on cancel
      })
    }
  },
  computed: {
    totalNum () {
      return this.cartlist.reduce((sum, item) => {
        return item.flag ? sum + item.num : sum + 0
      }, 0)
    },
    totalPrice () {
      return this.cartlist.reduce((sum, item) => {
        return item.flag ? sum + item.num * item.price : sum + 0
      }, 0)
    },
    lenFlag () {
      if (this.cartlist.length === 0) {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    getCartData({ userid: localStorage.getItem('userid') }).then(res => {
      // if (res.data.data.length === 0) {
      //   Toast('购物车空空如也')
      //   this.flag = true
      // } else {
      //   console.log(res.data.data)
      //   this.cartlist = res.data.data
      //   this.flag = false
      // }
      this.cartlist = res.data.data
      // console.log(111)
      // console.log(res.data.data)
      const val = this.cartlist.every(item => {
        return item.flag
      })
      this.checked = val
      this.testflag = val
    })
  }