小程序模拟大巴车在线选择座位

首先上demo地址：

2020/11/02代码迁移至gitee：

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

有一个功能是要求在线选座，像是买火车票买电影票哪种

此教程由花花同学友情赞助（为啥酱紫说 是因为花花写的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个座位，还有其他限制条件 这就需要在从需求出发 不断完善了～