主要思路：

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