扫码点餐小程序购物车效果实现
- 时间:
- 来源: 网络
自己的第一个点餐小程序，主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等，纯前端实现
大致的功能样式如下图展示：
代码块
主要代码块：
//点击左侧分类切换右侧菜品
changeRightMenu:function(e){
varclassify=e.target.dataset.id;//获取点击项的id
varfoodList=this.data.foodList;
varallFoodList=this.data.allFoodList;
varnewFoodList=[];
if(classify==0){//选择了全部选项
this.setData({
curNav:classify,
foodList:allFoodList
})
}else{//选择了其他选项
for(variinallFoodList){
if(allFoodList[i].catid==classify){
newFoodList.push(allFoodList[i])
}
}
this.setData({
//右侧菜单当前显示第curNav项
curNav:classify,
foodList:newFoodList
})
}
},
//购物车及菜单中增加数量
addCount:function(e){
varid=e.currentTarget.dataset.id;[这里写链接内容](
vararr=wx.getStorageSync('cart')||[];
varf=false;
for(variinthis.data.foodList){//遍历菜单找到被点击的菜品，数量加1
if(this.data.foodList[i].id==id){
this.data.foodList[i].quantity+=1;
if(arr.length>0){
for(varjinarr){//遍历购物车找到被点击的菜品，数量加1
if(arr[j].id==id){
arr[j].quantity+=1;
f=true;
try{
wx.setStorageSync('cart',arr)
}catch(e){
console.log(e)
}
break;
}
}
if(!f){
arr.push(this.data.foodList[i]);
}
}else{
arr.push(this.data.foodList[i]);
}
try{
wx.setStorageSync('cart',arr)
}catch(e){
console.log(e)
}
break;
}
}
this.setData({
cartList:arr,
foodList:this.data.foodList
})
this.getTotalPrice();
},
//定义根据id删除数组的方法
removeByValue:function(array,val){
for(vari=0;i if(array[i].id==val){ array.splice(i,1); break; } } }, //购物车减少数量 minusCount:function(e){ varid=e.currentTarget.dataset.id; vararr=wx.getStorageSync('cart')||[]; for(variinthis.data.foodList){ if(this.data.foodList[i].id==id){ this.data.foodList[i].quantity-=1; if(this.data.foodList[i].quantity<=0){ this.data.foodList[i].quantity=0; } if(arr.length>0){ for(varjinarr){ if(arr[j].id==id){ arr[j].quantity-=1; if(arr[j].quantity<=0){ this.removeByValue(arr,id) } if(arr.length<=0){ this.setData({ foodList:this.data.foodList, cartList:[], totalNum:0, totalPrice:0, }) this.cascadeDismiss() } try{ wx.setStorageSync('cart',arr) }catch(e){ console.log(e) } } } } } } this.setData({ cartList:arr, foodList:this.data.foodList }) this.getTotalPrice(); },