微信小程序简单实现购物车功能（二）-灵析社区

全选、单选、删除操作

该项目的已选座位列表页面中的选择框需要自定义样式，因此没有使用微信小程序自带的 checkbox 组件。

选择框有三种状态样式，默认是没有选中的状态，一种是选中状态，另一种是禁止选择的状态，这两种状态也是根据类名控制，实现方法和跟上一篇文章的类似，因此选中状态也使用了属性is_chose控制类名；禁用状态使用属性is_reserve控制，根据座位列表数据中的座位是否已经被预订来设置属性is_reserve为真。

getCartData() {
    $api.cartLists()
      .then(res => {
        let seatLists = res.data.list
        seatLists.forEach(item => {
          Object.assign(item, {
            is_chose: false
          })
          item.detail.forEach(it => {
            if (it.is_scheduled == 1) {
              Object.assign(item, {
                is_reserve: true
              })
            }
          })
        })

        this.setData({
          seatLists,
        })
      })
      .catch(err => {
        ...
      })
  },

a. 全选操作

使用变量isall控制类名改变样式，默认值为false。点击全选按钮，判断变量isall是否为真，如果真，就改变座位列表的座位的属性is_chose为false，并且设置变量isall为假，反之则相反设置

当全选按钮选中时，还需要计算所有可预订座位的价格总和，加上所有座位的id，并改变data中相应的值。取消全选，则清空座位id和总价

allSelect() {
    let seatLists = this.data.seatLists
    if (this.data.isall) {
      seatLists.forEach(item => {
        Object.assign(item, {
          is_chose: false
        })
      })
      this.setData({
        isall: false,
        seatLists,
        total_price: 0,
        cartId: []
      })
    } else {
      let total_price = 0
      let cartId = []
      seatLists.forEach(item => {
        item.detail.forEach(it => {
          if (it.is_scheduled == 0) {
            Object.assign(item, {
              is_chose: true
            })
            total_price = (parseFloat(total_price) + parseFloat(it.total_price)).toFixed(2)
            cartId.push(item.id)
          }
        })
      })
      this.setData({
        isall: true,
        seatLists,
        total_price,
        cartId
      })
    }
  },

b. 单选操作

首先判断通过自定义属性传递的参数reserve是否为真，为真，表示该座位已经预订，直接return出去，不能进行选择了。
没有预订，就循环所有座位数据，判断每个座位的id和单选点击的id是否一致，如果一致就改变单选按钮的状态；当所有座位中有一个座位的属性is_chose为false，就取消全选，控制全选按钮的变量isall为false。

同时设置一个变量num为0，当循环所有座位数据，当前座位的属性is_chose为真时，num++，在循环之后对比该变量和座位数据的长度是否相等，如果相等，控制全选按钮的变量isall为true。

toSelect(e) {
    let id = e.currentTarget.dataset.id;
    // 购物车的座位
    let is_reserve = e.currentTarget.dataset.reserve;
    let seatLists = this.data.seatLists;
    let num = 0;
    if (is_reserve) {
      wx.showToast({
        icon: 'none',
        title: '该座位已预订'
      })
      return false;
    }
    // 循环所有座位，如果当前id和单选点击id一致，就改变单选按钮的状态
    seatLists.forEach(item => {
      if (id == item.id) {
        // 改变单选按钮的状态
        item.is_chose = !item.is_chose
        if (item.is_chose == false) {
          this.setData({
            isall: false,
          })
        }
      }
      if (item.is_chose) {
        num++;
      }
    })
    if (num == seatLists.length) {
      this.setData({
        isall: true,
      })
    }
    this.setData({
      seatLists
    })
    this.calculateTotal()
  },

c. 计算座位的总价格函数，并在每一次单选点击时调用该函数

定义总价变量为0、座位id变量为空数组。循环data中的座位数据，当当前座位是选中的，并且是没有被预订，就改变总价（加上当前座位价格），座位id加上当前座位id。

calculateTotal: function () {
    let dataSeats = this.data.seatLists
    let total_price = 0
    // 勾选的座位的id
    let cartId = [];
    dataSeats.forEach(item => {
      if (item.is_chose) {
        item.detail.forEach(it => {
          if (it.is_scheduled == 0) {
            total_price = (parseFloat(total_price) + parseFloat(it.total_price)).toFixed(2)
            cartId.push(item.id)
          }
        })
      }
    })

    this.setData({
      total_price,
      cartId
    })
  },

d. 删除操作

可以全选座位，进行一次性删除，也可以删除每个座位数据。请求删除接口，传座位id给后台，请求成功，就删除成功了，同时删除成功后，重新请求座位数据。

toDelete(e) {
  // 座位id会重复（因为每个座位数据的可能包含多个座位，并且需要判断每个座位没有被预订，才加入座位id,所以会造成座位id重复），Array.from(new Set())去除重复数字
  let cartId = Array.from(new Set(this.data.cartId))
  if (cartId.length != 0) {
    $api.delCart({
        cart_id: cartId.toString()
      })
      .then(res => {
        wx.showToast({
          icon: 'none',
          title: '删除成功'
        })

        setTimeout(() => {
          this.getCartData()
        }, 1000)
      })
      .catch(err => {
        ...
      })
  } else {
    wx.showToast({
      icon: 'none',
      title: '请选择座位！'
    })
  }
 },