MiniScm/subpkg/setCheckinDate/setCheckinDate.vue

<template>
	<view>
		<uni-card :title="reservationInfo.hotelName" extra="订房信息" note="Tips">
			<view class="card-item" v-if="reservationInfo.building">
				<view class="card-item-left">
					<u-text :text="buildingTip" align="center"></u-text>
				</view>
				<text>{{reservationInfo.building}}</text>
			</view>
			<view class="card-item">
				<view class="card-item-left">
					<u-text :text="floorTip" align="center"></u-text>
				</view>
				<text>{{reservationInfo.floor}}</text>
			</view>
			<view class="card-item">
				<view class="card-item-left">
					<u-text :text="roomTip" align="center"></u-text>
				</view>
				<text>{{reservationInfo.room}}</text>
			</view>
		</uni-card>
		<view class="date-item">
			<view class="date-item-tip">
				<u-text :text="startTimeTip" align="center"></u-text>
			</view>
			<view>
				<u-datetime-picker :show="startTimeShow" v-model="startTime" mode="datetime" :minDate="startMinDate"
					:maxDate="startMaxDate" @cancel="startTimeShow = false"
					@confirm="confirmStartTimeChange"></u-datetime-picker>
				<u-text :text="startTimeFormatted" bold="true" @click="startTimeShow = true"></u-text>
			</view>
		</view>
		<view class="date-item">
			<view class="date-item-tip">
				<u-text :text="endTimeTip" align="center"></u-text>
			</view>
			<view>
				<view>
					<u-datetime-picker :show="endTimeShow" v-model="endTime" mode="datetime"
						:minDate="endMinDate" :maxDate="endMaxDate" @cancel="endTimeShow = false"
						@confirm="confirmEndTimeChange"></u-datetime-picker>
					<u-text :text="endTimeFormatted" bold="true" @click="endTimeShow = true"></u-text>
				</view>
			</view>
		</view>
		<view class="confirm-btn">
			<u-button :text="confirmButtonTip" type="primary" @click="confirmReservation"
				:loading="confirmButtonLoading" :loadingText="confirmButtonLoadingText"></u-button>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				buildingTip: '楼 栋 ：',
				floorTip: '楼 层 ：',
				roomTip: '房 间 ：',
				startTimeTip: '选择起始时间：',
				endTimeTip: '选择结束时间：',
				startTime: '',
				endTime: '',
				startTimeShow: false,
				endTimeShow: false,
				startMinDate: 0,
				startMaxDate: 0,
				endMinDate: 0,
				endMaxDate: 0,
				confirmButtonTip: '确认选房',
				confirmButtonLoading: false,
				confirmButtonLoadingText: '选房中'
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['reservationInfo']),
			startTimeFormatted() {
				let start = new Date(this.startTime)
				//默认入住时间14点
				return moment(start).format('YYYY/MM/DD HH:mm')
			},
			endTimeFormatted() {
				let end = new Date(this.endTime)
				//默认到期时间12点
				return moment(end).format('YYYY/MM/DD HH:mm')
			},
		},
		methods: {
			confirmStartTimeChange(info) {
				//设置起始时间
				this.startTime = info.value
				//关闭选择器显示
				this.startTimeShow = false
			},
			confirmEndTimeChange(info) {
				//设置结束时间
				this.endTime = info.value
				//关闭选择器显示
				this.endTimeShow = false
			},
			async confirmReservation() {
				this.confirmButtonLoading = true
				let start = new Date(this.startTime)
				let end = new Date(this.endTime)
				console.log(start)
				console.log(end)
				let res = await uni.$http.post('/userPicRoomInfo', {
					userId: this.userInfo.userId,
					hotelId: this.reservationInfo.hotelId,
					building: this.reservationInfo.building,
					floor: this.reservationInfo.floor,
					room: this.reservationInfo.room,
					startTime: start,
					endTime: end
				})
				console.log(res)
				console.log(res.data.success)
				if (res.data.success == true) {
					uni.$showMsg('选房成功！')
					setTimeout(() => {
						uni.navigateTo({
							url: "/subpkg/checkin/checkin"
						})
					}, 2000)
				} else {
					uni.$showMsg('选房失败！')
				}
				this.confirmButtonLoading = false
			}
		},
		onLoad() {
			//初始化起始时间为当前时间
			this.startTime = new Date()
			//初始化结束时间为第二天12点
			let tomorrow = new Date(new Date().valueOf() + 24 * 60 * 60 * 1000)
			tomorrow.setHours(12, 0, 0)
			this.endTime = tomorrow
			//初始化可选最小起始时间为当前时间
			this.startMinDate = Date.now()
			//初始化可选最大起始时间为一个月后
			let startMaxDate = new Date(new Date().valueOf() + 30 * 24 * 60 * 60 * 1000)
			this.startMaxDate = startMaxDate.valueOf()
			//初始化可选最小结束时间为第二天12点
			let minEndTime = new Date(new Date().valueOf() + 24 * 60 * 60 * 1000)
			minEndTime.setHours(12, 0, 0)
			this.endMinDate = minEndTime.valueOf()
			//初始化可选最大结束时间为30天后12点
			let endMaxDate = new Date(new Date().valueOf() + 31 * 24 * 60 * 60 * 1000)
			endMaxDate.setHours(12, 0, 0)
			this.endMaxDate = endMaxDate.valueOf()
		}
	}
</script>

<style lang="scss">
	.date-item {
		margin: 100rpx 40rpx;
		display: flex;
	}

	.date-item-tip {
		width: 220rpx;
	}

	.confirm-btn {
		width: 80%;
		margin: 0 auto;
	}

	.card-item {
		margin-bottom: 40rpx;
		display: flex;
	}

	.card-item-left {
		width: 220rpx;
	}
</style>