项目第二天购物车

一。点击购物车存放在本地
1.给添加购物车按钮绑定一个监听@click事件
2.发送请求
3.在发送请求里创建一个对象来存储加入购物车需要的字段，字段看购物车页面里有什么，然后根据请求数据打印出来的添加，比如下面的代码

let tempObj = {
            id: this.id,
            title: this.goodsDesc.title,
            price: this.goodsDesc.sell_price,
            img: 'res.message.thumb_path',
            selectState: true,
            num: 1
          }    //写在请求数据中

4.先从localStorage里拿到购物车的数据，然后再看当前要添加的商品ID有没有存放在里面，如果有直接给那个商品的num+1，如果没有就存到本地中

 let cartlist = JSON.parse(localStorage.getItem('cartlist') || '[]')   //因为本地存储的都是字符串，所以先把它转出对象

5.findIndex方法会去数组中找满足条件的数组项的索引，如果找到就返回数组项在数组中对应的索引值，如果没有找到就返回-1

let idx = cartlist.findIndex(item => item.id === this.id)
          if (idx === -1) {
            // 不存在就直接存到数组中
            cartlist.push(tempObj)
            localStorage.setItem('cartlist', JSON.stringify(cartlist))
          } else {
            // 给找到的那个数组项中的num + 1
            cartlist[idx].num += 1
            localStorage.setItem('cartlist', JSON.stringify(cartlist))
          }

---

二。购物车页面结算
1.先将本地存储中的数据取出来放到页面中

 created () {
    // 1.先将本地存储中的数据取出来放到页面上
    this.cartlist = JSON.parse(localStorage.getItem('cartlist') || '[]')
  }
return {
      cartlist: []
    }

2.渲染

 <div class="empty-cart" v-if="cartlist.leght===0">
 <div class="cart-container" v-else>
然后循环要循环的

3. 搜狗截图20181019225343.png

3.1在data外面定义一个计算函数

 computed: {
  //  2.创建获取结算总数量的计算属性
    totalNum () {
      let total = 0
      return total
    }
  }
结算（{{totalNum}}）   //记得在结算结构中加上这些

3.2增加结算那里的数字

  // 1.2.1 循环数组，将数组中selectState为true的那些项的num取出来，加给total这个变量
      this.cartList.map(item => {
        if (item.selectState) {
          total = total + item.num
        }
 })

4. 02.png

跟3.1一样写在计算属性中

totalPrice () {
      let price = 0
      // 1.3.1 循环数组，将数组中selectState为true的那些项的总价取出来，加给price这个变量
      this.cartList.map(item => {
        if (item.selectState) {
          price = price + item.num * item.price
        }
      })
      return price
    }

5.给是否选中按钮添加点击事件，切换其选中状态

<span class="iconfont toogle" :class="item.selectState ? 'icon-checkbox-marked-circ' : 'icon-checkbox-blank-circle-outline'" @click="toggleState(index)"></span>

5.1定义方法

methods: {
    // 切换选中状态
    toggleState (idx) {
      // 1.4 根据索引切换数组项中的选中状态
      this.cartList[idx].selectState = !this.cartList[idx].selectState
    }}

6.创建一个是否能够全选的计算属性

    isSelectAll () {
      // 循环数组，只要有一个为false，那就将这个计算属性设置为false
      let slectAll = true
      this.cartList.map(item => {
        if (item.selectState === false) {
          slectAll = false
        }
      })
      return slectAll
    }

6.1根据计算属性isSelectAll动态添加全选的样式

 <span class="iconfont toogle" :class="isSelectAll ? 'icon-checkbox-marked-circ' : 'icon-checkbox-blank-circle-outline'"></span>

6.2给全选按钮绑定事件，点击时让它全选

//  全部选中
    handleSelectAll () {
      // 1.9 将isSelectAll 用一个变量缓存起来
      let isAll = this.isSelectAll
      this.cartList.map(item => {
        item.selectState = !isAll
      })
    }

三.商品的增加和减少
1.给相加相减添加函数

@click="handleNum(index, -1, 'minus')  //减的加‘minus’

2.函数

 handleNum (index, count, type) {
      // 根据索引找到操作的那一项，将传递进来的num加给对应数组项的num
      // 当在操作减数量的时候，如果num为1，要将这一项删掉
      if (this.cartList[index].num === 1 && type === 'minus') {
        MessageBox.confirm('确定执行此操作?').then(action => {
          // 点击确定，删除那一项
          this.cartList.splice(index, 1)
          return false
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.cartList[index].num += count
      }
    }

四。购物车数量
1.在底部导航那个组件中，定义一个计算属性

computed: {
      totalNum () {
        let total = 0
        // 1.2.1 循环数组，将数组中selectState为true的那些项的num取出来，加给total这个变量
        this.cartlist.map(item => {
          if (item.selectState) {
            total = total + item.num
          }
        })
        return total
      }
    }

2.在结构数量那里插值

{{totalNum}}

3.将本地存储的数据拿到页面中来

// 这里不能用created，因为在cart组件中beforeDestroy要晚,用mounted
created () {
    // 1.先将本地存储中的数据取出来放到页面上
    this.cartlist = JSON.parse(localStorage.getItem('cartlist') || '[]')
  }

4.在data中定义一个空的数组

cartlist:[]

5.在cart组件中

// 在beforeDestroy生命周期函数中，统一处理更新后的数据，将他们更新到本地中
  beforeDestroy () {
    localStorage.setItem('cartlist', JSON.stringify(this.cartlist))
  }

五。商品详情的购物车数量

定义一个计算属性//
 computed: {
    totalNum () {
      let total = 0
      // 1.2.1 循环数组，将数组中selectState为true的那些项的num取出来，加给total这个变量
      this.cartlist.map(item => {
        if (item.selectState) {
          total = total + item.num
        }
      })
      return total
    }
  }

2.在相应的地方插值

{{totalNum}}

3.在findIDex方法中

this.cartlist.push(tempObj)   //如果没有就存进去
this.cartlist[idx].num += 1   //如果有就+1