discounts-minapp/hotel/search.vue

<template>
	<view class="hotelList">
		<view class="fixed-box">
			<view class="search-box">
				<view class="city-box" @click="chooseCity">
					<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" type="hotel" width="190rpx" height="296rpx" radius="full" mode="widthFix" ></zs-img>
				<view class="info">
					<view class="title">
						{{item.chineseName}}
						<!-- <view :class="[getTag(item.star).tag]">
							{{item.starName}}
						</view> -->
					</view>
					<image class="star" v-for="(i,d) in getTag(item.star).num" :key="d" src="../static/star.png" mode=""></image>
					<view class="district">
						<!-- 观山湖区 -->
					</view>
					<view class="distance-box">
						<view class="distance">
							距你{{item|filterDistance}}公里
						</view>
						<view class="price-box" v-if="item.price">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="label">
								起
							</view>
						</view>
						<view class="price-box" v-else>
							<view class="label">
								暂无报价
							</view>
							
						</view>
					</view>
				</view>
				
			</view>
		</zs-list>
		
		
		<u-popup :show="show1" :round="16" mode="top" :closeOnClickOverlay="false" @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" :class="[active == 0?'active':'']" @click="handleTab(0)">
						{{currentLabel}}
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<view class="tab-item" :class="[active == 1?'active':'']" @click="handleTab(1)">
						档次价格
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<view class="tab-item" :class="[active == 2?'active':'']" @click="handleTab(2)">
						位置距离
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
					<view class="tab-item" :class="[active == 3?'active':'']" @click="handleTab(3)">
						综合筛选
						<image class="icon" src="@/static/shop-desc.png" mode=""></image>
					</view>
				</view>
				
				
				<view class="choose-box">
					<view class="radio-box box" v-if="active == 0">
						<view class="radio" v-for="item in sortList" :key="item.value" @click="chooseTab(item.value,0,item.label)">
							<view class="label">
							{{item.label}}
							</view>
							<image class="value" v-if="query.sortKey == item.value" src="../static/checked.png" mode=""></image>
						</view>
					</view>
					<view class="box" v-else-if="active == 1">
						<view class="sub-title mb28">
							价格 <text class="price-range">{{`￥${priceValue[0]}~￥${priceValue[1]}`}}</text>
						</view>
						<zs-slider class="zs-slider" ref="slider" v-model="priceValue" :min="0" :max="2500" :step="10" :blockWidth="40" @end="moveEnd" />
						<view class="price-tab-box">
							<view class="price-tab" :class="[index%3!=0?'ml20':'',item.max == curPrice?'active':'']" v-for="(item,index) in priceList" :key="index" @click="choosePrice(item)">
								￥{{item.min}}{{ item.max == 2500?'以上': '-'+item.max}}
							</view>
						</view>
					
						<view class="sub-title">
							星级/钻级
						</view>
						<view class="choose-tab-box">
							<view class="tab" :class="[index%3!=0?'ml20':'',query.filter.star.indexOf(item.id) != -1?'active':'']" v-for="(item,index) in starList" :key="item.id" @click="chooseTab(item,1)">
								<view class="label">
									{{item.label}}
								</view>
								<view class="desc">
									{{item.desc}}
								</view>
							</view>
						</view>
						
					</view>
			<!-- 		<view class="radio-box" v-else-if="active == 2">
						<view class="radio" v-for="item in areaList" :key="item.code" @click="chooseTab(item,2)">
							<view class="label">
							{{item.name}}
							</view>
							<image class="value" v-if="query.filter.poiCode == item.code" src="../static/checked.png" mode=""></image>
						</view>
					</view> -->
					<view class="filter-box" v-else-if="active == 2">
						<view class="left-box">
							<view class="left-item" :class="[areaIndex == index?'active':'']" v-for="(item,index) in areaList" :key="index" @click="chooseType(index,'areaIndex')">
								{{item.poiName}}
							</view>
						</view>
						<view class="right-box" >
							<view class="right-item" v-for="(item,index) in areaList[areaIndex].filter" :key="index" @click="chooseTab(item,2,areaList[areaIndex].poiKey)">
								<view class="label" :class="[query.filter.poiCode == item.code?'active':'']">
								{{item.name}}
								</view>
								<image class="value" v-if="query.filter.poiCode == item.code" src="../static/checked.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="filter-box" v-else-if="active == 3">
						<view class="left-box">
							<view class="left-item" :class="[filterIndex == index?'active':'']" v-for="(item,index) in filterObj" :key="index" @click="chooseType(index,'filterIndex')">
								{{item.filterName}}
							</view>
						</view>
						<view class="right-box" >
							<view class="right-item" v-for="(item,index) in filterObj[filterIndex].pros" :key="index" @click="chooseItem(item)">
								<view class="label" :class="[query.filter[filterObj[filterIndex].filterId].indexOf(item.code)!=-1?'active':'']">
								{{item.name}}
								</view>
								<image class="value" v-if="query.filter[filterObj[filterIndex].filterId].indexOf(item.code)!=-1" src="../static/checked.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" type="default" @click="reset">重置</view>
				<view class="btn" type="default" @click="submit">完成</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 {
				day:1,
				active:0,
				show:false,
				show1:false,
				list: [],
				status:'more',
				city:'',
				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": '',
				  "filter": {
					  "brand":[],
					  "facility":[],
					  "feature":[],
					  "star":[],
					  "price":[10, 2500],
					  "poiKey": "",
					  "poiCode": "",
					  "latitude": '',
					  "longitude": '',
				  },
				  "keyword": "",
				  "limit": 10,
				  "returnFilter": 1,
				  "sortKey": "recommend",
				  "start": 0
				},
				districtList:JSON.parse(uni.getStorageSync('districtList')),
				currentLabel:'推荐排序',
				sortList:[
					{
						value:'recommend',
						label:'推荐排序'
					},
					{
						value:'satisfaction',
						label:'口碑'
					},
					{
						value:'price-asc',
						label:'起价升序'
					},
					{
						value:'price-desc',
						label:'起价降序'
					}
				],
				priceValue: [10, 2500],  // 可以指定默认值
				starList:[
					// {
					// 	id:1,
					// 	label:'一星级',
					// 	data:[1,0]
					// },
					{
						id:2,
						// label:'二星级',
						// data:[2,6]
						label:'2钻/星及以下',
						desc:'经济',
						data:[1,0,2,6]
					},
					{
						id:3,
						label:'3钻/星',
						desc:'舒适',
						data:[3,7]
					},
					{
						id:4,
						label:'4钻/星',
						desc:'高档',
						data:[4,8]
					},
					{
						id:5,
						label:'5钻/星',
						desc:'豪华',
						data:[5,9]
					},
					// {
					// 	id:6,
					// 	label:'经济型'
					// },
					// {
					// 	id:7,
					// 	label:'舒适型'
					// },
					// {
					// 	id:8,
					// 	label:'高档型'
					// },
					// {
					// 	id:9,
					// 	label:'豪华型'
					// },
					// {
					// 	id:0,
					// 	label:'普通型'
					// }
				],
				curPrice:'',
				priceList:[
					{
						min:0,
						max:150
					},
					{
						min:150,
						max:250
					},
					{
						min:250,
						max:300
					},
					{
						min:300,
						max:350
					},
					{
						min:350,
						max:500
					},
					{
						min:500,
						max:650
					},
					{
						min:650,
						max:800
					},
					{
						min:800,
						max:2500
					}
				],
				areaList:[],//位置筛选
				filterObj:{},//综合筛选
				areaIndex:0,
				filterIndex:0,
				location:{
					latitude:0,
					longitude:0,
				}
			}
		},
		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: {
			chooseType(index,key){
				this[key] = index
			},
			chooseItem(item){
				let key = this.filterObj[this.filterIndex].filterId
				let index = this.query.filter[key].indexOf(item.code)
				if(index!=-1){
					this.query.filter[key].splice(index,1)
				}else{
					this.query.filter[key].push(item.code)
				}
				
			},
			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}
				}
			},
			moveEnd(){
				console.log('结束');
				this.query.filter.price = [this.priceValue[0]+'-'+this.priceValue[1]]
				// this.search()
			},
			reset(){
				this.query.sortKey = "recommend"
				this.query.filter.brand = []
				this.query.filter.facility = []
				this.query.filter.feature = []
				this.query.filter.star = []
				this.query.filter.price = []
				this.query.filter.poiCode = ''
				this.query.filter.poiKey =  ""
				this.query.filter.latitude = ""
				this.query.filter.longitude = ""
				// this.query.filter.latitude = this.location.latitude
				// this.query.filter.longitude = this.location.longitude
				this.curPrice = ''
				// this.search()
				this.$refs.slider.updateValue(10, 2500)
				
			},
			submit(){
				this.search()
				this.show1 = false
			},
			chooseTab(val,type,label){
				if(type == 0){
					this.query.sortKey = val
					this.currentLabel = label
				}else if(type == 1){
					// 星级筛选
					if(this.query.filter.star.indexOf(val.data[0]) != -1){
						val.data.map(item=>{
							let index = this.query.filter.star.indexOf(item)
							this.query.filter.star.splice(index,1)
						})
					}else{
						this.query.filter.star = this.query.filter.star.concat(val.data)
					}
				}else if(type == 2){
					this.query.filter.poiKey =  label
					this.query.filter.poiCode = val.code
					this.query.filter.latitude = val.latitude
					this.query.filter.longitude = val.longitude
				}
				// this.search()
			},
			choosePrice(item){
				this.curPrice = item.max
				this.query.filter.price = [`${item.min}-${item.max}`]
				this.$refs.slider.updateValue(item.min, item.max)
				// 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()
			},
			chooseCity(){
				uni.navigateTo({
					url:`/hotel/cityList?backUrl=/hotel/search&key=${this.query.keyword}&checkInDate=${this.query.checkInDate}&checkOutDate=${this.query.checkOutDate}`
				})
			},
			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}&day=${this.day}`
				})
			},
			getHotelList(){
				if(this.status == 'loading') return
				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'){
						this.list = this.list.concat(res.content.data.hotelList) 
						if(!this.areaList.length){
							let filterList = res.content.data.filter
							filterList.map((item,index)=>{
								if(item.filterName == '位置'){
									this.areaList = item.pros
									filterList.splice(index,1)
									// item.pros.splice(0,1)
								}else if(item.filterName == '星级'){
									filterList.splice(index,1)
								}
								
							})
							this.filterObj = filterList
							console.log(2222222,this.filterObj);
						}else{
							this.query.returnFilter = 0
						}
						if((this.list.length) >= res.content.data.count){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.start++
						}
					}
				}).catch(()=>{
					this.status = 'more'
				})
			}
		},
		onLoad(options) {
			this.query.cityName = options.cityName || uni.getStorageSync('city').replace('市','')
			
			this.location = JSON.parse(uni.getStorageSync('location'))
			this.query.keyword = options.key
			this.query.checkInDate = options.checkInDate
			this.query.checkOutDate = options.checkOutDate
			if(options.isNear == 1){
				this.query.filter.latitude = this.location.latitude
				this.query.filter.longitude = this.location.longitude
			}
			this.day = options.day
			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;
		
	}
	
	.search-box{
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		.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{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.filter-box{
		display: flex;
		
		.left-box{
			flex: 0 0 156rpx;
			height: 500rpx;
			overflow: auto;
			background: #F0F0F0;
			.left-item{
				line-height: 90rpx;
				text-indent: 24rpx;
				font-size: 24rpx;
				color: #222222;
			}
			.left-item.active{
				color: #EE4320;
				font-weight: bold;
				background: #fff;
			}
		}
		
		.right-box{
			flex: 1;
			height: 500rpx;
			overflow: auto;
			background: #fff;
			padding: 0 20rpx;
			.right-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;
				box-sizing: border-box;
				border-bottom:1rpx solid #F0F0F0;
				.label{
					font-size: 26rpx;
					color: #222222;
				}
				.label.active{
					color: #FF4D3A;
				}
				.value{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		
	}
	
	.zs-list {
		margin-top: 20rpx;
		.hotel-item.disable{
			filter: grayscale(1);
		}
		.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;
					
				}
				.star{
					width: 21rpx;
					height: 17rpx;
					margin-left: 3rpx;
				}
				.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 0;
		.choose-box{
			.box{
				padding: 0 24rpx;
			}
			.choose-tab-box{
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 20rpx;
				.tab{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 220rpx;
					height: 100rpx;
					text-align: center;
					background: #F0F0F0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					.label{
						font-size: 24rpx;
						color: #222222;
					}
					.desc{
						font-size: 20rpx;
						color: #AAAAAA;
						margin-top: 6rpx;
					}
				}
				.tab.active{
					background: #FEECE8;
					color: #EE4320;
				}
			}
			.price-tab-box{
				display: flex;
				flex-wrap: wrap;
				padding-top: 20rpx;
				.price-tab{
					width: 220rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					background: #F0F0F0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #222222;
					box-sizing: border-box;
					margin-top: 20rpx;
				}
				
				.price-tab.active{
					background: #FEECE8;
					color: #EE4320;
				}
			}
		}
		
		.sub-title{
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 20rpx;
			// margin: 20rpx 0;
			.price-range{
				font-weight: 300;
				font-size: 28rpx;
				color: #EE4320;
			}
		}
		.mb28{
			margin-bottom: 28rpx!important;
		}
		
		.mt60{
			margin-top: 60rpx!important;
		}
		
		.zs-slider{
			width: 92%;
			// margin-bottom: 60rpx;
		}
	}
	
	.ml20{
		margin-left: 20rpx;
	}
	
	.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;
			background: #F0F0F0;
			font-size: 28rpx;
			color: #AAAAAA;
		}
		.btn+.btn{
			background: #EE4320;
			color: #fff;
			margin-left: 20rpx;
		}
	}
	.u-safe-bottom{
		display: none!important;
	}
}
</style>