Jingde-town-wechat-uniapp/pages_order/order/orderSubscribe.vue

<template>
	<view class="page">
		<navbar title="提交预约" leftClick @leftClick="$utils.navigateBack" />
		<view class="box">
			<view class="info">
				<view class="title">
					遗产讲述
				</view>
				<view class="tips">
					开放时间：06:00-21:00
				</view>
				<view class="tips">
					开放时间：06:00-21:00
				</view>
			</view>
			<view class="form-time">
				
				<!-- 预约日期 -->
				<view class="title">
					预约日期
				</view>
				<view class="line"
				@click="$refs.calendars.open()">
					<view class="">
						{{ selectDate.split('-')[0] }}年
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					<view class="">
						{{ selectDate.split('-')[1] }}月
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					<view class="">
						{{ selectDate.split('-')[2] }}日
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
				</view>
				
				<!-- 预约时间 -->
				<view class="title">
					预约时间
				</view>
				<view class="line"
				@click="$refs.picker.open()">
					<view class="">
						08:00
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					至
					<view class="">
						14:00
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="form-input">
				<view class="title">
					游客信息
				</view>
				<view class="input">
					<view class="label">
						姓名
					</view>
					<input type="text" 
					placeholder="请输入姓名"
					v-model="form.name"/>
				</view>
				<view class="input">
					<view class="label">
						联系方式
					</view>
					<input type="text" 
					placeholder="请输入联系方式"
					v-model="form.phone"/>
				</view>
			</view>
		</view>
		
		
		<!-- 选择日期 -->
		<uv-calendars 
		color="#B12026" 
		:date="selectDate"
		confirmColor="#B12026"
		:clearDate="false"
		ref="calendars" @confirm="confirmDate" />
		
		
		<!-- 选择时间 -->
		<uv-picker ref="picker" 
		:columns="timeColumns" 
		confirmColor="#B12026"
		@confirm="confirmTime"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form : {
					name : '',
					phone : '',
				},
				selectDate : this.$dayjs().format('YYYY-MM-DD'),
				timeColumns : [
					[
						'08',
						'10',
					],
					[
						'14',
						'16',
						'20',
					]
				],
			}
		},
		methods: {
			// 选择日期
			confirmDate(e){
				this.selectDate = e.fulldate
			},
			// 选择时间
			confirmTime(e){
				console.log(e);
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.box{
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: #fff;
		box-shadow: 0 0 16rpx 6rpx #00000011;
		.info{
			padding: 40rpx;
			border-bottom: 1rpx dashed #000;
			.title{
				font-size: 34rpx;
				font-weight: 900;
				padding-bottom: 20rpx;
			}
			.tips{
				font-size: 26rpx;
				color: #666666;
				padding: 10rpx 0;
			}
		}
		.form-time{
			padding: 40rpx;
			.title{
				font-weight: 900;
				padding-bottom: 20rpx;
				margin-top: 10rpx;
			}
			.line{
				display: flex;
				align-items: center;
				>view{
					border: 1rpx solid #333;
					padding: 6rpx 20rpx;
					margin: 10rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						padding: 0 10rpx;
					}
				}
			}
		}
		.form-input{
			padding: 40rpx;
			.input{
				display: flex;
				padding-top: 30rpx;
				.label{
					width: 200rpx;
				}
				input{
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>