reservation-uniapp-250509/service-uniapp-client/components/payOrder/selectTime.vue

<template>
	<van-popup
	v-model:show="showBottom"
	round
	position="bottom"
	@close="close"
	:style="{ height: '75%' }"
	>
		
		<view class="box">
			
			<view class="title">
				{{ title }}
			</view>
			
			<view class="date-list">
				<view class="date-item"
				v-for="(item, index) in dateList"
				@click="selectDate(item, index)">
					<view>
						{{ item.format('dddd') }}
					</view>
					<view :class="{act : i == index}">
						{{ item.format('MM-DD') }}
					</view>
				</view>
			</view>
			
			<view style="display: flex;justify-content: center;" v-if="loading">
				<van-loading />
			</view>
			
			<view class="time-list" v-else-if="timeList.length">
				<view class="time-content">
					<view 
					:class="{'time-item' : true, 
					no : item.isDelete != 'Y' || 
					isDelete({time : item, date : dateList[i]})}"
					v-for="(item, index) in timeList"
					@click="selectTime({time : item, date : dateList[i]})">
						<view>
							{{ item.timeName }}
						</view>
						<view class="status">
							{{ item.isDelete != 'Y' ? '未开启' : 
							isDelete({time : item, date : dateList[i]}) ? '过时' : '空闲'}}
						</view>
					</view>
				</view>
			</view>
			
			<van-empty v-else image="/static/empty/data.png" image-size="400rpx">
				<template #description>
					<view style="color: white;">
						暂无服务时间数据
					</view>
				</template>
			</van-empty>
			
		</view>
	
	</van-popup>
</template>

<script>
	export default {
		name:"selectTime",
		props : ['show', 'title', 'dateList', 'timeList', 'loading'],
		
		data() {
			return {
				showBottom : false,
				i : 0
			};
		},
		onShow(){
			this.getAddressList();
		},
		methods : {
			isDelete(e){
				let day = e.date.format('YYYY-MM-DD')
				let selectTime = this.dayjs(`${day} ${e.time.timeName}`)
				let nowTime = this.dayjs()
				
				if(selectTime.isBefore(nowTime)){
					return true
				}
				
				if(e.time.isDelete != 'Y'){
					return true
				}
				
				return false
			},
			selectTime(e){
				if(this.isDelete(e)){
					return
				}
				this.$emit('select', e)
			},
			selectDate(e, index){
				this.i = index
				this.$emit('selectDate', e)
			},
			close(){
				this.$emit('close')
			}
		},
		watch: {
			show: {
			   handler (newValue, oldValue) {
				   this.showBottom = newValue
			   },
			   immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100%;
	background: linear-gradient(#57CAA0, #55B16E);
	box-sizing: border-box;
	padding: 40rpx;
	.title{
		font-size: 32rpx;
		text-align: center;
		color: #fff;
	}
	.date-list{
		display: flex;
		width: 100%;
		overflow: hidden;
		overflow-x: scroll;
		padding: 30rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		.date-item{
			flex-shrink: 0;
			padding: 0 10rpx;
			&>view{
				padding: 6rpx 10rpx;
			}
			.act{
				background-color: #fff;
				color: #55B16E;
				border-radius: 10rpx;
			}
		}
	}
	
	.time-list{
		width: 100%;
		font-size: 24rpx;
		overflow: hidden;
		height: calc(100% - 200rpx);
		overflow-y: scroll;
		.time-content{
			display: flex;
			flex-wrap: wrap;
			.time-item{
				padding: 10rpx;
				background-color: #fff;
				width: calc(25% - 20rpx);
				box-sizing: border-box;
				margin: 10rpx;
				border-radius: 16rpx;
				
				view{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 40rpx;
				}
				
				.status{
					color: #56BD86;
				}
				&.no{
					background-color: #E4E4E4;
					color: #CCCCCC;
					.status{
						color: #EBA44B;
					}
				}
			}
		}
		.act{
			background-color: #fff;
			color: #55B16E;
			border-radius: 10rpx;
		}
	}
}
</style>