Homestay_manage_app/pages/detail/detail.vue

<template>
	<view class="container" :style="'overflow:' + (showPage ? 'hidden' : 'visible')">
		<!-- 顶部民宿图片区域 -->
		<view class="banner">
			<img class="img" :src="info.imgUrl" />

			<view class="slogan">
				<img src="../../static/index/slogan.png" />
			</view>
		</view>

		<!-- 民宿详细信息区域 -->
		<view class="detail">
			<view class="detail_name">{{ info.hotelName }}</view>

			<view class="detail_info">
				<view class="info_left">2021年装修|2023年开业</view>
				<view class="info_right" @click="goPageDetailInfo">
					设施/详情
					<img src="../../static/index/right.png" />
				</view>
			</view>

			<view class="detail_group">
				<view class="group_item">
					<img src="../../static/index/meeting.png" />
					会议室
				</view>
				<view class="group_item">
					<img src="../../static/index/brekker.png" />
					含早
				</view>
				<view class="group_item">
					<img src="../../static/index/parking.png" />
					免费停车场
				</view>
			</view>

			<view class="address">
				<view class="address_left">宜春市靖安县北高速路口什么路899号</view>
				<view class="address_right">
					<view class="right_box">
						<img src="../../static/index/map.png" />
					</view>
					<view class="right_box">
						<img src="../../static/index/phone.png" />
					</view>
				</view>
			</view>

			<view class="distance">距离我{{ info.distance }}km</view>
		</view>

		<!-- 房型信息区域 -->
		<view class="body">
			<!-- 选择日期区域 -->
			<view class="body_header" @click="handleOpen">
				<view class="header_start">
					<view class="header_top">周{{ startTimeWeek }}入住</view>
					<view class="header_bottom">{{ startTimeMonth }}月{{ startTimeDay }}日</view>
				</view>
				<view class="header_night">
					<view class="night_line"></view>
					<view class="night_box">{{ nightNum }}晚</view>
					<view class="night_line"></view>
				</view>
				<view class="header_end">
					<view class="header_top">周{{ endTimeWeek }}离店</view>
					<view class="header_bottom">{{ endTimeMonth }}月{{ endTimeDay }}日</view>
				</view>
			</view>

			<!-- 日历组件 -->
			<uv-calendar
				ref="calendar"
				showLunar
				color="#096562"
				mode="range"
				:defaultDate="defaultDateMultiple"
				startText="住店"
				endText="离店"
				confirmDisabledText="请选择离店日期"
				@confirm="handleConfirm"
			></uv-calendar>

			<!-- 房型列表区域 -->
			<view class="body_content">
				<!-- 每一个房型盒子区域 -->
				<view class="body_box" v-for="item in list" :key="item.id" @click="handleLookDetail(item)">
					<view class="box_left">
						<img :src="item.imgUrl" />
					</view>

					<view class="box_center">
						<view class="center_top">{{ item.name }}</view>
						<view class="center_center">
							<view class="center_item">大床</view>
							<view class="center_item">无早</view>
						</view>
						<view class="center_bottom">
							<img class="img" src="../../static/index/wifi.png" />
							<img class="img" src="../../static/index/air.png" />
							<img class="img" src="../../static/index/smoke.png" />
							<img class="img" src="../../static/index/lock.png" />
						</view>
					</view>

					<view class="box_right">
						<view class="right_price">
							<text>¥</text>
							{{ item.price }}
						</view>
						<view class="right_btn" :class="{ inactive: !item.active }" @click.stop="goPageAffOrder(item)">订</view>
					</view>
				</view>

				<!-- 点击房型弹窗区域 -->
				<uv-popup ref="popup" bgColor="none" :safeAreaInsetBottom="false" :closeOnClickOverlay="false">
					<view class="body_pop">
						<!-- 轮播图区域 -->
						<swiper indicator-dots circular indicator-color="#FFFFFF" indicator-active-color="#096562" class="pop_swiper">
							<swiper-item class="pop_swiper_item">
								<img class="img" src="../../static/index/banner.png" />
							</swiper-item>
							<swiper-item class="pop_swiper_item">
								<img class="img" src="../../static/index/banner.png" />
							</swiper-item>
						</swiper>
						<!-- 轮播图关闭图标区域 -->
						<img class="pop_icon" src="../../static/index/close.png" @click="handleClosePop" />
						<view class="pop_body">
							<view class="body_title">{{ roomInfo.name }}</view>
							<view class="body_tags">
								<view class="tags_item">
									<img class="img" src="../../static/index/bed.png" />
									1张大床房
								</view>
								<view class="tags_item">
									<img class="img" src="../../static/index/wifi.png" />
									wifi免费
								</view>
								<view class="tags_item">
									<img class="img" src="../../static/index/place.png" />
									15-20㎡
								</view>
								<view class="tags_item">
									<img class="img" src="../../static/index/window.png" />
									窗户位于走廊/窗户较小
								</view>
							</view>
							<view class="body_title2">费用明细</view>
							<view class="body_detail">
								<view>¥{{ roomInfo.price }}</view>
								<view>
									每间每晚
									<text>¥{{ roomInfo.price }}</text>
								</view>
							</view>
							<view class="body_bottom">
								<view class="bottom_left">
									<img class="img" src="../../static/index/phone2.png" />
									联系商家
								</view>
								<view class="bottom_right">
									<text>¥</text>
									{{ roomInfo.price }}
									<view class="btn" @click="goPageAffOrder(roomInfo)">预定</view>
								</view>
							</view>
						</view>
					</view>
				</uv-popup>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 滚动穿透控制
			showPage: false,
			// 房型数据数组
			list: [
				{
					id: 1,
					imgUrl: '../../static/index/banner.png',
					name: '01户型',
					price: '323.00',
					active: true
				},
				{
					id: 2,
					imgUrl: '../../static/index/banner.png',
					name: '02户型',
					price: '283.00',
					active: false
				},
				{
					id: 3,
					imgUrl: '../../static/index/banner.png',
					name: '03户型',
					price: '223.00',
					active: true
				}
			],
			// 住几晚
			nightNum: 1,
			// 入住时间-月
			startTimeMonth: '',
			// 入住时间-日
			startTimeDay: '',
			// 入住时间-星期
			startTimeWeek: '',
			// 离店时间-月
			endTimeMonth: '',
			// 离店时间-日
			endTimeDay: '',
			// 离店时间-星期
			endTimeWeek: '',
			// 日历默认选择日期
			defaultDateMultiple: [],
			// 酒店信息
			info: {},
			// 房间信息
			roomInfo: {}
		}
	},
	onLoad(options) {
		// console.log(JSON.parse(options.info))
		this.info = JSON.parse(options.info)
		this.getTimes()
	},
	methods: {
		// 点击弹窗关闭图标回调
		handleClosePop() {
			this.showPage = false
			this.$refs.popup.close()
		},
		// 点击每一个户型回调
		handleLookDetail(item) {
			// console.log(item)
			this.roomInfo = item
			this.showPage = true
			this.$refs.popup.open('bottom')
		},
		// 点击设施详情回调
		goPageDetailInfo() {
			uni.navigateTo({
				url: '/pages/detailInfo/detailInfo'
			})
		},
		// 点击 订 按钮回调
		goPageAffOrder(item) {
			if (item.active) {
				this.$refs.popup.close()
				this.showPage = false
				let info = JSON.stringify({
					nightNum: this.nightNum,
					startTimeDay: this.startTimeDay,
					startTimeMonth: this.startTimeMonth,
					startTimeWeek: this.startTimeWeek,
					endTimeDay: this.endTimeDay,
					endTimeMonth: this.endTimeMonth,
					endTimeWeek: this.endTimeWeek,
					price: item.price
				})
				uni.navigateTo({
					url: `/pages/affirmOrder/affirmOrder?info=${info}`
				})
			} else {
				uni.showToast({
					title: '该房间已售罄',
					icon: 'none'
				})
			}
		},
		// 点击日期区域回调
		handleOpen() {
			this.$refs.calendar.open()
		},
		// 选择日历确定按钮回调
		handleConfirm(e) {
			// console.log(e)
			this.startTimeWeek = this.getWeek(e[0])
			this.endTimeWeek = this.getWeek(e[e.length - 1])
			let temStart = e[0].split('-')
			let temEnd = e[e.length - 1].split('-')

			this.startTimeMonth = temStart[1]
			this.startTimeDay = temStart[2]
			this.endTimeMonth = temEnd[1]
			this.endTimeDay = temEnd[2]
			this.nightNum = e.length - 1
		},
		// 获取今明两天的日期,星期
		getTimes() {
			let weekList = ['日', '一', '二', '三', '四', '五', '六']
			//今天的日期
			let today = new Date()

			this.startTimeWeek = weekList[today.getDay()]
			this.startTimeMonth = (today.getMonth() + 1).toString().padStart(2, 0)
			this.startTimeDay = today.getDate().toString().padStart(2, 0)

			//明天的日期
			let tomorrow = new Date()
			tomorrow.setTime(tomorrow.getTime() + 24 * 60 * 60 * 1000)
			this.endTimeWeek = weekList[tomorrow.getDay()]
			this.endTimeMonth = (tomorrow.getMonth() + 1).toString().padStart(2, 0)
			this.endTimeDay = tomorrow.getDate().toString().padStart(2, 0)
			// 日历默认选择的日期
			this.defaultDateMultiple = [`${today.getFullYear()}-${this.startTimeMonth}-${this.startTimeDay}`, `${tomorrow.getFullYear()}-${this.endTimeMonth}-${this.endTimeDay}`]
		},

		// 传入参数获取当前是星期几
		getWeek(time) {
			let date = new Date(time)
			let week = date.getDay()
			let weekList = ['日', '一', '二', '三', '四', '五', '六']
			return weekList[week]
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 100vh;
	background-color: #ebeced;

	.banner {
		position: relative;
		margin-top: 20rpx;
		width: 750rpx;
		height: 422rpx;

		.img {
			width: 100%;
			height: 100%;
		}

		.slogan {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 163rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.4);

			img {
				width: 125rpx;
				height: 44rpx;
			}
		}
	}

	.detail {
		position: absolute;
		top: 265rpx;
		left: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 710rpx;
		height: 254rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.detail_name {
			margin-top: 25rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.detail_info {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;

			.info_left {
				color: #999999;
				font-size: 20rpx;
			}

			.info_right {
				display: flex;
				align-items: center;
				color: #096562;
				font-size: 24rpx;

				img {
					margin-left: 6rpx;
					width: 10rpx;
					height: 20rpx;
				}
			}
		}

		.detail_group {
			display: flex;
			flex-wrap: wrap;
			margin-top: 5rpx;

			.group_item {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
				color: #999999;
				font-size: 20rpx;

				img {
					margin-right: 5rpx;
					width: 22rpx;
					height: 22rpx;
				}
			}
		}

		.address {
			display: flex;
			justify-content: space-between;
			margin-top: 8rpx;
			font-size: 28rpx;
			font-weight: bold;

			.address_left {
				width: 480rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.address_right {
				display: flex;

				.right_box {
					margin-left: 28rpx;
					width: 50rpx;
					height: 78rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.distance {
			margin-top: -35rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}

	.body {
		position: absolute;
		top: 539rpx;
		left: 20rpx;
		padding-bottom: 30rpx;
		width: 710rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.body_header {
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 150rpx;

			.header_start {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 213rpx;
				height: 150rpx;

				.header_top {
					margin-bottom: 10rpx;
					color: #999999;
					font-size: 24rpx;
				}

				.header_bottom {
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.header_night {
				display: flex;
				justify-content: center;
				align-items: center;

				.night_line {
					width: 17rpx;
					height: 1rpx;
					background-color: #296de3;
				}

				.night_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 81rpx;
					height: 46rpx;
					font-size: 24rpx;
					border-radius: 66rpx;
					border: 1rpx solid #296de3;
				}
			}

			.header_end {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 213rpx;
				height: 150rpx;

				.header_top {
					margin-bottom: 10rpx;
					color: #999999;
					font-size: 24rpx;
				}

				.header_bottom {
					font-size: 34rpx;
					font-weight: bold;
				}
			}
		}

		.body_content {
			.body_box {
				box-sizing: border-box;
				padding: 0 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				height: 193rpx;
				border-bottom: 1rpx solid #cccccc;

				.box_left {
					width: 213rpx;
					height: 161rpx;
					border-radius: 5rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.box_center {
					margin-left: 16rpx;

					.center_top {
						font-size: 34rpx;
						font-weight: bold;
					}

					.center_center {
						display: flex;
						flex-wrap: wrap;
						margin-top: 10rpx;
						color: #999999;
						font-size: 24rpx;

						.center_item {
							margin-right: 15rpx;
						}
					}
					.center_bottom {
						margin-top: 25rpx;

						.img {
							margin-right: 15rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.box_right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					margin-left: auto;
					margin-top: 20rpx;

					.right_price {
						color: #ff5733;
						font-size: 42rpx;
						text {
							font-size: 24rpx;
						}
					}

					.right_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 10rpx;
						width: 100rpx;
						height: 66rpx;
						color: #fff;
						font-size: 36rpx;
						border-radius: 11rpx;
						background-color: #096562;
					}

					.inactive {
						background-color: #cccccc;
					}
				}
			}

			.body_pop {
				position: relative;
				height: 955rpx;
				border-radius: 22rpx 22rpx 0 0;
				background-color: #fff;
				overflow-y: auto;

				.pop_swiper {
					height: 422rpx;
					border-radius: 22rpx 22rpx 0 0;

					.pop_swiper_item {
						width: 100%;
						height: 100%;

						.img {
							width: 100%;
							height: 100%;
							border-radius: 22rpx 22rpx 0 0;
						}
					}
				}

				.pop_icon {
					position: absolute;
					top: 20rpx;
					right: 30rpx;
					width: 58rpx;
					height: 58rpx;
				}

				.pop_body {
					box-sizing: border-box;
					padding: 0 20rpx 30rpx;

					.body_title {
						margin-top: 30rpx;
						font-size: 32rpx;
						font-weight: bold;
					}

					.body_tags {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20rpx;

						.tags_item {
							display: flex;
							align-items: center;
							margin-right: 76rpx;
							margin-bottom: 20rpx;
							color: #383838;
							font-size: 24rpx;

							.img {
								margin-right: 5rpx;
								width: 28rpx;
								height: 28rpx;
							}
						}
					}

					.body_title2 {
						margin-top: 20rpx;
						font-size: 28rpx;
					}

					.body_detail {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;
						box-sizing: border-box;
						padding: 20rpx 30rpx;
						margin-top: 18rpx;
						width: 710rpx;
						height: 215rpx;
						font-size: 28rpx;
						border-radius: 7rpx;
						background-color: #f2f2f2;

						text {
							color: #ff5733;
						}
					}

					.body_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 250rpx;
						height: 80rpx;

						.bottom_left {
							display: flex;
							align-items: center;
							color: #333333;
							font-size: 24rpx;

							.img {
								margin-right: 10rpx;
								width: 48rpx;
								height: 48rpx;
							}
						}

						.bottom_right {
							display: flex;
							align-items: center;
							color: #ff5733;
							font-size: 40rpx;
							font-weight: bold;

							text {
								font-size: 24rpx;
							}

							.btn {
								display: flex;
								justify-content: center;
								align-items: center;
								margin-left: 30rpx;
								width: 238rpx;
								height: 80rpx;
								color: #fff;
								font-size: 32rpx;
								font-weight: 400;
								border-radius: 64rpx;
								background-color: #096562;
							}
						}
					}
				}
			}
		}
	}
}
</style>