Homestay_manage_app/pagesSub/detailInfo/detailInfo.vue

<template>
	<view class="container" v-if="detailInfo">
		<!-- 顶部民宿信息区域 -->
		<view class="header">
			<img src="https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240523163442_12.png" />
			<!-- 标题区域 -->
			<view class="header_title" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }">设施详情</view>
			<!-- 返回图标区域 -->
			<view class="header_icon" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }" @click="handleBack">
				<img src="../../static/index/left.png" />
			</view>

			<!-- 民宿名称区域 -->
			<view class="header_name" :style="{ paddingTop: statusBarH * 2 + 72 + 'rpx' }">{{ detailInfo.hotel_name }}</view>
			<!-- 开业时间区域 -->
			<view class="header_info" :style="{ paddingTop: statusBarH * 2 + 145 + 'rpx' }">
				{{ detailInfo.openTime }}开业 I {{ detailInfo.fitupTime }}装修 I {{ detailInfo.room_number_calc }}间客房
			</view>
			<!-- 类型区域 -->
			<view class="header_types" :style="{ paddingTop: statusBarH * 2 + 200 + 'rpx' }">
				<view class="types_item">{{ detailInfo.hTypeName }}</view>
				<view v-if="detailInfo.type == 1" class="types_item">银宿级</view>
				<view v-if="detailInfo.type == 2" class="types_item">金宿级</view>
				<view v-if="detailInfo.type == 3" class="types_item">白金级</view>
			</view>
		</view>

		<!-- 主体内容详细民宿信息区域 -->
		<view class="body">
			<view class="body_title">基本信息</view>
			<view class="body_towns">所属乡镇：{{ detailInfo.hotelTownshipName }}</view>
			<view class="body_address">
				<view class="address_text">地址：</view>
				<view class="address_info">
					{{ detailInfo.hposition }}
					<img src="../../static/index/address.png" @click="handleMap" />
				</view>
			</view>
			<view class="body_phone" @click="handlePhone(detailInfo.managerPhone)">联系电话：{{ detailInfo.managerPhone }}</view>

			<view class="body_title">政策</view>
			<view class="body_box">
				<img class="box_icon" src="../../static/index/time.png" />
				<view class="box_text">入离时间</view>
			</view>
			<view class="body_time">
				<view class="time_start">入住时间：{{ detailInfo.liveTime }}以后</view>
				<view class="time_end">离店时间：{{ detailInfo.leaveTime }}以前</view>
			</view>
			<view class="body_box">
				<img class="box_icon2" src="../../static/index/info.png" />
				<view class="box_text">乡村民宿介绍</view>
			</view>

			<view class="body_desc">
				{{ detailInfo.remark }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 民宿ID
			hotelId: '',
			// 详细信息
			detailInfo: null,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	onLoad(options) {
		this.hotelId = options.hotelId
		this.getDetailInfo()
	},
	methods: {
		async getDetailInfo() {
			const res = await this.$myRequest({
				url: '/mhotel/ahpgetHotelInfoByHotelId.action',
				data: {
					hotelId: this.hotelId
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.detailInfo = res.data
			}
		},
		handleMap() {
			uni.getSetting({
				success: (res) => {
					if (res.authSetting['scope.userLocation']) {
						let lat = this.detailInfo.hpositionWens.split(',')[0] * 1
						let lng = this.detailInfo.hpositionWens.split(',')[1] * 1
						uni.openLocation({
							latitude: lat,
							longitude: lng,
							name: this.detailInfo.hname,
							address: this.detailInfo.hposition,
							success: () => {}
						})
					} else {
						uni.showModal({
							content: '当前没有定位权限，是否去设置打开？',
							confirmText: '确认',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											this.handleMap()
										}
									})
								} else {
									uni.showToast({
										title: '获取定位权限失败',
										icon: 'none',
										mask: true
									})
								}
							}
						})
					}
				}
			})
		},
		handleBack() {
			uni.navigateBack(1)
		},
		handlePhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;

	.header {
		position: relative;
		height: 480rpx;
		color: #fff;
		overflow: hidden;

		img {
			width: 100%;
		}

		.header_title {
			position: absolute;
			top: 0;
			left: 308rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.header_icon {
			z-index: 2;
			position: absolute;
			top: 0;
			left: 5rpx;
			width: 47rpx;
			height: 70rpx;

			img {
				width: 47rpx;
				height: 47rpx;
			}
		}

		.header_name {
			position: absolute;
			top: 0;
			left: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.header_info {
			position: absolute;
			top: 0;
			left: 30rpx;
			font-size: 24rpx;
		}

		.header_types {
			position: absolute;
			top: 0;
			left: 30rpx;
			display: flex;
			font-size: 20rpx;

			.types_item {
				box-sizing: border-box;
				padding: 0 10rpx;
				margin-right: 15rpx;
				height: 30rpx;
				border-radius: 9rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
	}

	.body {
		position: absolute;
		top: 350rpx;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 0 30rpx 50rpx;
		height: calc(100vh - 350rpx);
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		overflow-y: auto;

		.body_title {
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.body_towns {
			line-height: 55rpx;
			font-size: 28rpx;
		}

		.body_address {
			display: flex;
			padding-right: 20rpx;
			line-height: 55rpx;
			font-size: 28rpx;

			.address_text {
				width: 105rpx;
			}

			.address_info {
				flex: 1;

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

		.body_phone {
			line-height: 55rpx;
			font-size: 28rpx;
		}

		.body_box {
			display: flex;
			align-items: center;

			.box_icon {
				width: 36rpx;
				height: 36rpx;
			}

			.box_icon2 {
				margin-top: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.box_text {
				margin-left: 16rpx;
				font-size: 28rpx;
			}
		}

		.body_time {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			color: #808080;
			font-size: 24rpx;

			.time_start {
				margin-left: 50rpx;
				margin-right: 60rpx;
			}
		}

		.body_desc {
			margin: 10rpx 0 0 50rpx;
			line-height: 45rpx;
			color: #808080;
			font-size: 24rpx;
		}
	}
}
</style>