vue实现淘宝购物车功能

本文实例为大家分享了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 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。