pp电子

登录
免费开通

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

微信小程序点餐系统我们会用到购物车功效,,,,添加菜品到购物车,,,,以及点击数目加减,,,,那么这种点餐小程序购物车效果要怎样实现,,,,下面为各人介绍。。。。。

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

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

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

大致的功效样式如下图展示:

 

代码块

主要代码块:

  // 点击左侧分类切换右侧菜品
  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();
  },
小程序工具提供多类型商城/门店小程序制作,,,,可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接模浚??榻峁剐〕绦蛏坛且趁妫,所看即所得,,,,只需要美工就能做出细腻商城。。。。。更多小程序市肆请审查:小程序市肆

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


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,若有知识产权人并不肯意我们使用,,,,若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,仅系客观性形貌,,,,如您需要相识该类商品/服务详细的资讯,,,,请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异,,,,提供产品和服务,,,,助力企业向数字化转型,,,,通过科技驱动商业刷新,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇
  • 小程序挪用科大讯飞接口

  • 小程序登录界面样式开发实例

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
点餐小程序购物车效果实现,点餐小程序购物车列表的实现 - K