微信小程序picker-view实现今天、明天预约

实现出来的效果大概是这样子的



功能需求：
1、设置的时间段从后台获取（后台获取的数据结构为：startTime:‘09:00’ endTime:‘19:45’）
2、今日如果已经开始则第一行为“尽快送达”，下一时间段为当前时间的下一个小时开始节点
3、时间分钟数为15分钟为一个节点

网上搜了很多都没有搜到相似的例子，只能自己写一个了~~

1、获取后台设置的时间：略
2、判断今日送货时间是否开始
（1）未开始第一列（今天、明天）
（2）开始第一列（今天、明天）
（3）今日已结束第一列（明天）

//判断两个时间点的大小
function compareTimePOint(a,b){
  //a,b  [8,52]即8:52
  //a被比较时间，b为比较时间；即b=[12,0]/[0,0]/[20,0]
  var time1 = Number(a[0]) * 60 + Number(a[1])
  var time2 = Number(b[0]) * 60 + Number(b[1])
  if (time1 > time2){
    return true
  }else{
    return false
  }
}
function stringTime(time){
  if (time<10){
    time='0'+time
  }else{
    time+='';
  }
  return time
}

<picker wx:else class='time-picker' mode="multiSelector"
   bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
   value="{{multiIndex}}" range="{{multiArray}}">
   <view class="time-box">
     {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
   </view>
 </picker>

//初始化
  pickerTap:function(){//赋值初始值
    //时间计算计算计算111111111111
    var that = this;
    
    let timeArr = that.data.timeList
    let startTime = timeArr[0].startTime//后台设置的开始时间
    let endTime = timeArr[0].endTime//后台设置的结束
    let StartTimeArr = startTime.split(":")
    let EndTimeArr = endTime.split(":")

    let settingStartTimeArr = new Array(Number(StartTimeArr[0]),Number(StartTimeArr[1]))
    let settingEndTimeArr = new Array(Number(EndTimeArr[0]),Number(EndTimeArr[1]))

    var date = new Date();
    let currentHours = date.getHours()
    let currentMinites = date.getMinutes()    
    let currentTimeArr = new Array(currentHours,currentMinites)
    
    var days;//今日、明日列表
    var arrs; 
    if(compareTimePOint(currentTimeArr,settingStartTimeArr)){
      //今天开始时间已经过了
      if(compareTimePOint(currentTimeArr,settingEndTimeArr)){
        //今日结束时间已经过了，那就只有明日
        days = ['明日']
        arrs = that.setHours(2,currentHours,currentMinites)
      }else{
        //今日结束时间没过，那就有今日明日
        days = ['今日','明日']
        arrs = that.setHours(1,currentHours,currentMinites)//今日已经开始，但是没有结束
      }
    }else{
      //今日还没有开始
      days = ['今日','明日']
      arrs = that.setHours(3,currentHours,currentMinites)//今日，明日两天
    }
    
     var data = {
       multiArray:that.data.multiArray
     }
     data.multiArray[0] = days
     data.multiArray[1] = arrs[0]
     data.multiArray[2] = arrs[1]
     that.setData(data)
  },
  setHours:function(num,currentHours,currentMinites){
    const that = this
    let timeArr = that.data.timeList
    let multiIndex = that.data.multiIndex

    let startTime = timeArr[0].startTime//后台设置的开始时间
    let endTime = timeArr[0].endTime//后台设置的结束

    let settingStartTimeArr = startTime.split(":")
    let settingEndTimeArr = endTime.split(":")

    let settingStartHour = Number(settingStartTimeArr[0])//后台设置的开始小时
    let settingstarttMinutes = Number(settingStartTimeArr[1])//后台设置的开始分钟

    let settingEndtHour = Number(settingEndTimeArr[0])//后台设置的开始小时
    let settingEndtMinutes = Number(settingEndTimeArr[1])//后台设置的结束分钟

    let hours = []
    let minutes = []
    if(num==1){//今日已经开始，但是没有结束
      if(multiIndex[0]==0){//如果是选择的是今日，则分钟列第一位是“立即送达”
        hours.push('尽快取件')
        for (let i = currentHours+1,j=0; i <= settingEndtHour; i++,j++) {
          hours.push(stringTime(currentHours+1+j)+'点')
        }
        minutes = []
      }else{//如果选择的是明日
        for (let i = settingStartHour,j=0; i <= settingEndtHour; i++,j++) {
          hours.push(stringTime(settingStartHour+j)+'点')
        }
        for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
          minutes.push(stringTime(n)+'分')
        }
      }
    }else{//只有明日，或者今日、明日两天都没开始
      if(Math.ceil(settingstarttMinutes/15)==4){
        for (let i = settingStartHour+1,j=0; i <= settingEndtHour; i++,j++) {
          hours.push(stringTime(settingStartHour+1+j)+'点')
        }
        minutes.push(stringTime(0)+'分')
      }else{
        for (let i = settingStartHour,j=0; i <= settingEndtHour; i++,j++) {
          hours.push(stringTime(settingStartHour+j)+'点')
        }
        for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
          minutes.push(stringTime(n)+'分')
        }
      }
    }
    return new Array(hours,minutes);
  },
  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },

  bindMultiPickerColumnChange:function(e){
    // onsole.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var that = this;
    let timeArr = that.data.timeList

    let startTime = timeArr[0].startTime//后台设置的开始时间
    let endTime = timeArr[0].endTime//后台设置的结束

    let settingStartTimeArr = startTime.split(":")
    let settingEndTimeArr = endTime.split(":")

    let settingStartHour = Number(settingStartTimeArr[0])//后台设置的开始小时
    let settingstarttMinutes = Number(settingStartTimeArr[1])//后台设置的开始分钟

    let settingEndtHour = Number(settingEndTimeArr[0])//后台设置的开始小时
    let settingEndtMinutes = Number(settingEndTimeArr[1])//后台设置的结束分钟
    

    var date = new Date();
    let currentHours = date.getHours()
    let currentMinites = date.getMinutes()    
    let currentTimeArr = new Array(currentHours,currentMinites)

    var currentType;
    var data = {
      multiArray: that.data.multiArray,
      multiIndex: that.data.multiIndex
    };

    var days = []
    var hours = []
    var minutes = []

    data.multiIndex[e.detail.column] = e.detail.value;
 
    switch (e.detail.column) {
      case 0://第1列改变
        if(compareTimePOint(currentTimeArr,settingStartTimeArr)){
          //今天开始时间已经过了
          if(compareTimePOint(currentTimeArr,settingEndTimeArr)){
            //今日结束时间已经过了，那就只有明日
            currentType = 0
          }else{
            //今日结束时间没过，那就有今日明日
            currentType = 1
          }
        }else{
          //今日还没有开始
          currentType = 2
        }
        switch (currentType){
          case 0://今日结束时间已经过了，那就只有明日
            days = ['明日']
            if(Math.ceil(settingstarttMinutes/15)==4){
              for (let i = settingStartHour+1,j=0; i <= settingEndtHour; i++,j++) {
                hours.push(stringTime(settingStartHour+1+j)+'点')
              }
              for (let j = 0; j < 4; j++) {
                minutes.push(stringTime(j*15)+'分')
              }
            }else{
              for (let i = settingStartHour,j=0; i <= settingEndtHour; i++,j++) {
                hours.push(stringTime(settingStartHour+j)+'点')
              }
              for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
                minutes.push(stringTime(n)+'分')
              }
            }
            break;
          case 1://今日结束时间没过，那就有今日明日
            days = ['今日','明日']
            if(e.detail.value==0){
              hours.push('尽快送达')
              for (let i = currentHours+1,j=0; i <= settingEndtHour; i++,j++) {
                hours.push(stringTime(currentHours+1+j)+'点')
              }
            }else{
              if(Math.ceil(settingstarttMinutes/15)==4){
                for (let i = settingStartHour+1,j=0; i <= settingEndtHour; i++,j++) {
                  hours.push(stringTime(settingStartHour+1+j)+'点')
                }
                for (let j = 0; j < 4; j++) {
                  minutes.push(stringTime(j*15)+'分')
                }
              }else{
                for (let i = settingStartHour,j=0; i <= settingEndtHour; i++,j++) {
                  hours.push(stringTime(settingStartHour+j)+'点')
                }
                for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
                  minutes.push(stringTime(n)+'分')
                }
              }
            }
            break;
          case 2://今日还没有开始
            days = ['今日','明日']
            if(Math.ceil(settingstarttMinutes/15)==4){
              for (let i = settingStartHour+1,j=0; i <= settingEndtHour; i++,j++) {
                hours.push(stringTime(settingStartHour+1+j)+'点')
              }
              for (let j = 0; j < 4; j++) {
                minutes.push(stringTime(j*15)+'分')
              }
            }else{
              for (let i = settingStartHour,j=0; i <= settingEndtHour; i++,j++) {
                hours.push(stringTime(settingStartHour+j)+'点')
              }
              for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
                minutes.push(stringTime(n)+'分')
              }
            }

            break;
        }
        // data.multiArray[0] = days
        data.multiArray[1] = hours
        data.multiArray[2] = minutes
        data.multiIndex[1] = 0
        data.multiIndex[2] = 0
        break;
      case 1://第2列改变
        if(compareTimePOint(currentTimeArr,settingStartTimeArr)){
          //今天开始时间已经过了
          if(compareTimePOint(currentTimeArr,settingEndTimeArr)){
            //今日结束时间已经过了，那就只有明日
            currentType = 0
          }else{
            //今日结束时间没过，那就有今日明日
            currentType = 1
          }
        }else{
          //今日还没有开始
          currentType = 2
        }
        switch (currentType){
          case 0://今日结束时间已经过了，那就只有明日
            days = ['明日']
            if(data.multiIndex[1]==0){//如果是选择的第一列，那么就从开始时间算起
              for (let n = Math.ceil(settingstarttMinutes/15)*15; n < 60; n+=15) {
                minutes.push(stringTime(n)+'分')
              }
            }else if(data.multiIndex[1]==(data.multiArray[1].length-1)){
              for (let m = 0; m <= settingEndtMinutes; m+=15) {
                minutes.push(stringTime(m)+'分')
              }
            }else{
              for (let j = 0; j < 4; j++) {
                minutes.push(stringTime(j*15)+'分')
              }
            }
            break;
          case 1://今日结束时间没过，那就有今日明日
            days = ['今日','明日']
            if(data.multiIndex[0]==0&&data.multiIndex[1]==0){//选择的立即送达

            }else{//不是立即送达
              if(data.multiIndex[1]==(data.multiArray[1].length-1)){
                for (let m = 0; m <= settingEndtMinutes; m+=15) {
                  minutes.push(stringTime(m)+'分')
                }
              }else{
                for (let j = 0; j < 4; j++) {
                  minutes.push(stringTime(j*15)+'分')
                }
              }
            }
            break;
          case 2://今日还没有开始
            days = ['今日','明日']
            if(data.multiIndex[1]==0){//如果是选择的第一列，那么就从开始时间算起
              minutes.push(stringTime(0)+'分')
            }else if(data.multiIndex[1]==(data.multiArray[1].length-1)){//最后一个截止时间
              for (let m = 0; m <= settingEndtMinutes; m+=15) {
                minutes.push(stringTime(m)+'分')
              }
            }else{
              for (let j = 0; j < 4; j++) {
                minutes.push(stringTime(j*15)+'分')
              }
            }
            break;
        }
        data.multiArray[2] = minutes
        data.multiIndex[2] = 0
        break;
    }
    this.setData(data);
  },

我这个方法太粗糙了，有更好的方法望留下链接呀~

才发现错了一个文字，（立即/尽快 两个字错了）