mycajt/pages/shoping/booked.vue

<template>
	<view class="content">
		<view class="title">
			服务日期
		</view>
		<its-calendar :sta_num="start_time" :end_num="end_time" :int_num="30" @getTime="getTime"></its-calendar>
		<view class="info">
			<view class="info-title">
				预约人信息
			</view>
			<view class="info-info flex">
				<view class="info-left">
					手机号
				</view>
				<view class="info-right">
					<input type="number" placeholder-class="pla" placeholder="请输入预约人手机号" v-model="phone">
				</view>
			</view>
			<view class="info-info flex">
				<view class="info-left">
					预约人数
				</view>
				<view class="info-right">
					<input type="number" placeholder="请输入预约预约人数" placeholder-class="pla" v-model="num">
				</view>
			</view>
		</view>
		<view class="btn">
			确认预约
		</view>
	</view>
</template>

<script>
	import its from '@/components/its-calendar/its-calendar.vue'
	export default {
		components: {
			its
		},
		data() {
			return {
				start_time: 0,
				end_time: 24,
				phone: '',
				num: ''
			};
		},
		onLoad() {},
		onShow() {},
		onReachBottom() {},
		onReady() {},
		methods: {
			getTime(e) {
				console.log(e);
				this.timed = true
				this.choose_time = e.time.split(' ')[0]
				this.choose_time_detail = e.time.split(' ')[1]

			},
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}

	.title {
		padding: 55rpx 35rpx 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.info {
		padding: 0 34rpx;

		.info-title {
			padding-top: 28rpx;
			border-top: 1px solid #F8F8F8;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.info-info {
			padding: 28rpx 0;
			border-bottom: 1px solid #F8F8F8;

			.info-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.info-right {
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.pla {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.btn {
		width: 579rpx;
		height: 80rpx;
		background: #52c696;
		border-radius: 15rpx;
		margin: 124rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 24rpx;
	}
</style>