|
@@ -52,7 +52,7 @@
|
|
|
<!-- 列表 -->
|
|
|
<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>
|
|
|
+ <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}}
|
|
@@ -139,24 +139,27 @@
|
|
|
|
|
|
|
|
|
<view class="choose-box">
|
|
|
- <view class="radio-box" v-if="active == 0">
|
|
|
+ <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>
|
|
|
- <view class="value" v-if="query.sortKey == item.value">
|
|
|
- √
|
|
|
- </view>
|
|
|
+ <image class="value" v-if="query.sortKey == item.value" src="../static/checked.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <template v-else-if="active == 1">
|
|
|
+ <view class="box" v-else-if="active == 1">
|
|
|
|
|
|
<view class="sub-title">
|
|
|
星级(可多选)
|
|
|
</view>
|
|
|
- <view class="tab-box">
|
|
|
- <view class="tab" :class="[index%4!=0?'ml20':'',query.filter.star.indexOf(item.id) != -1?'active':'']" v-for="(item,index) in starList" :key="item.id" @click="chooseTab(item,1)">
|
|
|
- {{item.label}}
|
|
|
+ <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 class="sub-title mb28">
|
|
@@ -164,35 +167,46 @@
|
|
|
</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%4!=0?'ml20':'',item.max == curPrice?'active':'']" v-for="(item,index) in priceList" :key="index" @click="choosePrice(item)">
|
|
|
+ <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>
|
|
|
- </template>
|
|
|
- <view class="radio-box" v-else-if="active == 2">
|
|
|
+ </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>
|
|
|
- <view class="value" v-if="query.filter.poiCode == item.code">
|
|
|
- √
|
|
|
+ <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)">
|
|
|
+ <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">
|
|
|
+ <view class="label" :class="[query.filter[filterObj[filterIndex].filterId].indexOf(item.code)!=-1?'active':'']">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
- <view class="value" v-if="query.filter[filterObj[filterIndex].filterId].indexOf(item.code)!=-1">
|
|
|
- √
|
|
|
- </view>
|
|
|
+ <image class="value" v-if="query.filter[filterObj[filterIndex].filterId].indexOf(item.code)!=-1" src="../static/checked.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -246,7 +260,7 @@
|
|
|
"facility":[],
|
|
|
"feature":[],
|
|
|
"star":[],
|
|
|
- "price":[10, 2000],
|
|
|
+ "price":[10, 2500],
|
|
|
"poiKey": "",
|
|
|
"poiCode": "",
|
|
|
"latitude": '',
|
|
@@ -278,7 +292,7 @@
|
|
|
label:'起价降序'
|
|
|
}
|
|
|
],
|
|
|
- priceValue: [10, 2000], // 可以指定默认值
|
|
|
+ priceValue: [10, 2500], // 可以指定默认值
|
|
|
starList:[
|
|
|
// {
|
|
|
// id:1,
|
|
@@ -290,21 +304,25 @@
|
|
|
// label:'二星级',
|
|
|
// data:[2,6]
|
|
|
label:'二星级及以下',
|
|
|
+ desc:'经济',
|
|
|
data:[1,0,2,6]
|
|
|
},
|
|
|
{
|
|
|
id:3,
|
|
|
label:'三星级',
|
|
|
+ desc:'舒适',
|
|
|
data:[3,7]
|
|
|
},
|
|
|
{
|
|
|
id:4,
|
|
|
label:'四星级',
|
|
|
+ desc:'高档',
|
|
|
data:[4,8]
|
|
|
},
|
|
|
{
|
|
|
id:5,
|
|
|
label:'五星级',
|
|
|
+ desc:'豪华',
|
|
|
data:[5,9]
|
|
|
},
|
|
|
// {
|
|
@@ -332,27 +350,40 @@
|
|
|
priceList:[
|
|
|
{
|
|
|
min:0,
|
|
|
+ max:150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min:150,
|
|
|
max:250
|
|
|
},
|
|
|
{
|
|
|
min:250,
|
|
|
- max:400
|
|
|
+ max:300
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min:300,
|
|
|
+ max:350
|
|
|
},
|
|
|
{
|
|
|
- min:400,
|
|
|
+ min:350,
|
|
|
+ max:500
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min:500,
|
|
|
max:650
|
|
|
},
|
|
|
{
|
|
|
min:650,
|
|
|
- max:900
|
|
|
+ max:800
|
|
|
},
|
|
|
{
|
|
|
- min:900,
|
|
|
+ min:800,
|
|
|
max:2500
|
|
|
}
|
|
|
],
|
|
|
- areaList:[],//存放行政区信息
|
|
|
+ areaList:[],//位置筛选
|
|
|
filterObj:{},//综合筛选
|
|
|
+ areaIndex:0,
|
|
|
filterIndex:0,
|
|
|
location:{
|
|
|
latitude:0,
|
|
@@ -393,8 +424,8 @@
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
- chooseType(index){
|
|
|
- this.filterIndex = index
|
|
|
+ chooseType(index,key){
|
|
|
+ this[key] = index
|
|
|
},
|
|
|
chooseItem(item){
|
|
|
let key = this.filterObj[this.filterIndex].filterId
|
|
@@ -433,11 +464,11 @@
|
|
|
this.query.filter.price = []
|
|
|
this.query.filter.poiCode = ''
|
|
|
this.query.filter.poiKey = ""
|
|
|
- this.query.filter.latitude = this.location.latitude
|
|
|
- this.query.filter.longitude = this.location.longitude
|
|
|
+ // this.query.filter.latitude = this.location.latitude
|
|
|
+ // this.query.filter.longitude = this.location.longitude
|
|
|
this.curPrice = ''
|
|
|
// this.search()
|
|
|
- this.$refs.slider.updateValue(10, 2000)
|
|
|
+ this.$refs.slider.updateValue(10, 2500)
|
|
|
|
|
|
},
|
|
|
submit(){
|
|
@@ -459,7 +490,7 @@
|
|
|
this.query.filter.star = this.query.filter.star.concat(val.data)
|
|
|
}
|
|
|
}else if(type == 2){
|
|
|
- this.query.filter.poiKey = "DISTRICT"
|
|
|
+ this.query.filter.poiKey = label
|
|
|
this.query.filter.poiCode = val.code
|
|
|
this.query.filter.latitude = val.latitude
|
|
|
this.query.filter.longitude = val.longitude
|
|
@@ -519,10 +550,13 @@
|
|
|
let filterList = res.content.data.filter
|
|
|
filterList.map((item,index)=>{
|
|
|
if(item.filterName == '位置'){
|
|
|
- this.areaList = item.pros[0].filter
|
|
|
+ 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);
|
|
@@ -546,8 +580,10 @@
|
|
|
this.query.keyword = options.key
|
|
|
this.query.checkInDate = options.checkInDate
|
|
|
this.query.checkOutDate = options.checkOutDate
|
|
|
- this.query.filter.latitude = this.location.latitude
|
|
|
- this.query.filter.longitude = this.location.longitude
|
|
|
+ if(options.isNear == 1){
|
|
|
+ this.query.filter.latitude = this.location.latitude
|
|
|
+ this.query.filter.longitude = this.location.longitude
|
|
|
+ }
|
|
|
this.day = options.day
|
|
|
this.getHotelList()
|
|
|
}
|
|
@@ -653,7 +689,8 @@
|
|
|
color: #222222;
|
|
|
}
|
|
|
.value{
|
|
|
- color: #FF4D3A;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -669,6 +706,8 @@
|
|
|
.left-item{
|
|
|
line-height: 90rpx;
|
|
|
text-indent: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
.left-item.active{
|
|
|
color: #EE4320;
|
|
@@ -694,9 +733,13 @@
|
|
|
font-size: 26rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
- .value{
|
|
|
+ .label.active{
|
|
|
color: #FF4D3A;
|
|
|
}
|
|
|
+ .value{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -770,24 +813,36 @@
|
|
|
.content{
|
|
|
padding: 20rpx 0;
|
|
|
.choose-box{
|
|
|
- .tab-box{
|
|
|
+ .box{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+ .choose-tab-box{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
.tab{
|
|
|
- width: 160rpx;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 220rpx;
|
|
|
+ height: 100rpx;
|
|
|
text-align: center;
|
|
|
background: #F0F0F0;
|
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #AAAAAA;
|
|
|
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: #fff;
|
|
|
- border: 2rpx solid #EE4320;
|
|
|
+ background: #FEECE8;
|
|
|
color: #EE4320;
|
|
|
}
|
|
|
}
|
|
@@ -796,21 +851,20 @@
|
|
|
flex-wrap: wrap;
|
|
|
padding-top: 20rpx;
|
|
|
.price-tab{
|
|
|
- width: 160rpx;
|
|
|
+ width: 220rpx;
|
|
|
height: 52rpx;
|
|
|
line-height: 52rpx;
|
|
|
text-align: center;
|
|
|
background: #F0F0F0;
|
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #AAAAAA;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
box-sizing: border-box;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.price-tab.active{
|
|
|
- background: #fff;
|
|
|
- border: 2rpx solid #EE4320;
|
|
|
+ background: #FEECE8;
|
|
|
color: #EE4320;
|
|
|
}
|
|
|
}
|