MiniScm/subpkg_checkin/selectRoomType/selectRoomType.vue

<template>
	<view class="page">
		<view class="sticky">
			<view>
				<!-- #ifdef MP-WEIXIN -->
				<NavigateBar title="房源类型" control="back" bgcolor="#a09cc4"></NavigateBar>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<NavigateBar title="房源类型" bgcolor="#a09cc4"></NavigateBar>
				<!-- #endif -->
			</view>

			<view class="checkin-date-info" @click="showCalendar=true">
				<view class="date-selector">
					<view class="date-item">
						<u-text text="离店" color="#666666" size="13"></u-text>
						<view class="date-info">
							<u-text :text="endDateFormatted" color="#333333" size="14" bold></u-text>
							<u-text :text="endDay" color="#333333" size="14" bold></u-text>
						</view>
					</view>
				</view>
				<view class="day-num">
					<u-text :text="'共'+dayNum+'晚'" color="#333333" size="18" bold></u-text>
					<u-image :src="arrowPicPath" width="17rpx" height="32rpx"></u-image>
				</view>
			</view>
		</view>

		<view class="room-type-item" v-for="item in roomTypeList" :key="item.id">
			<view class="room-type-item-left">
				<u-image :src="item.roomPicPath" width="200rpx" height="200rpx" radius="10"></u-image>
			</view>
			<view class="room-type-item-middle">
				<view class="room-type-item-middle-text">
					<text>{{item.roomTypeName}}</text>
				</view>
			</view>
			<view class="room-type-item-right">
				<view class="room-type-item-right-text">
					<text>￥{{item.unitPrice}}</text>
				</view>
				<button @click="gotoSelectRoom(item)">选房</button>
			</view>
		</view>
		<u-calendar :show="showCalendar" mode="single" @confirm="confirm" @close="showCalendar=false" color="#9e97c3"
			:defaultDate="defaultDate" title="离店日期" :minDate="minDate"></u-calendar>
	</view>
</template>

<script>
	import {
		getDay
	} from '../../utils/commonUtils.js'
	import moment from 'moment'
	import {
		IMG_BASE_URL
	} from "../../config.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				roomTypeList: {},
				showCalendar: true,
				defaultDate: [],
				arrowPicPath: '/static/arrow.png',
				startDate: '',
				startDay: '',
				endDate: '',
				endDay: '',
				minDate: '',
			};
		},
		computed: {
			endDateFormatted() {
				return moment(this.endDate).format('MM月DD日')
			},
			dayNum() {
				//根据起始时间到第二天的边界时间来算天数
				let checkinBoundaryTimeSet = this.currentHotel.checkinBoundaryTime
				let end = new Date(this.endDate)
				let endTime = checkinBoundaryTimeSet ? this.currentHotel.checkinBoundaryTime.split(":") : "06:00:00".split(
					":")
				end.setHours(endTime[0], endTime[1], endTime[2])
				let num = ((new Date(end)).valueOf() - (new Date(this.startDate)).valueOf()) / (24 * 60 * 60 *
					1000)
				return Math.ceil(num)
			},
			...mapState('m_business', ['currentHotel']),
			...mapState('m_user', ['userInfo']),
		},
		methods: {
			...mapMutations('m_business', ['updateRoomType', 'updateOrder']),
			//未预定  跳转至选择房间
			async gotoSelectRoom(item) {
				let startTime = new Date()
				let endTime = this.endDate
				//本地保存订单信息
				this.updateOrder({
					hotelId: this.currentHotel.hotelId,
					roomType: item.roomType,
					startTime: startTime,
					endTime: endTime,
					dayNum: this.dayNum,
					createHotelOrderReason: 'CHECKIN',
					orderSource: 'MINI_APP'
				})
				uni.navigateTo({
					url: '/subpkg_checkin/selectRoom/selectRoom?roomType=' + item.roomType
				});
			},
			async getRoomTypeList() {
				let res = await uni.$http.get(`/hotel/${this.currentHotel.hotelId}/roomType`)
				this.roomTypeList = res.data.data
				this.roomTypeList.forEach((item) => {
					item.roomPicPath = IMG_BASE_URL + '/' + item.roomPicPath
				})
			},
			confirm(days) {
				this.endDate = new Date(days[0])
				let checkoutTime = this.currentHotel.checkoutTime.split(':')
				this.endDate.setHours(checkoutTime[0], checkoutTime[1], checkoutTime[2])
				this.endDay = getDay(new Date(days[0]).getDay())
				this.showCalendar = false
			}
		},
		async onLoad() {
			await this.getRoomTypeList()
		},
		onShow() {
			//开始时间为当前时间
			let now = new Date()
			this.startDate = new Date()
			this.startDay = getDay(new Date().getDay())
			//入住时间早于边界时间，默认当天结束
			//入住时间晚于边界时间，默认第二天结束
			let checkinBoundaryTime = this.currentHotel.checkinBoundaryTime ? this.currentHotel.checkinBoundaryTime :
				"06:00:00"
			let boundaryTime = new Date(
				now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() +
				' ' + checkinBoundaryTime)
			let today = new Date()
			today.setHours(0, 0, 0, 0)
			if (now < boundaryTime) {
				this.endDate = today
			} else {
				let tomorrow = new Date(today)
				tomorrow.setDate(tomorrow.getDate() + 1)
				this.endDate = tomorrow
				this.minDate = moment(tomorrow).format('YYYY-MM-DD')
			}
			//星期几
			this.endDay = getDay(this.endDate.getDay())
			//日历默认日期，即默认结束日期
			this.defaultDate = moment(this.endDate).format('YYYY-MM-DD')
			//入住结束时间设置为为酒店对应配置
			let checkoutTimeSet = this.currentHotel.checkoutTime
			let checkoutTime = checkoutTimeSet ? this.currentHotel.checkoutTime.split(':') : "12:00:00".split(':')
			this.endDate.setHours(checkoutTime[0], checkoutTime[1], checkoutTime[2])
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.sticky {
			position: sticky;
			background-color: #fff;
			width: 100%;
			top: 0;
			z-index: 999;

			.checkin-date-info {
				display: flex;
				background-color: #FFFFFF;
				margin: 10rpx 20rpx;
				height: 120rpx;
				justify-content: space-around;

				.date-selector {
					margin: 10rpx 20rpx;
					display: flex;
					width: 50vw;

					.date-item {
						width: 35vw;

						.date-info {
							display: flex;
						}
					}
				}

				.day-num {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.u-image {
						margin-left: 20rpx;
					}
				}
			}
		}

		.room-type-item {
			border-radius: 30rpx;
			background-color: #FFFFFF;
			margin: 20rpx 20rpx;
			padding: 40rpx 20rpx;
			display: flex;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 6rpx 1rpx rgba(75, 75, 75, 0.1);
			border-radius: 10rpx;

			.room-type-item-middle {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				width: 200rpx;

				.room-type-item-middle-text {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
				}

				.room-type-item-middle-bottom {
					margin-top: 40rpx;
					font-size: 25rpx;

					text {
						margin-right: 20rpx;
						color: #666666
					}
				}
			}

			.room-type-item-right {
				width: 25%;
				margin-left: 20rpx;

				.room-type-item-right-text {
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 40rpx;
					font-weight: bold;
					color: #FF5C58
				}

				button {
					background-color: #F69B49;
					height: 60rpx;
					width: 100%;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 60rpx;
					border-radius: 6rpx;
				}

			}
		}
	}
</style>