07——vue企业级电商系统(购物车页面)

一些知识点！
1、vue query传参刷新后数据变成"[Object Object]" 怎么办？
2、vuejs几种不同组件（页面）间传值的方式
3、localStorage 存数组
4、把数组存到vuex的state中，并用localStorage长期缓存

  computed:{
    //是否全选
    checkAllFlag(){
      //当数组中所有对象都返回true时，整体才会返回true
      return this.cartList.every((item)=>{
        return item.checked;
      })
    },
    //购物车列表
    cartList(){
      console.log(this.$store.state.cartList)
      console.log(localStorage.cartList)
      console.log(JSON.stringify(this.$store.state.cartList))
      localStorage.cartList=JSON.stringify(this.$store.state.cartList)
      // return JSON.parse(localStorage.cartList)
      return this.$store.state.cartList
    },
    //计算总价格
    totalPrice(){
      let money =0;
      this.cartList.forEach((item)=>{
        if(item.checked){
          money+=item.productPrice*item.quantity;
        }
      })
      return money;
    },
    //已选商品数量
    checkedNum(){
      return this.cartList.filter(item=>item.checked).length;
    }
  },
  //过滤器
  filters:{
    currency(value){
      if(!value) return 0.00;
      return '￥' + value.toFixed(2) + '元';
    }
  },
  methods:{
    editCart(type,item){  //添加
      console.log(type)
      console.log(item.checked)
      if(type=='add'){
        if(item.quantity == 10){
          alert('购买不允许超过10件')
        }else{
          item.quantity++;
        }
      }else if(type=='minus'){  //减少
        if(item.quantity == 1){
          alert('商品至少保留一件')
        }else{
          item.quantity--;
        }
      }else{  //是否勾选
        item.checked=!item.checked;
      }
      console.log(item.checked)
    },
    // 购物车下单
    order(){
      if(this.checkedNum){
        this.$router.push('/order/confirm');
      }
    },
    //是否全选
    toggleAll(){
      let flag= !this.checkAllFlag;
      this.cartList.forEach((item)=>{
        item.checked=flag;
      })
    },
    //删除数据：弹出确认弹框
    delCartConfim(item){
      this.delItem=item;
      this.showModal = true;
    },
    //删除产品
    delProduct(){
      let delItem=this.delItem;
      this.cartList.forEach((item,index)=>{
        if(delItem.productId == item.productId){
          this.cartList.splice(index,1);
           this.showModal=false;
        }
      })
    }
  },