GuangYuYuan-app/components/select_time.vue

<template>
	<view class="time_box">
		<view class="content">
			<view class="title">
				选择上门时间
			</view>
			<view class="center">
				<view class="left">
					<!-- <view class="item select_day" :class="currentDay == index?'select_day':''" v-for="(item,index) in day" :key="index"
						@click="selectDay(item,index)"> -->
					<view class="item select_day">
						<!-- {{item.title}} -->今天
					</view>
				</view>
				<view class="right">
					<view class="item" :class="currentTime == index?'select_time':''" v-for="(item,index) in time" :key="index"
						@click="selectTime(item,index)">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="btn" v-if="selectTim" @click="selectDate">
					{{selectDay}} {{selectTim}}
				</view>
				<view class="btn" v-else>
					选择上门时间
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'seelctName',
		data() {
			return {
				day: [{
						title: '今天',
						type: 0
					},
					// {
					// 	title: '明天',
					// 	type: 1
					// }, {
					// 	title: '后天',
					// 	type: 2
					// },
				],
				time: [{
						value: '15:00-17:00'
					},
					{
						value: '15:00-17:00'
					},
					{
						value: '15:00-17:00'
					},
					{
						value: '15:00-17:00'
					},
					{
						value: '15:00-17:00'
					},
					{
						value: '15:00-17:00'
					}
				],
				currentDay: null,
				currentTime: null,
				selectDay: '',
				selectTim: ''
			}
		},
		methods: {
			// selectDay(item, index) {
			// 	// this.currentDay = index
			// 	let today = new Date();
			// 	this.currentDay = today.toISOString().slice(0, 10);
			// 	console.log(this.currentDay)
			// },
			selectTime(item, index) {
				this.currentTime = index
				this.selectTim = item.value
				let today = new Date();
				this.selectDay = today.toISOString().slice(0, 10);
			},
			selectDate() {
				let date = this.selectDay + ' ' + this.selectTim
				this.$emit('dateSend', date);
			}
		},
		mounted() {


		}
	}
</script>

<style lang="less" scoped>
	.time_box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);

		.content {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;

			.title {
				width: 100%;
				height: 92rpx;
				background: #E6F8F7;
				border-radius: 24rpx 24rpx 0px 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
			}

			.center {
				height: 782rpx;
				display: flex;

				.left {
					width: 220rpx;
					height: 100%;
					background: #F7F7F7;

					.item {
						width: 100%;
						height: 76rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #000000;
					}

					.select_day {
						background: #FFFFFF;
					}
				}

				.right {
					flex: 1;
					background: #FFFFFF;

					.item {
						width: 100%;
						height: 76rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #999999;
					}

					.select_time {
						color: #000000;
					}
				}
			}

			.bottom {
				height: 116rpx;
				background: #FFFFFF;
				border-top: 1px solid #EEEEEE;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.btn {
					width: 100%;
					height: 76rpx;
					background: #00B8B0;
					border-radius: 106rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>