本文实例为大家分享了vue实现淘宝购物车的具体代码，供大家参考，具体内容如下

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

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

<div class="list-container"> <div class="top-ops"> <div> <img src="../../../static/images/HomeRecommendShopInfoAdress@2x.png" alt=""> <span>浙江省杭州市...</span> </div> <div class="ops"> <span v-if="cartStatus === 'account'" @click="cartStatus = 'edit'">编辑商品</span> <span v-if="cartStatus === 'edit'" @click="cartStatus = 'account'">完成</span> </div> </div> <div class="paddingB200"> <div class="shop-list" v-for="(item,index) in cartShops" :key="index"> <div class="shop-name"> <label> <input type="checkbox" name="shopRadio" :value="item.productShopId" @click="shopCheck($event,cartShops)" class="disN"> <b></b> </label> <div> <div> <img src="../../../static/images/mall@2x.png" alt=""> <span class="name">{{item.shopName}}</span> </div> <span> <img src="../../../static/images/jtxq@2x.png" alt=""> </span> </div> </div> <div class="goods-list" v-for="(goods,goodsIndex) in item.detailLists" :key="goodsIndex"> <label> <input type="checkbox" name="goodRadio" :price="goods.price" :num="goods.number" :dataId="item.productShopId" :value="goods.cartDetailId" @click="goodsCkeck($event,item.detailLists,cartShops,item.productShopId)" class="disN"> <b></b> </label> <div class="middle"> <img :src="goods.reportImage" alt=""> <div> <p class="name">{{goods.name}}</p> <p class="spec">{{goods.specifications}}</p> <p class="tab"> <img src="../../../static/images/lsspbq@2x.png" alt=""> </p> </div> </div> <div class="right"> <p class="price">￥{{goods.price}}</p> <p class="num">X{{goods.number}}</p> <p class="caculate"> <span class="mark" @click="numDecrease(goods.number)"></span> <span class="beeforCacul">{{goods.number}}</span> <span class="cacul" :num="goods.cartDetailId">{{goods.number}}</span> <span class="mark" @click="numAdd(goods.number)"></span> </p> </div> </div> </div> <div class="edit" v-if="cartStatus === 'edit'"> <label> <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)"> <b></b> <span>全选</span> </label> <span class="delet">删除(3)</span> </div> <div class="gotopay" v-if="cartStatus === 'account'"> <label> <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)"> <b></b> <span class="marginR40">全选</span> <span>合计：</span> <span class="sum">￥{{sumPrice.toFixed(2)}}</span> </label> <span class="delet" @click="cauSum">去结算({{totalNumber}})</span> </div> </div></div>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<input.length;i++){ if(input[i].value == shopId){ input[i].checked = true; } } this.shopList.push(String(shopId)); //防止shopid是number类型造成麻烦 //如果所有店铺都全选，则全选按钮checked if(this.shopList.length === shopList.length){ //所有店铺全选 for(var i = 0;i<input.length;i++){ if(input[i].name == 'allRadio'){ input[i].checked = true; } } } } }else{ //商品列表-- this.goodsList.splice(this.goodsList.indexOf(event.currentTarget.value),1) //如果店铺checked，则取消，店铺列表-- for(var i = 0;i<input.length;i++){ if(input[i].value == shopId){ if(input[i].checked){ input[i].checked = false; this.shopList.splice(this.shopList.indexOf(String(shopId)),1); //防止shopid是number类型造成麻烦 } } //任意一个不选，全选取消 if(input[i].name == 'allRadio'){ input[i].checked = false; } } } //计算总价和数量 this.caculate(); }, //店铺选择 shopCheck: function(event,shopList){ //店铺选中则对应商品全选，否则全不选 //console.log(event.currentTarget) var input = document.getElementsByTagName('input') if(event.currentTarget.checked){ //店铺列表+，店铺checked,店铺内商品全checked，商品列表++ //console.log(this.shopList) this.shopList.push(String(event.currentTarget.value)); //店铺内商品全checked for(var i = 0;i<input.length;i++){ if(input[i].getAttribute('dataId') == event.currentTarget.value){ //将没有选中的checked,并加入列表，去重 if(!input[i].checked){ input[i].checked = true; //商品列表++ this.goodsList.push(String(input[i].value)) } } } //所有店铺全选 if(this.shopList.length === shopList.length){ for(var i = 0;i<input.length;i++){ if(input[i].name == 'allRadio'){ input[i].checked = true; } } } }else{ //店铺取消checked,店铺列表--，店铺内所有商品取消checked,商品列表-- this.shopList.splice(this.shopList.indexOf(String(event.currentTarget.value)),1); //店铺内所有商品取消checked for(var i = 0;i<input.length;i++){ if(input[i].getAttribute('dataId') == event.currentTarget.value){ input[i].checked = false; //商品列表-- this.goodsList.splice(this.goodsList.indexOf(input[i].value),1); } //任意一个不选，全选取消 if(input[i].name == 'allRadio'){ input[i].checked = false; } } } //计算总价和数量 this.caculate(); }, //所有全选 allCheck: function(event){ var input = document.getElementsByTagName('input') if(event.currentTarget.checked){ //全选checked,所有店铺checked,店铺列表++,所有商品checked,商品列表++ for(var i = 0;i<input.length;i++){ //去重 if(!input[i].checked){ input[i].checked = true; if(input[i].name == 'shopRadio'){ this.shopList.push(String(input[i].value)) } if(input[i].name == 'goodRadio'){ this.goodsList.push(String(input[i].value)) } } } }else{ //全不选取消checked,店铺全部取消checked,店铺列表清空，所有商品取消checked,商品列表清空 for(var i = 0;i<input.length;i++){ input[i].checked = false; this.shopList = []; this.goodsList = []; } } //计算总价和数量 this.caculate(); }, //计算总金额总数量 caculate: function(){ var input = document.getElementsByTagName('input'); var newArr = []; for(var i = 0;i<input.length;i++){ if(input[i].name == 'goodRadio' && input[i].checked){ var num = input[i].parentNode.parentNode.children[2].children[2].children[2].innerHTML; newArr.push( { 'price': input[i].getAttribute('price'), 'num': num } ) } } this.totalNumber = newArr.length; //归零 this.sumPrice = 0; for(var j = 0,len = newArr.length;j<len;j++){ this.sumPrice += newArr[j].price * newArr[j].num; } }, //数量减小 numDecrease: function(num){ //如果当前input选中，则修改数量计算价格，如果当前input没有选中，则修改数量不计算价格 var spanList = event.currentTarget.parentNode.children; for(var i = 0,len = spanList.length;i<len;i++){ if(spanList[i].getAttribute("class") == 'beeforCacul'){ spanList[i].style.display = 'none'; } if(spanList[i].getAttribute("class") == 'cacul'){ spanList[i].style.display = 'block'; var caculNum = spanList[i].innerHTML; if(caculNum < 2){ Toast('宝贝不能再少了哦'); }else{ caculNum -- spanList[i].innerHTML = caculNum; } } } if(event.currentTarget.parentNode.parentNode.parentNode.children[0].children[0].checked){ this.caculate(); } }, //数量增加 numAdd: function(num){ var spanList = event.currentTarget.parentNode.children; //console.log(event.currentTarget.parentNode.children) for(var i = 0,len = spanList.length;i<len;i++){ if(spanList[i].getAttribute("class") == 'beeforCacul'){ spanList[i].style.display = 'none'; } if(spanList[i].getAttribute("class") == 'cacul'){ spanList[i].style.display = 'block'; var caculNum = spanList[i].innerHTML; caculNum ++; spanList[i].innerHTML = caculNum; } } if(event.currentTarget.parentNode.parentNode.parentNode.children[0].children[0].checked){ this.caculate(); } }, //去结算 cauSum:function(){ if(this.sumPrice === 0){ Toast('您还没有选择宝贝哦'); }else{ this.$router.push('/cart/order') } }, }};

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