|
|
<template> <view class="step1"> <view class="card"> <view class="dateBox"> <view class="month-row"> <view class="month">2032.08</view> <view class="arrow"> <u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> </view> </view> <view class="date_row"> <view class="icon left" @click="changeDateIndex(-1)"> <u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> </view> <view class="dateArr"> <view class="date" v-for="(item,index) in dateArr[currentDay]" :key="index" :class="{active: index==1}"> <view class="week">{{ item.week }}</view> <view class="num">{{ item.num }}</view> </view> </view> <view class="icon right" @click="changeDateIndex(1)"> <u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> </view> </view> </view> </view> <view class="card"> <view class="timeCon"> <view class="h2">上午</view> <view class="time_box"> <view class="time_item"> <view class="lab">已过期</view> <view class="time">06:00-07:00</view> </view> <view class="time_item"> <view class="lab">已约满</view> <view class="time">06:00-07:00</view> </view> <view class="time_item"> <view class="lab">可预约</view> <view class="time">06:00-07:00</view> </view> </view> <view class="h2">下午</view> <view class="time_box"> <view class="time_item"> <view class="lab">已过期</view> <view class="time">06:00-07:00</view> </view> <view class="time_item"> <view class="lab">已约满</view> <view class="time">06:00-07:00</view> </view> <view class="time_item"> <view class="lab">可预约</view> <view class="time">06:00-07:00</view> </view> </view> </view> </view> <view class="btn" @click="changeStep(2)">下一步</view> </view> </template>
<script> export default { data() { return { dateArr: [], currentDay: 0 } }, mounted() { const startDate = new Date('2023-09-06'); const endDate = new Date('2023-09-19'); const dateRange = this.getDates(startDate, endDate); console.log(dateRange) let tmp = [] dateRange.forEach((date) => { let dateStr = date.toISOString().split('T')[0] let dd = dateStr.split('-')[2] const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六']; const dayOfWeek = date.getDay(); const weekName = daysOfWeek[dayOfWeek]; console.log(dateStr) console.log(weekName) if(tmp.length==0) { this.dateArr.push(tmp) } let obj = { week: weekName, num: dd } tmp.push(obj) if(tmp.length==5) { tmp = [] } }); console.log(this.dateArr) }, methods: { changeDateIndex(num) { if(this.currentDay==0&&num==-1) return if(this.currentDay==this.dateArr.length-1&&num==1) return this.currentDay = this.currentDay + num console.log(this.currentDay) }, changeStep(val) { this.$emit('changeStep', val) }, getDates(startDate, endDate) { const dates = []; let currentDate = new Date(startDate); while (currentDate <= endDate) { dates.push(new Date(currentDate)); currentDate.setDate(currentDate.getDate() + 1); } return dates; } } } </script>
<style lang="scss" scoped> .card { width: 100%; margin-bottom: 24rpx; overflow: hidden; .dateBox { padding: 36rpx 0 40rpx 0; .month-row { display: flex; justify-content: center; align-items: center; margin-bottom: 36rpx; .month { font-size: 32rpx; color: $themC; } .arrow { margin-left: 6rpx; } } .date_row { width: 100%; height: 100rpx; position: relative; .icon { width: 40rpx; height: 40rpx; background: rgba(51,51,51,0.18); backdrop-filter: blur(4rpx); position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; &.left { left: 16rpx; } &.right { right: 16rpx; } } .dateArr { display: flex; padding: 0 70rpx; justify-content: space-between; .date { width: 74rpx; height: 100rpx; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28rpx; color: #333; &.active { background: rgba(25,137,250,0.1); border: 2rpx solid #1989FA; color: $themC; } .week { } .num { margin-top: 4rpx; } } } } } } .card { .timeCon { padding: 0 24rpx 40rpx 24rpx; } .h2 { line-height: 90rpx; font-weight: 500; color: #333; } .time_box { display: flex; flex-wrap: wrap; justify-content: space-between; .time_item { width: 30%; height: 120rpx; background: #F8F8F8; border-radius: 12rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12rpx; color: #333; &.active { background: rgba(25,137,250,0.1); border: 2rpx solid #1989FA; color: $themC; } &.disable { opacity: 0.5; } .lab { font-size: 28rpx; font-weight: 500; } .time { font-size: 24rpx; margin-top: 4rpx; } } } } .btn { width: 47%; height: 72rpx; background: #1989FA; border-radius: 8rpx; font-size: 28rpx; color: #fff; text-align: center; line-height: 72rpx; margin: 108rpx auto 50rpx auto; } </style>
|