discounts-minapp/hotel/search.vue

<template>
	<view class="hotelList">
		<view class="fixed-box">
			<view class="search-box">
				<view class="city-box">
					<image class="icon" src="../static/blue-position.png" mode=""></image>
					{{query.cityName}}
				</view>
				<view class="input-box">
					<view class="time-box" @click="show = true">
						<view class="time">
							<view class="label">
								住
							</view>
							<view class="value">
								{{query.checkInDate | filterDate('time')}}
							</view>
						</view>
						<view class="time">
							<view class="label">
								离
							</view>
							<view class="value">
								{{query.checkOutDate | filterDate('time')}}
							</view>
						</view>
					</view>
					<input class="input" type="text" v-model="query.keyword" placeholder="搜索酒店名/地名/关键词" />
				</view>
			</view>
			<view class="tab-box">
				<view class="tab-item" :class="[query.sortKey?'active':'']" @click="handleTab(0)">
					推荐排序
					<image class="icon" src="@/static/shop-desc.png" mode=""></image>
				</view>
				<view class="tab-item" :class="[query.filter.star.length||query.filter.price.length?'active':'']" @click="handleTab(1)">
					档次价格
					<image class="icon" src="@/static/shop-desc.png" mode=""></image>
				</view>
				<view class="tab-item" :class="[query.filter.poiCode?'active':'']" @click="handleTab(2)">
					区域位置
					<image class="icon" src="@/static/shop-desc.png" mode=""></image>
				</view>
				<!-- <view class="tab-item" @click="handleTab(3)">
					综合筛选
					<image class="icon" src="@/static/shop-desc.png" mode=""></image>
				</view> -->
			</view>
		</view>
		
		
		<!-- 列表 -->
		<zs-list class="store-box" mt="150rpx" @load="loadMore" :status="status">
			<view class="hotel-item" v-for="(item,index) in list" :key="index" @click="goDetail(item.hotelId)">
				<zs-img :src="item.picture" width="190rpx" height="296rpx" radius="full" mode="widthFix" ></zs-img>
				<view class="info">
					<view class="title">
						{{item.chineseName}}
					</view>
					<view class="district">
						<!-- 观山湖区 -->
					</view>
					<view class="distance-box">
						<view class="distance">
							距你{{item|filterDistance}}公里
						</view>
						<view class="price-box">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="label">
								起
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</zs-list>
		
		
		<u-popup :show="show1" :round="16" mode="top" @close="show1 = false">
			<view class="content">
				<view class="search-box">
					<view class="city-box">
						<image class="icon" src="../static/blue-position.png" mode=""></image>
						{{query.cityName}}
					</view>
					<view class="input-box">
						<view class="time-box" @click="show = true">
							<view class="time">
								<view class="label">
									住
								</view>
								<view class="value">
									{{query.checkInDate | filterDate('time')}}
								</view>
							</view>
							<view class="time">
								<view class="label">
									离
								</view>
								<view class="value">
									{{query.checkOutDate | filterDate('time')}}
								</view>
							</view>
						</view>
						<input class="input" type="text" v-model="query.keyword" placeholder="搜索酒店名/地名/关键词" />
					</view>
				</view>
				<view class="tab-box">
					<view class="tab-item" @click="handleTab(0)">
						推荐排序
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<view class="tab-item" @click="handleTab(1)">
						档次价格
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<view class="tab-item" @click="handleTab(2)">
						区域位置
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<!-- <view class="tab-item" @click="handleTab(3)">
						综合筛选
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view> -->
				</view>
				
				
				<view class="choose-box">
					<view class="radio-box" v-if="active == 0">
						<view class="radio" v-for="item in sortList" :key="item.value" @click="chooseTab(item.value,0)">
							<view class="label">
							{{item.label}}
							</view>
							<view class="value" v-if="query.sortKey == item.value">
								√
							</view>
						</view>
					</view>
					<template v-else-if="active == 1">
						<view class="sub-title mb100">
							价格区间
						</view>
						<zs-slider class="zs-slider" ref="slider" v-model="priceValue" :min="0" :max="5000" :step="10" :blockWidth="40" @end="moveEnd" />
						<view class="sub-title mt60">
							星级（可多选）
						</view>
						<view class="tab-box">
							<view class="tab" :class="[query.filter.star.indexOf(item.id) != -1?'active':'']" v-for="item in starList" :key="item.id" @click="chooseTab(item.id,1)">
								{{item.label}}
							</view>
							<view class="tab" style="border: none;" v-if="starList.length%3 == 2"></view>
						</view>
					</template>
					<view class="radio-box" v-if="active == 2">
						<view class="radio" v-for="item in districtList" :key="item.id" @click="chooseTab(item,2)">
							<view class="label">
							{{item.label}}
							</view>
							<view class="value" v-if="query.filter.poiCode == item.id">
								√
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" type="default" @click="reset">重置</view>
				<view class="btn" type="default" @click="show1 = false">完成</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"
		>
		</u-calendar>
		
		
	</view>
</template>

<script>
	import {getHotelList} from '@/api/hotel.js';
	import {debounce} from '@/utils/tool.js'
	export default {
		data() {
			return {
				active:0,
				show:false,
				show1:false,
				list: [],
				status:'more',
				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": {
					  "star":[],
					  "price":[],
					  "poiKey": "DISTRICT",
					  "poiCode": "",
					  "latitude": JSON.parse(uni.getStorageSync('location')).latitude,
					  "longitude": JSON.parse(uni.getStorageSync('location')).longitude,
				  },
				  "keyword": "",
				  "limit": 10,
				  "returnFilter": 0,
				  "sortKey": "recommend",
				  "start": 0
				},
				districtList:JSON.parse(uni.getStorageSync('districtList')),
				sortList:[
					{
						value:'recommend',
						label:'推荐排序'
					},
					{
						value:'satisfaction',
						label:'口碑'
					},
					{
						value:'price-asc',
						label:'起价升序'
					},
					{
						value:'price-desc',
						label:'起价降序'
					}
				],
				priceValue: [10, 2000],  // 可以指定默认值
				starList:[
					{
						id:1,
						label:'一星级'
					},
					{
						id:2,
						label:'二星级'
					},
					{
						id:3,
						label:'三星级'
					},
					{
						id:4,
						label:'四星级'
					},
					{
						id:5,
						label:'五星级'
					},
					{
						id:6,
						label:'经济型'
					},
					{
						id:7,
						label:'舒适型'
					},
					{
						id:8,
						label:'高档型'
					},
					{
						id:9,
						label:'豪华型'
					},
					{
						id:0,
						label:'普通型'
					}
				]
			}
		},
		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]}`
				}
			},
			filterDistance: function(item) {
				let location = JSON.parse(uni.getStorageSync('location'))
				/*参数：两地的经纬度数值*/
				    var radLat1 = location.latitude * Math.PI / 180.0;
				    var radLat2 = item.latitude* Math.PI / 180.0;
				    var a = radLat1 - radLat2;
				    var b = location.longitude* Math.PI / 180.0 - item.longitude* Math.PI / 180.0;
				    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
				    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				    s = s * 6378137.0;//地球半径 单位米;
				    s = Math.round(s * 10000) / 10000 /1000 //输出为千米
				    s = s.toFixed(2)
				    return s
				
			}
		},
		watch: {
			'query.keyword':debounce(function(val) {
				this.search()
			})
		},
		methods: {
			moveEnd(){
				console.log('结束');
				this.query.filter.price = [this.priceValue[0]+'-'+this.priceValue[1]]
				this.search()
			},
			reset(){
				this.query.sortKey = "recommend"
				this.query.filter.star = []
				this.query.filter.price = []
					this.$refs.slider.updateValue(10, 2000)
				this.query.filter.poiCode = ''
				this.query.filter.latitude = JSON.parse(uni.getStorageSync('location')).latitude
				this.query.filter.longitude = JSON.parse(uni.getStorageSync('location')).longitude
				this.search()
				
			},
			chooseTab(val,type){
				if(type == 0){
					this.query.sortKey = val
				}else if(type == 1){
					if(this.query.filter.star.indexOf(val) != -1){
						console.log(11111111,this.query.filter.star.indexOf(val));
						let index = this.query.filter.star.indexOf(val)
						this.query.filter.star.splice(index,1)
					}else{
						console.log(22222222222,this.query.filter.star.indexOf(val));
						this.query.filter.star.push(val)
					}
				}else if(type == 2){
					this.query.filter.poiCode = val.id
					this.query.filter.latitude = val.location.lat
					this.query.filter.longitude = val.location.lng
				}
				this.search()
			},
			close(){},
			search(){
				this.query.start = 0
				this.list = []
				this.getHotelList()
			},
			confirm(e) {
				console.log(e);
				this.show = false
				if(e){
					console.log(this);
					this.day = e.length - 1
					this.query.checkInDate = e[0]
					this.query.checkOutDate = e[this.day]
					this.search()
				}
				
			},
			loadMore() {
				this.getHotelList()
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
			handleTab(val){
				this.show1 = true
				this.active = val
			},
			goDetail(id) {
				uni.navigateTo({
					url:`/hotel/hotelDetail?id=${id}&checkInDate=${this.query.checkInDate}&checkOutDate=${this.query.checkOutDate}`
				})
			},
			getHotelList(){
				this.status = 'loading'
				getHotelList(this.query).then(res=>{
					if(res.state == 'Success'){
						this.list = this.list.concat(res.content.data.hotelList) 
						if((this.list.length) >= res.content.data.count){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.start++
						}
					}
				})
			}
		},
		onLoad(options) {
			this.query.keyword = options.key
			this.query.checkInDate = options.checkInDate
			this.query.checkOutDate = options.checkOutDate
			this.getHotelList()
		}
	}
</script>

<style lang="scss" >
.hotelList{
	padding: 0 24rpx;
	.fixed-box{
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 2;
		width: 100%;
		background: #fff;
		padding: 0 24rpx;
		
	}
	
	.search-box{
		display: flex;
		align-items: center;
		.city-box{
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			.icon{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.input-box{
			width: 590rpx;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 32rpx;
			margin-left: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.time-box{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.time{
					display: flex;
					align-items: center;
					.label{
						font-size: 22rpx;
						color: #AAAAAA;
					}
					.value{
						font-size: 22rpx;
						color: #222222;
						padding-left: 10rpx;
					}
				}
			}
			.input{
				flex: 1;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
	}
	.tab-box{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		max-height: 800rpx;
		overflow: auto;
		.tab-item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			.icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.tab-item.active{
			color: #FF4D3A;
		}
	}
	
	.radio-box{
		max-height: 800rpx;
		overflow: auto;
		.radio{
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label{
				font-size: 26rpx;
				color: #222222;
			}
			.value{
				color: #FF4D3A;
			}
		}
	}
	
	.zs-list {
		margin-top: 20rpx;
		.hotel-item {
			display: flex;
			align-items: center;
			background: #fff;
			border-bottom: 1rpx solid #F0F0F0;
			padding: 14rpx 0;
			.info{
				padding-left: 20rpx;
				flex: 1;
				.title{
					font-weight: 600;
					font-size: 32rpx;
					color: #222222; 
					line-height: 50rpx;
					// width: 300rpx;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// margin-top: 20rpx;
				}
				.district{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #AAAAAA;
					margin-top: 20rpx;
					
				}
				.distance-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.distance{
						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;
						}
					}
				}
			}
		}
	}
	
	.content{
		padding: 20rpx 24rpx;
		.choose-box{
			.tab-box{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.tab{
					flex-shrink: 0;
					width: 204rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					border: 1rpx solid #EE4320;
					color: rgba(238, 67, 32, .5);
				}
				.tab.active{
					background: #EE4320;
					color: #fff;
				}
			}
		}
		
		.sub-title{
			font-size: 28rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}
		.mb100{
			margin-bottom: 100rpx!important;
		}
		
		.mt60{
			margin-top: 60rpx!important;
		}
		
		.zs-slider{
			// margin-bottom: 60rpx;
		}
	}
	
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		.btn{
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			border: 2rpx solid #EE4320;
			font-weight: 600;
			font-size: 28rpx;
			color: #EE4320;
		}
		.btn+.btn{
			background: #EE4320;
			color: #fff;
			margin-left: 20rpx;
		}
	}
	.u-safe-bottom{
		display: none!important;
	}
}
</style>