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
    })
  }