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

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

在前几篇文章中，我们对首页，分类列表，公共组件，工具类进行了实现，这篇文章将实现商品详情页进行介绍，这里我们将商品详情页细化成多个组件，利用组件通信方式进行监听传递方式从而实现数据传递和效果逻辑
先来看看效果

这个界面我们可以把页面分解成几个组件，分别是顶部的Top，商品信息展示，商品选项框及加入购物车按钮，最后是下方的一个tab切换效果

商品选项框：

首先对mint-ui官方的Picker，Navbar进行简单的二次封装，然后在商品选项框及加入购物车按钮组件中触发picker组件，加入购物车中有一个添加的动画需要用到animate动画，并将全局购物车列表更新

• shopPicker.vue,封装官方组件，通过商品最大数量显示列表

•  修改navbar样式并应用至自己组件中

   

•  这里的一个难点是加入购物车的动画，想了很多种方法，
  最后采用一个标签隐藏，另一个标签执行动画的方式让动画效果更好，
  通过showAnimate变量进行控制执行动画的标签v-show
  

  在动画标签里使用animate.css中的zoomOutUp 效果

   当点击加入购物车时触发事件

  addShopCar() {
        this.showAnimate = true;//显示元素
        setTimeout(() => {//延时的目的是等待动画完成
          this.shopCar.countShopItem({//缓存添加购物车数据
            ...this.$route.query,
            shopCount: this.shopCount
          });
          this.showAnimate = false;//隐藏元素
        }, 1000);
      }

  完整的counter组件

  最后在全局store中添加购物车变量处理方法

   countShopItem(_data) {
      if (!_data._id) {//阻塞商品id为空现象
        return
      }
      let _shopCar = this.state//获取原购物车列表
      let list = _shopCar.filter(function (item) {
        return item._id === _data._id;//通过id查找购物车中传递项
      });
      if (list.length == 0) {//未找到时新建购物车商品
        _data.sum = _data.shopCount * _data.shopPrice;//商品总价
        _data.isSelect = false//是否选中商品，购物车界面默认值
        _shopCar.push(_data);
      } else if ((_data.shopNum > list[0].shopCount + _data.shopCount) && (list[0].shopCount + _data.shopCount <= 9) && list[0].shopCount + _data.shopCount > 0) {//找到时更新商品
        list[0].shopCount += _data.shopCount;
        list[0].sum = list[0].shopCount * list[0].shopPrice;
      } else if (list[0].shopCount + _data.shopCount <= 0) {//购物车允许最小值
        this.$events.emitEvent(EventName.CountShop, 'min');
        return;
      } else {//购物车允许最大值
        this.$events.emitEvent(EventName.CountShop, 'max');
        return;
      }
      this.state = _shopCar
      this.$events.emitEvent(EventName.CountShop);
    }

  这样，一个简单的商品详情页面就完成了

下一篇文章，将介绍购物车的其他功能实现，包括删除商品，全选，添加订单接口等