假设你已经完成基本购物逻辑,以下是购物车更详细操作
1.复制原有以及css
2.从vuex中获取商品数据
3.对页面进行渲染
4.对vuex修改部分进行翟离复用
5。复用操作加减数量事件
6.关于数量小于0时的显示判断,这里要注意一点,template放在外面不会实际占位,v-if 放在div里的话,如果数量小于0就不会显示,不会出现数量为0的商品还会有个一空盒子占位
7.关于购物车选中与非选中,以及从新计算总额,如果选中就计算
8.关于购物车选中状态切换,定义一个方法,点击的时候传递两个参数,商铺id和商品id
9.清空购物车逻辑,首先绑定事件,传递店铺Id
在vuex中进行购物车数据清空
10.全选,通过一个计算属性来决定勾选还是非勾选
定义一个result= true 循环购物车,如果数量大于0,且有非选中的,则返回false
渲染
点击全选进行全选,绑定一个点击事件
派发一个事件函数
获取vuex中的数据,for循环遍历,让所有的商品都选中,key为商品唯一标识
11.蒙层以及点击购物车显示购物车,再次点击隐藏
渲染
蒙层相关css
12.注意事项
关于文字与图片对齐 vertical-align
关于flex布局导致的清空购物车一整块区域生效,给其加一个span 用displace:inline-block,撑开高度。