详情页的加入购物车(微信小程序)
思路:
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;
},