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

前言

首先来简单说明下此微信小程序项目实现的购物车功能。

第一步：需要先选择座位加入已选座位列表（相当于选择商品加入购物车列表），

第二步：在已选座位列表页面进行座位勾选，可以全选、单选，也可以对座位进行删除，

第三步：勾选好选择的座位后跳转到订单确认页面，填写用户相关信息，填写完成后，点击确定按钮跳转订单支付页面

第四步：订单支付页面展示订单详细信息，勾选订座协议，走支付流程。

选择座位，加入座位列表（座位可以多选）

点击可选座位，座位变成被勾选的状态，再点击该座位可以取消勾选。

控制座位是否选中的状态，可以在一开始请求的座位数据上加上一个是否选中的属性is_chose，一开始该属性默认为false。因为每个座位数据都是一个对象，因此可以使用Object.assign方法合并座位数据和is_chose属性组成的对象。

$api.seatList(data)
      .then(res => {
        let tableLists = res.data.seatList
        tableLists.forEach(item => {
          Object.assign(item, {
            is_chose: false
          })
        })
        this.setData({
          tableLists,
        })
      })
      .catch(err => {
        if (err.code == 202) {
          wx.showToast({
            icon: 'none',
            title: err.msg
          })
        }
      })

点击选择座位，先判断座位是否已经被预订，如果没有，就循环座位数据判断每个座位的id和点击座位事件传递的id是否一致，相同的话。判断该座位的选中状态是否选中，如果选中，就改变该座位的is_chose属性为false，反之则变为true，并改变座位相关信息

这里选择座位，改变座位的选中状态，然后处理座位相关的信息（像座位的号码，价格，可容纳人数等）都搞了好久，实现的时候逻辑没理清楚，就开始写了，完全是一句一句代码试出来的，太菜了，不熟悉的语法还得百度一半天。
处理座位的信息：主要是每次选中座位需要加上之前选座的信息数据，取消选中座位需要去除该座位的信息数据。如座位号，选中座位就把当前点击的座位号加上data中定义的座位号（data中的座位号数据，每点击一次，就更新一次该数据，就保留了之前点击选中的座位号）；取消选中座位就把data中的座位号数据中的该座位号使用空字符串替代，就去掉了该座位号

toChoseSeat(e) {
    const dataset = e.currentTarget.dataset
    // is_scheduled为0，表示没有被选择
    if (dataset.item.is_scheduled == 0) {
      let tableLists = this.data.tableLists
      let tableNum;
      tableLists.forEach(item => {
        if (item.id == dataset.item.id) {
          if (item.is_chose) {
            Object.assign(item, {
              is_chose: false
            })
            tableNum = this.data.tableNum.replace(`${dataset.item.seat_num},`, '');
          } else {
            Object.assign(item, {
              is_chose: true
            })
            tableNum = this.data.tableNum + dataset.item.seat_num + ','
          }
        }
      })
      let newNumtableNum = tableNum.substring(0, tableNum.length - 1)
      this.setData({
        tableNum,
        newNumtableNum,
        tableItem: dataset.item,
        tableLists,
      })
    }
  },

选择好座位之后，点击底部的“加入已选座位”按钮，请求加入购物车接口，并将相关参数传给后台，请求接口成功后，就加入了已选座位列表，这样加入购物车的类似功能就差不多实现了