drink-answer-wechat-uniapp-24-9-2/pages_order/info/appointDate.vue

<template>
	<view class="home">
		<view class="content" style="padding-top: 15vh;">
			<span class="font-bold">预约日期和时间</span>
			<view class="flex-center mt-40" style="gap: 50rpx;" @click="open">
				<view class="date">
					{{year}}
				</view>
				<view class="date">
					{{date}}
				</view>
				<view class="date">
					{{time}}
				</view>
			</view>
			<span class="font-bold" style="margin-top: 5vh;">预约信息</span>
			<view class="" style="width: 80vw;">
				<view class="flex-sb mt-40">
					<view class="flex-center">
						<view class="date">
							{{firstName}}
						</view>
						<span style="margin-left: 30rpx;">姓</span>
					</view>
					<view class="flex-center">
						<view class="date">
							{{lastName}}
						</view>
						<span style="margin-left: 30rpx;">名</span>
					</view>
					<view class="flex-center">
						<view class="flex-center" style="position: relative;" @click="checkGender">
							<span class="main-color">先生</span>
							<img src="../static/info/下拉.png" alt="" style="width: 40rpx; height: 40rpx;" />
						</view>
						<view class="flex-col select" id="select" ref="check">
							<span class="main-color">先生</span>
							<span class="main-color">女士</span>
						</view>
					</view>
				</view>
				<view class="flex-sb mt-40">
					<view class="flex-center" style="gap: 30rpx;">
						<input v-model="phone" type="tel" class="input"></input>
						<span>手机</span>
					</view>
					<view class="">
						<span class="main-color" style="text-decoration: underline;">修改号码</span>
					</view>
				</view>
				<view class="mt-40" style="width: 100%;">
					<textarea class="area" cols="20" rows="20" placeholder="如有下一步需求,请告诉我们"></textarea>
				</view>
				<view class="flex-start-col mt-40" style="gap: 20rpx;">
					<view style="display: flex; align-items: start; gap: 20rpx;">
						<uv-icon size="40" name="checkmark-circle" color="#07c060"></uv-icon>
						<span style="font-size: 28rpx;">本人提交此信息即表示本人已网读并接受Genius JourneyClub 的使用条款和个人信息处理规则。</span>
					</view>
					<view class="flex-center" style="gap: 20rpx;">
						<uv-icon size="40" name="info-circle" color="#07c060"></uv-icon>
						<span style="font-size: 28rpx;">未满18周岁请勿参与此内容。</span>
					</view>
				</view>
			</view>
			<view class="flex-col query" style="gap: 0rpx;">
				<view class="flex-center" style="gap: 30rpx;">
					<view class="btn2" style="padding: 16rpx 80rpx;" @click="pre">
						返回
					</view>
					<view class="btn2" style="padding: 16rpx 80rpx;" @click="next">
						取消预约
					</view>
				</view>
				<text class="second-color">欢快无限饮&nbsp;&nbsp;饮酒有限度</text>
			</view>
		</view>
		<uv-popup mode="bottom" round="20" closeable ref="service" duration="500">
			<view class="flex-col" style="gap: 30rpx; padding: 40rpx 0;">
				<text style="font-weight: bold;">请填写预约信息</text>
				<view class="flex-sa">
					<img src="../static/address/icon.png" alt="" style="width: 40rpx; height: 40rpx;" />
					<span>{{username}}</span>
					<span>{{address}}</span>
				</view>
			</view>
			<view class="" style="height: 20rpx; width: 100vw; background-color: #f6f6f6;">

			</view>
			<view class="" style="padding: 40rpx;">
				<span>预约时间</span>
				<view class="flex-sa mt-40" style="background-color: #f6f6f6; padding: 30rpx 20rpx;">
					<span style="margin-right: 30rpx;">备注</span>
					<uv-input placeholder="填选,可输入的其他需求" border="none" v-model="remark_column"></uv-input>
				</view>
				<uv-calendar ref="calendar" @confirm="confirm"></uv-calendar>
				<view class="flex-sb mt-40" style="width: 90vw;border-radius: 100rpx; border: 2rpx solid #fab445; box-sizing: border-box; overflow: hidden;">
					<span style=" padding: 30rpx;color: #fab445;">暂不预约，先购买</span>
					<span style=" padding: 30rpx;background-color: #fab445; color: white;">下一步，确认订单</span>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '2024年',
				date: '9月20日',
				time: '08：00',
				firstName: '张',
				lastName: '里于',
				gender: '',
				phone: '',
				message: '',
				username: '利曼和',
				address: '湖南省长沙市天心村天启小区6栋',
				remark_column:''
			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: '/pages_order/info/start'
				})
			},
			pre() {
				uni.navigateBack({
					delta: 1
				})
			},
			open() {
				this.$refs.calendar.open();
				this.$refs.service.open();
			},
			confirm(e){
				console.log(e);
			},
			checkGender(){
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.query {
		position: relative;
		bottom: -5vh;
	}

	.date {
		border: 2rpx solid $uni-color;
		padding: 14rpx 30rpx;
		border-radius: 12rpx;
	}

	.main-color {
		flex-wrap: nowrap;
		color: $uni-color;
	}

	.input {
		border: 2rpx solid #FD5100;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.area {
		border: 2rpx solid #FD5100;
		border-radius: 10rpx;
		padding: 10rpx;
		width: 100%;
		height: 120rpx;
	}
	
	.select{
		position: absolute; 
		margin-top: 180rpx;
		margin-right: 25rpx;
		gap: 10rpx;
		width: 120rpx;
		height: 120rpx;
		background: white;
		border-radius: 10rpx;
		font-size: 28rpx;
		transition: 0.4s;
		display: none;
	}
</style>