<style>
.Hotel_Search{
width:100%;
height:70px;
background-color: #FFE0E3;
}
.HL_SearchInfo{
width:1200px;
height:70px;
margin:auto;
display:flex;
}
.HL_ComSearch{
display:inline-block;
height:44px;
background-color: #fff;
margin:12px 0;
border:1px solid #DCDCDC;
display: flex;
align-items: center;
}
.HL_ComSearch:last-child{
margin-right:0;
}
.HL_one{
width:407px;
margin:12px 30px 12px 40px;
position: relative;
}
.HL_Two{
width:265px;
margin-right:30px;
padding:0 20px;
}
.HL_Three{
width:318px;
}
.HL_bed{
width: 22px;
height: 14px;
margin:0 10px 0 20px;
}
.HL_ComSearch .el-input__inner{
border:none;
}
.HotelList .Ht_hg{
display:inline-block;
width:10px;
height:1px;
border-bottom:1px solid #cccccc;
z-index:99;
}
.HotelList .Ht_ul{
margin:0 20px;
height:46px;
line-height: 46px;
}
.HotelList .Ht_ul li{
display: inline-block;
font-size:14px;
color:#333333;
margin-right:15px;
}
.HotelList .Ht_ulName{
position: relative;
top:-1px;
}
.HotelList .Ht_ulDian{
position: relative;
top:-5px;
}
.Ht_ul li img{
position: relative;
top:1px;
}
.HL_Screen{
width:1198px;
height:auto;
margin:auto;
border:1px solid #DCDCDC;
margin-top:23px;
color:#43647F;
font-size:12px;
border-left: none;
}
.HL_Screen .HL_ScList>span:first-child,.HL_Screen .HL_ScList>div:first-child{
display: inline-flex;
background: #efefef;
height: 100%;
padding: 0;
text-align: center;
align-items: center;
width: 150px;
justify-content: center;
margin:0;
}
.HL_ScList{
width:100%;
height:40px;
display: flex;
align-items: center;
/* border-bottom:1px solid #DDDDDD; */
position: relative;
}
.HL_ScList:last-child{
border-bottom:0;
}
.HL_Screen .HL_ScList span{
display:inline-block;
margin-right:20px;
cursor: pointer;
padding:4px 8px;
}
.HL_Stitle{
display: inline-block;
width:50px;
text-align: left;
color:#96A6B1;
margin-right:20px!important;
}
.HL_ScList .el-input__inner{
width:100px;
height:28px;
border-radius: 0;
}
.HL_gang{
width:8px;
height:2px;
background-color: #43647F;
margin:0 10px;
}
.HL_checked{
display: inline-block;
padding: 4px 8px;
background-color: #96A9B5;
color: #fff;
border-radius: 4px;
}
.HL_searchHotelName .el-input__inner{
width:338px;
height:28px;
}
.HL_searchBtn{
width:70px;
height:20px;
color:#fff;
background-color: #EE4454;
text-align: center;
line-height: 20px;
margin-left:30px;
}
.HL_BtmList{
width:1200px;
height:auto;
margin:30px auto;
}
.HL_BtmTop{
width:100%;
height:36px;
background-color: #DDDDDD;
display: flex;
align-items:center;
font-size:12px;
color:#333333;
margin-bottom:20px;
}
.HL_BtmTop i{
font-size:12px;
}
.HL_BtmTop span{
margin-left:30px;
cursor: pointer;
padding:4px 8px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.HL_ListTable{
float:left;
width:840px;
/* width:100%; */
border-collapse:collapse;
}
.HL_ListTable td{
height:149px;
padding:10px;
width:840px;
border:1px solid #E5E5E5;
}
.HL_Map{
float:left;
width:338px;
height:380px;
margin-left:20px;
border:1px solid #d1d1d1;
}
.HL_ListImg{
float:left;
width:199px;
height:148px;
background-position: 50%;
}
.HL_ListImg img{
width:100%;
height:100%;
}
.HL_ListContent{
float:left;
position: relative;
margin-left:13px;
width:605px;
/* width:900px; */
height:148px;
}
.HL_ListTitle{
font-size:16px;
color:#2A5532;
width:410px;
}
.HL_ListTitle span{
display:inline-block;
/* margin-left:30px; */
/* color:#FFA835; */
font-size:12px;
}
.HL_ListTitle span img{
margin-right:4px;
}
.HL_ListSpecial{
display: inline-block;
padding:4px 11px;
background-color: #DBF1DF;
color:#4E9F5D;
font-size:12px;
margin:20px 10px 0 0;
}
.HL_ListAddress{
font-size:12px;
color:#333333;
margin-top:20px;
}
.HL_ListPrice{
position: absolute;
top:3px;
right:10px;
font-size:12px;
color:#666666;
}
.HL_ListPrice span{
color:#FDAC11;
font-weight: bold;
font-size:22px;
margin-right:5px;
}
.HL_ListPrice span label{
margin-right:5px;
}
.HL_ListBtn{
width:80px;
height:28px;
background-color: #F2F2F2;
color:#666666;
position: absolute;
cursor: pointer;
bottom:6px;
right:11px;
outline: none;
font-size:12px;
border:none;
}
.HL_ListBtn:hover{
background-color: #EE4454;
color:#fff;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.Ht_PopList{
width:170px;
float:left;
height:auto;
border-right:1px solid #E9E9E9;
margin:0 20px 20px 0;
}
.Ht_PopList:last-child{
border-right:0;
margin-right:0;
}
.Ht_PopList>div{
width:94px;
height:26px;
border:1px solid #EE4454;
color:#EE4454;
text-align: center;
line-height: 26px;
border-radius:3px;
margin-bottom:20px;
}
.Ht_PopList .el-input__inner{
width:54px;
height:22px;
}
.Ht_PopList .el-input__icon{
line-height: 0;
}
.Ht_PopList tr td{
height:35px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.HL_Concept{
display:inline-block;
width:85%;
overflow: hidden;
height: 100%;
}
.HL_Concept span{
margin:5px 0;
}
.HL_minHeight{
height:45px;
line-height: 27px;
}
.HL_AutoHeight{
height:auto;
}
.HL_ConZhankai{
display: inline-block;
margin-left:10px;
vertical-align: top;
cursor: pointer;
color:blue;
position: absolute;
right:10px;
top:14px;
}
.HotelList .pagination {
margin: 10px 0;
text-align:right;
margin:15px 0 30px 0;
width:1200px;
}
.HotelList .el-pagination .btn-next {
height: 28px;
}
.HotelList .el-pagination .btn-prev {
height: 28px;
}
.HotelList .HL_ListTitle>span {
margin-left:20px;
position: relative;
top:-3px;
}
.HotelList .HT_otherStar{
top:0!important;
}
.HotelList .HT_otherStar i{
color:rgb(239, 242, 247);
}
.HL_Maxheight{
height:114px!important;
}
.HL_Two .icon-img-rili{
margin-left:0!important;
}
.HL_TitleSpan:hover{
text-decoration: underline;
cursor: pointer;
}
</style>
<template>
<div class="HotelList">
<div class="Hotel_Search">
<div class="HL_SearchInfo">
<div class="HL_ComSearch HL_one">
<img class="HL_bed" src="../../assets/img/hotel/hotelBed.png" alt=""/>
<el-select style="width:350px;" v-model="placeKeyWords" filterable clearable placeholder="请选择">
<el-option value="东京都" label="东京都"></el-option>
<el-option value="大阪府" label="大阪府"></el-option>
<el-option value="京都府" label="京都府"></el-option>
<el-option value="爱知县" label="爱知县"></el-option>
<el-option value="秋田县" label="秋田县"></el-option>
<el-option value="青森县" label="青森县"></el-option>
<el-option value="千叶县" label="千叶县"></el-option>
<el-option value="爱媛县" label="爱媛县"></el-option>
<el-option value="福井县" label="福井县"></el-option>
<el-option value="福冈县" label="福冈县"></el-option>
<el-option value="福岛县" label="福岛县"></el-option>
<el-option value="岐阜县" label="岐阜县"></el-option>
<el-option value="群马县" label="群马县"></el-option>
<el-option value="广岛县" label="广岛县"></el-option>
<el-option value="北海道" label="北海道"></el-option>
<el-option value="兵库县" label="兵库县"></el-option>
<el-option value="茨城县" label="茨城县"></el-option>
<el-option value="石川县" label="石川县"></el-option>
<el-option value="岩手县" label="岩手县"></el-option>
<el-option value="香川县" label="香川县"></el-option>
<el-option value="鹿儿岛县" label="鹿儿岛县"></el-option>
<el-option value="神奈川县" label="神奈川县"></el-option>
<el-option value="高知县" label="高知县"></el-option>
<el-option value="熊本县" label="熊本县"></el-option>
<el-option value="三重县" label="三重县"></el-option>
<el-option value="宫城县" label="宫城县"></el-option>
<el-option value="宫崎县" label="宫崎县"></el-option>
<el-option value="长野县" label="长野县"></el-option>
<el-option value="长崎县" label="长崎县"></el-option>
<el-option value="奈良县" label="奈良县"></el-option>
<el-option value="新泻县" label="新泻县"></el-option>
<el-option value="大分县" label="大分县"></el-option>
<el-option value="冈山县" label="冈山县"></el-option>
<el-option value="冲绳县" label="冲绳县"></el-option>
<el-option value="佐贺县" label="佐贺县"></el-option>
<el-option value="崎玉县" label="崎玉县"></el-option>
<el-option value="滋贺县" label="滋贺县"></el-option>
<el-option value="岛根县" label="岛根县"></el-option>
<el-option value="静冈县" label="静冈县"></el-option>
<el-option value="枥木县" label="枥木县"></el-option>
<el-option value="德岛县" label="德岛县"></el-option>
<el-option value="鸟取县" label="鸟取县"></el-option>
<el-option value="富山县" label="富山县"></el-option>
<el-option value="和歌山县" label="和歌山县"></el-option>
<el-option value="山形县" label="山形县"></el-option>
<el-option value="山口县" label="山口县"></el-option>
<el-option value="山梨县" label="山梨县"></el-option>
</el-select>
</div>
<div class="HL_ComSearch HL_Two">
<el-date-picker
v-model="dateList"
type="daterange"
@change="getInOutDate"
value-format="yyyy-MM-dd"
range-separator="-"
:picker-options="pickerOptions0"
start-placeholder="入住日"
end-placeholder="离店日">
</el-date-picker>
</div>
<div class="HL_ComSearch HL_Three">
<el-popover :visible-arrow="false"
v-model="isShowPop"
placement="bottom"
trigger="click">
<div class="citycompent">
<div class="Ht_pNum clearfix">
<div class="Ht_PopList" v-for="item in msg.searchroomGroup">
<div>客房{{item.roomNum}}</div>
<table>
<tr>
<td width="80">成人</td>
<td>
<el-select v-model="item.numberOfAdults" placeholder="" @change="setPeopleNum">
<el-option :value="1" label="1"></el-option>
<el-option :value="2" label="2"></el-option>
<el-option :value="3" label="3"></el-option>
<el-option :value="4" label="4"></el-option>
<el-option :value="5" label="5"></el-option>
<el-option :value="6" label="6"></el-option>
<el-option :value="7" label="7"></el-option>
<el-option :value="8" label="8"></el-option>
<el-option :value="9" label="9"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>儿童</td>
<td>
<el-select v-model="item.numberOfChildren" placeholder="" @change="setPeopleNum">
<el-option :value="0" label="0"></el-option>
<el-option :value="1" label="1"></el-option>
<el-option :value="2" label="2"></el-option>
<el-option :value="3" label="3"></el-option>
<el-option :value="4" label="4"></el-option>
<el-option :value="5" label="5"></el-option>
</el-select>
</td>
</tr>
</table>
</div>
</div>
</div>
<ul class="Ht_ul" slot="reference">
<li class="Ht_ulName">
客房
<el-select style="width:65px;" v-model="room" placeholder="" @change="getRoomList(room)">
<el-option :value="1" label="1"></el-option>
<el-option :value="2" label="2"></el-option>
<el-option :value="3" label="3"></el-option>
<el-option :value="4" label="4"></el-option>
<el-option :value="5" label="5"></el-option>
<el-option :value="6" label="6"></el-option>
<el-option :value="7" label="7"></el-option>
<el-option :value="8" label="8"></el-option>
<el-option :value="9" label="9"></el-option>
<el-option :value="10" label="10"></el-option>
</el-select>
</li>
<li style="margin-right:8px;"><img src="../../assets/img/hotel/head.png" alt=""/></li>
<li class="Ht_ulName">{{auditNum}}成人</li>
<li class="Ht_ulDian">.</li>
<li class="Ht_ulName">{{childNum}}儿童</li>
</ul>
</el-popover>
</div>
</div>
</div>
<div class="HL_Screen">
<div class="HL_ScList">
<span class="HL_Stitle">住宿类型</span>
<span v-for="item in hotelObj" :class="item.isCked?'HL_checked':''" @click="item.isCked=!item.isCked">
{{item.name}}
</span>
</div>
<div class="HL_ScList">
<span class="HL_Stitle">价格</span>
<!-- <span v-for="item in PriceObj">
{{item.name}}
</span> -->
<!-- <span style="margin-right:10px;">自定义价格：</span> -->
<el-input type="text" style="width:100px;" @keyup.native="checkPrice(monyMsg,'searchMinRate')" v-model="monyMsg.searchMinRate" />
<i class="HL_gang"></i>
<el-input type="text" style="width:100px;" @keyup.native="checkPrice(monyMsg,'searchMaxRate')" v-model="monyMsg.searchMaxRate" />
</div>
<div class="HL_ScList">
<span class="HL_Stitle">房型</span>
<!-- <span class="HL_checked">不限</span> -->
<span v-for="item in houseType" :class="item.isCked?'HL_checked':''" @click="item.isCked=!item.isCked">
{{item.name}}
</span>
</div>
<div class="HL_ScList">
<span class="HL_Stitle">餐饮</span>
<span v-for="item in mealType" :class="item.isCked?'HL_checked':''" @click="item.isCked=!item.isCked">
{{item.name}}
</span>
</div>
<div class="HL_ScList MoreList" style="height:auto;">
<div class="HL_Stitle" style="height:45px;" :class="isOpen==2?'HL_Maxheight':''">理念</div>
<div class="HL_Concept" :class="isOpen==1?'HL_minHeight':'HL_AutoHeight'">
<span v-for="item in ConceptObj" :class="item.isCked?'HL_checked':''" @click="item.isCked=!item.isCked">
{{item.name}}
</span>
</div>
<div class="HL_ConZhankai" @click="setOpenMore">
{{isOpen==1?'展开':'收起'}}
</div>
<!-- <span>至外汇兑换处步行5分钟以内</span>
<span>车站步行5分钟以内</span>
<span>温泉</span> -->
</div>
<div class="HL_ScList">
<span class="HL_Stitle">评分</span>
<span style="margin-right:10px;">输入评分范围：</span>
<el-input type="text" style="width:100px;" @keyup.native="checkInteger(starMsg,'reviewRatingLowerLimits')" v-model="starMsg.reviewRatingLowerLimits" />
<i class="HL_gang"></i>
<el-input type="text" style="width:100px;" @keyup.native="checkInteger(starMsg,'reviewRatingUpperLimits')" v-model="starMsg.reviewRatingUpperLimits" />
</div>
<div class="HL_ScList">
<span class="HL_Stitle">酒店名称</span>
<el-input type="text" class="HL_searchHotelName" style="width:320px;" @keyup.native.enter="SearchHotel(),resetPageIndex()" v-model="keyWords" placeholder="请输入你想找的酒店名称" />
<span class="HL_searchBtn" @click="SearchHotel(),resetPageIndex()">搜索</span>
</div>
</div>
<div class="HL_BtmList">
<div class="HL_BtmTop">
<span @click="OrderBySource(1)" :class="msg.sort==1?'HL_checked':''">按人气排序</span>
<!-- <i class="iconfont icon-jiantou"></i>
<i class="iconfont icon-jiantou-copy"></i> -->
<span @click="OrderBySource(2)" :class="msg.sort==2?'HL_checked':''">按价格排序</span>
<!-- <i class="iconfont icon-jiantou"></i>
<i class="iconfont icon-jiantou-copy"></i> -->
</div>
<div class="clearfix" v-loading="loading">
<!-- <div style="width:838px;float:left;min-height:380px;"> -->
<div style="float:left;min-height:380px;" v-if="dataList.length>0">
<table class="HL_ListTable">
<tr v-for="item in dataList">
<td>
<div class="clearfix">
<div class="HL_ListImg" :style="`background-image: url(${item.hotelImageUrl})`">
<!-- <img :src="item.hotelImageUrl" alt=""/> -->
</div>
<div class="HL_ListContent">
<div class="HL_ListTitle">
<span class="HL_TitleSpan" @click="goHotelDetail(item,'HotelDetail')">{{item.hotelName}}</span>
<span v-if="item.reviewRating">
<el-rate
v-model="item.reviewRating"
disabled
show-score
text-color="#ff9900"
:score-template="item.reviewRating+'分'">
</el-rate>
</span>
<span v-else class="HT_otherStar">
<i class="el-rate__icon el-icon-star-on"></i>
<i class="el-rate__icon el-icon-star-on"></i>
<i class="el-rate__icon el-icon-star-on"></i>
<i class="el-rate__icon el-icon-star-on"></i>
<i class="el-rate__icon el-icon-star-on"></i>
</span>
</div>
<div>
<span v-for="subItem in getTravelFeature(item.hotelFeaturesMask)" class="HL_ListSpecial">{{subItem}}</span>
</div>
<div class="HL_ListAddress">
<img src="../../assets/img/hotel/address.png" alt=""/>
地址：{{item.address}}
</div>
<div class="HL_ListPrice">
<span><label>¥</label>{{getPrice(item.lowrateBySetCurrency)}}</span>起
</div>
<input type="button" class="HL_ListBtn" @click="goHotelDetail(item,'HotelDetail')" value="查看详情"/>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="HL_Map" v-if="travelLngLat.length>0">
<HTMap :dataList="travelLngLat" :type="1"></HTMap>
</div>
<div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
<div class="empty-data"><i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
</div>
</div>
</div>
<el-pagination v-if="dataList.length>0" class="pagination"
@current-change="CurrentChange"
:current-page.sync="currentPage"
background
layout="total, prev, pager, next"
:total="TotalPage">
</el-pagination>
</div>
</template>
<script>
import moment from "moment";
import HTMap from '../global/HTMap'
export default {
data() {
return {
//查询条件
msg:{
displayFrom:1,
numberOfResults:5,
arrivalDate:'',
departureDate:'',
searchroomGroup:[],
searchHotelIdList:[],
freeword:'',
freewordType:1, //类型 1，地区，2-酒店名称
reviewRatingUpperLimits:'',
reviewRatingLowerLimits:'',
searchHotelCategory:[], //酒店分类
searchHotelFeatures:[], //酒店特征
searchRoomType:[], //类型的房间
searchMealType:[], //饮食条件搜索
searchMinRate:'', //最小金额
searchMaxRate:'', //最大金额
sort:0
},
//是否显示日期范围
isShowTime:true,
//总页数
TotalPage:0,
currentPage:1,
monyMsg:{
//最小金额
searchMinRate:'',
//最大金额
searchMaxRate:'',
},
starMsg:{
//最小星星
reviewRatingLowerLimits:'',
//最大星星
reviewRatingUpperLimits:'',
},
//除以
JapanIncrease:0,
isShowPop:false,
roomList:[],
room:1,
auditNum:1,
childNum:0,
//是否展开
isOpen:1,
//酒店搜索关键字
keyWords:'',
placeKeyWords:'',
//日期
dateList:[],
//数据
dataList:[],
loading:false,
//住宿类型
hotelObj:[{
name:'酒店',
Id:1,
isCked:false
},{
name:'日式旅馆',
Id:2,
isCked:false
},{
name:'出租别墅',
Id:3,
isCked:false
},{
name:'酒店/商务酒店',
Id:4,
isCked:false
},{
name:'简易旅馆/民宿/山间小屋',
Id:5,
isCked:false
}],
//价格
PriceObj:[{
name:'100元以下',
Id:1
},{
name:'100-300元',
Id:2
},{
name:'300-600元',
Id:3
},{
name:'600-800元',
Id:4
}],
//房型
houseType:[{
name:'单人床',
Id:1,
isCked:false
},{
name:'双人间',
Id:2,
isCked:false
},{
name:'大床房',
Id:3,
isCked:false
},{
name:'三人间',
Id:4,
isCked:false
},{
name:'四人间',
Id:5,
isCked:false
},{
name:'日式房',
Id:6,
isCked:false
},{
name:'日式+西式混合',
Id:7,
isCked:false
}],
//餐饮
mealType:[{
name:'无餐',
Id:1,
isCked:false
},{
name:'含早餐',
Id:2,
isCked:false
},{
name:'含晚餐',
Id:3,
isCked:false
},{
name:'包含早餐.晚餐',
Id:4,
isCked:false
}],
//理念
ConceptObj:[{
name:'至外汇兑换处步行5分钟以内',
Id:1,
isCked:false
},{
name:'车站步行5分钟以内',
Id:2,
isCked:false
},{
name:'温泉',
Id:3,
isCked:false
},{
name:'前台可兑换',
Id:4,
isCked:false
},{
name:'到观光信息中心5分钟',
Id:5,
isCked:false
},{
name:'露天浴池',
Id:6,
isCked:false
},{
name:'自然式温泉',
Id:7,
isCked:false
},{
name:'浊汤温泉',
Id:8,
isCked:false
},{
name:'室外游泳池',
Id:9,
isCked:false
},{
name:'去海滩步行5分钟的路程',
Id:10,
isCked:false
},{
name:'停车场免费',
Id:11,
isCked:false
},{
name:'室内浴池/大型浴池',
Id:12,
isCked:false
},{
name:'包租浴池/包租露天浴池',
Id:13,
isCked:false
},{
name:'11点之后退房',
Id:14,
isCked:false
},{
name:'美容沙龙护理设备',
Id:15,
isCked:false
},{
name:'有乒乓球台',
Id:16,
isCked:false
},{
name:'瞭望式浴池',
Id:17,
isCked:false
},{
name:'桑拿浴',
Id:18,
isCked:false
},{
name:'喷流式气泡浴缸',
Id:19,
isCked:false
},{
name:'按摩',
Id:20,
isCked:false
},{
name:'出租滑雪用具',
Id:21,
isCked:false
},{
name:'租赁滑板',
Id:22,
isCked:false
},{
name:'有车接送',
Id:23,
isCked:false
},],
//传过去参数
PassMsg:{
hotelId:'',
groupBookingFlg:'',
arrivalDate:'',
departureDate:'',
searchroomGroup:[],
lowrateBySetCurrency:''
},
pickerOptions0: {
disabledDate: this.disabledDate
},
//坐标数组
travelLngLat:[]
};
},
mounted() {
},
created() {
if(this.$route.query.time){
this.dateList=this.$route.query.time;
this.msg.searchroomGroup = [{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0
}]
this.getInOutDate()
}
if(this.$route.query.searchKey){
this.keyWords=this.$route.query.searchKey;
this.SearchHotel();
}
if(sessionStorage.getItem("HotelInfo")){
let msgList = JSON.parse(sessionStorage.getItem("HotelInfo"));
this.placeKeyWords = msgList.place;
this.dateList=[];
this.dateList.push(msgList.StartDate,msgList.EndDate);
this.auditNum = msgList.auditNum;
this.childNum = msgList.childNum;
this.room = msgList.room;
this.msg.searchroomGroup = msgList.roomList;
this.SearchHotel();
}
if(sessionStorage.getItem("OpenB2BCode")){
if(sessionStorage.getItem("OpenB2BCode")=='jqk4n7BSaoI='){
this.isShowTime=false;
}
}
},
components: {
HTMap
},
methods: {
disabledDate(time) {
if(this.isShowTime){
let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
}
},
//结束日期默认加1
getInOutDate(){
if(this.dateList){
if(this.dateList[0]==this.dateList[1]){
this.dateList[1] = moment(this.dateList[0]).add(1,'days').format('YYYY-MM-DD')
}
}
},
CurrentChange(val) {
this.msg.displayFrom = val;
this.SearchHotel();
},
//房间数改变
getRoomList(roomNum){
this.isShowPop=true;
this.msg.searchroomGroup = [];
for(var i=1;i<=roomNum;i++){
var obj = {
roomNum:i,
numberOfAdults:1,
numberOfChildren:0
}
this.msg.searchroomGroup.push(obj);
}
this.auditNum=0;
this.childNum=0;
this.msg.searchroomGroup.forEach(x=>{
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum(){
this.auditNum=0;
this.childNum=0;
this.msg.searchroomGroup.forEach(x=>{
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
})
if(this.auditNum==null||this.auditNum==undefined){
this.auditNum=1
}
if(this.childNum==null||this.childNum==undefined){
this.childNum=1
}
},
//点击展开关闭
setOpenMore(){
if(this.isOpen==1){
this.isOpen=2
}else{
this.isOpen=1;
}
},
//点击搜索
SearchHotel(){
if(this.dateList){
this.msg.arrivalDate=this.dateList[0];
this.msg.departureDate=this.dateList[1];
}else{
this.msg.arrivalDate="";
this.msg.departureDate="";
}
if(this.msg.arrivalDate==''){
this.Error('请选择入住日期');
return;
}
if(this.msg.departureDate==''){
this.Error('请选择退房日期');
return;
}
if(this.keyWords==''){
this.msg.freewordType=1;
this.msg.freeword= this.placeKeyWords;
}else{
this.msg.freewordType=2;
this.msg.freeword=this.keyWords;
}
if(this.monyMsg.searchMinRate==""){
this.msg.searchMinRate=0;
}else{
this.msg.searchMinRate = this.monyMsg.searchMinRate;
}
if(this.monyMsg.searchMaxRate==""){
this.msg.searchMaxRate=0;
}else{
this.msg.searchMaxRate = this.monyMsg.searchMaxRate;
}
if(this.starMsg.reviewRatingLowerLimits==""){
this.msg.reviewRatingLowerLimits=0;
}else{
this.msg.reviewRatingLowerLimits = this.starMsg.reviewRatingLowerLimits;
}
if(this.starMsg.reviewRatingUpperLimits==""){
this.msg.reviewRatingUpperLimits = 0;
}else{
this.msg.reviewRatingUpperLimits = this.starMsg.reviewRatingUpperLimits;
}
this.msg.searchHotelCategory=[];
this.msg.searchRoomType=[];
this.msg.searchHotelFeatures=[];
this.msg.searchMealType=[];
//酒店分类
this.hotelObj.forEach(x=>{
if(x.isCked){
this.msg.searchHotelCategory.push(x.Id);
}
})
//类型的房间
this.houseType.forEach(x=>{
if(x.isCked){
this.msg.searchRoomType.push(x.Id);
}
})
//酒店特征
this.ConceptObj.forEach(x=>{
if(x.isCked){
this.msg.searchHotelFeatures.push(x.Id);
}
})
//酒店餐饮
this.mealType.forEach(x=>{
if(x.isCked){
this.msg.searchMealType.push(x.Id);
}
})
this.loading=true;
this.dataList = [];
this.travelLngLat=[];
this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
this.loading=false;
if (res.data.resultCode == 1) {
if(Object.prototype.toString.call(res.data.data.hotelSummary) == '[object Object]'){
this.dataList.push(res.data.data.hotelSummary);
}else{
this.dataList = res.data.data.hotelSummary;
}
//获取酒店坐标
this.dataList.forEach(x=>{
x.reviewRating = parseFloat(x.reviewRating);
let obj = {
lat:x.latitudeW,
lng:x.longitudeW,
name:x.hotelName
}
this.travelLngLat.push(obj);
})
this.TotalPage = parseInt(res.data.data.numberOfResultMatched);
this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
this.JapanIncrease = res.data.data.JapanIncrease;
} else {
//this.Error(res.data.message);
}
},
err => {}
);
},
//重置页数
resetPageIndex() {
this.msg.displayFrom = 1;
this.currentPage=1;
},
//按人气排序
OrderBySource(type){
this.msg.sort=type;
this.SearchHotel();
},
//跳转详情
goHotelDetail(item,path){
this.PassMsg.hotelId = item.hotelId,
this.PassMsg.arrivalDate=this.msg.arrivalDate;
this.PassMsg.departureDate = this.msg.departureDate;
this.PassMsg.searchroomGroup = this.msg.searchroomGroup;
this.PassMsg.lowrateBySetCurrency = this.getPrice(item.lowrateBySetCurrency);
this.PassMsg.room = this.room
this.PassMsg.auditNum = this.auditNum;
sessionStorage.setItem("HotelDetail", JSON.stringify(this.PassMsg));
var jsonstr= JSON.stringify(this.PassMsg);
this.$router.push({
path:"/HotelDetail",
query:{
msg:encodeURIComponent(jsonstr),
}
})
// let routeData = this.$router.resolve({
// name: path,
// });
// window.open(routeData.href, "_blank");
},
//主题特色
getTravelFeature(feature){
let fea = feature.split(',');
let newArr=[];
if(fea[0]==1){
newArr.push('从车站步行5分钟');
}
if(fea[1]==1){
newArr.push('有温泉');
}
if(fea[2]==1){
newArr.push('离海滩5分钟');
}
if(fea[3]==1){
newArr.push('退房11点以后');
}
return newArr;
},
//获取价格
getPrice(price){
return Math.ceil(price/this.JapanIncrease);
}
}
};
</script>