|
|
<template> <view class="step1"> <view class="card"> <view class="dateBox"> <view class="month-row"> <view class="month" @click="show=true">{{ currentMonth }}</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="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > <view class="date" :class="{active: chooseDay==item.date}"> <view class="dian"></view> <view class="week">{{ item.week }}</view> <view class="num">{{ item.num }}</view> </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" v-for="(item,index) in timerArr" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId, disable: item.status!==1}"> <view class="lab" v-if="item.status==3">已过期</view> <view class="lab" v-if="item.status==2">已约满</view> <view class="lab" v-if="item.status==1">可预约</view> <view class="time">{{ item.timer }}</view> </view> </view> <view class="h2">下午</view> <view class="time_box"> <view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId,disable: item.status!==1}"> <view class="lab" v-if="item.status==3">已过期</view> <view class="lab" v-if="item.status==2">已约满</view> <view class="lab" v-if="item.status==1">可预约</view> <view class="time">{{ item.timer }}</view> </view> </view> </view> </view> <view class="card"> <view class="noDate"> <image src="http://192.168.1.20:81/zhili/image/20230927/ad178ebdf5394518b27b020c03ee48ab.png" mode=""></image> </view> </view> <u-datetime-picker :show="show" v-model="chooseMonth" :minDate="minDate" :maxDate="maxDate" mode="year-month" @confirm="changeMonth" ></u-datetime-picker> </view></template>
<script> import { getDates, getMonthsBetweenDates } from '@/config/utils.js' export default { data() { return { maxDate: 0, minDate: 0, monthArr: [], show: false, dateArr: [], currentDay: 0,//当前显示的日期组索引
chooseDay: '', chooseMonth: '', timerArr: [ {status: 1, timer: '06:00-07:00', id: 1}, {status: 2, timer: '06:00-07:00', id: 2}, {status: 3, timer: '06:00-07:00', id: 3}, ], timerArr2: [ {status: 1, timer: '06:00-07:00', id: 4}, {status: 2, timer: '06:00-07:00', id: 5}, {status: 3, timer: '06:00-07:00', id: 6}, ], chooseTimerId: '', endDate: null, startDate: null, } }, mounted() { this.startDate = new Date('2023-08-06'); this.endDate = new Date(); this.minDate = this.startDate*1 this.maxDate = this.endDate*1 this.initDate() }, computed: { currentMonth() { let tiemr = new Date(this.chooseDay) * 1 return this.$u.date(tiemr, 'yyyy.mm') } }, methods: { // 初始化日期
initDate() { this.dateArr = getDates(this.startDate, this.endDate); this.chooseDay = this.dateArr[0][0].date console.log(this.chooseDay) }, // 点击月份
changeMonth(val) { let startDate = this.$u.date(val.value, 'yyyy-mm-dd') for(let i=0; i<this.dateArr.length; i++) { for(let j=0; j<this.dateArr[i].length; j++) { let date = this.dateArr[i][j].date if(startDate==date) { this.currentDay = i this.chooseDay = date } } } this.show = false }, // 选择时间
chooseTimerClick(item) { if(item.status!=1) return this.$u.toast('请选择可预约时间') this.chooseTimerId = item.id }, // 选择日期
chooseDate(item) { this.chooseDay = item.date console.log(this.chooseDay) }, changeDateIndex(num) { if(this.currentDay==0&&num==-1) return this.$u.toast('已是可选最小日期') if(this.currentDay==this.dateArr.length-1&&num==1) return this.$u.toast('已是可选最大日期') this.currentDay = this.currentDay + num this.chooseDay = this.dateArr[this.currentDay][0].date }, } }</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;
&.oneDate { justify-content: center; } .dateWidth { width: 20%; display: flex; justify-content: center; } .date { width: 74rpx; height: 100rpx; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28rpx; color: #333; .dian { width: 12rpx; height: 12rpx; background: #D8D8D8; border-radius: 50%; &.active { background: #1989FA; } } &.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.4; } .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; } .noDate { }</style>
|
