<template>
|
<view class="reservation">
|
<view class="date">
|
<view class="date_head">
|
<image src="@/static/icon/ar_left@2x.png" mode="widthFix" @click="getPreviousDays" v-if="!disable"></image>
|
<image src="@/static/icon/ar_left_disable.png" mode="widthFix" v-else></image>
|
<text @click="openDate">{{date}}</text>
|
<image src="@/static/icon/ar_right@2x.png" mode="widthFix" @click="getNextDays"></image>
|
</view>
|
<scroll-view scroll-x="true" class="date_cate">
|
<view class="date_cate_item" v-for="(item, index) in roomList" :key="index" @click="clickRoom(index)">
|
<text :class="i === index ? 'active' : ''">{{item.name}}</text>
|
<view class="date_cate_item_h" v-show="i === index"></view>
|
</view>
|
</scroll-view>
|
<view class="date_list">
|
<view
|
:style="{ background: item.active ? '#0055FF !important;' : '' }"
|
:class="item.isUse ? 'date_list_item disable' : 'date_list_item'"
|
v-for="(item, index) in timeList"
|
:key="index"
|
@click="clickTime(item, index)">
|
<text :style="{ color: item.active ? '#fff !important;' : '' }">{{item.startTime}}-{{item.endTime}}</text>
|
</view>
|
<view class="date_list_item1"></view>
|
</view>
|
</view>
|
<view class="footer">
|
<view class="footer_text">
|
<view class="label">已选择：</view>
|
<view class="content" v-if="selected.length > 0">{{roomList[i].name}}｜{{selectedDate}}</view>
|
</view>
|
<view class="footer_submit">
|
<view class="footer_submit_left">
|
<view class="footer_submit_left_item">
|
<view class="item_hz"></view>
|
<text>已选择</text>
|
</view>
|
<view class="footer_submit_left_item">
|
<view class="item_hz ke"></view>
|
<text>可预约</text>
|
</view>
|
<view class="footer_submit_left_item">
|
<view class="item_hz bu"></view>
|
<text>不可预约</text>
|
</view>
|
</view>
|
<view class="footer_submit_right" @click="submit">
|
确认预约
|
</view>
|
</view>
|
</view>
|
<u-calendar :defaultDate="defaultDateMultiple" :show="dateShow" @confirm="selectDate" @close="closeDate"></u-calendar>
|
</view>
|
</template>
|
|
<script>
|
import { getDay, getPreviousDay, getNowDate } from '@/utils/utils.js'
|
export default {
|
data() {
|
return {
|
i: 0,
|
date: '',
|
stringDate: '',
|
number: 0,
|
selected: [],
|
roomList: [],
|
timeList: [],
|
|
status: 0,
|
startnum: '',
|
endnum: '',
|
|
dateShow: false,
|
time: '',
|
|
disable: true,
|
defaultDateMultiple: []
|
};
|
},
|
onLoad() {
|
this.date = getDay().today
|
this.stringDate = getDay().date
|
this.defaultDateMultiple = [getDay().date]
|
this.getList()
|
},
|
computed: {
|
selectedDate() {
|
if (this.selected.length > 0) {
|
let start = this.selected[0].date.substring(0, 5)
|
let end = this.selected[this.selected.length - 1].date.substring(6, 11)
|
return `${start}-${end}`
|
}
|
return ''
|
}
|
},
|
methods: {
|
closeDate() {
|
this.dateShow = false
|
},
|
selectDate(e) {
|
this.number = 0
|
this.disable = false
|
this.time = getPreviousDay(this.number, e[0]).date
|
this.date = getPreviousDay(this.number, e[0]).today
|
this.stringDate = getPreviousDay(this.number, e[0]).date
|
this.defaultDateMultiple = [getPreviousDay(this.number, e[0]).date]
|
this.getOpeningHours()
|
this.dateShow = false
|
},
|
openDate() {
|
this.dateShow = true
|
},
|
submit() {
|
if (this.selected.length === 0) {
|
uni.showToast({
|
title: '请先选择预约时间',
|
icon: 'none',
|
duration: 2000
|
});
|
return
|
}
|
let time = `${this.date.substring(0, 11)} ${this.selectedDate}`
|
let timeList = JSON.stringify(this.selected)
|
let startTime = `${this.stringDate} ${this.selectedDate.substring(0, 5)}`
|
let endTime = `${this.stringDate} ${this.selectedDate.substring(6, 11)}`
|
uni.navigateTo({
|
url: `/packagesMine/confirmAppointment/confirmAppointment?endTime=${endTime}&startTime=${startTime}&id=${this.roomList[this.i].id}&time=${time}&list=${timeList}`
|
});
|
},
|
// 选择开放时间
|
clickTime(obj, index) {
|
if (obj.status === 1) return
|
|
if (this.status === 0) {
|
this.timeList.forEach(item => {
|
item.active = false
|
})
|
this.selected = []
|
this.timeList[index].active = !this.timeList[index].active
|
this.startnum = index
|
this.status = 1
|
} else if (this.status === 1) {
|
this.endnum = index
|
|
let startnum = ''
|
let endnum = ''
|
|
if (this.startnum > this.endnum) {
|
startnum = this.startnum
|
endnum = this.endnum
|
} else {
|
startnum = this.endnum
|
endnum = this.startnum
|
}
|
for (let i = 0; i < this.timeList.length; i++) {
|
if (i <= startnum && i >= endnum) {
|
if (this.timeList[i].isUse) {
|
uni.showToast({
|
title: '所选日期包含不可选日期',
|
icon: 'none',
|
duration: 2000
|
});
|
this.status = 0
|
return
|
}
|
}
|
}
|
this.timeList.forEach((element, i) => {
|
if (i <= startnum && i >= endnum) {
|
element.active = true
|
this.selected.push({date: `${element.startTime}-${element.endTime}`, timeId: element.id, id: element.bookingTimeId})
|
} else {
|
element.active = false
|
}
|
})
|
this.status = 0
|
}
|
},
|
// 会议室开放时间
|
getOpeningHours() {
|
this.$u.api.getRoomUseTime({
|
roomId: this.roomList[this.i].id,
|
yudingDate: this.stringDate
|
}).then(res => {
|
res.data.forEach(item => {
|
item.active = false
|
})
|
this.timeList = res.data
|
})
|
},
|
// 切换会议室
|
clickRoom(i) {
|
this.i = i
|
this.status = 0
|
this.selected = []
|
this.timeList = []
|
this.getOpeningHours()
|
},
|
getList() {
|
this.$u.api.roomsList()
|
.then(res => {
|
if (res.data.length > 0) {
|
this.roomList = res.data
|
this.getOpeningHours()
|
}
|
})
|
},
|
// 上一天日期
|
getPreviousDays() {
|
if (this.disable) true
|
if (getPreviousDay(1, this.stringDate).date === getDay().date) {
|
this.disable = true
|
} else {
|
this.disable = false
|
}
|
this.number = this.number + 1
|
this.date = getPreviousDay(this.number, this.time ? this.time : '').today
|
this.stringDate = getPreviousDay(this.number, this.time ? this.time : '').date
|
this.defaultDateMultiple = [getPreviousDay(this.number, this.time ? this.time : '').date]
|
this.getOpeningHours()
|
},
|
// 下一跳日期
|
getNextDays() {
|
this.disable = false
|
this.number = this.number - 1
|
this.date = getPreviousDay(this.number, this.time ? this.time : '').today
|
this.stringDate = getPreviousDay(this.number, this.time ? this.time : '').date
|
this.defaultDateMultiple = [getPreviousDay(this.number, this.time ? this.time : '').date]
|
this.getOpeningHours()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #ffffff !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.reservation {
|
width: 100%;
|
padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
|
.date {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
.date_head {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
}
|
text {
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
margin: 0 40rpx
|
}
|
}
|
.date_cate {
|
white-space: nowrap;
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
// padding-bottom: 32rpx;
|
height: 70rpx;
|
box-sizing: border-box;
|
margin-top: 62rpx;
|
border-bottom: 1rpx solid #E5E5E5;
|
.date_cate_item {
|
display: inline-block;
|
margin-right: 54rpx;
|
position: relative;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
.date_cate_item_h {
|
position: absolute;
|
bottom: -30rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 60rpx;
|
height: 10rpx;
|
background-color: #0055FF;
|
}
|
.active {
|
font-size: 30rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #0055FF;
|
}
|
text {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
.date_list {
|
width: 100%;
|
padding: 28rpx 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.date_list_item1 {
|
width: 220rpx;
|
height: 0;
|
}
|
.active {
|
background: #0055FF !important;
|
text {
|
color: #FFFFFF !important;
|
}
|
}
|
.disable {
|
background: #CCCCCC !important;
|
text {
|
color: #999999 !important;
|
}
|
}
|
.date_list_item {
|
width: 220rpx;
|
height: 80rpx;
|
background: #F7F7F7;
|
border-radius: 4rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 24rpx;
|
text {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.footer {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
// height: 100rpx;
|
background: #FFFFFF;
|
// box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
position: fixed;
|
bottom: 0;
|
padding-bottom: env(safe-area-inset-bottom);
|
flex-direction: column;
|
.footer_text {
|
width: 100%;
|
height: 30rpx;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
.label {
|
flex-shrink: 0;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
margin-right: 20rpx;
|
}
|
.content {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
}
|
}
|
.footer_submit {
|
width: 100%;
|
height: 100rpx;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.footer_submit_left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.footer_submit_left_item {
|
display: flex;
|
align-items: center;
|
margin-right: 20rpx;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
.item_hz {
|
width: 32rpx;
|
height: 32rpx;
|
background: #0055FF;
|
border-radius: 4rpx;
|
margin-right: 10rpx;
|
}
|
.ke {
|
background: #F7F7F7 !important;
|
}
|
.bu {
|
background: #CCCCCC !important;
|
}
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
.footer_submit_right {
|
flex-shrink: 0;
|
width: 184rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #0055FF;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
border-radius: 4rpx;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
</style>
|
