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

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