【VUE】微商城（九）----购物车

微商城后端接口项目以及部署说明包含API接口说明文档

微商城源码

1、在vuex中准备购物车数据，进入src-->store-->modules文件夹 新建文件shopcart.js

2、打开store文件夹下的index.js导入shopcart模块

3、加入购物车功能实现

        1）、shopcart.js中相关代码

          2）、商品详情页中的加入购物车按钮添加事件

         3）、测试点击添加购物车 查看vuex中的数据以及localStorage中的数据

4、获取购物车数据

        1）、从vuex中获取购物车数据

        2）、根据vuex中获取到的商品数据中的多个商品id 发送请求到后端接口获取商品详情数据

         3）、GoodsInfoView.vue中的添加购物车方法增加提示，以及bug修改 

 5、显示购物车页面

        1)、页面结构

        2）、CSS样式代码

<style lang="scss" scoped>
.flex {
  display: flex;
}
.shopcart-container {
  background: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      align-items: center;
      padding: 10px;
      .mui-checkbox.mui-left input[type='checkbox'] {
        left: 0px;
      }
      .mui-radio.mui-left label, .mui-checkbox.mui-left label {
        padding-left: 20px;
        padding-right: 35px;
        padding-bottom: 22px;
      }
    }
    img {
      width: 60px;
    }
    .info {
      margin-left: 10px;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      h1 {
        text-align: left;
        font-size: 13px;
        font-weight: bold;
        line-height: 20px;
        padding-top: 10px;
      }
      p {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .price {
          text-align: left;
          font-size: 16px;
          font-weight: 700;
          color: red;
          flex: 1
        }
        a {
          line-height: 25px;
        }
      }
    }
  }
}
</style>

         效果：

6、显示购物车商品数量

        1）、 store文件夹下的modules下的shopcart.js增加获取购物车商品数量的getters计算属性

        2）、导入并使用之前封装的numbox组件

         效果：

7、实现购物车商品数量加减功能，并优化显示

        1）、store文件夹下modules文件夹下的shopcart.js中添加一个更新vuex以及localStorage中购物车数据的mutations方法countChanged。

         2）、ShopcartView.vue购物车页面中添加一个自定义事件count，当numbox组件发生改变的时候出发该事件。并且在methods中添加事件触发的方法countChanged。 在countChanged方法中去触发mutations方法

         3）、测试localStorage中的商品数据是否发生变化

        4）、测试vuex中商品数量是否有发生变化

        5）、优化显示

               1、numbox组件中添加参数size根据size的值对组件增加一些优化样式

                 2、购物车页面中使用numbox组件的时候传入size值为min进行优化显示

        效果：

8、购物车商品选中功能实现

        1）、store文件夹下的modules文件夹下的shopcart.js中添加获取商品有没有选中的状态getters计算属性

        2）、ShopcartView.vue购物车页面中根据计算属性getGoodsSelected获取商品是否选中

        效果：

        3）、store目录下的modules目录下的shopcart.js增加修改商品选中状态的mutations方法 

         4）、购物车页面中复选框绑定change事件，当复选框选中状态改变时，触发mutations方法修改商品的选中状态

       效果：

9、无货商品禁止购买

        1）、购物车页面判断商品数量为0 的时候禁用多选框

         2）、获取商品数据时判断商品数量为0 的时候将默认的选中状态修改为false

        效果：多选框无法选中，并且numbox也无法操作 

10、删除购物车商品

        1）、store目录下的modules底下的shopcart.js 添加 根据商品id删除商品的mutations方法

        2）、   删除按钮绑定点击事件，并且阻止默认行为 

         3）、删除按钮触发的remove方法实现

        效果：

11、底部导航栏购物车选项卡上显示商品数量

        1）、store目录下的modules目录下的shopcart.js增加获取购物车选中商品数量的getters计算属性

        2）、components目录下的TabbarView.vue底部导航栏组件里面通过差值表达式调用getters计算属性 

        效果：

 12、购物车结算模块实现

        1）、页面结构 

         2）、css样式代码

        效果：

           3）、store文件夹下modules文件夹下的shopcart.js增加获取选中商品的getters计算属性

         4）、购物车页面中映射获取选中商品的getters计算属性，并且定义一个计算商品总价的computed计算属性

          5）、页面结构中使用差值表达式调用计算属性获取选中商品数量以及商品总价

        效果：

 13、加入购物车结算动画

        1）、商品详情页添加动画组件

        2）、data中添加ballFlag 默认值为false

         3)、transition绑定三个动画属性函数

        4）、添加动画小球默认样式 

.ball {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     position: absolute;
     background: red;
     z-index: 99;
     left: 132px;
     top: 390px;
     transform: translate(93px, 230px)
}

              5）、加入购物车时修改ballFlag的值让小球展示出来   并且删除加入购物车成功的弹窗提示

       点击加入购物车出现效果：

         6）、components文件夹下的TabbarView.vue底部导航栏组件中给购物车商品数量徽标添加id方便拿到该元素

         7）、开始动画之前，动画开始之后，动画结束之后三个函数实现

       至此动画效果完成！