vue如何实现购物车功能

vue如何实现购物车功能

本篇内容主要讲解“vue如何实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现购物车功能”吧!

如图，需要有加入购物车的标识思路如下：点击购物车按钮时将商品的id,title,imgUrl(海报图),flag（标识符，flag非常重要，为以后复选框判断是否选中做参考）变成一个数组形式，cart，传入vuex

<template><div><van-goods-action><van-goods-action-iconicon="chat-o"text="客服"@click="onClickIcon"/><van-goods-action-iconicon="cart-o"text="购物车"@click="onClickIcon"/><van-goods-action-buttontype="warning"text="加入购物车"@click="onClickButton"/><van-goods-action-buttontype="danger"text="立即购买"@click="onClickButton"/></van-goods-action></div></template><script>import{Toast}from'vant';import{GoodsAction,GoodsActionIcon,GoodsActionButton}from'vant';exportdefault{name:'tabs',data(){return{}},props:{id:String,current:String,title:String,imgUrl:String},components:{[Toast.name]:Toast,[GoodsAction.name]:GoodsAction,[GoodsActionIcon.name]:GoodsActionIcon,[GoodsActionButton.name]:GoodsActionButton},methods:{onClickIcon(){Toast('点击图标');},onClickButton(){varcart={id:this.id,current:this.current,num:1,title:this.title,imgUrl:this.imgUrl,flag:true}this.$store.commit('addCart',cart)Toast('已加入购物车');},},}</script><style></style>

2.vuex如下

importVuefrom'vue'importVuexfrom'vuex'importmutationsfrom'./mutations.js'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{cart:[],money:0,allchecked:true},mutations,})

exportdefault{、//判断是否已经加入过购物车，如果加入过，则该产品数量加一，若没有加入过，将产品加入cart中addCart(state,data){for(vari=0;i<state.cart.length;i++){if(state.cart[i].id==data.id){state.cart[i].num+=data.numreturn}}state.cart.push(data)},//该函数为数字+1addCartNum(state,index){state.cart[index].num++},//该函数为数字-1jianCartNum(state,index){if(state.cart[index].num==1){return;}state.cart[index].num--},}

3.购物车

思路如下：若没有产品则显示无产品，若有产品在购物车里，则可进行增删加减

<template><divclass="bg"><divclass="bgCart"v-if="isGood"><divclass="cartAd"><h4>购物车</h4><divv-if="select"><divclass="admin"@click="onAdmin">管理</div></div><divv-if="!select"><divclass="admin"@click="onOk">完成</div></div></div><van-checkbox-groupv-model="result"ref="checkboxGroup"><divclass="cart"v-for="(item,index)incartList":key="index"><van-checkbox:name="item.id"class="checkbox"checked-color="red"v-model="item.flag"@click="chooseChange(item.id,item)"></van-checkbox><divclass="box"><imgclass="img":src="baseUrl+item.imgUrl"/><divclass="wraper"><divclass="title">{{item.title}}</div><divclass="container"><divclass="money">￥{{item.current}}</div><div><spanclass="jian"@click="jian(index)"><spanclass="jianAdj">-</span></span><span>{{item.num}}</span><spanclass="jia"@click="add(index)"><spanclass="jiaAdj">+</span></span></div></div></div></div></div></van-checkbox-group><divclass="order"v-if="select"><van-submit-bar:price="getAll"button-text="提交订单"><van-checkboxv-model="allchecked"checked-color="red"@click="allOrder">全选/取消</van-checkbox></van-submit-bar></div><divclass="order"v-if="!select"><van-submit-bar:price="getAll"button-text="删除"@submit="del"><van-checkboxv-model="allchecked"checked-color="red"@click="allOrder">全选/取消</van-checkbox></van-submit-bar></div></div><divv-if="!isGood"class="noGood"><h4>购物车</h4><imgsrc="../../../static/img/cart.jpg"/><spanclass="add">您还没有添加任何产品哦</span><van-buttonroundtype="danger">去逛逛</van-button></div><bottom></bottom></div></template><script>import{Checkbox,CheckboxGroup}from'vant';import{SubmitBar}from'vant';import{Button}from'vant';exportdefault{name:'cart',data(){return{result:[],cartList:[],select:true,money:0,results:[],baseUrl:this.common.baseUrl,allchecked:this.$store.state.allchecked,isGood:true}},components:{[SubmitBar.name]:SubmitBar,[Button.name]:Button,[Checkbox.name]:Checkbox,[CheckboxGroup.name]:CheckboxGroup,bottom:()=>import('./components/bottom.vue')},computed:{getAll(){varmoney=0this.$store.state.cart.forEach(item=>{if(item.flag){money+=(item.num*item.current)*100}})returnmoney}},methods:{//选择单个复选框（非常重要）//由于我进来是使复选框全选，则在第一次点击的时候使得flag=falsechooseChange(i,item){if(this.result.indexOf(i)>-1){vararrs=this.result.filter(function(item){returnitem!=i;});this.result=arrs;item.flag=false;}else{this.result.push(i);item.flag=true;}//判断单个和全部，若单个全选，则this.$store.state.allchecked为trueif(this.result.length<this.$store.state.cart.length){this.$store.state.allchecked=false;this.allchecked=this.$store.state.allchecked;}else{this.$store.state.allchecked=true;this.allchecked=this.$store.state.allchecked;}},//全选状态allOrder(){//如果选择状态为选中的时候，设置this.$store.state.allchecked=false变成未选中if(this.$store.state.allchecked){this.$store.state.cart.forEach(item=>{item.flag=false;})this.result=[];this.$store.state.allchecked=false;this.allchecked=this.$store.state.allchecked;}else{this.$store.state.cart.forEach(item=>{item.flag=true;if(this.result.indexOf(item.id)<0){this.result.push(item.id);}})this.$store.state.allchecked=true;this.allchecked=this.$store.state.allchecked;}},//数字+add(index){this.$store.commit('addCartNum',index)},//数字减jian(index){this.$store.commit('jianCartNum',index)},//点击管理onAdmin(){this.select=false},//点击完成onOk(){this.select=trueif(this.result.length==0){console.log(1)this.isGood=false}else{console.log(this.result)}},//删除del(){if(this.result.length==this.$store.state.cart.length){this.$store.state.cart.splice(0,this.result.length)this.result.splice(0,this.result.length)}else{this.$store.state.cart.forEach(item=>{if(item.flag){this.$store.state.cart.splice(item,1)this.result.splice(item.id,1)}})}}},created(){this.cartList=this.$store.state.cartif(this.$store.state.allchecked){for(vari=0;i<this.$store.state.cart.length;i++){this.result.push(this.$store.state.cart[i].id)}}if(this.result.length==0){this.isGood=false}}}</script>

到此，相信大家对“vue如何实现购物车功能”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！