【小程序】未来七天日期，30分钟时间段

时间上的处理

有段时间没弄小程序了，现在又来堆点低级问题处理，需求如下，预定类型小程序的一个页面，之前很少会计算time，应为都是后台返回，但是这次有点特殊，后台不好弄，我就全权接下呗，不怕需求难，就怕需求多啊。

状态的简单管理，可选，不可选，选中
上面是更具当天得出未来七天日期
下面是固定时间段，选中后增加半小时，取消后恢复

给看客老爷上图

这里写图片描述

一：选择状态的处理

从图中就可以看到有3中状态，我用的0,1,2来设置状态；0：可选，1：选中，2：不可选（被他人选完了）

时间分为上下午，所以我分成了2个数组，也是为了view里面好wx:for。（时间是固定的这十几个）
这里写图片描述
状态2是不可选,直接修改css

.cannotchoos{
  background: #E5E5E5;
  border-radius: 4px;
  pointer-events: none;
}

状态0,1切换

<view class="weui-tab__content">
                    <view class='am today'>
                      <text class='title'>上午</text><text class='space-time'>9:00 ~ 13:00</text>
                      <view class='time-List'>
                        <view class="time {{item.chooseBol == 1 ? 'allowchoos' : item.chooseBol == 2 ? 'cannotchoos' : ''}}" wx:for='{{timesAm}}' wx:key='index' data-id='{{item.id}}' data-text='{{item.time}}' bindtap='choose'>
                          {{item.time}}
                        </view>
                      </view>
                    </view>
                    <view class='pm today'>
                      <text class='title'>下午</text><text class='space-time'>13:00 ~ 19:00</text>
                      <view class='time-List'>
                        <view class="time {{item.chooseBol == 1 ? 'allowchoos' : item.chooseBol == 2 ? 'cannotchoos' :  ''}}" wx:for='{{timesPm}}' wx:key='index' data-id='{{item.id}}' data-text='{{item.time}}' bindtap='choose'>
                          {{item.time}}
                        </view>
                      </view>
                    </view>

choose:function (e) {
    var id = e.currentTarget.dataset.id-1     
    var arr = this.data.times
    var index = arr.indexOf(e.currentTarget.dataset.id)    // 搜索数组中是否有选中的id，有就删除，反之添加
    if (id < 8) {
      this.data.timesAm[id].chooseBol = 1
    } else {
      this.data.timesPm[id - 8].chooseBol = 1
    }
    if (index != -1) {
      arr.splice(index, 1)
      if (id < 8) {
        this.data.timesAm[id].chooseBol = 0
      } else {
        this.data.timesPm[id - 8].chooseBol = 0
      }
    } else {
      arr.push(e.currentTarget.dataset.id)
    }
    arr.sort(function (num1, num2) {    // 从小到大排序
      return num1 - num2
    })
    this.setData({
      times: arr,
      timesAm: this.data.timesAm,
      timesPm: this.data.timesPm
    })
  },

二：未来七天

这里写图片描述

// 处理未来七天的函数
  dealTime: function (num) {     // num：未来天数
	var time = new Date()     // 获取当前时间日期
    var date = new Date(time.setDate(time.getDate() + num)).getDate()  //这里先获取日期，在按需求设置日期，最后获取需要的
    var month = time.getMonth() + 1   // 获取月份
    var day = time.getDay()   //  获取星期
    switch (day){             //  格式化
      case 0: day = "(周七)"
        break
      case 1: day = "(周一)" 
        break
      case 2: day = "(周二)"
        break
      case 3: day = "(周三)"
        break
      case 4: day = "(周四)" 
        break
      case 5: day = "(周五)"
        break
      case 6: day = "(周六)"
        break
    }
    var obj = {
      date: date,
      day: day,
      month: month
    }
    return obj      // 返回对象
  }

在onload中循环调用，获取未来7天

onLoad: function (options) {
    var that = this;
    var arr = []
    for (let i = 0; i < 7; i++) {
      arr.push(this.dealTime(i))
    }
    arr[0].date = '今天'     // 格式化当前日期为 '今天'
    arr[0].day = ''
    this.setData({
      aWeek: arr            // 赋值给data
    })
  },

最后得到：
这里写图片描述

三：选择指定时间，增加30分钟间隔

30分钟时间间隔，是当选中可选中的时间之后，显示出当前时间~时间+30,就像这样：
这里写图片描述 ====>

 // 换算时间 将选取的时间 都增加30分钟
    var text = e.currentTarget.dataset.text  // 获取选中的时间字符串
    var time = new Date(new Date().toDateString() + ' ' + text)   // 将选中的时间字符串拼接到日期上 获取这个时间日期
    var newtime = new Date(time.setMinutes(time.getMinutes() + 30)).toTimeString().replace(/[\u4e00-\u9fa5]/g, '')  // 设置时间30分钟 在正则去除
    newtime = newtime.slice(0, newtime.lastIndexOf(':'))  //筛选去掉秒

然后放入到上面状态管理的那个choose的函数中即可，相信有人会有更好的办法，还往大牛指导