微信小程序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);
  },

我這個方法太粗糙了，有更好的方法望留下鏈接呀~

才發現錯了一個文字，（立即/儘快 兩個字錯了）