9-购物清单页

页面框架 屏幕快照 2018-03-08 上午12.08.57.png

分析：数据都是用vuex购物车数据，首先也是需要拿到数据，在组件中引入，然后拿到购物车数据，通过computed获取即可。然后绑定获取的数据。
难点：增加减少数量。其实就是操作的是购物车里面的count属性即可，可以在vuex中写加减的两个方法，然后都是获取ID，通过循环购物车数组，比对ID，然后增减对应的数据的count即可。

功能

1. 购物车加减
2. 删除商品
3. 商品勾选，全选

1 新建组件 ： cart.vue

index.js中引入

import Cart from '@/views/cart'
{
      path: '/cart',
      name: 'Cart',
      component: Cart
}

2 删除商品，增减商品

2-1 首先需要引入购物车数据

 // 引入数据
  import itemsData from '@/lib/newItemsData'
  // 弹窗
  import prompt from '@/components/prompt'

2-2 增减数量功能 ： 在index.js中添加数量增减的方法
牢记： 增加减少数量，你需要控制的是购物车数据中的count属性，并且都是需要比对ID
思路：循环购物车数据，通过比对ID，找到对应的这条数据

  computed: {
      //获取购物车数据
      carPanelData(){
        return this.$store.state.carPanelData
      },
      //总数量
      count(){
        return this.$store.getters.totleCount
      }
    }
    // 商品数量增加按钮
    plusCarPanelData (state,id) {
      state.carPanelData.forEach((goods,index) => {
        if (goods.sku_id === id) {
          if (goods.count >= goods.limit_num) {
            state.maxOff = true
            return
          }
          goods.count++
        }
      })
    },
    // 减少商品数量按钮
    subCarPanelData (state,id) {
      state.carPanelData.forEach((goods,index) => {
        if (goods.sku_id === id) {
          goods.count--
          if (goods.count <= 1) {
            goods.count = 1
          }
        }
      })
    }
======================
 <span class="down"
   :class="{'down-disabled':item.count<=1}" 
  @click="subCarPanelData(item.sku_id)" 
>-</span>
<span class="up" 
  @click="plusCarPanelData(item.sku_id)"
   :class="{'up-disabled':count>=item.limit_num}"
  >+</span>

2-2 删除商品
删除商品的思路 ： 删除购物车的中这条数据。循环购物车数据，然后比对id，删除即可

    delCarPanelData (state,id) {
      // 通过比对ID，如果存在，就删除此条数据
      state.carPanelData.forEach((goods,index) => {
        if (goods.sku_id === id) {
          state.carPanelData.splice(index,1)
          return
        }
      })
    }
===============
// 删除商品
      delCarPanelData(id){
        this.$store.commit('delCarPanelData',id)
      }

3 商品单选

单选分析 ： 商品是否是选中状态，实际上是给这个商品加一个判断的属性，每次加进来购物车肯定是默认是选中状态的，取消之后才改变选中的值，那么在第一次添加的时候给它加一个判断的值。

// 第一次点击添加给数据加checked属性
  Vue.set(goodsData,'checked',true)

在点击select按钮时，将这个属性值取反即可。

// 商品select
    checkGoods (state,id) {
      state.carPanelData.forEach((goods) => {
        if (goods.sku_id === id) {
          goods.checked = !goods.checked
          return
        }
      })
    }
===========
// 商品勾选按钮
      checkGoodsHandel(id){
        this.$store.commit('checkGoods',id)
      }  

4 商品全选触发

思路：涉及到计算，需要放到getters中。在方法中设置一个开关，默认是true，循环购物车数组，如果有一个不是选中的，那么就将开关设置为false。默认返回开关值即可。

 // 全选
    allChecked (state) {
      let allChecked = true
      state.carPanelData.forEach((goods) => {
        if (!goods.checked) {
          allChecked = false
          return
        }
      })
      return allChecked
    }
============
 // computer中 ： 全选
      allChecked(){
        return this.$store.getters.allChecked
      }
============
 <span class="blue-checkbox-new"
  :class="{'checkbox-on':item.checked}" >

4 全选按钮点击

@click="allCheckGoods(allChecked)"
  // vuex :全选按钮
    allCheckGoods (state) {
      state.carPanelData.forEach((goods) => {
        goods.checked = !goods.checked
      })
    }
//组件
allCheckGoods(allChecked){
        this.$store.commit('allCheckGoods')
 }

5 购物详情页商品总数和总额计算

思路 ： 都是先设置一个变量，然后将计算结果返回给这个变量

checkedCount (state) {
  let count = 0
  state.carPanelData.forEach((goods) => {
    if (goods.checked) {
      count += goods.count
    }
  })
return count
 }
 // 购物详情页商品金额计算
    checkedPrice (state) {
      let price = 0
      state.carPanelData.forEach((goods) => {
        if (goods.checked) {
          price += goods.count * goods.price
        }
      })
      return price
    }
==========
 // 商品总数
      checkedCount(){
         return this.$store.getters.checkedCount
      },
      // 商品全额
      checkedPrice(){
        return this.$store.getters.checkedPrice
      }

6 删除选中商品

循环购物车数组，将选中的商品在购物车中删除。用splice方法，第一个参数是删除的下标，第二个参数是删除的数量。

   delCheckedGoods (state) {
      state.carPanelData.forEach((goods,index) => {
        if (goods.checked) {
          state.carPanelData.splice(index,1)
        }
      })
    }

注意 ： 这样写有一个问题！！！！之前面试被问到过！！！！
点击删除4个商品，结果只删除了两个。
原因： splice删除数据的时候是从第一位删除的，当第二次循环进来的时候，数据已经被改变了，所以前进过来的这一项数组就被跳过了。
解决小技巧 ： 正序删除会改变，那么就倒着删除。

 // 删除选中商品
    delCheckedGoods (state) {
      let i = state.carPanelData.length
      // i--：从后往前走
      while (i--) {
        // 如果某一项是选中的
        if (state.carPanelData[i].checked) {
          state.carPanelData.splice(i,1)
        }
      }
    }

这个一个数组删除小技巧，需要牢记！！！

总结：这几个功能我自己一个都没做出来。主要是因为经验不足。

1.勾选商品，效果是如果选中的，点击就成了未选中，反之亦然。首先需要循环购物车数据，比对ID，将checked值取反即可