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

<template>
	<view class="home">
		
		<image src="/static/image/bg/1.png"
		class="page-bg"
		mode="aspectFill"></image>
		
		<view class="content_now">
			<view class="flex-col" style="width: 600rpx; padding: 20rpx 0; gap: 10rpx; border-radius: 12rpx;  border: 2rpx solid #ecb864;">
				<span style="font-size: 25rpx;">请选择您方便的时间，</span>
				<span style="font-size: 25rpx;">我们将根据您的日程为您安排上门威士忌品鉴服务，</span>
				<span style="font-size: 25rpx;">确保您能在舒适的环境中尽享专属体验</span>
			</view>
			<span class="font-bold" style="margin-top: 10rpx;">预约信息</span>
			<view class="" style="width: 600rpx;">
				<view class="flex-sb" style="margin-top: 10rpx;"
				@click="$refs.datetimePicker.open()">
					<view class="date">
						{{ $dayjs(date).format('YYYY') }}年
						<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
					<view class="date">
						{{ $dayjs(date).format('MM-DD') }}
						<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
					<view class="date">
						{{ $dayjs(date).format('HH:mm') }}
						<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/>
					</view>
				</view>
				<view class="flex-start-col" style="margin-top: 10rpx;">
					<view class="flex-center" style="align-items: flex-end;">
						<view class="flex-start-col" style="gap: 10rpx;">
							<span>姓名:</span>
							<input v-model="form.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="form.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>地址: {{ addressCity }}</span>
							<input v-model="address.address" placeholder="请输入详情地址" type="text" class="input" style="width: 100%; height: 60rpx;"></input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="an">
			<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="submit">
					<!-- 确定 / 提交 -->
					预约
				</view>
			</view>
			<text class="second-color">{{ configList.bg_title }}</text>
		</view>
		
		
		<uv-datetime-picker 
		ref="datetimePicker" 
		v-model="date" 
		mode="datetime" 
		:minDate="new Date().getTime()" 
		@confirm="confirm">
		</uv-datetime-picker>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				// year: '2024年',
				// date: '9月20日',
				// time: '08：00',
				// firstName: '张',
				// lastName: '里于',
				// gender: '',
				// phone: '',
				// message: '',
				date : new Date().getTime(),
				address : {
					province : '',
					city : '',
					district : '',
					address : '',
				},
				form : {
					username:'',
					phone:'',
				},
			}
		},
		computed : {
			addressCity(){
				return this.address.province + 
				this.address.city + 
				this.address.district
			},
			...mapState(['problemList', 'configList', 'queryMyLog']),
		},
		onLoad() {
			if(uni.getStorageSync('user_address')){
				this.address = JSON.parse(uni.getStorageSync('user_address'))
			}
			if(uni.getStorageSync('user_phone')){
				this.form = JSON.parse(uni.getStorageSync('user_phone'))
			}
		},
		methods: {
			next() {
				// uni.navigate
				
			},
			pre(){
				// uni.navigateBack({
				// 	delta:1
				// })
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			confirm(e){
				this.date = e.value
			},
			submit(){
				
				if(this.$utils.verificationAll(this.form, {
					username : '请输入姓名',
					phone : '请输入电话号码',
				})){
					return
				}
				
				if(this.$utils.verificationPhone(this.form.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
					})
					return
				}
				
				if(this.$utils.verificationAll(this.address, {
					address : '请输入详情地址',
				})){
					return
				}
				
				uni.setStorageSync('user_address', this.address)
				
				this.$api('submit', {
					...this.address,
					...this.form,
					name : this.form.username,
					area : this.address.district,
					yearValue : this.$dayjs(this.date).format('YYYY'),
					monthDay : this.$dayjs(this.date).format('MM-DD'),
					dayTime : this.$dayjs(this.date).format('HH:mm'),
				}, res => {
					if(res.code == 200){
						uni.showToast({
							title: '预约成功',
							icon: 'none'
						})
						setTimeout(uni.reLaunch, 1000, {
							url : '/pages/index/index'
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home{
		font-size: 28rpx;
	}
	
	.an{
		position: fixed;
		bottom: 300rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

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

	.main-color{
		flex-wrap: nowrap;
	}
	
	.input{
		border: 2rpx solid $uni-color;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
	}
</style>