微信小程序模拟车位选择功能（简陋版本）

功能：实现在线选车位功能

效果图：

//.js文件

const app = getApp();
Page({
    data:{
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      items: [
        { value: '1', checked: "" },
        { value: '2', checked: "" },
        { value: '3', checked: "" },
        { value: '4', checked: "" },
        { value: '5', checked: "" },
        { value: '6', checked: "" },
        { value: '7', checked: "" },
        { value: '8', checked: "" },
        { value: '9', checked: "" },
        { value: '10', checked: "" },
        { value: '11', checked: "" },
        { value: '12', checked: "" },
        { value: '13', checked: "" },
        { value: '14', checked: "" },
        { value: '15', checked: "" },
        { value: '16', checked: "" },
        { value: '17', checked: "" },
        { value: '18', checked: "" },
        { value: '19', checked: "" },
        { value: '20', checked: "" },
        { value: '21', checked: "" },
        { value: '22', checked: "" },
        { value: '23', checked: "" },
        { value: '24', checked: "" },
        { value: '25', checked: "" },
        { value: '26', checked: "" },
        { value: '27', checked: "" },
        { value: '28', checked: "" },
        { value: '29', checked: "" },
        { value: '30', checked: "" },
      ],
      arr: [], //标签数组：用来存储选中的值
    },


 //选择标签方法
 checkLabs(e) {
  var that = this, 

      index = e.currentTarget.dataset.index,//点击的值（字符型）
      value = e.currentTarget.dataset.value,//点击的值
      items = that.data.items,//数组
      arr = that.data.arr,//前一个点击的值
      val = items[index].checked, //点击前值的状态
      limitNum = 1,
      curNum = 0; //已选择数量
      console.log(e)
      // console.log(value)
      // console.log(items)
      // console.log(val)

  //选中累加
  for (var i in items) {
    if (items[i].checked) {
      curNum += 1;
    }
  }
console.log(curNum)
console.log(limitNum)
  if (!val) {
    if (curNum == limitNum) {
      wx.showModal({
        content: '只能选择' + limitNum + '个车位',
        showCancel: false
      })
      return;
    }
    arr.push(value);
  } else {
    for (var i in arr) {
      if (arr[i] == value) {
        arr.splice(i, 1);
      }
    }
  }
  items[index].checked = !val;

  that.setData({
    items: items,
    arr: arr
  })

},

     //默认选中为true的
  selectEd(e){
    var that = this,
      arr = that.data.arr,
      items = that.data.items
    for (var i = 0; i < items.length; i++) {
      if (items[i].checked) {
        var value = items[i].value;
        arr.push(value);
        that.setData({
          items: items,
          arr: arr
        })
      }
    }
  },
    onLoad:function(options){
      // 页面初始化 options为页面跳转所带来的参数
      this.selectEd();
    
    },  
  })

//.wxml文件

<view class="biaoti">一食堂停车场</view>

<view class='the-label'>
  <view class='list'>
    <block wx:for="{{items}}" wx:for-item="v" wx:key="k" wx:for-index="index">
      <view class="li {{v.checked?'cur':''}}" data-index="{{index}}" data-checked="{{items.checked}}" data-value="{{v.value}}" bindtap="checkLabs">
        <image mode="widthFix"
                src="/static/images/icon_3/free.png" style="width: 100rpx; height: 125rpx;"></image>
                <checkbox value="{{item.value}}" data-val="{{item.value}}" hidden='false' checked='{{item.checked}}' />
        <label class='ti'>{{v.value}}
        </label>
      </view>
    </block>
  </view>
</view>

<!-- 这里用来存储选中的标签的值 {{arr}}-->
<view class='seled'>
  <view class='tt'>你当前选中的是：</view>
  <label class='sel-v'>{{arr}}</label>
</view>


<view class="wa">
  <!-- 分割线 -->
  <view class="hr"></view>
  
  <view class="box">
  	<view class="box1">
      <view class="text-center" >总车位</view>
      <view class="text-center" >{{items.length}}</view></view>
  	<view class="box2">
      <view class="text-center" >剩余车位</view>
      <view class="text-center" >25</view></view>
  </view>
  </view>

  <!-- 分割线 -->
  <view class="hr"></view>

<view class="box">
  	<button class="button1" bindtap="tiaozhuan">预约车位</button>
  	<button class="button2" bindtap="tiaozhuan" data-items="{{items}}">查看路线</button>
</view>

//.wxss文件


page{
  height:100%;
  width:100%;
}


/* 选座系统的样式 */
.the-label{ width: 100%; 
background-color: #fff; 
padding: 20rpx 30rpx 40rpx; 
box-sizing: border-box; 
margin-bottom: 20rpx;
align-content: center;}
.the-label .list{ width: 100%; 
overflow: hidden;
 margin-top: 48rpx;}
.the-label .list .li{ padding: 0 10rpx; 
height: 220rpx;
 width: 100rpx; 
 line-height: 60rpx; 
 border: 1px solid #f0f0f0; 
  border-radius: 10rpx; 
overflow: hidden; 
font-size: 35rpx; 
color: #808080; 
float: left; 
margin: 0 10rpx 17rpx 0; 
text-align: center;}
.the-label .list .li.cur{ color: #55beb7; border-color: #55beb7;background-color: #a6ece8;}


.seled{ width: 100%; margin-top: 30rpx; color: #666; font-size: 28rpx; padding: 0 30rpx; box-sizing: border-box;}
.seled .sel-v{ color: #f00; font-weight: 700; font-size: 30rpx; margin-top: 20rpx; }



/* 车位 */
/* label{
  border:0rpx solid #aaaaaa;
  width: 90rpx; height: 120rpx;
  margin:20rpx;
} */
.check {
 display:flex;
 flex-wrap:wrap;
 /* justify-content:space-around; */
 margin:20rpx;
}
.check label {
 width: 90rpx;
 height: 120rpx;
 border-radius: 8rpx;
 /* background-color: #fff;   */
 display: flex;
 align-items: center;
 margin: 0 5rpx;
 justify-content: center;
 /* color: #aaa; */
 margin-top: 20rpx;
 margin: 50rpx 20rpx ;
}
.is_checked {
  background-color: #14a1fd;
  opacity: 0.4;
  color: #fff;
  border: 2rpx solid #fff;
}
.is_checked>checkbox {
 color: red;
}


/* 食堂标题 */
.biaoti{
text-align: center;
font-family: 'blod';
font-size: 55rpx;
padding-bottom: 15rpx;
font-family: cursive;
}
.hr {
width: 100%;
height: 15px;
background-color: #ffffff;
}
.box{
display:flex;
flex-direction:row;
justify-content:flex-start;
font-family: cursive;
}
.box1{
width:100%;
height:100%;
border:1rpx solid #0e0d0d;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.box2{
width:100%;
height:100%;
border:1rpx solid #0e0d0d;
padding-top: 30rpx;
padding-bottom: 30rpx;
}

.text-center{
text-align: center;
}
/*分割线样式*/
.divLine{
background: #E0E3DA;
width: 100%;
height: 5rpx;
}