从零开始，搭建一个简单的购物平台（十七）前端商城部分

从零开始，搭建一个简单的购物平台（十六）前端商城部分：
https://blog.csdn.net/time_____/article/details/108769229
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

上篇文章讲到了商品详情页面实现，最后一个功能是加入购物车，也就是通过列表对比商品是否存在，若存在，则对现有商品数据进行修改，若不存在，则初始化商品，并添加至购物车列表中，这篇文章将介绍对购物车数据进行操作功能

购物车功能包括
           修改商品数量                        删除单个商品                           全选/反选                               批量删除

这个页面，将其分解成四个组件，分别是顶部的Title，菜单栏Tabbar，单件商品shopCarItem和下面的批量操作shopCarOrder

修改商品数量在上篇文章中已介绍，通过countShopItem方法进行修改

删除单个商品

delShopItem(_id) {
    let _shopCar = this.state//获取现有购物车列表
    _shopCar.splice(_id, 1)//数组删除第_id项
    this.state = _shopCar//刷新购物车列表
    this.$events.emitEvent(EventName.CountShop);//刷新界面
  }

全选/反选，这里有两个注意的地方，全选/反选的实现有两种状态，一是每个商品单选被全选或反选后全选按钮也会跟随状态，二是全选按钮全选或反选后所有单选按钮也会跟随状态

我们首先在store的action加一个方法，用于总计商品的全选状态，商品总数，及总价格。每当商品被选中，就触发这个方法，刷新数据

  filterSelect() {//修改商品全选，单个商品驱动全选按钮，刷新数据
    let shopConfig = {//所有商品总计初始值
      _count: 1,//是否全选
      _selCount: 0,//商品总数
      _sum: 0//商品总价
    }
    this.state.forEach(item => {
      shopConfig._selCount += item.isSelect ? 1 : 0;
      shopConfig._count *= item.isSelect;//判断是否全选，初始值0，若全为false，相乘等于0，若全为true，相乘为1，即等于1是全选，等于0是未全选
      shopConfig._sum += item.isSelect ? item.sum : 0
    });
    this.$events.emitEvent(EventName.SelectParent, shopConfig);
  }

此外，我们需要再写个方法，用于全选按钮修改各个商品的选中状态

  selAllChild(_sel) {//修改商品全选，全选按钮驱动单个商品，刷新数据
    this.state = this.state.map(item => {
      item.isSelect = _sel;//当全选按钮选中，修改所有商品状态
      return item;
    });
    this.$events.emitEvent(EventName.SelectAllChild);
  }

于是在单件商品shopCarItem组件中，我们进行调用action中的方法，修改全局state值

在批量操作shopCarOrder组件中同理

在action中，我们还需要写一个函数，用于删除选中商品

delSelShop() {//直接通过遍历商品选中状态值进行删除，并刷新数据
    let _list = []
    this.state.map(item => {
      if (!item.isSelect) {
        _list.push(item)
      }
    });
    this.state = _list
    this.$events.emitEvent(EventName.CountShop);
  }

最后，在shopCar.vue界面中引入这四个组件，页面实现完成

本篇文章主要对商品购物车操作进行了介绍，其中运用了数据刷新视图的基本操作，将数据，逻辑，视图三者分开，结合vue的数据绑定渲染页面。下篇文章将实现用户的注册，登录功能（简单的用户名密码注册，登录，和邮箱验证模块）