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

<template>
	<view class="home">
		<view class="content" style="padding-top: 15vh;">
			<view class="flex-col mt-40" style="width: 90vw; padding: 20rpx 0; gap: 10rpx; border-radius: 12rpx;  border: 2rpx solid #07c060;">
				<span style="font-size: 28rpx;">请选择您方便的时间，</span>
				<span style="font-size: 28rpx;">我们将根据您的日程为您安排上门威士忌品鉴服务，</span>
				<span style="font-size: 28rpx;">确保您能在舒适的环境中尽享专属体验</span>
			</view>
			<span class="font-bold" style="margin-top: 5vh;">预约信息</span>
			<view class="" style="width: 90vw;">
				<view class="flex-sb mt-40">
					<view class="date">
						{{year}}
						<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
					<view class="date">
						{{date}}
						<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
					<view class="date">
						{{time}}
						<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
				</view>
				<view class="flex-start-col mt-40">
					<view class="flex-center" style="align-items: flex-end;">
						<view class="flex-start-col" style="gap: 10rpx;">
							<span>姓名:</span>
							<input v-model="username" type="text" class="input" style="width: 20vw;"></input>
						</view>
						<span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span>
					</view>
					<view class="flex-center" style="align-items: flex-end;">
						<view class="flex-start-col" style="gap: 10rpx;">
							<span>联系电话:</span>
							<input v-model="phone" type="tel" class="input"></input>
						</view>
						<span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span>
					</view>
					<view class="flex-center">
						<view class="flex-start-col" style="gap: 10rpx; width: 80vw;">
							<span>详细地址:</span>
							<input v-model="address" type="text" class="input" style="width: 100%; height: 60rpx;"></input>
						</view>
					</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '2024年',
				date: '9月20日',
				time: '08：00',
				firstName: '张',
				lastName: '里于',
				gender: '',
				phone: '',
				message: ''
			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: '/pages_order/info/start'
				})
			},
			pre(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</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;
	}
</style>