多商铺–添加购物车
1、基本流程
判断购物车是否为空> 如果不为空> 判断商铺是否存在> 如果商铺存在> 判断要添加的商品是否在该商铺中> 如果商品存在> 直接修改商品数量即可 如果商品不存在> 把商品添加至对应的商铺中 如果为空> 直接加入商铺和商品
2、代码实现
方法一
有点复杂，但是容易理解
if (state.cartListDatas.length > 0) {
// 进来就说明本地存储里有数据了
let noShop = state.cartListDatas.every(item => {
// 返回false说明本地有该店铺
return item.ru_id != data.ru_id;
})
let shopIndex = state.cartListDatas.findIndex(item => {
// 找到这个对应店铺的索引
return item.ru_id == data.ru_id;
})
if (noShop) {
state.cartListDatas.push(data)
} else {
// 说明有店铺，接着判断该店铺是否存在该商品
let noGood = state.cartListDatas[shopIndex].children.every(item => {
// 返回false说明店铺里面有该商品
return item.goods_id != data.children[0].goods_id
})
let goodsIndex = state.cartListDatas[shopIndex].children.findIndex(item => {
// 找到对应商品的索引
return item.goods_id == data.children[0].goods_id
})
if (noGood) {
state.cartListDatas[shopIndex].children.push(data.children[0])
} else {
// 说明有商品,直接把商品的加购数量更改即可
state.cartListDatas[shopIndex].children[goodsIndex].buyNum += data.children[0].buyNum
}
}
} else {
state.cartListDatas.push(data)
}
方法二
比较简单
判断商铺是否存在
let isShop = state.cartListDatas.find(item => {
return item.ru_id == data.ru_id
})
// 判断商品是否存在
let isGoods = state.cartListDatas.find(item => {
return item.children.find(value => {
return value.goods_id == data.children[0].goods_id
})
})
if (isShop) {
// 说明商铺存在
if (isGoods) {
// 说明该商品存在于对应的店铺中--直接操作加购数量即可
for (let i = 0; i < isGoods.children.length; i++) {
if (isGoods.children[i].goods_id == data.children[0].goods_id) {
isGoods.children[i].buyNum += data.children[0].buyNum
}
}
} else {
// 说明该商品在该店铺中不存在
isShop.children.push(data.children[0])
}
} else {
// 说明店铺不存在
state.cartListDatas.push(data)
}
3、项目实战
关于加购、删除、全选、数量修改的一些操作，基于本地存储进行实现购物车流程
export default {
state: {
cartListDatas: localStorage["carts"] ? JSON.parse(localStorage["carts"]) : [],
isSelectAll: localStorage["all"] ? JSON.parse(localStorage["all"]) : true
},
mutations: {
// 添加购物车
changeCartListDatas(state, data) {
if (state.cartListDatas.length > 0) {
// 进来就说明本地存储里有数据了
let noShop = state.cartListDatas.every(item => {
// 返回false说明本地有该店铺
return item.ru_id != data.ru_id;
})
let shopIndex = state.cartListDatas.findIndex(item => {
// 找到这个对应店铺的索引
return item.ru_id == data.ru_id;
})
if (noShop) {
state.cartListDatas.push(data)
} else {
// 说明有店铺，接着判断该店铺是否存在该商品
let noGood = state.cartListDatas[shopIndex].children.every(item => {
// 返回false说明店铺里面有该商品
return item.goods_id != data.children[0].goods_id
})
let goodsIndex = state.cartListDatas[shopIndex].children.findIndex(item => {
// 找到对应商品的索引
return item.goods_id == data.children[0].goods_id
})
if (noGood) {
state.cartListDatas[shopIndex].children.push(data.children[0])
} else {
// 说明有商品,直接把商品的加购数量更改即可
state.cartListDatas[shopIndex].children[goodsIndex].buyNum += data.children[0].buyNum
}
}
} else {
state.cartListDatas.push(data)
}
// 设置本地存储信息
localStorage.setItem("carts", JSON.stringify(state.cartListDatas))
},
// 点击-
reduceNum(state, data) {
state.cartListDatas.map(item => {
if (item.ru_id == data.cart.ru_id) {
// 找到对应的店铺--不必要更改单个数据，传来的数据已经时双向数据绑定的更改过的，直接替换对应的本地的数据对象即可
item.children[data.index] = data.cart
}
})
// 把仓库的数据设置到本地存储
localStorage.setItem("carts", JSON.stringify(state.cartListDatas))
},
// 点击+
addNum(state, data) {
state.cartListDatas.map(item => {
if (item.ru_id == data.cart.ru_id) {
// 和-的操作一样
item.children[data.index] = data.cart
}
})
// 同样设置本地存储
localStorage.setItem("carts", JSON.stringify(state.cartListDatas))
},
// 商品全选
goodsSelect(state, data) {
state.cartListDatas.map(item => {
// 找到该商品所在的店铺
if (item.ru_id == data.cart.ru_id) {
// 把对应的商品信息替换，因为传来的数据已经是更改过的
item.children[data.index] = data.cart
// 通过该店铺的所有的商品选中和未选中状态，更改店铺的选中状态
let flag = item.children.every(value => {
return value.isSelect == true
})
item.isShop = flag;
// 更改购物车的全选状态
state.isSelectAll = state.cartListDatas.every(item => {
return item.isShop == true
})
// 把购物车的全选和购物车的数据都设置本地存储
localStorage.setItem("all", state.isSelectAll)
localStorage.setItem("carts", JSON.stringify(state.cartListDatas))
}
})
},
// 店铺全选
shopSelect(state, data) {
// 每调用一次方法就直接改变店铺的选中状态
state.cartListDatas[data.index].isShop = !state.cartListDatas[data.index].isShop
// 找到该店铺，直接操作该店铺的商品的选中状态
state.cartListDatas[data.index].children.map(item => {
item.isSelect = state.cartListDatas[data.index].isShop
})
// 购物车的全选状态是根据购物车的每个店铺的全选状态决定的
state.isSelectAll = state.cartListDatas.every(item => {
return item.isShop == true
})
// 把购物车全选和购物车的数据都设置进本地存储--相当于更新本地存储
localStorage.setItem("all", state.isSelectAll);
localStorage.setItem("carts", JSON.stringify(state.cartListDatas))
},
// 购物车全选
selectAll(state) {
// 每调用一次方法就改变购物车的全选状态
state.isSelectAll = !state.isSelectAll
// 购物车全选状态改变，店铺和商品的选中状态也会改变
state.cartListDatas.map(item => {
// 改变店铺的选中状态
item.isShop = state.isSelectAll
item.children.map(value => {
// 改变商品的选中状态
value.isSelect = state.isSelectAll
})
})
// 把购物车全选和购物车的数据都设置本地存储--相当于更新
localStorage.setItem("carts", JSON.stringify(state.cartListDatas));
localStorage.setItem("all", state.isSelectAll);
},
delete(state, data) {
state.cartListDatas.map(item => {
// 找到该店铺
if (item.ru_id == data.cart.ru_id) {
item.children.splice(data.index, 1);
if (item.children.length < 1) {
let shopIndex = state.cartListDatas.findIndex(value => {
return value.ru_id == item.ru_id
})
state.cartListDatas.splice(shopIndex, 1)
}
}
})
localStorage.setItem("carts", JSON.stringify(state.cartListDatas));
}
},
actions: {}
}