点击弹出购物车及其它操作

假设你已经完成基本购物逻辑，以下是购物车更详细操作

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,撑开高度。