<template>
  <view class="reserve-time-box">
    <view class="title">选择时间</view>

    <view class="date-box">
      <view class="date-scroll-box" :style="{ 'width' : `${dataTimeWidth}rpx` }">
        <view class="date-item" v-for="(item,index) of dateList"
          :class="dateCurrent == index ? 'act-first-date-time-item' : '' " @click="selectDateItem(item,index)">
          <view class='name'>{{ index == 0 ? '今天' : `周${item.week}`  }}</view>
          <view class='date'>{{ item.date }}</view>
        </view>
      </view>
    </view>

    <view class="time-box">
      <view v-for="(item,index) of timeList" :key='index' class='time-item'
        :class="[!item.isExpire ? 'expire-time-item' : '' , timeCurrent == index ? 'act-first-date-time-item' : '' ]"
        @click='SelectTimeItem(item,index)'>
        {{ item.timeTest }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dateLength: 14,
        dateList: [],
        dateCurrent: 0,

        timeList: [],
        timeCurrent: 0
      }
    },
    computed: {
      dataTimeWidth() {
        return (this.dateLength * 150) + 200
      }
    },
    mounted() {
      this.handlerDate()
      this.handlerTime()
    },
    methods: {
      // 选择时间
      selectDateItem(item, index) {
        this.dateCurrent = index
        let time = index == 0 ? new Date() : new Date(`${new Date().getFullYear()}-${item.date}`)
        this.handlerTime(time)
      },
      // 选择日期
      SelectTimeItem(item, index) {
        if (!item.isExpire) return this.$u.toast("点不了了嗷")
        this.timeCurrent = index
      },
      // 获取日期
      handlerDate() {
        this.dateList = []
        let date = new Date()
        let week = ['日', '一', '二', '三', '四', '五', '六']
        for (let i = 0; i < this.dateLength; i++) {
          let obj = {}
          let time = date.getTime() + i * 24 * 60 * 60 * 1000
          let newDate = new Date(time)
          let month = newDate.getMonth() + 1
          let day = newDate.getDate()
          if (month < 10) {
            month = '0' + month
          }
          if (day < 10) {
            day = '0' + day
          }
          obj.date = month + '-' + day
          obj.week = week[newDate.getDay()]
          this.dateList.push(obj)
        }
      },
      // 获取时间
      handlerTime(date = new Date()) { //  step = 间隔的分钟
        let step = 30
        this.timeList = [];
        this.timeCurrent = 0
        let nowDateTemp = date.getTime()
        date.setHours(5) // 时分秒设置从零点开始
        date.setSeconds(0)
        date.setUTCMinutes(0)
        let slotNum = 10 * 60 / step // 算出多少个间隔
        for (let f = 0; f < slotNum; f++) { //  stepM * f = 24H*60M
          let time = new Date(Number(date.getTime()) + Number(step * 60 * 1000 * f)) // 获取：零点的时间 + 每次递增的时间
          let hour = '',
            sec = '';
          time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours() // 获取小时
          time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes() // 获取分钟
          this.timeList.push({
            timeTest: hour + ':' + sec,
            timesTemp: time.getTime(),
            isExpire: time.getTime() >= nowDateTemp ? true : false
          })
        }
        this.timeCurrent = this.timeList.map(item => item.isExpire).indexOf(true)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .reserve-time-box {
    .title {
      font-size: 34rpx;
      color: #333;
      text-align: center;
      margin-bottom: 24px;
      font-weight: bold;
    }

    .date-box {
      padding: 0 32rpx 24rpx;
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      height: 140rpx;
      border-bottom: 2rpx solid #F7F7F7;

      .date-scroll-box {
        display: flex;
        align-items: center;

        .date-item {
          width: 134rpx;
          height: 116rpx;
          border-radius: 8rpx;
          background-color: #F5F6F8;
          margin-right: 16px;
          font-size: 24rpx;
          color: #0C1223;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-weight: bold;

          .name {}

          .date {}
        }
      }
    }

    .time-box {
      width: 100%;
      padding: 32rpx;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(4, 130rpx);
      justify-content: space-between;

      .time-item {
        // width:130rpx;
        height: 82rpx;
        line-height: 82rpx;
        text-align: center;
        border-radius: 8rpx;
        background-color: #F5F6F8;
        color: #0C1223;
        margin-bottom: 16rpx;
      }

      .expire-time-item {
        color: #9FA0A6;
      }
    }
  }
  .act-first-date-time-item {
    color: #215EBE !important;
    border: 2rpx solid #215EBE;
  }
</style>

复制粘贴当个组件运行，里面的参数自己改，有问题留言