|
|
|
@ -13,11 +13,13 @@ |
|
|
|
<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="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > |
|
|
|
<view class="date" :class="{active: chooseDay==item.date}"> |
|
|
|
<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> |
|
|
|
@ -29,32 +31,20 @@ |
|
|
|
<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 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"> |
|
|
|
<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 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> |
|
|
|
@ -65,42 +55,44 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getDates } from '@/config/utils.js' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dateArr: [], |
|
|
|
currentDay: 0 |
|
|
|
currentDay: 0, |
|
|
|
chooseDay: '', |
|
|
|
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: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
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) |
|
|
|
const endDate = new Date(); |
|
|
|
this.dateArr = getDates(startDate, endDate); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 选择时间 |
|
|
|
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 |
|
|
|
if(this.currentDay==this.dateArr.length-1&&num==1) return |
|
|
|
@ -110,17 +102,7 @@ |
|
|
|
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> |
|
|
|
@ -174,7 +156,15 @@ |
|
|
|
.dateArr { |
|
|
|
display: flex; |
|
|
|
padding: 0 70rpx; |
|
|
|
justify-content: space-between; |
|
|
|
// justify-content: space-between; |
|
|
|
&.oneDate { |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.dateWidth { |
|
|
|
width: 20%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.date { |
|
|
|
width: 74rpx; |
|
|
|
height: 100rpx; |
|
|
|
|
