vue-computed购物车

购物车功能深刻体会到了computed的强大

1、.html

    

        

            

                
商品信息
                
商品金额
                
商品数量
                
总金额
                
编辑
            
        
        

            

                

                    
                    

                        
                           
                        
                    
                    
                    

                        
                    
                    
                    

                        
{{item.goodsName}}
                    
                
                
                

                    
{{item.goodsPrice}}
                
 
                

                    

                        

                            

                                -
                                
                                +
                            
                        
                        
有货
                    
                
                

                    
                    

                
                
                

                    

                        
                            
                        
                    
                
            
        
    


    

        

                                                      
                  
                      取消全选
                      全选                              
                
                
            
        

    
    

        

            Item total: {{totalmoney}}
        
        

            结账
        
    

2、script

export default{
data(){
    return{
        imgsrc: '../static/images/',
        title:'购物车列表',
        shopcaritem:[],
        goodsprice:''
        //allchecked:false
    }
},
mounted(){
    this.shopcar()
},
computed:{
    //全选
    allchecked(){
        return this.checkalcount==this.shopcaritem.length;
    },
    //计算购物车选中属性
    checkalcount(){
        var i=0;
        this.shopcaritem.forEach((item)=>{
             if(item.isselected==true){
                i++;
             }
        })
        return i
    },
    //计算总价
    totalmoney(){
        var money=0;
        this.shopcaritem.forEach((item)=>{
             if(item.isselected==true){
                 money=money+item.goodsPrice*item.shopcarNum;
             }          
        })  
        return money
    }   
},
methods:{
    //购物车列表展示
    shopcar(){
        var param={username:"yy",userpwd:333}
        axios.get("/users/shopcar",{params:param}).then((response)=>{   
                 var res=response.data;
                 if(res.status==0){
                     this.shopcaritem=res.result.shopcarlist;                        
                 }
        })                  
    },
    //购物车商品数量修改
    editcart(flag,item){
        if(flag=='add'){
            item.shopcarNum++;
        }
        if(flag=='minu'){
            if(item.shopcarNum>1){
                item.shopcarNum--;
            }               
        }
        if(flag=='checked'){
                    
        }
        var param={goodsId:item.goodsId,shopcarNum:item.shopcarNum,isselected:item.isselected}
        axios.get("/users/cartEdit",{params:param}).then((response)=>{           
        })      
    }, 
    //全选\取消全选
    toggleCheckAll(){       
        var flagS=!this.allchecked;
        this.shopcaritem.forEach((item)=>{
            item.isselected=flagS;
        })
    }
}    
}