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

<template>
	<view class="home">
		
		<image :src="configList.img_13"
		class="page-bg"
		mode="aspectFill"></image>
		
		<image :src="configList.img_7"
		class="logo"
		mode="widthFix"></image>
		
		<view class="content">
			
			<image :src="configList.img_11"
			class="content-bg"
			mode="scaleToFill"></image>
			
			<view
			class="topt"
			v-if="!id">
				<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="id || $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" 
							:disabled="id"
							placeholder="请输入姓名" 
							type="text" class="input" style="width: 580rpx;"></input>
						</view>
					</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" 
							:disabled="id"
							placeholder="请输入联系电话" 
							type="tel" class="input" style="width: 580rpx;"></input>
						</view>
					</view>
					<picker
					mode="region" 
					@change="bindTimeChange">
						<view class="flex-center">
							<view class="flex-start-col">
								<span>所在地区</span>
								<input 
								:value="form.province + form.city + form.area"
								disabled
								placeholder="请选择所在地区" 
								type="text" class="input" 
								style="width: 580rpx;"></input>
							</view>
						</view>
					</picker>
					<view class="flex-center">
						<view class="flex-start-col">
							<span>详细地址</span>
							<input v-model="form.address" 
							:disabled="id"
							placeholder="请输入详情地址" 
							type="text" class="input" 
							style="width: 580rpx;"></input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex-center" style="gap: 30rpx;">
			<view class="next-btn" style="padding: 16rpx 80rpx;" @click="pre">
				返回
			</view>
			<view class="next-btn-2" 
			v-if="!id"
			style="padding: 16rpx 80rpx;" @click="submit">
				确认/提交
			</view>
			<view class="next-btn-2" 
			v-else
			style="padding: 16rpx 80rpx;" @click="closeSubmit">
				取消预约
			</view>
		</view>
		<view class="second-color">{{ configList.bg_title }}</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:'',
					province : '',
					city : '',
					area : '',
				},
				id : 0,
			}
		},
		computed : {
			addressCity(){
				return this.address.province + 
				this.address.city + 
				this.address.district
			},
			...mapState(['problemList', 'configList', 'queryMyLog']),
		},
		onLoad(args) {
			if(args.id){
				this.id = args.id
				return
			}
			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'))
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail(){
				if(!this.id){
					return
				}
				this.$api('queryReservationDetail',{
					id : this.id
				}, res => {
					if(res.code == 200){
						this.date = new Date(`${res.result.yearValue}-${res.result.monthDay} ${res.result.dayTime}:00`).getTime()
						this.address = res.result
						this.address.district = res.result.area
						this.form = res.result
						this.form.username = res.result.name
					}
				})
			},
			next() {
				// uni.navigate
				
			},
			pre(){
				uni.navigateBack(-1)
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// })
			},
			confirm(e){
				this.date = e.value
			},
			submit(){
				
				if(this.$utils.verificationAll(this.form, {
					username : '请输入姓名',
					phone : '请输入电话号码',
					address : '请输入详情地址',
				})){
					return
				}
				
				if(!this.$utils.verificationPhone(this.form.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
					})
					return
				}
				
				this.$api('submit', {
					...this.form,
					name : this.form.username,
					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){
						// setTimeout(uni.reLaunch, 1000, {
						// 	url : '/pages/index/index'
						// })
						uni.navigateTo({
							url: '/pages/index/cancelArticle?key=success_text'
						})
					}
				})
			},
			// 取消预约
			closeSubmit(){
				uni.showModal({
					title: '确认取消预约吗？',
					success: (res) => {
						if(res.confirm){
							this.$api('cancelReservation', {
								id : this.id
							}, res => {
								if(res.code == 200){
									uni.navigateTo({
										url: '/pages/index/cancelArticle?key=cancel_value'
									})
								}
							})
						}
					}
				})
			},
			
			// 获取省市区
			bindTimeChange(e) {
				this.form.province = e.detail.value[0];
				this.form.city = e.detail.value[1];
				this.form.area = e.detail.value[2];
				// this.form.provinceName = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home{
		font-size: 28rpx;
		.logo{
			width: 600rpx;
			height: 100rpx;
			margin: 150rpx 75rpx;
			margin-bottom: 50rpx;
		}
		.content{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 60rpx;
			text-align: center;
			width: 720rpx;
			margin: 0 auto;
			.content-bg{
				height: 100%;
				width: 700rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			.topt{
				width: 600rpx; 
				padding: 20rpx 0; 
				gap: 10rpx; 
				border-radius: 12rpx;
				border: 2rpx solid #ecb864;
				display: flex;
				flex-direction: column;
			}
		}
		.second-color{
			text-align: center;
			margin-top: 40rpx;
		}
	}
	

	.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;
	}
	.next-btn{
		width: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		padding: 16rpx 90rpx;
		background-color: $uni-color;
		border-radius: 30rpx;
	}
	.next-btn-2{
		width: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		padding: 16rpx 90rpx;
		background-color: $uni-color-primary;
		border-radius: 30rpx;
	}
</style>