vue实现淘宝购物车功能

淘宝购物车功能，效果如下图

非常简单的逻辑，没有做代码的封装，代码如下

        

                

                    
                    浙江省杭州市...
                
                

                    编辑商品
                    完成
                
        
        

            

                

                    
                        
                        
                    
                    

                        

                            
                            {{item.shopName}}
                        
                        
                            
                        
                    
                
                

                    
                        
                        
                    
                    

                        
                        

                            
{{goods.name}}
                            
{{goods.specifications}}
                            

                                
                            
                        
                    
                    

                        
￥{{goods.price}}
                        
X{{goods.number}}
                        

                            
                            {{goods.number}}
                            {{goods.number}}
                            
                        
                    
                
            
            

                
                    
                    
                    全选
                
                删除(3)
            
            

                
                    
                    
                    全选
                    合计：
                    ￥{{sumPrice.toFixed(2)}}
                
                去结算({{totalNumber}})
            
        
    

　　

export default {
    components: {
        
    },
    name: "life",
    data() {
        return {
            cartStatus:"account",  //购物车状态，account结算，edit删除编辑状态
            cartShops: [],  //店铺列表
            sumPrice:0,  //合计金额
            totalNumber: 0, //总数
            shopList:[],  //店铺列表
            goodsList:[],  //商品列表
        };
    },
    watch: {
        
    },
    mounted() {
        this.getCartDetail();                      
    },
    methods: {
        //购物车列表
        getCartDetail: function(){
            this.$http.get("api/product/v1/getCartDetail").then( res => {
                if(res.data.code === 200){
                    //console.log(res.data.data)
                    this.cartShops = res.data.data.cartShops;
                }else{
                    Toast(res.data.msg);
                }
            }).catch( error => {
                console.log(error)
            })
        },
        //商品选择
        goodsCkeck: function(event,goodsList,shopList,shopId){                                  
            //商品列表+-，店铺是否checked(店铺列表+-),全选是否checked
            var input = document.getElementsByTagName('input')
            if(event.currentTarget.checked){
                this.goodsList.push(String(event.currentTarget.value)); 
                //如果店铺内所有商品全选，店铺选中
                var newArr = this.goodsList;
                var tt = goodsList.every(function(itemValue){
                    return (newArr.indexOf(String(itemValue.cartDetailId)) != -1)
                })
                if(tt){
                    //店铺内全选,店铺checked,店铺列表+
                    for(var i = 0;i

　

 

转载于:https://www.cnblogs.com/woshidouzia/p/9284200.html