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

从零开始，搭建一个简单的购物平台（十六）前端商城部分：
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值

<template>
  <div>
    <ul v-if="shopList.length" class="shopCar">
      <li v-for="(item,index) in shopList" :key="index">
        <span class="mint-checkbox" @click="selectHandler(index)">
          <input class="mint-checkbox-input" type="checkbox" :checked="item.isSelect" />
          <span class="mint-checkbox-core"></span>
        </span>
        <img :src="imgPath+item.shopPic" alt />
        <div class="shopInfo">
          <div>
            <span>{{item.shopName}} {{item.shopScale}}克</span>
            <span>￥{{item.shopPrice}}</span>
          </div>
          <div>
            <mt-button class="minus" type="default" @click="minusShopHandler(item)">-</mt-button>
            <span>{{item.shopCount}}</span>
            <mt-button class="add" type="default" @click="addShopHandler(item)">+</mt-button>
            <mt-button class="del" type="default" @click="delShopHandler(index)">×</mt-button>
          </div>
        </div>
      </li>
    </ul>
    <div v-else class="noShop">
      <div class="icon-jiarugouwuche iconfont"></div>
      <span>购物车为空</span>
    </div>
  </div>
</template>

<script>
import Config from "../../config/config";
import { Toast } from "mint-ui";
const { EventName } = Config;
export default {
  name: "shopCarItem",
  data() {
    return {
      shopCar: null,//初始化购物车
      shopList: [],//购物车列表state
      imgPath: Config.RequestPath,//静态文件根目录
      selectAll: false,//全选
    };
  },
  created() {
    this.shopCar = new this.$store.ShopCar();
    this.shopList = this.shopCar.state;
    this.$events.onEvent(EventName.CountShop, this.countHandler);//商品数量监听
    this.$events.onEvent(EventName.SelectAllChild, this.selAllHandler);//商品全选监听
  },
  mounted() {
    this.shopCar.filterSelect();//初始化全选，商品数量，商品总价
  },
  destroyed() {
    this.$events.offEvent(EventName.CountShop, this.countHandler);
    this.$events.offEvent(EventName.SelectAllChild, this.selAllHandler);
  },
  methods: {
    countHandler(res) {//修改商品数量，刷新数据
      this.shopList = this.shopCar.state;
      this.shopCar.filterSelect();
    },
    selectHandler(_id) {//修改商品全选，单个商品驱动全选按钮，刷新数据
      this.shopList[_id].isSelect = !this.shopList[_id].isSelect;
      this.shopCar.state = this.shopList;
      this.shopCar.filterSelect();
    },
    selAllHandler() {//修改商品全选，全选按钮驱动单个商品，刷新数据
      this.shopList = this.shopCar.state;
      this.shopCar.filterSelect();
    },
    addShopHandler(_data) {//添加商品，刷新数据
      _data.shopCount = 1;
      this.shopCar.countShopItem({
        ..._data,
      });
    },
    minusShopHandler(_data) {//减少商品，刷新数据
      _data.shopCount = -1;
      this.shopCar.countShopItem({
        ..._data,
      });
    },
    delShopHandler(_id) {//删除单个商品，刷新数据
      this.shopCar.delShopItem(_id);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
.noShop {
  width: 100%;
  height: 100%;
  text-align: center;
  span {
    .f_s(36);
  }
  div {
    .w(200);
    .h(200);
    border-radius: 100%;
    background: @mainColor;
    .titleFont();
    box-shadow: 5px 5px 8px #777;
    .l_h(200);
    text-align: center;
    margin: 100px auto 20px;
    .f_s(100);
  }
}
.shopCar {
  .padbottom(130);
  width: 100%;
  li {
    border-bottom: 1px solid #d3d3d3;
    padding-left: unit(35 / @pxtorem, rem);
    .h(320);
    .mint-checkbox {
      .h(320);
      .l_h(320);
      display: inline-block;
      vertical-align: middle;
    }
    .mint-checkbox-input:checked + .mint-checkbox-core {
      background: #ea3e3c;
      border-color: #ea3e3c;
    }
    img {
      .h(265);
      .w(265);
      margin-left: unit(20 / @pxtorem, rem);
      display: inline-block;
      vertical-align: middle;
      background: #f5f6f5;
    }
    .shopInfo {
      .h(235);
      width: 50%;
      .padtop(30);
      padding-left: unit(10 / @pxtorem, rem);
      display: inline-block;
      vertical-align: middle;
      div:nth-child(1) {
        overflow: hidden;
        span {
          float: left;
        }
        span:nth-child(2) {
          float: right;
        }
      }
      div:nth-child(2) {
        margin-top: unit(85 / @pxtorem, rem);
        span {
          display: inline-block;
          vertical-align: middle;
          padding: 0 unit(50 / @pxtorem, rem);
        }
        .add,
        .minus,
        .del {
          display: inline-block;
          vertical-align: middle;
          background: white;
          box-shadow: none;
          .f_s(50);
        }
        .del {
          float: right;
        }
      }
    }
  }
}
</style>

在批量操作shopCarOrder组件中同理

<template>
  <div class="shopOrder">
    <span class="mint-checkbox" @click="selectHandler">
      <input class="mint-checkbox-input" type="checkbox" :checked="isSelAll" />
      <span class="mint-checkbox-core"></span>
    </span>
    <span>全选({{selCount}})</span>
    <span @click="delSelShop">删除({{selCount}})</span>
    <span>
      <span>￥{{sum}}</span>
      <span class="icon-qianjin iconfont" @click="sendOrder"></span>
    </span>
  </div>
</template>

<script>
import Config from "../../config/config";
import ShopCarOrderBussiness from "./bussiness";
import { Toast } from "mint-ui";
const { EventName } = Config;
export default {
  name: "shopCarOrder",
  data() {
    return {
      shopCar: null,
      isSelAll: false,//全选
      selCount: 0,//商品数量
      sum: 0,//商品总价
      orderList: null,//提交订单请求参数
      shopCarOrderBussiness: null,
    };
  },
  created() {
    this.shopCar = new this.$store.ShopCar();
    this.shopCarOrderBussiness = new ShopCarOrderBussiness(this);
    this.$events.onEvent(EventName.SelectParent, this.selAllHandler);//全选按钮监听，通过监听所有商品都选中或未全选，修改状态
  },
  destroyed() {
    this.$events.offEvent(EventName.SelectParent, this.selAllHandler);
  },
  methods: {
    selectHandler() {//驱动修改所有商品选中状态
      this.isSelAll = !this.isSelAll;
      this.shopCar.selAllChild(this.isSelAll);
    },
    selAllHandler({ _count, _selCount, _sum }) {
      this.isSelAll = _count;
      this.selCount = _selCount;
      this.sum = _sum;
    },
    delSelShop() {//删除选中商品
      this.shopCar.delSelShop();
    },
    sendOrder() {//提交订单
      this.shopCarOrderBussiness.sendOrderList();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
.shopOrder {
  .f_s(34);
  color: #fff;
  position: fixed;
  .mcolor();
  bottom: unit(130 / @pxtorem, rem);
  width: 100%;
  .h(130);
  .l_h(130);
  > span:nth-child(1),
  > span:nth-child(2) {
    padding-left: unit(35 / @pxtorem, rem);
  }
  > span:nth-child(3) {
    padding-left: unit(200 / @pxtorem, rem);
  }

  > span:nth-child(4) {
    float: right;
    margin-right: unit(50 / @pxtorem, rem);
    > span:nth-child(1) {
      padding-left: unit(20 / @pxtorem, rem);
      border-left: 1px dashed #fff;
    }
    > span:nth-child(2) {
      padding-left: unit(50 / @pxtorem, rem);
    }
  }
  > span {
    display: inline-block;
  }
  .mint-checkbox-input + .mint-checkbox-core {
    background: transparent;
    border-color: #fff;
  }
  .mint-checkbox-input:checked + .mint-checkbox-core {
    .mcolor();
  }
}
</style>

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

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

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

<template>
  <div>
    <Top title="购物车"></Top>
    <div class="content">
      <ShopCarItem></ShopCarItem>
      <ShopCarOrder></ShopCarOrder>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import Top from "../../components/top/top";
import ShopCarItem from "../../components/shopCarItem/shopCarItem";
import ShopCarOrder from "../../components/shopCarOrder/shopCarOrder";
import TabBar from "../../components/tabBar/tabBar";
export default {
  name: "shopCar",
  data() {
    return {};
  },
  components: {
    Top,
    ShopCarItem,
    ShopCarOrder,
    TabBar
  },
  created() {}
};
</script>
<style lang="less" scoped>
@import "../../style/init.less";
</style>

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