购物车的实现

详情页的加入购物车(微信小程序)

思路:
1.在详情页的点击加入购物车执行的addCart()中:定义一个购物车数据,将用id请求到的详情页数据赋值给这个购物车数据
2.将购物车数据存储在本地,方便在购物车页面获取。但是,在添加本地存储前需要判断本地存储中是否有该商品:
逻辑如下:
//1.购物车列表如果为空,可以直接添加
//2.购物车列表不为空:
2.1判断当前要添加的商品是否在购物车列表中存在,存在让对应的店铺中的数据数量++,否则在对应商铺中的children中添加
3.在购物车页面onShow()生命周期中,读取本地存储中购物车数据，再将本地存储给购物车页面数据,再渲染.

//详情页中的添加购物车
    // 加入购物车
    addCart() {
        this.setData({
            buyNum: this.data.buyNum + 1
        })
        // 定义购物车的数据(根据id获取到的详情页数据detailDatas赋给购物车)
        let cartData = {
            shop_id: this.data.detailDatas.ru_id,
            shop_name: this.data.detailDatas.rz_shop_name,
            shop_is_select: true,
            children: [{
                goods_id: this.data.detailDatas.goods_id,
                shop_id: this.data.detailDatas.ru_id,
                goods_name: this.data.detailDatas.goods_name,
                goods_price: this.data.detailDatas.shop_price,
                goods_is_select: true,
                buy_num: this.data.buyNum,
                goods_thumb: this.data.detailDatas.goods_thumb
            }]
        }
        // 将cartData购物车的数据存到本地存储，方便在购物车页面获取
        let cartListDatas = wx.getStorageSync('cart') || []; //加入本地存储先读取是否有别的数据,有的话读取出来再加入,防止每次添加数据都是从空数组开始

        // 1、 购物车列表如果为空，可以直接添加
        // 2、购物车列表不为空
        // 2.1判断当前要添加的产品是否在购物车列表中存在
        // if存在让对应店铺中的数据数量++
        // else 在对应商铺中的children中添加

        // 1.判断商铺是否存在
        let isShop = cartListDatas.find(item => {
            return item.shop_id == cartData.shop_id;
        })
        //2.判断商品是否存在
        let isGoods = cartListDatas.find(item => {
            return item.children.find(value => {
                return value.goods_id == cartData.children[0].goods_id;
            })
        })
        console.log(isShop);
        console.log(isGoods);

        // 如果商铺和商品存在,让购买的数量++
        if (isShop) {
            if (isGoods) {
                // 条件成立说明该商品在购物车中存在
                for (let i = 0; i < isGoods.children.length; i++) {
                    if (cartData.children[0].goods_id == isGoods.children[i].goods_id) {
                        isGoods.children[i].buy_num += 1;
                    }
                }
            } else {
                isShop.children.push(cartData.children[0]);
            }
        } else {
            cartListDatas.push(cartData);
        }
        wx.setStorageSync('cart', cartListDatas);
    },

//购物车页面中读取本地存储的购物车数据
    onShow() {
        // 读取本地存储中存储的购物车的数据
        let cartData = wx.getStorageSync('cart');
        this.setData({
            cartListDatas: cartData//在data中定义
        })
    },

购物车的选中与价格联动(vue):

思路:
1.点击商品与店铺的选中关系(商品全选,该店铺选中)
在点击当前的商品的时候,给点击的方法goodsSelectFn(index,cart)传递两个参数：
index:当前点的那个商品的索引
cart:当前点击的这个商品数据
给cart下的goods_is_select取反
获取到当前cart所属于的shop_id
循环遍历整个购物车数据,如果整个数据下有shop_id等于当前cart下的shop_id,用every遍历当前店铺数据下的children(产品)的goods_is_select是否为true,是的话店铺选中。

    //   点击商品前的选择框
    goodsSelectFn(index, cart) {
      console.log(index, cart);
      cart.is_goods_select = !cart.is_goods_select;
      let shop_id = cart.shop_id;
      console.log(shop_id);
      //   店铺的选中和商品之间的关系
      for (let i = 0; i < this.cartListDatas.length; i++) {
        if (this.cartListDatas[i].shop_id == shop_id) {
          // this.cartListDatas[i] 点击的那个店铺
          this.cartListDatas[i].is_shop_select = this.cartListDatas[
            i
          ].children.every((item) => item.is_goods_select == true);
        }
      }
      //店铺和全选(店铺选中,全选也选中)
      //data中定义selectAll:true
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
    },

//2.全选功能
思路:
给全选视图添加selectAllFn()事件
先让全选自身的Icon图标实现选中与取消,修改data中定义的selectAll即可，取反。
用map方法遍历购物车数据,让里面的shop_select等于当前data的selectAll,再用1个map遍历item(店铺)下的children(商品),修改is_goods_select为当前的selectAll

    // 点击全选
    selectAllFn() {
      this.selectAll = !this.selectAll;
      this.cartListDatas.map((item) => {
        item.is_shop_select = this.selectAll;
        item.children.map((value) => {
          value.is_goods_select = this.selectAll;
        });
      });
    },

//3.点击店铺让商品全部选中:
思路:
给店铺的选中添加点击事件:shopSelectFn(index,cartListData)传入参数:index:当前的店铺,cartListData:当前店铺的数据传入
让当前店铺下的is_shop_select取反,保证点击实现选中与未选中切换
用map遍历当前店铺下的children,让该店铺下的商品的is_goods_select与该店铺的is_shop_select保持一致。

    // 店铺和本店铺中商品的关系
    shopSelectFn(index, cartListData) {
      console.log(index, cartListData);
      cartListData.is_shop_select = !cartListData.is_shop_select;
      cartListData.children.map((item) => {
        item.is_goods_select = cartListData.is_shop_select;
      });

      //  店铺全选之后,全选也选中,接着写:
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
    },

总计与总价

总价思路:
在计算属性中totalPrice()中，定义let total=0;
遍历整个购物车数据,嵌套遍历children,用map
如果商品为选中状态,让total+=购买数量*商品单价,返回total

  computed: {
    totalPrice() {
      let total = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            total += value.buy_num * value.shop_price;
          }
        });
      });
      return total;
    },
  },

总数思路:
在计算属性中totalGoodsNum()中，定义let total=0;//总数
遍历整个购物车数据,嵌套遍历children,用map
如果商品为选中状态,让total等于total+购买数量,返回total

    totalGoods() {
      let total = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            total += value.buy_num;
          }
        });
      });
      return total;
    },