关于项目中购物车模块的展示

1、购物车模块包括哪些组件

nav-bar(展示“购物车”),CartList组件(包括购物车列表),其中子组件包括scroll组件和CartListItem组件。在CartList组件中通过v-for遍历cartlist变量,通过props将每个商品对象Item传值给子组件CartListItem。每个CartListItem组件中包括很多div盒子,展示CheckButton,商品图片,商品的价格、描述、价格和数量等

2、购物车界面的展示

  1. 购物车导航栏的展示:采用nav-bar组件并获取cartList.length
  2. 购物车商品的展示:通过组件CartList和组件CartListItem
  3. 商品的选中和不选中切换:通过监听CheckButton组件的点击事件,来修改商品模型对象,改变选中和不选中状态。即给每个商品模型对象添加.checked属性
  4. 底部工具栏的汇总
    • 全选按钮:思路就是有一个或多个没选中,则全部选中,若全部选中则改为全部不选中
    • 计算总价格:思路就是对于cartList进行采用filter方法找出被选中的商品,利用reduce计算选中的商品x数量的和

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108592060