小程序：模擬大巴車在線選擇座位

首先上demo地址：https://github.com/AloneYan/WeChat-SeatSelection

 

最近公司接了新項目 就有新需求啦

有一個功能是要求在線選座，像是買火車票買電影票哪種

此教程由花花同學友情贊助（爲啥醬紫說 是因爲花花寫的demo 我寫教程～）

 

一個很醜的demo如下圖所示！！（爲啥這麼醜-。-不應該呀）

 

 

下面就開始實現它了
具體部分的實現請看圖片中的註釋部分，或者直接聯繫me

<wxs src="./util.wxs" module="tools" /> <!-- 自定義過濾器 -->
<view class='box'>
  <view class='content'>紅色：已選擇 /  綠色：正在選擇</view>
  <view wx:for="{{seats}}"  wx:for-item="seat" wx:key="index"><!-- 兩層循環 -->
    <view wx:for="{{seat}}" 
          wx:key='index'
          wx:for-index="idx" 
          wx:for-item="item" 
          class="{{( tools.fn(myselectSite, item.num).indexOf?'active':item.userInfo!=null?'used':'seat')}}" 
          style="{{idx%2!==0&&'margin-right:40rpx'}}"
          bindtap='selctedSite' 
          data-num='{{item.num}}'
          data-used='{{item.userInfo==null}}'><!-- 根據不同的判斷定義class，綁定點擊事件，傳輸數據 -->
     {{item.num}}
    </view>
  </view>
  <view class='content'>您選擇了：{{myselectSite}}</view><!-- 展示選擇的座位號 -->
</view>

js部分：

Page({
  data: {
    //模擬假數據
    seats: [
      { num: 1, userInfo: { uid: 20190101, name: '閻閻' } },
      { num: 2, userInfo: { uid: 20190101, name: '閻閻' } },
      { num: 3, userInfo: { uid: 20190102, name: '花花' } },
      { num: 4, userInfo:null},
      { num: 5, userInfo: { uid: 20190103, name: '仙球' } },
      { num: 6, userInfo: { uid: 20190104, name: '亮亮' } },
      { num: 7, userInfo: null },
      { num: 8, userInfo: null },
      { num: 9, userInfo: null },
      { num: 10, userInfo: null },
      { num: 11, userInfo: null },
      { num: 12, userInfo: { uid: 20190102, name: '花花' } },
      { num: 13, userInfo: null },
      { num: 14, userInfo: null },
      { num: 15, userInfo: null },
      { num: 16, userInfo: null }
    ],
    myselectSite:[]
  },

  //重組數據-分爲四個一組
  reSetData(dataList,num) {
    let arr = [];
    let len = dataList.length;
    for (let i = 0; i < len; i += num) {
      arr.push(dataList.slice(i, i + num));
    }
    return arr;
  },

  //移除選擇的座位
  remove (arr,val) {
    var index = arr.indexOf(val);
    if (index > -1) {
      arr.splice(index, 1);
    }
  },

  //選擇座位
  selctedSite(e){
    let { myselectSite } = this.data;
    const param = e.target.dataset;
    const { num, used } = param;
    if (!used) { return  false};
    if (myselectSite.indexOf(num)===-1){
      myselectSite.push(num)
    }else{
      this.remove(myselectSite,num)
    }
    this.setData({ myselectSite })
  },

  onLoad: function (options) {
    let { seats } = this.data;
    let temp = this.reSetData(seats,4)
    this.setData({ seats: temp })
  }
})

util.wxs文件——過濾器  （這個文件就相當與在前臺試用的js  之前我有寫過這種過濾器的教程哦）

function fn(arr, arg) {
  var result = {
    indexOf: false,
    toString: ''
  }
  result.indexOf = arr.indexOf(arg) > -1;
  result.toString = arr.join(","); return result;
}
module.exports.fn = fn;

css文件（這個不重要 畢竟我寫的樣式超級難看）

.box{
  width: 240px;
  margin:20rpx auto; 
  padding-left:-40rpx;
}


/* 這裏還是有點重要的 */
.seat,.used,.active{
  display: inline-block;
  width: 70rpx;
  margin:10rpx;
  text-align: center;
}
.seat{
  background-color: gainsboro;
}
.used{
  background-color: red;
}
.active{
  background-color: green;
}


.content{
  font-size: 30rpx;
  padding:40rpx 0;
}

 

 

當然這只是一個簡單的實現思路
現實的大客車還有許多例外 比如說最後一排一般會有5個座位，還有其他限制條件
這就需要在從需求出發 不斷完善了～