小程序在线选座实现

1、先来张效果图

QQ图片20200806095753.png

2、创建绘制座位网格方法

{
    const createGrid = (row = 12, col = 8) => {
        let seatArr = Array.from({ length: row });
        let obj = {};
        let src = "no";
        for (let i = 0; i < row; i++) {
            seatArr[i] = [];
            for (let j = 0; j < col; j++) {
                obj.id = `${i+1}_${j+1}`;
                obj.src = src;
                seatArr[i][j] = obj;
                obj = {}
            }
        }
        return seatArr
    }
}

3、初始化网格并配置需要展示的座位数

  initSeat(){
    const grid =  this.createGrid();
    const select = [
      '1_4','1_5','1_6','1_7',
      '2_1',
      '3_1','3_3','3_4','3_5','3_6','3_7',
      '4_1','4_3','4_4','4_5','4_6','4_7',
      '6_3','6_4','6_5','6_6','6_7',
      '7_3','7_4','7_5','7_6','7_7',
      '9_4','9_5','9_6',
      '10_4','10_5','10_7','10_8',
      '11_4','11_5','11_7','11_8',
      '12_5','11_7','11_8'
    ];
    grid.forEach(item=>{
        item.forEach(sub=>{
            select.forEach(v=>{
                if(sub.id === v){
                    sub.src = 'seat.png'
                }
            })
        })
    });
    this.setData({
      seatArr:grid
    })
  },

4、在小程序页面循环取数据

        <block wx:for="{{seatArr}}" wx:for-item="items" wx:for-index="id" wx:key="this">
          <view class='view-seat-location'>
            <block wx:for="{{items}}" wx:for-item="item" wx:for-index="id1" wx:key="this">
              <block wx:if="{{item.src == 'no'}}">
                <view class='view-seat-img'></view>
              </block>
              <block wx:else>
                <image class='view-seat-img' mode="scaleToFill" src="img/{{item.src}}" bindtap='bindGetLocation' data-x="{{id}}" data-y="{{id1}}" data-src='{{item.src}}'></image>
              </block>
            </block>
          </view>
        </block>