discounts-minapp/hotel/index.vue

<template>
	<view class="hotel">
		<zs-header  :background="background"></zs-header>
	<zs-img class="banner" width="750rpx" height="556rpx" src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/LZVwmPjcG6eo4b817697d9ce892c8400c439427fddea.png/1.png"></zs-img>
	
	<view class="search-box">
		<view class="address-box">
			<view class="address">
				{{address}}
			</view>
			<image class="more" src="@/static/right.png" mode=""></image>
			<view class="nearby" @click="handleSearch(1)">
				附近酒店
			</view>
			<image class="position" src="@/static/rePosition.png" mode=""></image>
		</view>
		
		<view class="chooose-box">
			<view class="time-box" @click="chooseDate">
				
				<view class="start-time">
					{{query.checkInDate | filterDate('time')}}
				</view>
				<view class="day">
					{{query.checkInDate | filterDate('day')}}
				</view>
				<view class="line">
					—
				</view>
				<view class="end-time">
					{{query.checkOutDate | filterDate('time')}}
				</view>
				<view class="day">
					{{query.checkOutDate | filterDate('day')}}
				</view>
			</view>
			
			<view class="total">
				共{{day}}晚 
				<image class="more" src="@/static/right.png" mode=""></image>
			</view>
		</view>
		
		<view class="input-box">
			<input class="input" type="text" v-model="query.keyword" placeholder="搜索酒店名/地名/关键词" />
			<image class="more" src="@/static/right.png" mode=""></image>
		</view>
		
		<view class="btn-box">
			<button class="btn" type="default" @click="handleSearch(0)">查找酒店</button>
		</view>
		
	</view>
	
	<!-- 列表 -->
	<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
		<view class="left">
			<view class="hotel-item" v-for="(item,index) in list" :key="index" @click="goDetail(item.hotelId)">
						<view >
							<zs-img :src="item.picture" width="340rpx" height="322rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="price-box">
									<view class="left" v-if="item.price">
										<view class="price">
										￥{{item.price}}
										</view>
										<view class="label">
											起
										</view>
									</view>
									<view class="left" v-else>
										<view class="label">
											暂无报价
										</view>
									</view>
									
									<view class="right">
										<image class="star" v-for="i in getTag(item.star).num" src="../static/star.png" mode=""></image>
	
									</view>
								</view>
								<view class="title">
									{{item.chineseName}}
									<!-- <view :class="[getTag(item.star).tag]">
										{{item.starName}}
									</view> -->
								</view>
							<!-- 	<view class="desc">
									观山湖区
								</view> -->
								
							</view>
						</view>
						
					</view>
				</view>
				<view class="right">
				<view class="hotel-item" v-for="(item,index) in list1" :key="index" @click="goDetail(item.hotelId)">
							<view >
								<zs-img :src="item.picture" width="340rpx" height="322rpx" mode="widthFix"></zs-img>
								<view class="info">
									<view class="price-box">
										<view class="left" v-if="item.price">
											<view class="price">
											￥{{item.price}}
											</view>
											<view class="label">
												起
											</view>
										</view>
										<view class="left" v-else>
											<view class="label">
												暂无报价
											</view>
										</view>
										
										<view class="right">
												<image class="star" v-for="i in getTag(item.star).num" src="../static/star.png" mode=""></image>
										</view>
									</view>
									<view class="title">
										{{item.chineseName}}
										<!-- <view :class="[getTag(item.star).tag]">
											{{item.starName}}
										</view> -->
									</view>
									<!-- <view class="desc">
										观山湖区
									</view> -->
									
								</view>
							</view>
							
						</view>
				</view>
			
			</zs-list>
	
	
			<u-calendar
				startText="住店"
				endText="离店"
				:monthNum="5"
				confirmDisabledText="请选择离店日期"
				:show="show" 
				:mode="mode" 
				@confirm="confirm"
				@close="show = false"
				ref="calendar"
				:rowHeight="100"
				closeOnClickOverlay
				color="#EE4320"
			>
			</u-calendar>
	
	</view>
</template>

<script>
	import {getHotelList} from '@/api/hotel.js'
	// 腾讯地图
	var QQMapWX = require('../libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
	export default {
		data() {
			return {
				address:'',
				list:[],
				list1:[],
				status:'more',
				show: false,
				background: false,
				mode: 'range',
				query:{
				  "checkInDate":uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') ,
				  "checkOutDate":uni.$u.timeFormat(new Date().getTime()+1000*60*60*24, 'yyyy-mm-dd'),
				  "cityCode": 0,
				  "cityName": uni.getStorageSync('city').replace('市',''),
				  "filter": {},
				  "keyword": "",
				  "limit": 10,
				  "returnFilter": 0,
				  "sortKey": "",
				  "start": 0
				},
				day:1
			}
		},
		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]}`
				}
			}
		},
		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}
				}
			},
			// 获取当前城市
			getCity(){
				let that = this
				that.address = '定位中...'
				return new Promise((resolve,reject)=>{
					uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								// 解析地址
								that.query['location.lat'] = res.latitude
								that.query['location.lon'] = res.longitude
								// 存储经纬度
								uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
								qqmapsdk.reverseGeocoder({
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success: function(res) {
										that.address = res.result.formatted_addresses.recommend
										console.log(9999,res);
									},
									fail: function(res) {
										that.city = '定位失败'
									},
								})
								  
								
							},
							fail: () => {
								console.log("获取经纬度失败");
							},
						})
				})
			},
			handleSearch(type){
				uni.navigateTo({
					url:`./search?key=${this.query.keyword}&checkInDate=${this.query.checkInDate}&checkOutDate=${this.query.checkOutDate}&day=${this.day}&isNear=${type}`
				})
			},
			confirm(e) {
				this.show = false
				if(e){
					this.day = e.length - 1
					this.query.checkInDate = e[0]
					this.query.checkOutDate = e[this.day]
				}
				
			},
			loadMore(){
				this.getHotelList()
			},
			goDetail(id) {
				uni.navigateTo({
					url:`/hotel/hotelDetail?id=${id}&checkInDate=${this.query.checkInDate}&checkOutDate=${this.query.checkOutDate}`
				})
			},
			chooseDate(){
				this.show = true
			},
			getHotelList(){
				this.status = 'loading'
				let query = JSON.parse(JSON.stringify(this.query))
				query.start = query.start*query.limit
				getHotelList(query).then(res=>{
					if(res.state == 'Success'){
						let list = []
						let list1 = []
						res.content.data.hotelList.map((item,index)=>{
							if(index%2){
								this.list1.push(item)
							}else{
								this.list.push(item)
							}
						})
						this.list = this.list.concat(list)
						this.list1 = this.list1.concat(list1)
						if((this.list.length+this.list1.length) >= res.content.data.count){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.start++
						}
					}
				})
			}
		},
		onPageScroll(e) {
				if (e.scrollTop >= 50) {
					this.background = true
				} else {
					this.background = false
				}
		},
		onLoad() {
			this.getCity()
			
		}
	}
</script>

<style lang="scss" >
.hotel{
	background: #F9F9F9;
	min-height: 100vh;
	.banner{
		
	}
	
	.search-box{
		padding: 28rpx 24rpx;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: -224rpx 24rpx 20rpx;
		position: relative;
		// top: -224rpx;
		box-sizing: border-box;
		.address-box{
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			.address{
				flex: 1;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.more{
				width: 48rpx;
				height: 48rpx;
				margin: 0 16rpx;
			}
			.nearby{
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
			}
			.position{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.chooose-box{
			padding: 78rpx 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top:1rpx solid #F0F0F0;
			border-bottom: 1rpx solid #F0F0F0;
			.time-box{
				display: flex;
				align-items: flex-end;
				.start-time,.end-time{
					font-weight: 600;
					font-size: 32rpx;
					color: #222222;
					position: relative;
				}
				.start-time::before{
					content: '入住';
					position: absolute;
					top:calc(-100% - 20rpx);
					left: 0;
					font-weight: 300;
					font-size: 24rpx;
					color: #222222;
				}
				.end-time::before{
					content: '离店';
					position: absolute;
					top:calc(-100% - 20rpx);
					left: 0;
					font-weight: 300;
					font-size: 24rpx;
					color: #222222;
				}
				
				.line{
					font-weight: 600;
					font-size: 32rpx;
					color: #222222;
					margin: 0 16rpx;
				}
				.day{
					font-weight: 300;
					font-size: 28rpx;
					color: #222222;
					margin-left: 16rpx;
					vertical-align: bottom;
				}
			}
			.total{
				display: flex;
				align-items: center;
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
				.more{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.input-box{
			position: relative;
			line-height: 84rpx;
			border-bottom: 1rpx solid #F0F0F0;
			.input{
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				padding-right: 48rpx;
				font-size: 24rpx;
				color: #222222;
			}
			.more{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				right: 0%;
				transform: translateY(-50%);
			}
		}
		.btn-box{
			padding-top: 28rpx;
			.btn{
				height: 80rpx;
				background: #EE4320;
				border-radius: 40rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.zs-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 24rpx;
		.hotel-item.disable{
			filter: grayscale(1);
		}
		.hotel-item {
			width: 340rpx;
			margin-bottom: 20rpx;
			// box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			background: #fff;
	
			.icon {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
	
			.info{
				flex: 1;
				padding: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				.title{
					font-size: 28rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					margin-top: 10rpx;
				}
				
				.desc{
					font-size: 24rpx;
					color: #AAAAAA;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					margin-top: 12rpx;
				}
				
				.price-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					.left{
						display: flex;
						align-items: center;
						.label{
							font-size: 24rpx;
							color: #AAAAAA;
							margin-left: 6rpx;
						}
						.price{
							font-size: 32rpx;
							color: $uni-color-primary;
							font-weight: bold;
						}
					}
					.right{
						font-size: 24rpx;
						color: #AAAAAA;
						display: flex;
						align-items: center;
						.star{
							width: 21rpx;
							height: 17rpx;
							margin-left: 3rpx;
						}
						.half-star{
							width: 10.5rpx;
							height: 16.5rpx;
							margin-left: 3rpx;
						}
					}
				}
				
			}
		}
	}
	
}
</style>