Homestay_manage_app/pages/detail/detail.vue

<template>
	<view class="container" :style="'overflow:' + (showPage ? 'hidden' : 'visible')" v-if="info">
		<!-- 顶部分段器区域 -->
		<view class="control">
			<uni-segmented-control :current="activeIndex" :values="headerList" style-type="text" active-color="#096562" @clickItem="onClickItem" />
		</view>

		<!-- 顶部民宿图片区域 -->
		<view class="banner">
			<swiper autoplay circular class="swiper">
				<swiper-item class="swiper_item" v-for="(item, current) in info.hotelFileInfoList" :key="item.id" @click="handleClickSwiper(info.hotelFileInfoList, current)">
					<img mode="aspectFill" class="img" :src="item.url" />
				</swiper-item>
			</swiper>
			<view class="slogan">
				<img src="../../static/index/slogan.png" />
			</view>
			<!-- 720°全景链接区域 -->
			<view class="full" v-if="info.linkProUrl" @click="handleGoPull(info.linkProUrl)">
				<img src="../../static/index/full.png" />
				720°全景
			</view>
			<!-- 收藏按钮区域 -->
			<view class="collect">
				<uni-fav circle bgColorChecked="#096562" :checked="info.is_collect_hotel" @click="changeCollect(info.is_collect_hotel)" />
			</view>
		</view>

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

			<view class="detail_info">
				<view class="info_left">{{ info.fitupTime }}装修 | {{ info.openTime }}开业</view>
				<view class="info_right" @click="goPageDetailInfo">
					设施/详情
					<img src="../../static/index/right.png" />
				</view>
			</view>

			<view class="detail_group">
				<view class="group_item" v-for="item in info.hconfigList" :key="item.id">
					<img :src="item.fileUrl" />
					{{ item.name }}
				</view>
			</view>

			<view class="address">
				<view class="address_left">{{ info.hposition }}</view>
				<view class="address_right">
					<view class="right_box" @click="handleMap(info)">
						<img src="../../static/index/map.png" />
					</view>
					<view class="right_box" @click="handlePhone(info.managerPhone)">
						<img src="../../static/index/phone.png" />
					</view>
				</view>
			</view>

			<view class="distance" v-if="distance">距离我{{ distance }}km</view>
		</view>

		<!-- 房型信息区域 -->
		<view class="body">
			<!-- 选择日期区域 -->
			<view class="body_header" @click="handleOpen()">
				<view class="header_start">
					<view class="header_top">{{ getWeek(startTime) }}入住</view>
					<view class="header_bottom">{{ startTime.slice(5, 7) }}月{{ startTime.slice(8, 10) }}日</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">{{ getWeek(endTime) }}离店</view>
					<view class="header_bottom">{{ endTime.slice(5, 7) }}月{{ endTime.slice(8, 10) }}日</view>
				</view>
			</view>

			<!-- 日历组件 -->
			<uv-calendars
				ref="calendar"
				range
				title="选择日期"
				start-text="住店"
				end-text="离店"
				color="#096562"
				confirmColor="#096562"
				:selected="selected"
				:startDate="earlyTime"
				:endDate="lateTime"
				@monthSwitch="monthSwitch"
				@confirm="handleConfirm"
			/>

			<!-- 房型列表区域 -->
			<view class="body_content" v-if="list.length">
				<!-- 每一个房型盒子区域 -->
				<view class="body_box" v-for="item in list" :key="item.id" @click="handleLookDetail(item)">
					<view class="box_left">
						<img mode="aspectFill" :src="item.fileInfoList[0].url" />
					</view>

					<view class="box_center">
						<view class="center_top">{{ item.hName }}</view>
						<view class="center_center">
							<view class="center_item" v-if="item.hAreas">{{ item.hAreas }}㎡ 剩余{{ item.remainRooms }}间</view>
						</view>
						<view class="center_bottom">
							<img v-for="item2 in item.hConfigList" :key="item2.id" class="img" :src="item2.fileUrl" />
						</view>
					</view>

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

				<!-- 点击房型弹窗区域 -->
				<uv-popup ref="popup" bgColor="none" :safeAreaInsetBottom="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" v-for="item in roomInfo.fileInfoList" :key="item.id">
								<img class="img" :src="item.url" />
							</swiper-item>
						</swiper>
						<!-- 轮播图关闭图标区域 -->
						<img class="pop_icon" src="../../static/index/close.png" @click="handleClosePop" />

						<view class="pop_body">
							<view class="body_title">{{ roomInfo.hName }}</view>
							<view class="body_tags">
								<view class="tags_item">
									<img class="img" src="../../static/index/place.png" />
									{{ roomInfo.hAreas }}㎡
								</view>
								<view class="tags_item" v-for="item2 in roomInfo.hConfigList" :key="item2.id">
									<img class="img" :src="item2.fileUrl" />
									{{ item2.name }}
								</view>
							</view>
							<view class="body_title2">费用明细</view>
							<view class="body_detail">
								<!-- <view class="detail_old">¥{{ roomInfo.price }}</view> -->
								<!-- <view class="detail_box">
									黄金会员9折
									<text>-¥25</text>
								</view>
								<view class="detail_box">
									活动
									<text>-¥2.5</text>
								</view> -->

								<view class="detail_new">
									每间每晚
									<view class="ml_10 color">¥</view>
									<view class="price color">{{ roomInfo.price }}</view>
								</view>
							</view>
							<view class="body_bottom">
								<view class="bottom_left" @click="handlePhone(info.managerPhone)">
									<img class="img" src="../../static/index/phone2.png" />
									联系商家
								</view>
								<view class="bottom_right">
									<text>¥</text>
									{{ roomInfo.price }}
									<view class="btn" :class="{ inactive: roomInfo.remainRooms * 1 <= 0 }" @click="goPageAffOrder(roomInfo)">预定</view>
								</view>
							</view>
						</view>
					</view>
				</uv-popup>
			</view>

			<view class="noData" v-else>
				<img src="../../static/images/noData.png" />
				暂无数据
			</view>
		</view>

		<!-- 评价区域 -->
		<view class="evaluate">
			<view class="evaluate_title">评价</view>
			<view class="evaluate_body">
				<!-- 评分区域 -->
				<view class="header" v-if="score">
					<view class="header_box">
						<!-- 总评分区域 -->
						<view class="box_left">{{ score }}</view>
						<view class="box_right">
							<!-- 位置评分区域 -->
							<view class="right_item">
								<view class="item_info">位置 {{ scoreWz }}</view>
								<view class="item_progress">
									<progress activeColor="#0BAD8B" backgroundColor="#CCCCCC" stroke-width="10" border-radius="92" :percent="((scoreWz * 1) / 5) * 100" />
								</view>
							</view>
							<!-- 设施评分区域 -->
							<view class="right_item">
								<view class="item_info">设施 {{ scoreSs }}</view>
								<view class="item_progress">
									<progress activeColor="#0BAD8B" backgroundColor="#CCCCCC" stroke-width="10" border-radius="92" :percent="((scoreSs * 1) / 5) * 100" />
								</view>
							</view>
							<!-- 服务评分区域 -->
							<view class="right_item">
								<view class="item_info">服务 {{ scoreFw }}</view>
								<view class="item_progress">
									<progress activeColor="#0BAD8B" backgroundColor="#CCCCCC" stroke-width="10" border-radius="92" :percent="((scoreFw * 1) / 5) * 100" />
								</view>
							</view>
							<!-- 卫生评分区域 -->
							<view class="right_item">
								<view class="item_info">卫生 {{ scoreWs }}</view>
								<view class="item_progress">
									<progress activeColor="#0BAD8B" backgroundColor="#CCCCCC" stroke-width="10" border-radius="92" :percent="((scoreWs * 1) / 5) * 100" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 每一个评价区域 -->
				<view class="evaluate_box" v-for="item in commentList" :key="item.id" @click="handleGoDetail(item)">
					<!-- 用户信息区域 -->
					<view class="box_userInfo">
						<img mode="aspectFill" :src="item.headPhoto" />
						<view class="userInfo_msg">
							<view class="msg_name">{{ item.userName }}</view>
							<view class="msg_star">
								<uni-rate readonly activeColor="#FFC300" :size="16" :value="item.score" />
							</view>
						</view>
					</view>

					<!-- 入住时间区域 -->
					<view class="box_time" v-if="item.liveTime && item.commentTime">
						{{ item.liveTime.slice(0, 10) }}入住，{{ item.commentTime.slice(0, 10) }}发表 | {{ item.houseName }}
					</view>

					<!-- 评价内容区域 -->
					<uv-read-more show-height="85rpx" closeText="全文" color="#096663" fontSize="24rpx" textIndent="0" :toggle="true" :shadowStyle="shadowStyle">
						<view class="box_content">
							{{ item.content }}
						</view>
					</uv-read-more>

					<!-- 图片区域 -->
					<view class="box_img">
						<img
							v-for="(ele, index) in item.url"
							:key="index"
							mode="aspectFill"
							v-if="ele.indexOf('jpg') !== -1 || ele.indexOf('png') !== -1"
							:src="ele"
							@click.stop="handleClickImg(ele, index)"
						/>
						<video
							:id="item.id + index2"
							class="video"
							:show-fullscreen-btn="false"
							:show-play-btn="false"
							v-for="(video, index2) in item.url"
							:key="index2"
							v-if="video.indexOf('mp4') !== -1"
							:src="video"
							@fullscreenchange="fullscreenchange"
							@click.stop="handleClickVideo(item.id + index2)"
						></video>
					</view>
				</view>

				<view class="foot" @click="handleGoPage" v-if="commentList.length">
					查看全部{{ total }}条评价
					<img src="../../static/index/right.png" />
				</view>

				<view class="noData" v-if="commentList.length === 0">
					<img src="../../static/images/noData.png" />
					暂无评论
				</view>
			</view>
		</view>

		<!-- 周边区域 -->
		<view class="rim">
			<!-- 标题区域 -->
			<view class="rim_title">周边</view>
			<!-- 周边分段器区域 -->
			<view class="rim_control">
				<span class="control_box" v-for="(item, index) in rimHeaderList" :key="index" @click="onClickItemRim(index)">
					<text class="text" :class="{ active: rimActiveIndex === index }">{{ item }}</text>
				</span>
			</view>
			<!-- 周边列表区域 -->
			<view class="rim_body" v-if="rimList.length">
				<!-- 每一个盒子区域 -->
				<view class="rim_box" v-for="item in rimList" :key="item.id" @click="GoRimDetail(item)">
					<img mode="aspectFill" :src="item.first_img" />
					<view class="box_info">
						<view class="info_top">{{ item.rname }}</view>
						<view class="info_center" v-if="item.distance">距您{{ item.distance }}km</view>
						<!-- <view class="info_bottom">
							<view class="bottom_rate">4.8分</view>
							<view class="bottom_num">{{ item.num }}条评论</view>
							<view class="bottom_price">
								¥220
								<text>起</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="noData" v-else>
				<img src="../../static/images/noData.png" />
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 滚动穿透控制
			showPage: false,
			// 房型数据数组
			list: [],
			// 住几晚
			nightNum: 1,
			// 选择日期数组
			dayList: [],
			// 酒店信息
			info: null,
			// 房间信息
			roomInfo: {},
			// 民宿Id
			hotelId: '',
			// 是否有定位权限
			showLocation: false,
			// 是否展示距离
			distance: '',
			// 入住时间 YYYY-MM-DD
			startTime: '',
			// 离店时间 YYYY-MM-DD
			endTime: '',
			// 日历可以选择的最早日期
			earlyTime: '',
			// 日历可以选择的最晚日期
			lateTime: '',
			activeIndex: 0,
			headerList: ['预定', '评价', '周边'],
			// 评价列表数据
			commentList: [],
			queryDom: null,
			// 评价Dom距离页面顶部的距离
			domTop: null,
			// 周边Dom距离页面顶部的距离
			domTopRim: null,
			selected: [],
			// 总评分
			score: '',
			// 服务评分
			scoreFw: '',
			// 设施评分
			scoreSs: '',
			// 卫生评分
			scoreWs: '',
			// 位置评分
			scoreWz: '',
			// 评论总条数
			total: null,
			// 是否收藏
			ischecked: false,
			// video 上下文 videoContext 对象
			videoContext: null,
			// 是否是全屏状态
			isFullScreen: false,
			// 周边列表数组
			rimList: [],
			// 周边分段器当前索引
			rimActiveIndex: 0,
			// 周边分段器数组
			rimHeaderList: ['民宿', '美食', '景点', '洗浴', '健身', 'KTV', '电影院', '停车场', '酒吧', '加油站', '其他'],
			// 周边列表当前页
			page: 1,
			// 周边列表每页多少条
			rows: 10,
			// 周边列表总条数
			rimTotal: null,
			// 用户定位经度
			myLng: 0,
			// 用户定位纬度
			myLat: 0
		}
	},
	mounted() {
		// 开启转发功能
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	},
	onLoad(options) {
		this.getTimes()
		this.hotelId = options.id
		this.distance = options.distance === 'undefined' ? false : options.distance
		uni.getSetting({
			success: (res) => {
				this.showLocation = res.authSetting['scope.userLocation']
				this.getHotelInfo()
				this.getEvaData()
			}
		})
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				this.myLat = res.latitude
				this.myLng = res.longitude
				// this.rimList.forEach((ele) => {
				// 	let lat = ele.jingwei.split(',')[1]
				// 	let lng = ele.jingwei.split(',')[0]
				// 	ele.distance = this.calculateDistance(lat, lng)
				// })
			},
			complete: () => {
				this.getRimList()
			}
		})
	},
	onPageScroll(e) {
		if (!this.queryDom) {
			this.queryDom = uni.createSelectorQuery().in(this)
			this.queryDom
				.select('.evaluate')
				.boundingClientRect((data) => {
					this.domTop = data.top
				})
				.exec()
			this.queryDom
				.select('.rim')
				.boundingClientRect((data) => {
					this.domTopRim = data.top
				})
				.exec()
		}
		if (e.scrollTop > this.domTopRim) {
			this.activeIndex = 2
		} else if (e.scrollTop > this.domTop) {
			this.activeIndex = 1
		} else {
			this.activeIndex = 0
		}
	},
	onReachBottom() {
		if (this.rimList < this.rimTotal) {
			this.page++
			this.getRimList()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	methods: {
		async getRimList() {
			const res = await this.$myRequest({
				url: '/mhotel/applistAround.action',
				data: {
					page: this.page,
					rows: this.rows,
					rtype: this.rimHeaderList[this.rimActiveIndex]
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.rimList = [...this.rimList, ...res.rows]
				this.rimTotal = res.total
				if (this.distance && this.rimList.length) {
					this.rimList.forEach((ele) => {
						let lat = ele.jingwei.split(',')[1]
						let lng = ele.jingwei.split(',')[0]
						ele.distance = this.calculateDistance(lat, lng)
					})
				}
			}
		},
		GoRimDetail(item) {
			let info = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/rimDetail/rimDetail?info=${info}`
			})
		},
		// 进入全屏和退出全屏时触发的回调
		fullscreenchange(e) {
			this.isFullScreen = e.detail.fullScreen
		},
		// 点击视频控件时触发的回调
		handleClickVideo(id) {
			this.videoContext = uni.createVideoContext(id)
			if (this.isFullScreen) {
				this.videoContext.stop()
				this.videoContext.exitFullScreen()
			} else {
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			}
		},
		// 点击收藏按钮回调
		async changeCollect(is_collect_hotel) {
			let userInfo = uni.getStorageSync('userInfo')
			let openid = uni.getStorageSync('openid')

			if (userInfo && openid) {
				const res = await this.$myRequest({
					url: is_collect_hotel ? '/mhotel/ahpdelCollectHotel.action' : '/mhotel/ahpcollectHotel.action',
					data: {
						userId: uni.getStorageSync('userInfo').id,
						hotelId: this.hotelId
					}
				})
				// console.log(res)
				if (res.code === 200) {
					uni.showToast({
						title: is_collect_hotel ? '取消收藏成功' : '收藏成功',
						icon: 'success',
						mask: true
					})
					this.info.is_collect_hotel = !this.info.is_collect_hotel
				}
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		},
		// 获取评论数据
		async getEvaData(id) {
			const res = await this.$myRequest({
				url: '/mhotel/abcaevaluatePage.action',
				data: {
					hotelId: id ? id : this.hotelId,
					page: 1,
					rows: 5,
					status: 0
				}
			})
			// console.log(res);
			if (res.code === 200 && res.page.pageList) {
				this.score = res.score.score.toFixed(1)
				this.scoreFw = res.score.scoreFw.toFixed(1)
				this.scoreSs = res.score.scoreSs.toFixed(1)
				this.scoreWs = res.score.scoreWs.toFixed(1)
				this.scoreWz = res.score.scoreWz.toFixed(1)
				this.commentList = res.page.pageList
				this.total = res.page.total
			}
		},
		// 获取民宿信息
		async getHotelInfo(id) {
			const res = await this.$myRequest({
				url: '/mhotel/ahpgetHouseByHotelId.action',
				data: {
					hotelId: id ? id : this.hotelId,
					userId: uni.getStorageSync('userInfo').id,
					queryStartTime: this.startTime,
					queryEndTime: this.endTime
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.info = res.data.data
				this.list = res.data.data.houseList
				uni.setNavigationBarTitle({
					title: res.data.data.hotel_name
				})
			}
		},
		onClickItem(e) {
			this.activeIndex = e.currentIndex
			if (this.activeIndex === 1) {
				uni.pageScrollTo({
					selector: '.evaluate'
				})
			} else if (this.activeIndex === 0) {
				uni.pageScrollTo({
					scrollTop: 0
				})
			} else if (this.activeIndex === 2) {
				uni.pageScrollTo({
					selector: '.rim'
				})
			}
		},
		onClickItemRim(index) {
			this.rimActiveIndex = index
			this.pgae = 1
			this.rimList = []
			this.getRimList()
		},
		monthSwitch(e) {
			let time = e.year + '-' + e.month.toString().padStart(2, 0) + '-01'
			this.handleOpen(time)
		},
		// 选择日期确定回调
		handleConfirm(e) {
			this.startTime = e.range.before
			this.endTime = e.range.after
			this.dayList = e.range.data
			this.nightNum = e.range.data.length - 1
			this.getHotelInfo()
		},
		// 点击地图图标回调
		handleMap(item) {
			if (this.showLocation) {
				let lat = item.hpositionWens.split(',')[0] * 1
				let lng = item.hpositionWens.split(',')[1] * 1
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name: item.hname,
					address: item.hposition,
					success: () => {}
				})
			} else {
				uni.showModal({
					content: '当前没有定位权限，是否去设置打开？',
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {
									this.showLocation = true
									this.handleMap(item)
								}
							})
						} else {
							uni.showToast({
								title: '获取定位权限失败,无法使用地图功能',
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		},
		// 点击电话图标回调
		handlePhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		// 点击弹窗关闭图标回调
		handleClosePop() {
			this.showPage = false
			this.$refs.popup.close()
		},
		// 点击每一个户型回调
		handleLookDetail(item) {
			this.roomInfo = item
			this.showPage = true
			this.$refs.popup.open('bottom')
		},
		// 点击设施详情回调
		goPageDetailInfo() {
			uni.navigateTo({
				url: `/pages/detailInfo/detailInfo?hotelId=${this.hotelId}`
			})
		},
		// 点击 订 预定 按钮回调
		goPageAffOrder(item) {
			let flag = uni.getStorageSync('openid')
			if (flag) {
				if (!this.startTime) {
					uni.showToast({
						title: '请选择入住时间',
						icon: 'none'
					})
					return
				}
				if (!this.endTime) {
					uni.showToast({
						title: '请选择离店时间',
						icon: 'none'
					})
					return
				}
				if (item.remainRooms * 1 > 0) {
					this.$refs.popup.close()
					this.showPage = false

					let info = JSON.stringify({
						nightNum: this.nightNum,
						startTimeDay: this.startTime.slice(8, 10),
						startTimeMonth: this.startTime.slice(5, 7),
						startTimeWeek: this.getWeek(this.startTime),
						endTimeDay: this.endTime.slice(8, 10),
						endTimeMonth: this.endTime.slice(5, 7),
						endTimeWeek: this.getWeek(this.endTime),
						item: item,
						queryStartTime: this.startTime,
						queryEndTime: this.endTime,
						dayList: this.dayList,
						hTypeName: this.info.hTypeName,
						hotelName: this.info.hotel_name,
						hotelId: this.hotelId
					})
					uni.navigateTo({
						url: `/pages/affirmOrder/affirmOrder?info=${info}`
					})
				} else {
					uni.showToast({
						title: '该房间已售罄',
						icon: 'none',
						mask: true
					})
				}
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		},
		// 点击日期区域回调
		async handleOpen(time) {
			const res = await this.$myRequest({
				url: '/mhotel/house/price/priceCalendar.action',
				data: {
					merchantId: this.info.managerId,
					startTime: time ? time : this.startTime
				}
			})
			if (res.code === 200) {
				this.selected = res.data
			}
			if (!time) {
				this.$refs.calendar.open()
			}
		},
		// 传入参数获取当前是星期几
		getWeek(time) {
			let date = new Date(time)
			let week = date.getDay()
			let weekList = ['日', '一', '二', '三', '四', '五', '六']
			let res = '周' + weekList[week]
			return res
		},
		// 获取今明两天的日期 YYYY-MM-DD
		getTimes() {
			// 今天
			let today = new Date()
			// 明天
			let tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)

			let late = new Date(today.getTime() + 24 * 60 * 60 * 1000 * 14)

			this.startTime = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, 0)}-${today.getDate().toString().padStart(2, 0)}`
			this.endTime = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, 0)}-${tomorrow.getDate().toString().padStart(2, 0)}`
			this.dayList = [this.startTime, this.endTime]

			this.earlyTime = this.startTime
			this.lateTime = `${late.getFullYear()}-${(late.getMonth() + 1).toString().padStart(2, 0)}-${late.getDate().toString().padStart(2, 0)}`
		},
		handleGoPull(linkProUrl) {
			let temURL = linkProUrl.slice(22)
			let url = 'https://f10mfe54bri.720yun.com' + temURL
			uni.navigateTo({
				url: `/pages/web/web?url=${url}`
			})
		},
		// 点击每一个评价回调
		handleGoDetail(item) {
			uni.navigateTo({
				url: `/pages/appraiseDetail/appraiseDetail?id=${item.id}`
			})
		},
		// 点击评价图片回调
		handleClickImg(url, index) {
			if (this.videoContext) {
				this.videoContext.stop()
			}
			// 预览图片
			uni.previewImage({
				current: index,
				urls: [url]
			})
		},
		handleGoPage() {
			uni.navigateTo({
				url: `/pages/appraise/appraise?hotelId=${this.hotelId}`
			})
		},
		handleClickSwiper(urls, current) {
			const temList = urls.map((ele) => ele.url)
			uni.previewImage({
				urls: temList,
				current
			})
		},
		// 计算两个点之间的距离
		calculateDistance(lat, lng) {
			let centerLat = lat
			let centerLng = lng

			let red1 = (this.myLat * Math.PI) / 180.0
			let red2 = (centerLat * Math.PI) / 180.0
			let a = red1 - red2
			let b = (this.myLng * Math.PI) / 180.0 - (centerLng * Math.PI) / 180.0
			let R = 6378137
			let distance = R * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(red1) * Math.cos(red2) * Math.pow(Math.sin(b / 2), 2)))
			let res = (distance / 1000).toFixed(2) * 1

			return res
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding-bottom: 20rpx;
	min-height: 100vh;
	background-color: #f2f3f5;

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

	.banner {
		position: relative;
		width: 750rpx;
		height: 422rpx;

		.swiper {
			height: 422rpx;

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

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

		.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;
			}
		}

		.full {
			position: absolute;
			top: 13rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 173rpx;
			height: 60rpx;
			color: #fff;
			font-size: 24rpx;
			border-radius: 11rpx;
			background-color: rgba(0, 0, 0, 0.5);

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

		.collect {
			position: absolute;
			top: 68rpx;
			left: 8rpx;
		}
	}

	.detail {
		z-index: 1;
		float: left;
		margin-top: -177rpx;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx;
		width: 710rpx;
		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;
			width: 450rpx;

			.group_item {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
				margin-bottom: 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 {
		float: left;
		margin-top: 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;
				font-size: 30rpx;

				.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;
				font-size: 30rpx;

				.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: 266rpx;
						font-size: 24rpx;
						border-radius: 7rpx;
						background-color: #f2f2f2;

						.detail_old {
							text-align: end;
							text-decoration: line-through;
						}

						.detail_box {
							display: flex;
							justify-content: space-between;
							color: #808080;

							text {
								color: #ff5733;
							}
						}

						.detail_new {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							font-size: 24rpx;

							.color {
								color: #ff5733;
							}

							.price {
								font-size: 36rpx;
							}

							.ml_10 {
								margin-left: 10rpx;
							}
						}
					}

					.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;
							}

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

		.noData {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-bottom: 20rpx;

			img {
				margin-top: 60rpx;
				width: 600rpx;
				height: 600rpx;
			}
		}
	}

	.evaluate {
		width: 710rpx;
		background-color: #f2f3f5;

		.evaluate_title {
			line-height: 83rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.evaluate_body {
			display: flex;
			flex-direction: column;
			// margin-bottom: 20rpx;
			width: 710rpx;
			border-radius: 11rpx;
			background-color: #fff;

			.header {
				display: flex;
				align-items: center;
				margin: 25rpx 20rpx;
				width: 670rpx;
				height: 120rpx;
				border-radius: 13rpx;
				background-color: #e4f0ef;

				.header_box {
					display: flex;
					height: 70rpx;

					.box_left {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 140rpx;
						color: #096562;
						font-size: 60rpx;
						font-weight: 900;
						border-right: 1rpx solid #cccccc;
					}

					.box_right {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						color: #808080;
						font-size: 24rpx;

						.right_item {
							display: flex;
							align-items: center;
							width: 50%;

							.item_info {
								margin-left: 33rpx;
							}

							.item_progress {
								margin-right: 20rpx;
								padding: 0 13rpx;
								flex: 1;
							}
						}
					}
				}
			}

			.evaluate_box {
				box-sizing: border-box;
				padding: 0 20rpx;
				margin: 0 auto 20rpx;
				width: 710rpx;
				border-radius: 18rpx;
				background-color: #fff;

				.box_userInfo {
					display: flex;
					align-items: center;
					height: 115rpx;

					img {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.userInfo_msg {
						margin-left: 18rpx;

						.msg_name {
							font-size: 28rpx;
						}

						.msg_star {
							margin-left: -5rpx;
							margin-top: 5rpx;
						}
					}
				}

				.box_time {
					display: flex;
					align-items: center;
					color: #a6a6a6;
					font-size: 24rpx;
				}

				.box_content {
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #000;
				}

				.box_img {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-auto-rows: auto;
					gap: 10rpx;
					margin-top: 20rpx;

					img {
						width: 216rpx;
						height: 216rpx;
						border-radius: 20rpx;
					}

					.video {
						width: 216rpx;
						height: 216rpx;
						border-radius: 20rpx;
					}
				}
			}

			.foot {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 20rpx;
				height: 68rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #096663;

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

			.noData {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 60rpx;

				img {
					margin-top: 160rpx;
					width: 600rpx;
					height: 600rpx;
				}
			}
		}
	}

	.rim {
		width: 710rpx;
		background-color: #f2f3f5;

		.rim_title {
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.rim_control {
			margin-bottom: 10rpx;
			line-height: 85rpx;
			font-size: 28rpx;
			color: #808080;
			white-space: nowrap;
			overflow-x: auto;
			background-color: #fff;

			.control_box {
				padding: 0 15rpx 0 20rpx;

				.text {
					padding-bottom: 5rpx;
				}

				.active {
					color: #096562;
					border-bottom: 5rpx solid #096562;
				}
			}
		}

		.rim_body {
			.rim_box {
				display: flex;
				margin-bottom: 20rpx;
				width: 710rpx;
				height: 150rpx;
				background-color: #fff;

				img {
					width: 126rpx;
					height: 150rpx;
				}

				.box_info {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding: 0 24rpx;
					box-sizing: border-box;
					width: 584rpx;
					height: 150rpx;

					.info_top {
						font-size: 28rpx;
						font-weight: bold;
					}
					.info_center {
						font-size: 24rpx;
						color: #808080;
					}
					.info_bottom {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.bottom_rate {
							color: #ff5733;
						}
						.bottom_num {
							margin-left: 15rpx;
							color: #a6a6a6;
						}
						.bottom_price {
							margin-left: auto;
							font-size: 28rpx;
							color: #ff5733;

							text {
								font-size: 20rpx;
								color: #a6a6a6;
							}
						}
					}
				}
			}
		}

		.noData {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-bottom: 60rpx;

			img {
				margin-top: 160rpx;
				width: 500rpx;
				height: 500rpx;
			}
		}

		.rim_more {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 710rpx;
			height: 70rpx;
			color: #096663;
			font-size: 24rpx;
			font-weight: bold;
			background-color: #fff;

			img {
				margin-left: 10rpx;
				margin-top: 2rpx;
				width: 10rpx;
				height: 18rpx;
			}
		}
	}

	.scenicSpot {
		width: 710rpx;
		background-color: #f2f3f5;

		.scenicSpot_title {
			line-height: 83rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.scenicSpot_body {
			.scenicSpot_box {
				display: flex;
				margin-bottom: 20rpx;
				width: 710rpx;
				height: 150rpx;
				background-color: #fff;

				img {
					width: 126rpx;
					height: 150rpx;
				}

				.box_info {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding: 0 24rpx;
					box-sizing: border-box;
					width: 584rpx;
					height: 150rpx;

					.info_top {
						font-size: 28rpx;
						font-weight: bold;
					}
					.info_center {
						font-size: 24rpx;
						color: #808080;
					}
					.info_bottom {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.bottom_rate {
							color: #ff5733;
						}
						.bottom_num {
							margin-left: 15rpx;
							color: #a6a6a6;
						}
						.bottom_price {
							margin-left: auto;
							font-size: 28rpx;
							color: #ff5733;

							text {
								font-size: 20rpx;
								color: #a6a6a6;
							}
						}
					}
				}
			}
		}

		.scenicSpot_more {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 710rpx;
			height: 70rpx;
			color: #096663;
			font-size: 24rpx;
			font-weight: bold;
			background-color: #fff;

			img {
				margin-left: 10rpx;
				margin-top: 2rpx;
				width: 10rpx;
				height: 18rpx;
			}
		}
	}
}
</style>