小程序实现在线选座实战(下)

很抱歉，都到8月10号才更新小程序实现在线选座实战(下)，感谢大家对《小程序实现在线选座实战》的关注。

言归正传，继续我们的在线选座代码实现。回顾一下之前的小程序实现在线选座实战(上)、小程序实现在线选座实战(中)，我们实现了Footer组件和Seat组件，一个正常的选座功能应该还有一个查看已选中座位的列表。下面我们来一起实现最后一个组件：

初始化组件，定义好接口:

var ActionSheet = (function(factory) {
  return factory.call();
}(function() {
  var __CORE__ = {
    init: function() {
      
    },
    // 注册一些监听时间
    onEvent: function() {
    },
    // 打开面板
    open: function() {

    },
    // 关闭面板
    close: function() {

    },
    // 删除已选的座位
    remove: function() {

    },
    // 渲染列表
    render: function() {

    }
  };

  return __CORE__;
}));

上面我搭建好了ActionSheet组件的基本架子，定义好了基本的方法。下面我们各个方法的实现，首先从inti方法开始，这是一个组件初始化方法，里面主要是获取挂载的元素、生产基本组件结构和注册一些监听事件。

...
    init: function(options) {
      var $mask = document.createElement('div');
      var $ul = document.createElement('ul');
      
      $mask.className = 'mask';
      $ul.className = 'ul';

      this.onDeleted = options.onDeleted || function() {};

      this.data = [];
      this.$mask = $mask;
      this.$ul = $ul;
      this.$el = document.querySelector(options.el);
      this.$el.appendChild($mask);
      this.$el.appendChild($ul);
      this.render();
      this.onEvent();
    }
...

上面我们在初始化方法中执行了render()、onEvent()方法，render是渲染组件的方法，onEvent是注册打开和关闭组件，还有删除已选择座位的事件监听，下面我们来看一下render的实现:

    render: function(listData) {
      var data = listData || [];
      var tpl = '';

      this.data = listData ? listData : [];

      data.forEach((item, index) => {
        tpl += '<li class="listItem">' + item.y + '排' + (item.x + 1) + '座' + '<span class="closeBtn" data-index=' + index + '>✕</span></li>';
      });

      if (!data.length) {
        tpl = '<li class="noData">当前没有数据</li>'
      }

      this.$ul.innerHTML = tpl;
    }

render方法的实现比较简单，是根据listData(选中的座位)数据渲染列表，这里给span.closeBtn元素添加了一个data-index，为onEvent中删除当前数据所用。

下面我们实现onEvent方法:

    onEvent: function() {
      var me = this;
      this.$el.addEventListener('click', function (e) {
        var target = e.target;
        var className = target.className;
        var index = -1;
        if (className === 'closeBtn') {
          index = +target.getAttribute('data-index');
          me.remove(index);
        } else if (className === 'mask') {
          me.close();
        }
      });
    }

这里把点击事件委托给了组件容器，通过className判断当前要触发的事件。我们继续实现open、close、remove方法:

   open: function() {
      var currClass = this.$el.className;
      var newClass = currClass + ' open';

      this.$el.className = newClass;
    },
    close: function() {
      var currClass = this.$el.className;
      var newClass = currClass.replace(/open/g, '');
      this.$el.className = newClass;
    },
    remove: function(index) {
      var delSeat = this.data[index];
      this.onDeleted(delSeat);
    },

上面我们已经完成了ActionSheet组件的开发，我们可以在页面的index.js中使用它们了。

// index.js
// 监听document加载完毕才去初始化各个组件
document.addEventListener("DOMContentLoaded", function (e) {
  // 初始化Footer组件
  Footer.init({
    el: '.footer',
    onHandleSure: function(data) {
      console.log('获取选择的座位，提交给服务器', data);
    },
    onClickInfoModule: function(data) {
      console.log('点击了信息模块', data);
      ActionSheet.open();
    },
    /**
     * @description 自定义计算价格
     * @param {array} seatData   选择的座位信息
     * @return {total, count}
     */
    formatData: function(seatData) {
      // 假设座位的价格都相同为56元
      var price = 56;
      var count = seatData.length;
      return {
        count: count,
        total: count * price
      }
    }
  });

  ActionSheet.init({
    el: '.actionSheet',
    onDeleted: function(seat) {
      var id = seat.id
      Seat.removeSeat(id);
    }
  });

  // 初始化选座组件
  Seat.init({
    el: '.main',
    event: {
      onChange: function(selectedData) {
        console.log('删除', selectedData)
        // 给footer设置值，通过Footer初始化的formatData进行格式化数据返回渲染
        Footer.setData(selectedData);
        ActionSheet.render(selectedData);
      }
    }
  });

  // 获取座位图数据
  ajax({
    url: '/seat/data.json',
    method: 'GET'
  })
  .then(function(res) {
    // 根据数据渲染座位表
    Seat.renderSeat(res);
  });
});

总结:

通过上、中、下、我们实现了一个简单的在线选座功能， 除了解决怎么实现选座以外，主要的关注点还会放在如何用JavaScript实现组件。

小程序实现在线选座实战源代码