1、添加购物车:
0、获取本地缓存,查看是否存在购物车数据;
1、如果不存在——直接将点击事件中携带的商品数据存到本地缓存中;
2、如果存在
① 判断购物车数据中是否存在现在要加购的商品
操作:使用数组方法find,条件为id,如果id相同,则表示该商品原本就存在,否则表示商品原本不存在;find()方法返回Boolean
② 存在该商品——将该商品的数量+1
③ 不存在该商品——添加num属性,属性值为1;与已有商品一起加入到本地缓存中
注意点:
① 对于本地缓存的数据处理,需要用到JSON.parse()和JSON.stringify()。
② 前者是将string转换成object,后者是将object转换成string。
③ 本地缓存中的数据是string的形式,拿出来之后,需要使用JSON.parse()转换成array;
let store = JSON.parse(localStorage.getItem('carts'))
④ 同理,存储的时候,也需要将array转换成string。
localStorage.setItem('carts',JSON.stringify(store))
⑤ 点击事件中携带的商品数据本身就是object,在将新旧商品数据一起添加到本地缓存时,需要注意,要将旧的数据从数组形式解构成一条一条的对象,和新数据一起以新构成的数组形式追加到本地缓存中
localStorage.setItem('carts',JSON.stringify([product,...store]))
[{},{},{},...,{}] ----> {},{},{},...,{}
2、购物车界面
0、初始化获取本地缓存的数据
1、渲染页面
3、全选单选
(1)实现单选
forEach给每条数据添加checked属性
(2)实现全选
0、每个单选应该和全选保持一样的true和false
1、使用forEach()给每个商品的checked属性赋值allChecked
2、allChecked为true,则每个checked也为true;
3、allChecked为false,则每个checked也为false;
(3)关联全选与单选
0、购物车中每个商品的checked为true时,allChecked也应该是true
1、使用every(),只有当每个checked为true时,allChecked才会是true
2、直接将every()返回的值赋值给allChecked
4、数量加减
0、总体逻辑:本质是商品中 num 值的改变和简单的数学运算;
1、用户增减商品数量,更新本地存储数据;
2、调用getTotal()计算金额
5、金额计算
0、总体逻辑:过滤出被选中的商品,清空总价,计算总价(+=)
注意点:
① 定义变量total来确定商品价格price;
② 由于vant组件中存在固定单位,商品价格应该*100;
③ filter()过滤出用户选择的商品,返回数组;
④ 价格先清零,再进行计算,否则将保留原先计算出的价格;
⑤ 使用map()对数组中每一个商品的价格进行计算时,注意要使用 += 赋值给total.value;
⑥ 在单选全选,数量计算中调用价格计算的函数,确保每次操作都重新计算价格
6、空状态
0、标签内添加v-show;
1、store.length==0?
——购物车里没有数据,ture,显示空状态;
——购物车里有数据,false,不显示。
2、进入购物车 和删除购物车内所有的商品 时要调用
7、左滑删除
0、把数据从缓存拿出来;
1、filter过滤已经删除的数据;
2、存储最新数据
8、结算跳转
router.push('/submit') 路由跳转