当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 点餐小程序购物车列表的实现

点餐小程序购物车列表的实现

2018-07-27 11:02 来源: 霸界科技

摘要:微信小程序点餐系统我们会用到购物车功能,添加菜品到购物车,以及点击数量加减,那么这种点餐小程序购物车效果要如何实现,下面为大家介绍。...

期权保本理财
  微信小程序点餐系统我们会用到购物车功能,添加菜品到购物车,以及点击数量加减,那么这种点餐小程序购物车效果要如何实现,下面为大家介绍。
 
点餐小程序购物车列表的实现
 
  自己的第一个点餐小程序,主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等,纯前端实现
 
  大致的功能样式如下图展示:
 
  代码块
 
  主要代码块:
 
  // 点击左侧分类切换右侧菜品
 
  changeRightMenu: function (e) {
 
  var classify = e.target.dataset.id;// 获取点击项的id
 
  var foodList = this.data.foodList;
 
  var allFoodList = this.data.allFoodList;
 
  var newFoodList = [];
 
  if (classify == 0) {//选择了全部选项
 
  this.setData({
 
  curNav: classify,
 
  foodList: allFoodList
 
  })
 
  } else { //选择了其他选项
 
  for (var i in allFoodList) {
 
  if (allFoodList[i].catid == classify) {
 
  newFoodList.push(allFoodList[i])
 
  }
 
  }
 
  this.setData({
 
  // 右侧菜单当前显示第curNav项
 
  curNav: classify,
 
  foodList: newFoodList
 
  })
 
  }
 
  },
 
  // 购物车及菜单中增加数量
 
  addCount: function (e) {
 
  var id = e.currentTarget.dataset.id;[这里写链接内容](http://download.csdn.net/download/m0_37543652/10019843%20%20%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80)
 
  var arr = wx.getStorageSync('cart') || [];
 
  var f = false;
 
  for (var i in this.data.foodList) {// 遍历菜单找到被点击的菜品,数量加1
 
  if (this.data.foodList[i].id == id) {
 
  this.data.foodList[i].quantity += 1;
 
  if (arr.length > 0) {
 
  for (var j in arr) {// 遍历购物车找到被点击的菜品,数量加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 (var i = 0; i < array.length; i++) {
 
  if (array[i].id == val) {
 
  array.splice(i, 1);
 
  break;
 
  }
 
  }
 
  },
 
  // 购物车减少数量
 
  minusCount: function (e) {
 
  var id = e.currentTarget.dataset.id;
 
  var arr = wx.getStorageSync('cart') || [];
 
  for (var i in this.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 (var j in arr) {
 
  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();
 
  },
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088