购物车实现的基本逻辑

购物车实现的基本逻辑思路 1 首先我们需要在 onLoad 里面获取购物车的数据 2 根据购物车中的商品数据 所有的商品都会被选中 checked true 全选就会被选中 3 计算全选 当购物车的商品都选中了 全选就会被选中 只要有一个商品没被选中 全选按钮就不会被选中 实现步骤 1

思路:

1.首先我们需要在onLoad 里面获取购物车的数据

2.根据购物车中的商品数据,所有的商品都会被选中 checked=true 全选就会被选中

3.计算全选:当购物车的商品都选中了,全选就会被选中,只要有一个商品没被选中,全选按钮就不会被选中

实现步骤:

1.首先我们需要在data里面定义好数据

data:{ cartList:[] //购物车的数组 allChecked:false //默认全选为false totalPrice:0 //计算总价格 totalNum:0 //总数量 }

2.因为在后端给我们返回的数据是没有是否选中的属性,这时我们需要手动给处理数据添加属性

3.计算商品的全选的时候计算总价格

(1)把需要的商品选中,我们才拿他来计算

(2)获取购物车数据

(3)遍历

(4)判断商品是否被选中

(5)总价格+=商品的单价 *商品的数量

(6)总数量+=商品的数量

(7)把计算后的价格和数量,设置回data中即可

 (8)可以在里面插入一条:判断购物车数据是否为空,是的全选就为false 否则就选中

4.实现商品的单选功能计算价格

1.给每个商品绑定change 事件

2.获取到被修改商品对象

3.商品对象的选中状态  取反

4.重新填充回data中和缓存中

5.重新计算全选。总价格 总数量。。。

JS逻辑实现:引用下面封装以后的代码

//商品的选中 bindCheckcar:function(e){ var that=this //1.获取被修改的商品的id var points_goods_id=e.currentTarget.dataset.id //2.获取购物车数组 var cartList=that.data.cartList //3.找到被修改的商品对象 var index=cartList.findIndex(item=>item.points_goods_id===points_goods_id) //4.选中状态取反 cartList[index].checked=!cartList[index].checked that.setCart(cartList) }

封装:设置购物车状态同时 重新计算 底部工具栏的数据 全选总价格 购买数量

//接收一个购物车数组 setCart(cart){ let allChecked=true; //总价格 总数量 let totalPrice=0; let totalNum=0; cart.forEach(item=>{ //当所有的商品被选中时 if(item.checked){ totalPrice+=item.num*item.goods_price; totalNum+=item.num; }else{ allChecked=false; } }) //判断数组是否为空 allChecked=cart.lenght !=0? allChecked:false this.setData({ cart:cart, totalPrice:totalPrice, totalNum:totalNum, allChecked:allChecked }) } 

5.全选和反选:

1.全选复选框绑定事件:change

2.获取data 中的全选的变量  allChecked

3.直接反选  allChecked=! allChecked

4.遍历购物车数组  让里面的商品  选中状态跟随allChecked  改变而改变

5.把购物车数组和allChecked 重新设置回data, 把购物车重新设置缓存中

全选、反选的视图层:

 JS:逻辑

//商品的全选,反选的功能 bindSelectAll:function(){ //1.获取data 中数据: var that=this var cartList=that.data.cartList var allChecked=that.data.allChecked //2.修改值 allChecked=!allChecked //3.循环修改cartList 数组中的商品选中状态 cartList.forEach(item=>item.checked=allChecked); //4.把修改后的值,填充回data that.setCart(cartList) }

商品数量的编辑:

1.“+”、“ - ” 按钮 绑定同一个点击事件

2.“+”  +1

3.“ - ” -1

4.传递被点击的商品id  goods_id

5.获取data 中的购物车数组,来获取需要被修改的商品对象

6.直接修改商品对象的数量 num

7.把购物车的商品,重新设置回 data中  this.setCart

//商品数量的编辑功能 handleItemNumEdit:function(e){ //1.获取传递过来的参数,操作符+1 还是减1 和商品id var operation=e.currentTarget.dataset.operation var id=e.currentTarget.dataset.id //2.获取购物车数组 var cartList=this.data.cartList //3.找到需要修改的商品的索引 var index=cartList.findIndex(item=>item.good_id===id); //4.进行修改数量 cartList[index].num+=opration; //5.设置回data中 this.setCart(cartList) }

商品的删除

1.当购物车的数量=1 同时 用户 点击“ - ”

2.弹窗提示(showModal) 询问用户 是否要删除

3.确定直接删除

4.取消什么都不做

delect:function(e){ var that=this var id=e.currentTarget.dataset.index var cartList=that.data.cartList //找到需要修改的商品索引 var index=cartList.findIndex(item=>item.points_cart_id===id) cartList.splice(index,1) that.setCart(cartList) }

 

知秋君
上一篇 2024-11-08 13:48
下一篇 2024-11-15 19:36

相关推荐