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" 
			v-if="!id"
			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="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"
							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" 
							:disabled="id"
							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" 
							:disabled="id"
							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" 
				v-if="!id"
				style="padding: 16rpx 80rpx;" @click="submit">
					预约
				</view>
				<view class="btn2" 
				v-else
				style="padding: 16rpx 80rpx;" @click="closeSubmit">
					取消预约
				</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:'',
				},
				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({
				// 	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){
						// 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'
									})
								}
							})
						}
					}
				})
			},
		},
	}
</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>