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

旧城等待， 2022-12-11 13:34 108阅读 0赞

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

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

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

![2020100217110615.gif][]![20201002171635715.gif][]![20201002171956566.gif][]![20201002172227950.gif][]

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

**修改商品数量在[上篇文章][https_blog.csdn.net_time_article_details_108769229]中已介绍，通过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的数据绑定渲染页面。下篇文章将实现用户的注册，登录功能（简单的用户名密码注册，登录，和邮箱验证模块）**

[https_blog.csdn.net_time_article_details_108769229]: https://blog.csdn.net/time_____/article/details/108769229
[https_gitee.com_DieHunter_myCode_tree_master_shopping]: https://gitee.com/DieHunter/myCode/tree/master/shopping
[2020100217110615.gif]: https://img-blog.csdnimg.cn/2020100217110615.gif
[20201002171635715.gif]: https://img-blog.csdnimg.cn/20201002171635715.gif
[20201002171956566.gif]: https://img-blog.csdnimg.cn/20201002171956566.gif
[20201002172227950.gif]: /images/20221123/40121d257b5d452eb306fd144c3bb173.png