<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 = indexconsole.log("@@@@@item", item)},// 选择日期SelectTimeItem(item, index) {if (!item.isExpire) return this.$u.toast("点不了了嗷")this.timeCurrent = indexconsole.log("@@@item", item)},// 获取日期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 * 1000let newDate = new Date(time)let month = newDate.getMonth() + 1let day = newDate.getDate()if (month < 10) {month = '0' + month}if (day < 10) {day = '0' + day}obj.date = month + '-' + dayobj.week = week[newDate.getDay()]this.dateList.push(obj)}},// 获取时间handlerTime(step = 30) { //  step = 间隔的分钟let date = new Date()let nowDateTemp = date.getTime()date.setHours(20) // 时分秒设置从零点开始date.setSeconds(0)date.setUTCMinutes(0)let arr = []this.timeList = [];let slotNum = 10 * 60 / step // 算出多少个间隔for (let f = 0; f < slotNum; f++) { //  stepM * f = 24H*60Mlet 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>

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