discounts-minapp/hotel/hotelDetail.vue

<template>
	<view class="hotelDetail">
		<zs-skeleton :loading="loading" type="hotelDetail"></zs-skeleton>
		<zs-header :background="background"></zs-header>
		<view class="img-box" @click="goImgList">
			<image class="top-banner" :src="info.pictures[0].path" mode=""></image>
			<view class="num-box">
				{{info.pictures.length}}张
			</view>
		</view>
		
		<view class="container">
			<view class="title-box">
				<view class="title">
					{{info.chineseName}}
					<view :class="[getTag(info.star).tag]">
						{{info.starName}}
					</view>
				</view>
				<view class="star-box">
					<image class="star" v-for="i in getTag(info.star).num" src="../static/star.png" mode=""></image>

				</view>
			</view>
			
			<view class="desc-box">
				<view class="text" v-if="info.debutYear">
					{{info.debutYear}}年开业
				</view>
				<view class="text" v-if="info.decorateDate">
					{{info.decorateDate}}年装修
				</view>
			<!-- 	<view class="text">
					{{info.roomCount}}间房
				</view> -->
			</view>
			
			<view class="address-box">
				<view class="address">
					{{info.address}}
				</view>
				
				<view class="btn-box">
					<view class="btn" @click="handleNavigation">
						导航
					</view>
					<!-- <view class="btn" @click="handleCall">
						电话
					</view> -->
				</view>
			</view>
			
			
			<view class="choose-box">
				<view class="start-box" @click="show = true">
					<view class="label">
						入住
					</view>
					<view class="time-box">
						<view class="time">
							{{query.checkIn | filterDate('time')}}
						</view>
						<view class="date">
							{{query.checkIn | filterDate('day')}}
						</view>
						<view class="day">
							{{day}}晚
						</view>
					</view>
				</view>
				<view class="end-box" @click="show = true">
					<view class="label">
						离店
					</view>
					<view class="time-box">
						<view class="time">
							{{query.checkOut | filterDate('time')}}
						</view>
						<view class="date">
							{{query.checkOut | filterDate('day')}}
						</view>
					</view>
				</view>
				<view class="people-box">
					<view class="people" @click="showNum1 = true">
						{{query.manNum}}成人
					</view>
					<view class="child" @click="showNum2 = true">
						{{query.childNum}}儿童
					</view>
				</view>
				<image class="jiantou" src="@/static/right.png" mode=""></image>
			</view>
			
			<!-- 列表 -->
			<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
				<view class="hotel-item" v-for="(item,index) in roomList" :key="index">
					<template v-if="item.roomId">
						<view class="box">
							<zs-img :src="item.pictures[0].path" width="200rpx" height="200rpx" radius="full" mode="widthFix"></zs-img>
							<view class="info">
								<view class="title">
									{{item.roomNameCn}}
								</view>
								<view class="desc">
									<view class="item" v-if="item.area">
										{{item.area}}
									</view>
									<view class="item" v-if="item.window">
										{{item.window |filterWindow}}
									</view>
								</view>
					<!-- 			<view class="notice">
									早餐不可取消
								</view> -->
							</view>
							<view class="price-box">
								<view class="price">
									￥{{item.ratePlanInfo[0].averagePrice}}
								</view>
								<view class="label">
									起
								</view>
							</view>
						</view>
						<view class="type-box">
							<view class="type-item" v-for="(i,d) in item.ratePlanInfo" :key="i.id"  @click.native="handleImg(item,d)">
								<view class="left">
									<view class="name-box">
										<view class="name">
											{{i.meal.breakfast.desc || i.mealInfo.substr(3)}}
										</view>
										<view class="name">
											{{i.cancel.name}}
										</view>
									</view>
									<view class="residue">
										还剩{{i.counts}}间
									</view>
								</view>
								
								<view class="right">
									<view class="price">
										￥{{i.averagePrice}}
									</view>
									<image class="buy-btn" src="../static/hotel-buy-btn.png" mode=""  @click.stop="handleBuy(i,item)"></image>
								</view>
							</view>
							
						</view>
					</template>
				</view>
			</zs-list>
			
		</view>
		
		<view class="intro-box" @click="goIntroduce">
		   	<image class="icon" src="@/static/hotel.png" mode=""></image> 酒店介绍
		</view>
		
		
			<u-popup :show="show1" round="16rpx" mode="bottom" @close="show1 = false">
				<view class="content">
					<image class="img" :src="roomInfo.pictures[0].path" mode=""></image>
					<view class="title">
						{{roomInfo.roomNameCn}}
					</view>
					<view class="desc-box">
						<view class="item" v-if="roomInfo.area">
							{{roomInfo.area}}
						</view>
						<view class="item">
							{{roomInfo.floor}}
						</view>
						<view class="item" v-if="roomInfo.window.toString() == 'null'">
							{{roomInfo.window |filterWindow}}
						</view>
					</view>
					
					<view class="box">
						<view class="menu-item">
							<view class="title">
								<image class="icon" src="../static/hotel-icon1.png" mode=""></image>
								{{roomInfo.ratePlanInfo[roomIndex].bedInfo || ''}}（加床:{{roomInfo.isExtraBed}}）
							</view>
							<view class="title">
								<image class="icon" src="../static/hotel-icon2.png" mode=""></image>
								{{roomInfo.ratePlanInfo[roomIndex].mealInfo}}
							</view>
						</view>
						
						<view class="menu-item" v-for="item in roomFacilities" :key="item.name">
							<view class="title">
								<image class="icon" src="../static/hotel-icon5.png" mode=""></image>
								{{item.name}}
							</view>
							<view class="item-box">
								<view class="item" v-for="i in item.list" :key="i">
									{{i}}
								</view>
								
							</view>
						</view>
						<!-- <view class="menu-item">
							<view class="title">
								<image class="icon" src="../static/hotel-icon4.png" mode=""></image>
								家具设施
							</view>
							<view class="item-box">
								<view class="item">
									书桌
								</view>
								<view class="item">
									坐卧两用沙发
								</view>
								<view class="item">
									沙发
								</view>
							</view>
						</view>
						
						<view class="menu-item">
							<view class="title">
								<image class="icon" src="../static/hotel-icon5.png" mode=""></image>
								便利设施
							</view>
							<view class="item-box">
								<view class="item">
									书桌
								</view>
								<view class="item">
									坐卧两用沙发
								</view>
								<view class="item">
									沙发
								</view>
							</view>
						</view> -->
						
					</view>
				</view>
			</u-popup>
			
			<u-calendar
				startText="住店"
				endText="离店"
				:monthNum="5"
				confirmDisabledText="请选择离店日期"
				:show="show" 
				mode="range" 
				@confirm="confirm"
				@close="show = false"
				ref="calendar"
				:rowHeight="100"
				closeOnClickOverlay
				color="#EE4320"
				:defaultDate="[query.checkIn,query.checkOut]"
			>
			</u-calendar>
			
			<!-- 选择成人 -->
			<u-picker title="成人人数" :show="showNum1" closeOnClickOverlay :columns="columns" @close="showNum1 = false" @cancel="showNum1 = false" @confirm="confirmMan"></u-picker>
			
			<!-- 选择儿童 -->
			<u-picker title="儿童人数" :show="showNum2" closeOnClickOverlay :columns="columns" @close="showNum2 = false" @cancel="showNum2 = false" @confirm="confirmChild"></u-picker>
		
	</view>
</template>

<script>
	import {getHotelDetail,getRoomList} from '@/api/hotel.js'
	import {transformFromWGSToGCJ} from '@/utils/tool.js'
	export default {
		data() {
			return {
				background: false,
				status:'noMore',
				loading : true,
				list:10,
				show:false,
				show1:false,
				showNum1:false,
				showNum2:false,
				info:{pictures:[]},
				columns:[
					[
						1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20
					]
				],
				query:{
				  "checkIn": uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
				  "checkOut": uni.$u.timeFormat(new Date().getTime()+1000*60*60*24, 'yyyy-mm-dd'),
				  "childAges": [],
				  "childNum": 0,
				  "excludeOta": true,
				  "hotelId": 0,
				  "manNum": 1,
				  "roomNum": 1
				},
				day:1,
				pictures:[],
				roomList:[],
				roomIndex:0,//当前的房型index
				roomFacilities:[],
				roomInfo:{
					area:'',
					bedDescription:'',
					broadband:'',
					facilities:'',
					floor:'',
					isExtraBed:'',
					noSmoking:'',
					pictures:'',
					ratePlanInfo:'',
					roomId:'',
					roomNameCn:'',
					wifi:'',
					window: 4
				}
			}
		},
		filters: {
			filterDate: function(value,type) {
					let timestamp = new Date(value).getTime()
				if(type == 'time'){
					return uni.$u.timeFormat(timestamp, 'mm月dd日');
				}else if(type == 'day'){
					let arr = ['日','一','二','三','四','五','六']
					let num = new Date(timestamp).getDay()
					return `周${arr[num]}`
				}
			},
			filterWindow:function(val){
				if(val === 0){
					return '无窗'
				}else if(val === 1){
					return '部分有窗'
				}else if(val === 2){
					return '有窗'
				}else if(val === 3){
					return '不确定'
				}else if(val === 4){
					return '内窗'
				}else if(val === 5){
					return '天窗'
				}else if(val === 6){
					return '封闭窗'
				}else if(val === 7){
					return '飘窗'
				}else if(val === 11){
					return '不确定'
				}else{
					return ''
				}
			},
			filterWifi:function(val){
				if(val === 1){
					return '免费提供'
				}else if(val === 2){
					return '不提供此服务'
				}else if(val === 3){
					return '收费提供'
				}else if(val === 4){
					return '部分收费'
				}else if(val === 5){
					return '部分提供并收费'
				}else if(val === 6){
					return '部分能提供并免费'
				}else if(val === 7){
					return '部分提供并只有部分和收费'
				}else if(val === 8){
					return '有'
				}else if(val === 9){
					return '不确定'
				}
			}
		},
		methods: {
			getTag(star){
				if(star == 0 ||star == 1){
					return {tag:'tag1',num:1}
				}else if(star == 2 ||star == 6){
					return {tag:'tag2',num:2}
				}if(star == 3 ||star == 7){
					return {tag:'tag2',num:3}
				}if(star == 4 ||star == 8){
					return {tag:'tag3',num:4}
				}if(star == 5 ||star == 9){
					return {tag:'tag3',num:5}
				}
			},
			confirm(e) {
				this.show = false
				if(e){
					this.day = e.length - 1
					this.query.checkIn = e[0]
					this.query.checkOut = e[this.day]
					this.getRoomList()
				}
				
			},
			confirmMan(val){
				console.log(val);
				this.showNum1 = false
				this.query.manNum = val.value[0]
				this.query.roomNum = val.value[0]
				this.getRoomList()
			},
			confirmChild(val){
				console.log(val);
				this.showNum2 = false
				this.query.childNum = val.value[0]
				this.getRoomList()
			},
			goImgList(){
				uni.navigateTo({
					url:`./hotelImgList?id=${this.query.hotelId}`
				})
				uni.setStorageSync('hotelImgList',JSON.stringify(this.pictures))
			},
			handleBuy(i,item){
				let that = this
				uni.navigateTo({
					url:`./makeOut?checkInDate=${this.query.checkIn}&checkOutDate=${this.query.checkOut}&day=${this.day}`,
					success: function(res) {
					  // 通过eventChannel向被打开页面传送数据
					  let obj = {
						  manNum:that.query.manNum,
						  childNum:that.query.childNum,
						  hotelId:that.query.hotelId,
						  ratePlanId:i.id,
						  averagePrice:i.averagePrice,
						  roomPic:item.pictures[0].path,
						  hotelPic:that.info.pictures[0].path,
						  roomNameCn:item.roomNameCn,
						  area:item.area,
						  window:item.window,
						  meal:i.meal.breakfast.desc || i.mealInfo.substr(3),
						  cancel:i.cancel.name,
						  
					  }
					  res.eventChannel.emit('pay', obj)
					}
				})
			},
			goIntroduce(){
				uni.navigateTo({
					url:`./introduce?id=${this.query.hotelId}`
				})
			},
			handleImg(item,index){
				this.show1 = true
				this.roomInfo = item
				this.roomIndex = index
				console.log(this.roomInfo);
				let obj = {}
				item.facilities.map(i=>{
					if(obj[i.name]){
						obj[i.name].push(i.tmpSubFacilities[0].subName)
					}else{
						obj[i.name] = [i.tmpSubFacilities[0].subName]
					}
				})
				let list = []
				for (let key in obj) {
					list.push({name:key,list:obj[key]})
				}
				console.log(111111111,list);
				this.roomFacilities = list
			},
			loadMore(){},
			handleNavigation() {
				let {latitude,longitude} = transformFromWGSToGCJ(this.info.latitudeGoogle,this.info.longitudeGoogle)
				uni.openLocation({
							latitude,
							longitude,
							name:this.info.storeName,
							address:this.info.address,
							success: function () {
								console.log('success');
							}
						});
				// this.map.openMapApp({
				// 	longitude:this.info.lon,
				// 	latitude:this.info.lat,
				// 	destination:this.info.storeName,
				// 	success(res){
				// 		console.log(res);
				// 	}
				// }) 
			},
			handleCall() {
				if(this.info.tel){
					uni.makePhoneCall({
						phoneNumber: this.info.tel //仅为示例
					});
				}else{
					uni.showToast({
						title:'商家没有预留电话',
						icon:'none'
					})
				}
			},
			getHotelDetail(hotelId){
				this.loading = true
				getHotelDetail({hotelId}).then(res=>{
					if(res.state == 'Success'){
						this.loading = false
						this.info = res.content.data
						let obj = {}
						this.info.pictures.map(item=>{
							if(obj[item.name]){
								obj[item.name].push(item.path)
							}else{
								obj[item.name] = [item.path]
							}
						})
						let list = []
						for (let key in obj) {
							list.push({name:key,list:obj[key]})
						}
						this.pictures = list
					}
				})
			},
			getRoomList(){
				uni.showLoading({
					title:'加载中'
				})
				getRoomList(this.query).then(res=>{
					uni.hideLoading()
					if(res.state == 'Success'){
						this.roomList = res.content.data.roomInfo
						console.log(this.roomList);
						
					}
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.background = true
			} else {
				this.background = false
			}
		},
		onLoad(options) {
			this.query.hotelId = options.id
			this.day = options.day || 1
			if(options.checkInDate){
				this.query.checkIn = options.checkInDate
			}
			if(options.checkOutDate){
				this.query.checkOut = options.checkOutDate
			}
			
			this.getHotelDetail(options.id)
			this.getRoomList()
		},
		onShareTimeline() {
		  return {
		    title: "慧研学惠生活-"+this.info.chineseName,
		    query: "id="+this.id,
		  };
		},
		onShareAppMessage() {
		  return {
		    title: "慧研学惠生活-"+this.info.chineseName,
		    path: "/pages/signUp/index?id="+this.id,
		  };
		},
		
	}
</script>

<style lang="scss" >
.hotelDetail{
	padding-bottom: 150rpx;
	.img-box{
		position: relative;
		.top-banner{
			width: 750rpx;
			height: 382rpx;
			vertical-align: bottom;
		}
		.num-box{
			position: absolute;
			right: 24rpx;
			bottom: 50rpx;
			width: 104rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background: rgba(255,255,255,0.5);
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.container{
		position: relative;
		z-index: 2;
		margin-top: -20rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 20rpx 24rpx;
		.title-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				width: 550rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
			}
			.star-box{
				display: flex;
				align-items: center;
				.star{
					width: 21rpx;
					height: 17rpx;
					margin-left: 3rpx;
				}
			}
		}
		
		.desc-box{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
			.text{
				padding-right: 10rpx;
			}
			.text+.text{
				border-left: 2rpx solid #F0F0F0;
				padding-left: 10rpx;
			}
		}
		
		.address-box{
			display: flex; 
			align-items: center;
			justify-content: space-between;
			width: 702rpx;
			height: 140rpx;
			background-image: url('@/static/white-map.png');
			background-repeat: repeat;
			background-size: 100% 140rpx;
			box-sizing: border-box;
			padding: 36rpx 24rpx;
			margin-top: 20rpx;
			.address{
				font-weight: 600;
				font-size: 24rpx;
				color: #222222;
				line-height: 40rpx;
				overflow: hidden;
				padding-right: 20rpx;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
			.btn-box{
				display: flex;
				.btn+.btn{
					margin-left: 16rpx;
				}
				.btn{
					width: 120rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					background: #E2ECFF;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					font-weight: 300;
					font-size: 28rpx;
					color: #3879F9;
				}
			}
		}
		
		.choose-box{
			background: #F9F9F9;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 20rpx;
			.start-box,.end-box{
				padding-right: 24rpx;
				.label{
					font-size: 24rpx;
					color: #222222;
				}
				.time-box{
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.time{
						font-weight: 600;
						font-size: 28rpx;
						color: #222222;
					}
					.date{
						font-size: 24rpx;
						color: #222222;
						margin-left: 16rpx;
					}
					.day{
						width: 80rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						background: #F0F0F0;
						border-radius: 18rpx 18rpx 18rpx 18rpx;
						font-size: 20rpx;
						color: #222222;
						margin-left: 24rpx;
					}
				}
			}
			.people-box{
				padding-left: 24rpx;
				border-left: 2rpx solid #F0F0F0;
				.people,.child{
					font-size: 24rpx;
					color: #222222;
				}
				.child{
					margin-top: 16rpx;
				}
			}
			.jiantou{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				right: 0%;
				margin-top: -24rpx;
			}
		}
		
		.zs-list {
			margin-top: 20rpx;
			.hotel-item {
				.box{
					display: flex;
					align-items: center;
					background: #fff;
					border-bottom: 1rpx solid #F0F0F0;
					padding: 24rpx 0;
					.info{
						padding-left: 20rpx;
						flex: 1;
						.title{
							font-weight: 600;
							font-size: 36rpx;
							color: #222222; 
							width: 300rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 20rpx;
						}
						.desc{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #AAAAAA;
							margin-top: 20rpx;
							.item{
								padding-right: 10rpx;
							}
							.item+.item{
								padding-left: 10rpx;
								border-left: 2rpx solid #F0F0F0;
							}
						}
						.notice{
							font-size: 24rpx;
							color: #AAAAAA;
							margin-top: 20rpx;
						}
					}
					.price-box{
						display: flex;
						align-items: center;
						.price{
							font-weight: 600;
							font-size: 36rpx;
							color: #FF4D3A;
						}
						.label{
							font-size: 24rpx;
							color: #AAAAAA;
						}
					}
				}
			}
			.type-box{
				.type-item+.type-item{
					border-top: 1rpx solid #F0F0F0;
				}
				.type-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 24rpx;
					background: #F9F9F9;
					.left{
						.name-box{
							display: flex;
							align-items: center;
							font-size: 28rpx;
							color: #222222;
							.name{
								padding-right: 20rpx;
							}
							.name+.name{
								padding-left: 20rpx;
								border-left: 1rpx solid #222222;
							}
						}
						.residue{
							font-size: 24rpx;
							color: #FF4D3A;
							margin-top: 16rpx;
						}
					}
					.right{
						display: flex;
						align-items: center;
						.price{
							font-weight: 600;
							font-size: 36rpx;
							color: #FF4D3A;
						}
						.buy-btn{
							width: 76rpx;
							height: 84rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		
	}
	
	
	.intro-box{
		position: fixed;
		bottom: 0;
		left: 0%;
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border-top: 1rpx solid #EEEEEE;
		font-size: 28rpx;
		color: #222222;
		background: #fff;
		z-index: 2;
		padding-bottom: env(safe-area-inset-bottom);
		.icon{
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.content{
		max-height: calc(100vh - 362rpx);
		overflow: auto;
		border-radius: 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		.img{
			width: 100%;
			height: 376rpx;
			border-radius: 16rpx;
		}
		.title{
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			width: 650rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 24rpx;
		}
		.desc-box{
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;
			.item{
				width: 120rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background: #F0F0F0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-bottom: 20rpx;
			}
			.item+.item{
				margin-left: 12rpx;
			}
		}
		.box{
			.menu-item+.menu-item{
				border-top: 1rpx solid #F0F0F0;
			}
			.menu-item{
				margin-bottom: 20rpx;
				.title{
					display: flex;
					align-items: center;
					.icon{
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}
					
				}
				.item-box{
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.item{
						width: 33%;
						text-align: center;
						font-size: 24rpx;
						color: #AAAAAA;
						margin-bottom: 20rpx;
					}
					
				}
			}
		}
	}
}
</style>