点餐小程序购物车效果实现

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

自己的第一个点餐小程序，主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等，纯前端实现

代码块

主要代码块：

// 点击左侧分类切换右侧菜品changeRightMenu: function (e) {var classify = e.target.dataset.id;// 获取点击项的idvar 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) {// 遍历菜单找到被点击的菜品，数量加1if (this.data.foodList[i].id == id) {this.data.foodList[i].quantity += 1;if (arr.length > 0) {for (var j in arr) {// 遍历购物车找到被点击的菜品，数量加1if (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();}

如果你也想开发一款属于自己的微信小程序购物车，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注小程序、app、网站开发

点餐小程序购物车效果实现相关推荐

微信小程序购物车功能
微信小程序购物车效果购物车是一个比较简单的小功能~ 购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染 ...
点餐小程序源码_微信小程序餐饮点餐商城前端模版
微信小程序--餐饮点餐商城,是针对餐饮行业推出的一套完整的餐饮解决方案,实现了用户在线点餐下单.外卖.叫号排队.支付.配送等功能,完美的使餐饮行业更高效便捷! 运行小程序看效果双击运行第一步安装的小 ...
“李记餐厅”微信点餐小程序+后台管理系统
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 "李记餐厅"微信点餐小程序+后台管理系统效果视频 http ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
手把手带你开发一款云开发版点餐小程序，微信扫码点餐，店铺地图导航，外卖小程序，用户端和后厨端都有
从今天开始带领大家实现一款云开发版的点餐小程序视频讲解:<云开发后台+微信扫码点餐小程序+cms网页管理后台> 技术选型 1,前端微信小程序原生框架 css JavaScript 2, ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
智能点餐小程序有哪些基本功能
智能点餐小程序随着互联网技术的发展,它是互联网智慧在很多领域的体现,比如餐饮业的智能点菜和餐厅管理系统.智能点菜app的开发和生产是当前餐饮服务软件.人们的点餐服务可以直接在手机上使用app软件在餐厅 ...
如何制作点餐小程序？
随着移动互联网的发展,点餐小程序的出现越来越受到大家的欢迎,它方便快捷,可以随时随地点餐,特别是在疫情期间更受到了用户的喜爱.那么,如何制作一个点餐小程序呢?下面将会简单介绍一下步骤,并通过一个具体案 ...
分享一个餐饮点餐小程序--蜜蜂点餐
最近发现一个不错的餐饮点餐小程序,分享给需要的朋友功能展示首页首页定位功能及门店信息下单拼单购物车支付购物车支付我的我的会员中心优惠买单收货地址 QQ交流群下载地址: ...

点餐小程序购物车效果实现

代码块

点餐小程序购物车效果实现相关推荐

最新文章

热门文章