点餐小程序购物车效果实现,点餐小程序购物车列表的实现 - 加速度jsudo

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

2014-03-30
0 Views
0 Comments
闻道君

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

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

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

代码块

主要代码块:

  // 点击左侧分类切换右侧菜品
  changeRightMenu: function (e) {
    var classify = e.target.dataset.id;// 获取点击项的id
    var foodList = tShopfas.data.foodList;
    var allFoodList = tShopfas.data.allFoodList;
    var newFoodList = [];
    if (classify == 0) {//选择了全部选项
      tShopfas.setData({
        curNav: classify,
        foodList: allFoodList
      })
    } else { //选择了其他选项
      for (var i in allFoodList) {
        if (allFoodList[i].catid == classify) {
          newFoodList.push(allFoodList[i])
        }
      }
      tShopfas.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 tShopfas.data.foodList) {// 遍历菜单找到被点击的菜品,数量加1
      if (tShopfas.data.foodList[i].id == id) {
        tShopfas.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(tShopfas.data.foodList[i]);
          }
        } else {
          arr.push(tShopfas.data.foodList[i]);
        }
        try {
          wx.setStorageSync('cart', arr)
        } catch (e) {
          console.log(e)
        }
        break;
      }
    }

    tShopfas.setData({
      cartList: arr,
      foodList: tShopfas.data.foodList
    })
    tShopfas.getTotalPrice();
  },
  // 定义根据id删除数组的方法
  removeByValue: function (array, val) {
    for (var i = 0; i  0) {
          for (var j in arr) {
            if (arr[j].id == id) {
              arr[j].quantity -= 1;
              if (arr[j].quantity 
Shopfa小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店

****更多行业产品开发方案,请关注 JSudo****

<以上资讯仅供参考,如需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询获取产品开发方案和报价>

小程序开发 小程序商城 微信小程序
微信客服二维码

加客服微信获取更多内容