Skip to content

A
Athena
Commit 718702e7 authored by zhengke's avatar zhengke
Browse files
Options

酒店

parent 07e5230e
Hide whitespace changes
Inline Side-by-side
Showing with 3383 additions and 1 deletion
src/App.vue
View file @ 718702e7
......@@ -85,7 +85,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_tqm52zonr0j.css';
@import '//at.alicdn.com/t/font_863923_j05ygogmy0l.css';
@import './assets/global/global.css';
@import './assets/css/common.css';
body,html{
......
src/components/Hotel/HotelDetail.vue 0 → 100644
View file @ 718702e7
<style>
.HotelDetail{
width:1200px;
height:auto;
margin:auto;
margin-bottom:34px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.HD_Top{
margin-top:20px;
}
.HD_Top_Left{
width:878px;
height:auto;
float:left;
}
.HD_Top_Right{
width:300px;
float:left;
height:368px;
margin-left:20px;
}
.HD_Top_Title{
font-weight: bold;
color:#000000;
font-size:16px;
margin-bottom:10px;
}
.HD_Top_Address{
font-size:14px;
color:#999999;
}
.HD_Top_Price{
width:838px;
height:54px;
margin:20px 0;
background-color: #F5F5F5;
padding:0 20px;
display: flex;
align-items: center;
font-size:12px;
color:#888888;
position: relative;
}
.HD_Top_Pinfo{
color:#EE4454;
font-size:22px;
font-weight: bold;
margin-top:-5px;
}
.HD_Top_Pinfo i{
margin-right:10px;
font-style:normal;
}
.HD_Top_qi{
margin-right:30px;
}
.HD_SureBtn{
float:right;
width:90px;
height:36px;
background-color: #EE4454;
border-radius:4px;
color:#fff;
outline: none;
right:20px;
position: absolute;
border:none;
cursor: pointer;
}
.HD_Top_ImgList{
width:100%;
height:auto;
}
.HD_Top_FirstImg{
float:left;
width:345px;
height:259px;
}
.HD_Top_ImgList img{
width:100%;
height:100%;
}
.HD_Top_rightImg{
float:left;
width:526px;
margin-left:7px;
}
.HD_Top_ImgDiv{
width:259px;
height:126px;
float:left;
margin:0 8px 8px 0;
}
.HD_Top_ImgDiv:nth-child(2n+2){
margin-right:0;
}
.HD_btnContent{
width:100%;
height:auto;
border:1px solid #DCDCDC;
margin-top:49px;
}
.HD_checkTime,.HD_PeoPleNum{
margin:20px;
font-size:12px;
color:#666666;
position: relative;
}
.HD_checkTime span{
margin-right:10px;
}
.HD_warn{
color:#EE4454;
font-size:14px;
font-weight:bold;
margin-left:46px;
}
.HD_warn i{
color:#FFA835;
}
.HD_PeoPleNum .el-input-number{
width:145px;
line-height: 26px;
margin-right:20px;
}
.HD_PeoPleNum .el-input__inner{
height:28px;
}
.HD_PSpan{
margin-right:10px;
}
.HD_PsureBtn{
position: absolute;
right:0;
width:90px;
height:36px;
background-color: #EE4454;
color:#fff;
font-size: 16px;
font-weight: 400;
outline: none;
border:none;
cursor: pointer;
border-radius: 4px;
}
.HD_fuhe{
width:1167px;
padding:0 17px;
height:30px;
color:#fff;
font-size:16px;
display: flex;
align-items: center;
font-weight: bold;
background-color: #FFA835;
}
.HD_fuhe img{
margin-right:10px;
}
.HD_fangxing_List{
width:100%;
height:97px;
position: relative;
border-bottom:1px solid #DCDCDC;
}
.HD_fangxing{
width:100%;
border-collapse: collapse;
}
.HD_fangxing td{
padding:0
}
.HD_LeftRoomInfo{
margin:20px 10px 0 20px;
display: flex;
}
.HD_FuheIMG{
position: relative;
display: inline-block;
width:70px;
height:70px;
}
.HD_FuheIMG img{
width:100%;
height:100%;
}
.HD_FuheIMG div{
position: absolute;
bottom: 0;
right:0;
width:40px;
height:20px;
background:rgba(0,0,0,0.5);
line-height: 20px;
text-align: center;
color:#fff;
font-size: 12px;
}
.HD_Kefang{
display: inline-block;
margin-left:10px;
color:#555555;
font-size:12px;
width:123px;
}
.HD_Kefang span{
display: block;
margin-bottom:5px;
}
.HD_Kefang span:first-child{
font-size: 16px;
color:#111111;
}
.HD_fangxing_List ul li{
float:left;
font-size:13px;
margin-right:40px;
display: flex;
align-items: center;
height:98px;
}
.HD_ComDiJia{
position: absolute;
top:0;
left:0;
width:66px;
height:24px;
color:#fff;
font-size:12px;
text-align: center;
line-height: 24px;
border-bottom-right-radius: 12px;
}
.HD_Black{
background-color: black;
}
.HD_Green{
background-color: green;
}
.HD_OneLi{
color:#888888;
width:170px;
margin-left:20px;
font-size:14px;
}
.HD_FreeWifi{
color:#EE4454;
}
.HD_Lingprice{
color:#999999;
}
.HD_Lingprice i{
font-style: normal;
margin-right:2px;
}
.HD_Lingprice span{
color:#EE4454;
font-size:22px;
}
.HD_Lingprice>div:last-child{
margin-top:3px;
}
.HD_letfTD{
width:238px;
vertical-align:top;
border-right:1px solid #d1d1d1;
border-bottom:1px solid #d1d1d1;
}
.HD_LastShowMore{
width:941px;
height:23px;
background-color: #DCDCDC;
text-align: right;
padding-right:20px;
font-size:12px;
color:#999999;
line-height: 23px;
border-bottom:1px solid #DCDCDC;
}
.HD_LastShowMore span{
cursor: pointer;
}
.HD_LastShowMore i{
font-size:12px;
}
.HD_HotelInfo{
width:100%
}
.HD_fangxing tr td:last-child{
border-bottom:1px solid #DCDCDC;
}
.HD_hotelComIntroduce{
margin:auto;
width:1160px;
height:auto;
padding:20px 0 10px 0;
border-bottom:1px solid #DCDCDC;
font-size:12px;
color:#111111;
}
.HD_hotelComIntroduce span{
display:inline-block;
margin-bottom:10px;
}
.HD_inTitle{
font-size:14px;
font-weight: bold;
color:#111111;
margin-bottom:20px;
}
.HD_ServiceList span{
display: inline-block;
margin:0 30px 10px 0;
}
.HD_ComLeftTitle{
display:inline-block;
width:110px;
text-align: left;
color:#666666;
vertical-align: top;
}
.HD_Card img{
margin-right:10px;
}
.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;
}
.HotelDetail .Ht_ul{
height:46px;
line-height: 46px;
width:400px;
display: inline-block;
}
.HotelDetail .Ht_ul li{
display: inline-block;
font-size:14px;
color:#333333;
margin-right:15px;
}
.HotelDetail .Ht_ulName{
position: relative;
top:-1px;
}
.HotelDetail .Ht_ulDian{
position: relative;
top:-5px;
}
.Ht_ul li img{
position: relative;
top:1px;
}
.HD_Top_Right_Star{
width:262px;
height:140px;
padding:0 20px;
background-color: #F5F5F5;
border:1px solid #DDDDDD;
}
.HD_TOP_Map{
width:100%;
height:238px;
margin-top:20px;
border:1px solid #DDDDDD;
}
.HD_TopScore{
height:60px;
width:100%;
display: flex;
align-items: center;
position: relative;
border-bottom:1px solid #DDDDDD;
}
.HD_Score_right{
position: absolute;
right:0;
color:#111111!important;
}
.HD_TopScore span{
display:inline-block;
font-size:16px;
color:#EE4454;
}
.HD_ScoreS{
color:#EE4454;
font-size:24px!important;
}
.HD_xing{
margin-top:29px;
text-align: center;
}
.blackColor{
color:black;
}
.HD_minNight{
position: absolute;
display: inline-block;
bottom:3px;
left:20px;
border:1px solid #44B276;
color:#44B276;
padding:1px;
font-weight: bold;
font-size:12px;
}
.HD_date_input .el-input__inner{
border-radius: 0;
}
</style>
<template>
<div class="HotelDetail">
<div class="HD_Top clearfix">
<div class="HD_Top_Left">
<div class="HD_Top_Title">{{hotelSummary.hotelName}}</div>
<div class="HD_Top_Address">
<img src="../../assets/img/hotel/address.png" alt=""/>
{{hotelSummary.address}}
</div>
<div class="HD_Top_Price">
<span class="HD_Top_Pinfo"><i>¥</i>{{price}}</span>
<span class="HD_Top_qi">/起</span>
<span>另付税：¥177</span>
<input type="button" class="HD_SureBtn" value="立即预订"/>
</div>
<div class="HD_Top_ImgList clearfix">
<div class="HD_Top_FirstImg">
<img :src="hotelDetails.hotelImageUrl1" alt=""/>
</div>
<div class="HD_Top_rightImg clearfix">
<div class="HD_Top_ImgDiv">
<img :src="hotelDetails.hotelImageUrl2" alt=""/>
</div>
<div class="HD_Top_ImgDiv">
<img :src="hotelDetails.hotelImageUrl3" alt=""/>
</div>
<div class="HD_Top_ImgDiv">
<img :src="hotelDetails.hotelImageUrl4" alt=""/>
</div>
<div class="HD_Top_ImgDiv">
<img :src="hotelDetails.hotelImageUrl5" alt=""/>
</div>
</div>
</div>
</div>
<div class="HD_Top_Right">
<div class="HD_Top_Right_Star">
<div class="HD_TopScore">
<span>棒极了</span>
<span class="HD_Score_right">
<span class="HD_ScoreS">{{hotelDetails.roomReviewRating}}</span>/5.0
</span>
</div>
<div class="HD_xing">
<el-rate
v-model="hotelDetails.roomReviewRating"
disabled
text-color="#ff9900"
>
</el-rate>
</div>
</div>
<div class="HD_TOP_Map">
</div>
</div>
</div>
<div class="HD_btnContent">
<div class="HD_checkTime">
<span>入住</span>
<el-date-picker class="HD_date_input" v-model="SimilarMsg.arrivalDate" style="width:190px;" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="">
</el-date-picker>
<span style="margin-left:20px;">退房</span>
<el-date-picker class="HD_date_input" v-model="SimilarMsg.departureDate" style="width:190px;" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="">
</el-date-picker>
<span class="HD_warn">
<i class="iconfont icon-jinggao1"></i>
超过13岁视为成人处理
</span>
</div>
<div class="HD_PeoPleNum">
<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 SimilarMsg.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>
<input type="button" class="HD_PsureBtn" value="确定"/>
</div>
<div class="HD_fuhe">
<img src="../../assets/img/hotel/fuhe.png" alt="">
符合条件的房型
</div>
<table class="HD_fangxing" v-for="item in SimilarList">
<tr>
<td class="HD_letfTD">
<div class="HD_LeftRoomInfo">
<div class="HD_FuheIMG">
<img :src="item.roomImageURL" alt=""/>
</div>
<div class="HD_Kefang">
<span v-if="item.gradeType==1">标准间</span>
<span v-if="item.gradeType==2">普通间</span>
<span v-if="item.gradeType==3">经济间</span>
<span v-if="item.gradeType==4">舒适间</span>
<span v-if="item.gradeType==5">豪华间</span>
<span v-if="item.gradeType==6">其他</span>
<span v-if="item.roomType==1">单人床</span>
<span v-if="item.roomType==2">双床</span>
<span v-if="item.roomType==3">大床房</span>
<span v-if="item.roomType==4">三人间</span>
<span v-if="item.roomType==5">四床房</span>
<span v-if="item.roomType==6">日式房</span>
<span v-if="item.roomType==7">日式&西式混合房间</span>
<span v-if="item.smoking==0">禁烟</span>
<span v-if="item.smoking==1">可吸烟</span>
</div>
</div>
</td>
<td>
<div class="HD_fangxing_List" v-for="subItem in item.roomOptions">
<ul class="clearfix" style="position:relative;">
<li class="HD_OneLi">
{{subItem.bookingDeadline}}
</li>
<li style="width:180px;">{{subItem.childRates}}</li>
<li class="HD_FreeWifi" style="width:256px;">
<div>入住时间{{subItem['check-inStartTime']}}</div>
<div>最迟入住时间{{subItem['finalCheck-inTime']}}</div>
<div>最迟退房时间{{subItem['finalCheck-outTime']}}</div>
</li>
<li class="HD_Lingprice">
<div><i>¥</i><span>{{subItem.chargeableRateInfoPerPersonForANightBySetCurrency}}</span></div>
</li>
<li>
<input type="button" style="right:20px;" @click="bookHotel(item.roomOptionCd)" class="HD_PsureBtn" value="预订" />
</li>
</ul>
<span class="HD_ComDiJia" :class="getMealType(subItem.meals)=='无餐'?'HD_Black':'HD_Green'">{{getMealType(subItem.meals)}}</span>
<span class="HD_minNight">{{subItem.minNights}}</span>
</div>
<div class="HD_LastShowMore">
<span>展开剩余122个报价<i class="iconfont icon-xiajiantou"></i></span>
</div>
</td>
</tr>
</table>
<div class="HD_fuhe">
<img src="../../assets/img/hotel/hotel.png" alt="">
酒店信息
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">酒店详情指南</div>
<div>
<span class="HD_ComLeftTitle">停车场</span>
<span>有（免费）</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">接送服务</span>
<span>无</span>
</div>
</div>
<div class="HD_hotelComIntroduce HD_Card">
<div>
<span class="HD_ComLeftTitle">信用卡</span>
<span>
<img src="../../assets/img/hotel/logo_01.png" alt=""/>
<img src="../../assets/img/hotel/logo_02.png" alt=""/>
<img src="../../assets/img/hotel/logo_03.png" alt=""/>
<img src="../../assets/img/hotel/logo_04.png" alt=""/>
<img style="height:13px;" src="../../assets/img/hotel/logo_05.gif" alt="">
UC·DC·NICOS·UFJ 依据信用卡<br/>种类的不同，部分信用卡可进行网上支付。
</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">房间类型和数量</div>
<div>
<span>{{hotelDetails.hotelRooms}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">西式房间详情</div>
<div>
<span class="HD_ComLeftTitle">单人房</span>
<span>0室</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">大床房</span>
<span>100室|45-60平方米</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">双床房</span>
<span>120室|45-60平方米</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">套房</span>
<span>48室</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">房间设备</span>
<span>我是设备我是设备我是设备我是设备</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">客房网络连接</span>
<span v-for="item in InterArr" style="margin-right:20px;">
{{item}}
</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">水疗</div>
<div>
<span class="HD_ComLeftTitle">温泉</span>
<span>有</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">设施与服务</div>
<div class="HD_ServiceList">
<span v-for="item in Services">{{item}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce" style="border:0">
<div class="HD_inTitle">酒店政策</div>
<div class="HD_ServiceList">
这里是酒店政策
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//查询条件
msg:{
hotelId:'',
hotelImageSize:5,
photoGalleryGetFlg:1,
groupBookingFlg:1
},
//获取相似查询条件
SimilarMsg:{
hotelId:'',
sort:1,
displayFrom:1,
arrivalDate:'',
departureDate:'',
roomOptionCd:'',
searchroomGroup:[]
},
//相似数据
SimilarList:[],
hotelDetails:[],
hotelSummary:[],
price:'',
isShowPop:false,
room:1,
auditNum:1,
childNum:0,
//设施和服务
Services:[],
//客房有网络连接
InterArr:[],
};
},
mounted() {
let msgList = JSON.parse(this.$route.query.PassMsg);
this.msg.hotelId = msgList.hotelId;
this.msg.groupBookingFlg = msgList.groupBookingFlg;
this.price = msgList.lowrateBySetCurrency;
this.SimilarMsg.hotelId = msgList.hotelId;
this.SimilarMsg.arrivalDate = msgList.arrivalDate;
this.SimilarMsg.departureDate = msgList.departureDate;
this.SimilarMsg.searchroomGroup = msgList.searchroomGroup;
this.getList();
this.getSimilar();
},
created() {
},
methods: {
getList(){
this.apipost("dmc_post_Get_GetJAPAN_HotelDetail",this.msg,res => {
console.log(res,'接口1');
if (res.data.resultCode == 1) {
this.hotelDetails = res.data.data.hotelDetails;
this.hotelSummary = res.data.data.hotelSummary;
this.hotelDetails.roomReviewRating = parseFloat(this.hotelDetails.roomReviewRating);
//拆分酒店服务与设施
let ServeArr = this.hotelDetails.roomEquipments.split(",");
this.Services=[];
if(ServeArr[0]==1){
this.Services.push('浴室和厕所');
}
if(ServeArr[1]==0){
this.Services.push('公共汽车厕所CD（有全室巴士）');
}
if(ServeArr[1]==1){
this.Services.push('公共汽车厕所CD（有一部分巴士）');
}
if(ServeArr[1]==2){
this.Services.push('公共汽车厕所CD（有全室厕所）');
}
if(ServeArr[1]==3){
this.Services.push('公共汽车厕所CD（有一部分厕所）');
}
if(ServeArr[1]==4){
this.Services.push('公共汽车厕所CD（所有厕所都没有）');
}
if(ServeArr[2]==1){
this.Services.push('淋浴-免费(全室)');
}
if(ServeArr[2]==2){
this.Services.push('淋浴-收费(全室)');
}
if(ServeArr[2]==3){
this.Services.push('淋浴-免费(部分)');
}
if(ServeArr[2]==4){
this.Services.push('淋浴-收费(部分)');
}
if(ServeArr[3]==1){
this.Services.push('冷暖气-免费(全室)');
}
if(ServeArr[3]==2){
this.Services.push('冷暖气-收费(全室)');
}
if(ServeArr[3]==3){
this.Services.push('冷暖气-免费(部分)');
}
if(ServeArr[3]==4){
this.Services.push('冷暖气-收费(部分)');
}
if(ServeArr[4]==1){
this.Services.push('全室有空调(收费)');
}
if(ServeArr[4]==2){
this.Services.push('部分客房有空调(免费)');
}
if(ServeArr[4]==3){
this.Services.push('部分客房有空调(收费)');
}
if(ServeArr[4]==4){
this.Services.push('没有空调');
}
if(ServeArr[5]==0){
this.Services.push('全房间有暖气设备(免费)');
}
if(ServeArr[5]==1){
this.Services.push('全部房间都有暖气(收费)');
}
if(ServeArr[5]==2){
this.Services.push('部分客房供暖(免费)');
}
if(ServeArr[5]==3){
this.Services.push('部分客房供暖(收费)');
}
if(ServeArr[5]==4){
this.Services.push('没有暖气设备');
}
if(ServeArr[6]==1){
this.Services.push('电视（免费）');
}
if(ServeArr[6]==2){
this.Services.push('电视（收费）');
}
if(ServeArr[7]==1){
this.Services.push('录像机（免费）');
}
if(ServeArr[7]==2){
this.Services.push('录像机（收费）');
}
if(ServeArr[8]==1){
this.Services.push('卫星广播（免费）');
}
if(ServeArr[8]==2){
this.Services.push('卫星广播（收费）');
}
if(ServeArr[9]==1){
this.Services.push('冰箱-有(带饮料的)');
}
if(ServeArr[9]==2){
this.Services.push('空冰箱');
}
if(ServeArr[10]==1){
this.Services.push('迷你酒吧');
}
if(ServeArr[11]==1){
this.Services.push('祖邦煎锅（免费）');
}
if(ServeArr[11]==2){
this.Services.push('祖邦煎锅（收费）');
}
//拆分网络连接
this.InterArr=[];
let InternetArr = this.hotelDetails.internetAccessibilityOfTheRoom.split(",");
if(InternetArr[0]==1){
this.InterArr.push('客房网络连接');
}
if(InternetArr[1]==1){
this.InterArr.push('拨号连线');
}
if(InternetArr[2]==1){
this.InterArr.push('可连接LAN');
}
if(InternetArr[3]==1){
this.InterArr.push('无线局域网');
}
if(InternetArr[4]==1){
this.InterArr.push('PC贷款');
}
if(InternetArr[5]==1){
this.InterArr.push('免费接入网络');
}
console.log(ServeArr,'serarr');
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//获取符合条件房型
getSimilar(){
this.apipost("dmc_post_Get_GetJAPAN_RoomsList",this.SimilarMsg,res => {
console.log(res,'similarrrr');
if (res.data.resultCode == 1) {
this.SimilarList = res.data.data.roomRateDetails;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//房间数改变
getRoomList(roomNum){
this.isShowPop=true;
this.SimilarMsg.searchroomGroup = [];
for(var i=1;i<=roomNum;i++){
var obj = {
roomNum:i,
numberOfAdults:1,
numberOfChildren:0
}
this.SimilarMsg.searchroomGroup.push(obj);
}
this.auditNum=0;
this.childNum=0;
this.SimilarMsg.searchroomGroup.forEach(x=>{
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum(){
this.auditNum=0;
this.childNum=0;
this.SimilarMsg.searchroomGroup.forEach(x=>{
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
})
},
//获取餐
getMealType(meals){
let mealType = meals.split(',');
if(mealType[0]==0&&mealType[2]==0){
return '无餐'
}
if(mealType[0]==1&&mealType[2]==1){
return '含早晚餐'
}
if(mealType[0]==1&&mealType[2]==0){
return '含早餐'
}
if(mealType[0]==0&&mealType[2]==1){
return '含晚餐'
}
},
//点击预订传递参数
bookHotel(roomOptionCd){
let msg = this.SimilarMsg;
msg.roomOptionCd = roomOptionCd;
this.$router.push({
path:"/HotelSure",
query:{msg:JSON.stringify(msg)}
})
}
}
};
</script>
\ No newline at end of file
src/components/Hotel/HotelHome.vue 0 → 100644
View file @ 718702e7
<template>
<div class="Hotel_home">
<div class="Ht_banner">
<div class="choose">
<div style="background:#ffffff;display: flex;align-items: center;position:relative">
<img class="Ht_bed" src="../../assets/img/hotel/hotelBed.png" alt=""/>
<el-select style="width:350px" clearable v-model="msg.place" 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>
<span class="sx"></span>
<el-date-picker class="date_inputOne HO_input" style="width:140px;" prefix-icon="iconfont icon-img-rili" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
v-model="msg.StartDate"
type="date"
:picker-options="pickerOptions0"
placeholder="入住日">
</el-date-picker>
<span class="Ht_hg"></span>
<el-date-picker class="date_input" style="width:130px;" prefix-icon="none" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
v-model="msg.EndDate"
type="date"
:picker-options="pickerOptions0"
placeholder="离店日">
</el-date-picker>
<span class="sx"></span>
<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.roomList">
<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="msg.room" @change="getRoomList(msg.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">{{msg.auditNum}}成人</li>
<li class="Ht_ulDian">.</li>
<li class="Ht_ulName">{{msg.childNum}}儿童</li>
</ul>
</el-popover>
<span @click="Search" class="search_span">
搜索
</span>
</div>
</div>
</div>
<div class="banner_two">
<div style="text-align:center;">
<p class="Ht_localyou">
发现<span>.</span>当季游玩
</p>
<p class="Ht_engIntro">SEASONAL TOURISM</p>
</div>
<div class="banner_img" style="margin:0 auto;margin-top:30px;">
<div class="Ht_dangji">
<div class="item">
<img src="../../assets/img/hotel/daban.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
大阪
</div>
</div>
<div class="item">
<img src="../../assets/img/hotel/dongjing.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
东京
</div>
</div>
<div class="item">
<img src="../../assets/img/hotel/jingdu.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
京都
</div>
</div>
</div>
</div>
</div>
<div style="margin-bottom:108px">
<div>
<div style="text-align:center;margin-top:80px;">
<p class="Ht_localyou">精选<span>.</span>特色推荐</p>
<p class="Ht_engIntro">SPECIAL RECOMMENDATION</p>
</div>
</div>
<div class="Ht_special">
<div>
<img src="../../assets/img/hotel/wh.png" alt=""/>
<span>网红名宿</span>
</div>
<div>
<img src="../../assets/img/hotel/ql.png" alt=""/>
<span>青旅酒店</span>
</div>
<div>
<img src="../../assets/img/hotel/qz.png" alt=""/>
<span>亲子酒店</span>
</div>
<div>
<img src="../../assets/img/hotel/gz.png" alt=""/>
<span>古镇酒店</span>
</div>
<div>
<img src="../../assets/img/hotel/ys.png" alt=""/>
<span>依山酒店</span>
</div>
</div>
</div>
<div>
<div>
<div style="text-align:center;margin-top:80px;">
<p class="Ht_localyou">热门<span>.</span>目的地</p>
<p class="Ht_engIntro">HOT DESTINATIONS</p>
</div>
</div>
<div class="Ht_hotArea">
<div class="Ht_hoAreaOne">
<img src="../../assets/img/hotel/mgw.png" alt=""/>
<div>名古屋</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/biefu.png" alt=""/>
<div>别府</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/dongye.png" alt=""/>
<div>洞爷.登别.苫小牧</div>
</div>
</div>
<div class="Ht_hotArea" style="margin-top:3px;">
<div class="Ht_otherCommon" style="margin-left:0;">
<img src="../../assets/img/hotel/shangye.png" alt=""/>
<div>上野.浅草两国</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/shenhu.png" alt=""/>
<div>神户.有马.明石头</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/xianggen.png" alt=""/>
<div>箱根</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/zhoubian.png" alt=""/>
<div>京都站周边</div>
</div>
</div>
</div>
<div class="Ht_baozhang" style="margin-top:127px;">
<ul>
<li>
<img src="../../assets/img/hotel/bz.png" alt=""/>
<div class="Ht_commonList">服务有保障</div>
<div class="Ht_commonBtm">
<div>7×24小时</div>
<div>专业旅游顾问服务</div>
</div>
</li>
<li>
<img src="../../assets/img/hotel/jg.png" alt=""/>
<div class="Ht_commonList">服务有保障</div>
<div class="Ht_commonBtm">
<div>价格优势</div>
<div>最具竞争力</div>
</div>
</li>
<li>
<img src="../../assets/img/hotel/rz.png" alt=""/>
<div class="Ht_commonList">服务有保障</div>
<div class="Ht_commonBtm">
<div>确认后无房</div>
<div>赔付首晚房费</div>
</div>
</li>
<li>
<img src="../../assets/img/hotel/zl.png" alt=""/>
<div class="Ht_commonList">服务有保障</div>
<div class="Ht_commonBtm">
<div>100万间酒店</div>
<div>想你所想</div>
</div>
</li>
</ul>
</div>
<div class="Ht_btnImg" style="margin:40px auto;">
<div>
<img src="../../assets/img/hotel/j1.png" alt=""/>
</div>
<div>
<img src="../../assets/img/hotel/j2.png" alt=""/>
</div>
<div>
<img src="../../assets/img/hotel/j3.png" alt=""/>
</div>
<div>
<img src="../../assets/img/hotel/j4.png" alt=""/>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
//查询条件
msg:{
place:'',
StartDate:'',
EndDate:'',
auditNum:1,
childNum:0,
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
},
isShowPop:false,
pickerOptions0: {
disabledDate(time) {
let today_after7=moment().add(0,'days').format('YYYY-MM-DD');
return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
}
},
isLogin:0,
};
},
mounted() {
this.loadSize();
},
created() {
this.isLogin=this.$store.state.isLogin;
},
methods: {
//查询
Search() {
console.log(this.msg,'msgggg');
this.$router.push({
path:"/HotelList",
query:{msg:JSON.stringify(this.msg)}
})
},
//房间数改变
getRoomList(roomNum){
this.isShowPop=true;
this.msg.roomList = [];
for(var i=1;i<=roomNum;i++){
var obj = {
roomNum:i,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
this.msg.roomList.push(obj);
}
this.msg.auditNum=0;
this.msg.childNum=0;
this.msg.roomList.forEach(x=>{
this.msg.auditNum += x.numberOfAdults;
this.msg.childNum += x.numberOfChildren;
})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum(){
this.msg.auditNum=0;
this.msg.childNum=0;
this.msg.roomList.forEach(x=>{
this.msg.auditNum += x.numberOfAdults;
this.msg.childNum += x.numberOfChildren;
})
},
GoUrl(item) {
let isLogin = this.$store.state.isLogin;
if (isLogin == 0) {
this.Error("请先登录！");
this.$router.push({
path: "/login?type=1",
query: { path: this.$route.name }
});
} else {
this.$router.push({
path: `/ticket/FillItinerary/${item.id}`
});
}
},
loadSize() {
let w = document.body.clientWidth;
this.carousel_height = w * 0.269* 0.75 + "px";
this.banner_height=w*0.205+"px";
}
}
};
</script>
<style>
@import "../../assets/global/font.css";
@import "//at.alicdn.com/t/font_863923_3d1f1rd9oj6.css";
@import "../../assets/global/global.css";
@import "../../assets/css/reset.css";
.Hotel_home{
font-family: "PingFang"
}
.Hotel_home .choose .search_span{
cursor: pointer;
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: 77px;
height: 100%;
text-align: center;
background: #EE4454;
color:#fff;
line-height: 48px;
font-size: 14px;
}
.Hotel_home .choose .date_inputOne .el-input__inner{
margin-left:30px;
}
.Hotel_home .HO_input .icon-img-rili{
color:#CCCCCC;
font-size: 18px;
margin-left: 20px;
}
.Hotel_home .choose .sx{
width:1px;
height:24px;
display: inline-block;
border-left:1px solid #D8DADC;
}
.Hotel_home .choose .el-input__inner{
border: none;
}
.Hotel_home .choose {
width:1093px;
background:rgba(0,0,0,0.5);
border-radius:0px 4px 4px 4px;
margin: 0 auto;
padding: 20px 28px;
box-sizing: border-box;
}
.Hotel_home .Ht_banner{
box-sizing: border-box;
padding-top: 126px;
width: 100%;
height: 352px;
background: url("../../assets/img/hotel/hotelBanner.png") no-repeat;
background-size:100% 100%;
}
.Hotel_home .Ht_dangji {
width:1200px;
margin:0 auto;
overflow: auto;
}
.Hotel_home .el-popover {
padding: 0;
border: none;
}
.Hotel_home .citycompent {
position: absolute;
top: 36px;
}
.Hotel_home .banner_img .info {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: table;
}
.Hotel_home .Ht_bed{
width:22px;
height:14px;
margin-left:20px;
}
.Hotel_home .Ht_hg{
display:inline-block;
width:10px;
height:1px;
border-bottom:1px solid #cccccc;
z-index:99;
}
.Hotel_home .Ht_ul{
margin:0 20px;
height:46px;
line-height: 46px;
}
.Hotel_home .Ht_ul li{
display: inline-block;
font-size:14px;
color:#333333;
margin-right:12px;
}
.Hotel_home .Ht_ulName{
position: relative;
top:-2px;
}
.Hotel_home .Ht_ulDian{
position: relative;
top:-5px;
}
.Ht_ul li img{
position: relative;
top:1px;
}
.Hotel_home .Ht_pNum{
width: 371px;
height:202px;
background: #ffffff;
z-index: 2000;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius:4px;
position: relative;
font-size: 14px;
color:#333333;
padding:20px;
font-family: "MicrosoftYaHei";
}
.Ht_localyou{
margin-top:54px;
font-size:30px;
font-family:MicrosoftYaHei;
font-weight:bold;
color:#404040;
}
.Ht_localyou span{
display: inline-block;
margin:0 10px;
position: relative;
top:-5px;
}
.Ht_engIntro{
margin:10px 0 30px 0;
font-size:21px;
font-family:MicrosoftYaHei;
font-weight:400;
color:#999999;
}
.Ht_dangji .item {
position: relative;
width:386px;
/* padding: 8px 11px; */
height: 217px;
transition: all linear .5s;
box-shadow: 0 0px 7px #eaeaea;
cursor: pointer;
background-color: #fff;
overflow: hidden;
display:inline-block;
margin-right:21px;
}
.Ht_dangji .item:last-child{
margin-right:0;
}
.Ht_dangji .item:hover{
background-color: white;
box-shadow: none;
}
.Ht_dangji .item:hover .line{
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 20px;
top: 20px;
}
.Ht_dangji .item img{
width: 100%;
height: 100%;
}
.Ht_dangji .item .line{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid rgba(232, 235, 239, 1);
transition: all ease-out .3s;
}
.Ht_special,.Ht_hotArea{
width:1200px;
margin:auto;
}
.Ht_special>div{
width:240px;
height:260px;
position: relative;
display: inline-block;
}
.Ht_special>div img{
width:100%;
height:100%;
}
.Ht_special>div span{
display: inline-block;
margin:0 auto;
position: absolute;
top:70px;
width:20px;
left:114px;
line-height: 30px;
color:#fff;
font-size:20px;
font-weight: bold;
}
.Ht_hoAreaOne{
display: inline-block;
width:596px;
height:258px;
position: relative;
}
.Ht_hoAreaOne img,.Ht_otherCommon img{
width:100%;
height:100%;
}
.Ht_hoAreaOne div ,.Ht_otherCommon div{
position: absolute;
bottom:10px;
left:10px;
color:#fff;
font-size:26px;
font-weight: 400;
}
.Ht_otherCommon{
width:294px;
height:258px;
display: inline-block;
margin-left:8px;
position: relative;
}
.Ht_baozhang,.Ht_btnImg{
width:1200px;
margin:0 auto;
}
.Ht_baozhang ul li{
display: inline-block;
margin-left:290px;
text-align: center;
}
.Ht_baozhang ul li:first-child{
margin-left:0;
}
.Ht_commonList{
color:#111111;
font-size:14px;
margin:30px 0 25px 0;
font-weight: bold;
}
.Ht_commonBtm{
color:#666666;
font-size:12px;
font-weight: bold;
}
.Ht_commonBtm div:first-child{
margin-bottom:5px;
}
.Ht_btnImg div{
display: inline-block;
width:285px;
height:104px;
margin-right:20px;
}
.Ht_btnImg div:last-child{
margin-right:0;
}
.Ht_btnImg div img{
width:100%;
height:100%;
}
.Ht_diming{
position: absolute;
width:36px;
height:20px;
background-color: #EE4454;
color:#fff;
text-align: center;
line-height: 20px;
font-size:12px;
top:0;
left:0;
}
.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;}
</style>
src/components/Hotel/HotelList.vue 0 → 100644
View file @ 718702e7
<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:1158px;
height:auto;
margin:auto;
border:1px solid #DCDCDC;
margin-top:23px;
padding:0 20px;
color:#43647F;
font-size:12px;
}
.HL_ScList{
width:100%;
min-height:43px;
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:60px;
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:320px;
height:28px;
}
.HL_searchBtn{
width:70px;
height:20px;
color:#fff;
background-color: #EE4454;
text-align: center;
line-height: 20px;
margin-left:20px;
}
.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;
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;
}
.HL_ListImg img{
width:100%;
height:100%;
}
.HL_ListContent{
float:left;
position: relative;
margin-left:13px;
width:605px;
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 20px 0;
}
.HL_ListAddress{
font-size:12px;
color:#333333;
}
.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;
}
.HL_minHeight{
height:23px;
}
.HL_AutoHeight{
height:auto;
padding:10px 0;
}
.HL_AutoHeight span{
margin-bottom:10px;
}
.HL_ConZhankai{
display: inline-block;
margin-left:10px;
vertical-align: top;
cursor: pointer;
color:blue;
position: absolute;
right:55px;
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);
}
</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" 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 class="date_inputOne" style="width:140px;" prefix-icon="iconfont icon-img-rili" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
v-model="msg.arrivalDate"
type="date"
placeholder="入住日">
</el-date-picker>
<span class="Ht_hg"></span>
<el-date-picker class="date_input" style="width:140px;" prefix-icon="none" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
v-model="msg.departureDate"
type="date"
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;" v-model="searchMinRate" />
<i class="HL_gang"></i>
<el-input type="text" style="width:100px;" v-model="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">
<span class="HL_Stitle">客房设施</span>
<span>禁烟</span>
<span>吸烟</span>
</div> -->
<!-- <div class="HL_ScList">
<span class="HL_Stitle">网络</span>
<span>WiFi（免费）</span>
<span>WiFi（收费）</span>
<span>有线（免费）</span>
<span>有线（收费）</span>
</div> -->
<!-- <div class="HL_ScList">
<span class="HL_Stitle">支付方法</span>
<span>可以网上支付</span>
<span>可以当地支付</span>
</div>
<div class="HL_ScList">
<span class="HL_Stitle">产品特性</span>
<span>越早预订越便宜</span>
<span>限定期限</span>
</div> -->
<div class="HL_ScList">
<span class="HL_Stitle">理念</span>
<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;" v-model="reviewRatingLowerLimits" />
<i class="HL_gang"></i>
<el-input type="text" style="width:100px;" v-model="reviewRatingUpperLimits" />
</div>
<div class="HL_ScList">
<span class="HL_Stitle">酒店名称</span>
<el-input type="text" class="HL_searchHotelName" style="width:320px;" v-model="keyWords" placeholder="请输入你想找的酒店名称" />
<span class="HL_searchBtn" @click="SearchHotel">搜索</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;">
<table class="HL_ListTable">
<tr v-for="item in dataList">
<td>
<div class="clearfix">
<div class="HL_ListImg">
<img :src="item.hotelImageUrl" alt=""/>
</div>
<div class="HL_ListContent">
<div class="HL_ListTitle">
{{item.hotelName}}
<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 class="HL_ListSpecial">明日可定</span>
<span class="HL_ListSpecial">亲子游</span>
<span class="HL_ListSpecial">主题乐园</span>
</div>
<div class="HL_ListAddress">
<img src="../../assets/img/hotel/address.png" alt=""/>
地址：{{item.address}}
</div>
<div class="HL_ListPrice">
<span><label>¥</label>{{item.lowrateBySetCurrency}}</span>起
</div>
<input type="button" class="HL_ListBtn" @click="goHotelDetail(item)" value="查看详情"/>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="HL_Map">
</div>
</div>
</div>
<el-pagination v-if="dataList.length>0" class="pagination"
@current-change="CurrentChange"
background
layout="prev, pager, next"
:total="TotalPage">
</el-pagination>
</div>
</template>
<script>
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
},
//总页数
TotalPage:0,
//最小金额
searchMinRate:'',
//最大金额
searchMaxRate:'',
//最小星星
reviewRatingLowerLimits:'',
//最大星星
reviewRatingUpperLimits:'',
isShowPop:false,
roomList:[],
room:1,
auditNum:1,
childNum:0,
//是否展开
isOpen:1,
//酒店搜索关键字
keyWords:'',
placeKeyWords:'',
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:''
}
};
},
mounted() {
let msgList = JSON.parse(this.$route.query.msg);
this.placeKeyWords = msgList.place;
console.log(msgList,'msgList');
this.msg.arrivalDate = msgList.StartDate;
this.msg.departureDate = msgList.EndDate;
this.auditNum = msgList.auditNum;
this.childNum = msgList.childNum;
this.room = msgList.room;
this.msg.searchroomGroup = msgList.roomList;
this.SearchHotel();
},
created() {
},
methods: {
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;
})
},
//点击展开关闭
setOpenMore(){
if(this.isOpen==1){
this.isOpen=2
}else{
this.isOpen=1;
}
},
//点击搜索
SearchHotel(){
if(this.keyWords==''){
this.msg.freewordType=1;
this.msg.freeword= this.placeKeyWords;
}else{
this.msg.freewordType=2;
this.msg.freeword=this.keyWords;
}
if(this.searchMinRate==""){
this.msg.searchMinRate=0;
}else{
this.msg.searchMinRate = this.searchMinRate;
}
if(this.searchMaxRate==""){
this.msg.searchMaxRate=0;
}else{
this.msg.searchMaxRate = this.searchMaxRate;
}
if(this.reviewRatingLowerLimits==""){
this.msg.reviewRatingLowerLimits=0;
}else{
this.msg.reviewRatingLowerLimits = this.reviewRatingLowerLimits;
}
if(this.reviewRatingUpperLimits==""){
this.msg.reviewRatingUpperLimits = 0;
}else{
this.msg.reviewRatingUpperLimits = this.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);
}
})
console.log(this.msg,'msg');
this.loading=true;
this.dataList = [];
this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
this.loading=false;
if (res.data.resultCode == 1) {
console.log(res,'resssss');
this.dataList = res.data.data.hotelSummary;
this.dataList.forEach(x=>{
x.reviewRating = parseFloat(x.reviewRating);
})
this.TotalPage = parseInt(res.data.data.numberOfResultMatched);
this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//按人气排序
OrderBySource(type){
this.msg.sort=type;
this.SearchHotel();
},
//跳转详情
goHotelDetail(item){
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 = item.lowrateBySetCurrency;
this.$router.push({
path:"/HotelDetail",
query:{PassMsg:JSON.stringify(this.PassMsg)}
})
}
}
};
</script>
src/components/Hotel/HotelSure.vue 0 → 100644
View file @ 718702e7
<style>
.HotelSure{
width:1200px;
margin:20px auto;
display: flex;
}
.HS_LeftInfo{
display: inline-block;
width:792px;
height:auto;
}
.HS_RightList{
width:388px;
display: inline-block;
margin-left:20px;
height:auto;
}
.HS_div1{
width:100%;
height:190px;
border:1px solid #E0E0E0;
}
.HS_divFirst{
margin:32px 0 21px 20px;
}
.Hs_OneType{
color:#2EB000;
font-size:18px;
font-weight: bold;
display: flex;
align-items: center;
}
.HS_divTwo{
margin:0 0 21px 20px;
}
.Hs_OneType img,.HS_divThree img{
margin-right:10px;
}
.HS_divThree{
color:#FFA835;
font-size:18px;
font-weight: bold;
margin-left:20px;
display: flex;
align-items: center;
}
.HS_div2{
width:100%;
height:350px;
border:1px solid #E0E0E0;
margin:20px 0;
overflow: hidden;
}
.HS_bookTitle{
padding-left:20px;
width:100%;
background-color: #EDF4FF;
color:#111111;
font-size:12px;
font-weight: bold;
height:29px;
display: flex;
align-items: center;
border-bottom:1px solid #E0E0E0;
}
.HS_div2One{
margin:15px 0 0 20px;
}
.HS2_title{
color:#888888!important;
}
.HS_div2 ul li,.HS_div3 ul li{
display: inline-block;
margin-right:21px;
font-size:12px;
color:#111111;
}
.HS_div3One{
margin:15px 0 0 20px;
color:#333333;
}
.HS_Line{
width:30px;
height:1px;
display:inline-block;
position: relative;
top:-3px;
margin-right:10px;
border-top:1px solid #111111;
}
.HS_UpdateDate{
width:84px;
height:32px;
border:1px solid #EE4454;
background: #fff;
color:#EE4454;
outline: none;
border-radius: 3px;
cursor: pointer;
}
.HS_roomNum .el-input__inner{
height:30px;
border:none;
border-radius:0;
border-bottom:1px solid #DDDDDD;
}
.HS_fangfei{
display: inline-block;
width:74px;
height:86px;
border:1px solid #BBC9DA;
background-color: #fff;
font-size:14px;
margin-right:10px;
text-align: center
}
.HS_fangfei_Top{
width:100%;
height:32px;
margin-bottom:10px;
background-color: #F5F7F8;
line-height: 32px;
color:#666666;
}
.HS_fangfei span{
color:#EE4454;
}
.HS_div3{
width:792px;
height:auto;
padding-bottom:30px;
overflow: hidden;
position: relative;
border:1px solid #E0E0E0;
}
.HS_bookTitle span{
color:#FFA835;
font-size:12px;
position: absolute;
right:20px;
}
.HS_bookTitle span i{
position: relative;
top:1px;
margin-right:3px;
}
.HS_wenhao{
position: relative;
top: 2px;
margin-left: 5px;
}
.HS_BookMan .el-input__inner{
height:30px;
border:0;
border-radius: 0;
border-bottom:1px solid #DDDDDD;
}
.HS_AreaSelect .el-input__inner{
height: 30px;
border: none;
border-radius: 0;
border-bottom: 1px solid #DDDDDD;
}
.HS_AreaSelect .el-input__icon,.HS_roomNum .el-input__icon{
line-height: 0;
}
.HS_detailAddress{
margin:15px 0 0 141px;
}
.HS_detailAddress .el-input__inner,.HS_Email .el-input__inner{
height:40px;
border:0;
border-radius: 0;
border-bottom:1px solid #DDDDDD;
}
.HS_RightTopImg{
width:100%;
height:194px;
}
.HS_RightList img{
width:100%;
height:100%;
}
.HS_HotelRight{
width:346px;
height:354px;
padding:17px 20px 20px 20px;
border:1px solid #E0E0E0;
border-top:0;
color:#666666;
}
.HS_HtName{
color:#EE4454;
font-size:21px;
}
.HS_EnName{
font-size:12px;
color:#999999;
margin:8px 0 19px 0;
}
.HS_HAddress{
font-size:12px;
margin-bottom:20px;
}
.HS_HAddress img{
width:10px;
position: relative;
top:2px;
}
.HS_Haohua{
font-size:14px;
margin-bottom:10px;
}
.f12{
font-size:12px;
}
.C9{
color:#999999;
margin-right:20px;
}
.HS_RoomInfo li{
display: block;
width:100%;
font-size:14px;
margin-top:18px;
}
.HS_RoomInfo li span{
display: inline-block;
}
.HS_RightBtm{
width:100%;
height:160px;
margin-top:20px;
overflow: hidden;
border:1px solid #E0E0E0;
}
.HS_RitTop{
width:348px;
height:72px;
background-color: #EDF4FF;
display: flex;
padding:0 20px;
align-items: center;
position: relative;
}
.HS_RitTop_Left{
color:#111111;
float:left;
font-size:20px;
font-weight: 400;
}
.HS_RitPrice{
float:right;
font-size:24px;
color:#EE4454;
font-size:24px;
position: absolute;
right:20px
}
.HS_RitPrice i{
font-style: normal;
margin-right:5px;
font-size:14px;
}
.HS_RitBottom{
padding:20px;
font-size:14px;
color:#111111;
}
.HS_RitBottom span{
display:inline-block;
}
.HS_btLine{
width:245px;
height:1px;
margin:0 10px;
position: relative;
top:-3px;
border-top:1px dashed #999999;
}
.HS_btLineTwo{
width:204px;
height:1px;
margin:0 10px;
position: relative;
top:-3px;
border-top:1px dashed #999999;
}
.HS_RitBottom>div{
margin-bottom:15px;
}
</style>
<template>
<div class="HotelSure">
<div class="HS_LeftInfo">
<div class="HS_div1">
<div class="HS_divFirst Hs_OneType">
<img src="../../assets/img/hotel/childbed.png" alt=""/>
免费！0-1岁儿童可免费使用婴儿床
</div>
<div class="HS_divTwo Hs_OneType">
<img src="../../assets/img/hotel/childbed2.png" alt=""/>
预定成功后房间将为您整晚保留
</div>
<div class="HS_divThree">
<img src="../../assets/img/hotel/childbed3.png" alt=""/>
超过13岁视为成人处理
</div>
</div>
<div class="HS_div2">
<div class="HS_bookTitle">预订信息</div>
<div class="HS_div2One">
<ul>
<li class="HS2_title">房型信息</li>
<li>豪华客房(豪华大床)每日标准房价</li>
<li class="HS2_title">Deluxe Room - King</li>
</ul>
</div>
<div class="HS_div3One">
<ul>
<li class="HS2_title">入住人数</li>
<li>成人 2人</li>
<li>儿童 1人</li>
</ul>
</div>
<div class="HS_div2One">
<ul>
<li class="HS2_title">入住人数</li>
<li>成人 2人</li>
<li>儿童 1人</li>
</ul>
</div>
<div class="HS_div2One">
<ul>
<li class="HS2_title">入住日期</li>
<li>
<el-date-picker class="date_input" style="width:130px;" prefix-icon="none" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="">
</el-date-picker>
周二<span class="HS2_title" style="margin:0 10px;">15:00 之后</span>
<div class="HS_Line"></div>
<el-date-picker class="date_input" style="width:130px;" prefix-icon="none" clear-icon=""
size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="">
</el-date-picker>
周三<span class="HS2_title" style="margin:0 10px;">12:00 之前</span>
</li>
<li>
1晚
</li>
<li>
<input type="button" class="HS_UpdateDate" value="修改日期"/>
</li>
</ul>
</div>
<div class="HS_div2One HS_roomNum">
<ul>
<li class="HS2_title">房间数量</li>
<li>
<el-select style="width:80px" clearable placeholder="">
<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>
</li>
<li>
<i class="iconfont icon-jinggao1" style="color:#FFA835"></i>
仅剩一间
</li>
<li>
每间最多入住2人
</li>
</ul>
</div>
<div class="HS_div2One">
<ul>
<li class="HS2_title" style="vertical-align:top;">房费情况</li>
<li>
<div class="HS_fangfei">
<div class="HS_fangfei_Top">07-09</div>
<div>¥<span>7906</span></div>
<div>无餐食</div>
</div>
</li>
</ul>
</div>
</div>
<div class="HS_div3">
<div class="HS_bookTitle">
入住信息<span><i class="iconfont icon-jinggao1"></i>所填姓名需和入住时所持证件一致</span>
</div>
<div class="HS_div2One HS_BookMan">
<ul>
<li class="HS2_title">预订人</li>
<li>住客<img class="HS_wenhao" src="../../assets/img/hotel/wenhao.png"/></li>
<el-input tyle="text" style="width:120px;margin-right:20px;" placeholder="姓 Last Name"></el-input>
<el-input tyle="text" style="width:120px;" placeholder="名 First Name"></el-input>
</ul>
</div>
<div class="HS_div2One HS_AreaSelect">
<ul>
<li style="margin-left:53px;">当前地址</li>
<li>
<el-select style="width:80px" clearable placeholder="国">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
<li>
<el-select style="width:80px" clearable placeholder="省">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
<li>
<el-select style="width:80px" clearable placeholder="市">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
<li>
<el-select style="width:80px" clearable placeholder="区">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
</ul>
</div>
<div class="HS_detailAddress">
<el-input type="text" style="width:400px;" placeholder="详细地址"></el-input>
</div>
<div class="HS_div2One HS_Email">
<ul>
<li style="margin-left:67px;">Email</li>
<li>
<el-input type="text" style="width:400px;" placeholder="接收确认邮件，获得出行资格"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One" style="margin-top:30px;">
<ul>
<li style="margin:0 10px 0 40px;">
<div>入住和离店</div>
<div>（当地时间）</div>
</li>
<li style="vertical-align:top">
入住时间 15:00以后
</li>
<li style="vertical-align:top">
离店时间 12:00以前
</li>
</ul>
</div>
<div class="HS_div2One HS_AreaSelect">
<ul>
<li class="HS2_title">房间1</li>
<li style="margin-left:20px;">人数</li>
<li>
<el-select style="width:90px" clearable placeholder="成人男">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
<li>
<el-select style="width:90px" clearable placeholder="成人女">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
<li>
<el-select style="width:90px" clearable placeholder="儿童">
<!-- <el-option :value="1" label="1"></el-option> -->
</el-select>
</li>
</ul>
</div>
</div>
</div>
<div class="HS_RightList">
<div class="HS_RightTopImg">
<img src="../../assets/img/hotel/biefu.png" alt=""/>
</div>
<div class="HS_HotelRight">
<div class="HS_HtName">{{dataList.hotelName}}</div>
<div class="HS_EnName">Aman Tokyo</div>
<div class="HS_HAddress">
<img src="../../assets/img/hotel/redAddress.png" alt=""/>
THE OTEMACHI TOWER 1-5-6 OTEMACHI CHIYODA-KU,东京站/日本桥/秋叶原/锦糸町,东京,东京都,100-0004,日本
</div>
<div class="HS_Haohua">豪华客房(豪华大床)每日标准放假</div>
<div class="f12 C9">Deluxe Room - King</div>
<ul class="HS_RoomInfo">
<li>
<span class="C9">床型</span>
<span>1张特大床</span>
</li>
<li>
<span class="C9">人数</span>
<span>每间房最多入住1人</span>
</li>
<li>
<span class="C9">加床</span>
<span>JPY 20216.00/床/间夜</span>
</li>
<li>
<span class="C9">面积</span>
<span>71㎡</span>
</li>
<li>
<span class="C9">网络</span>
<span>全部房间支持免费无线宽带上网</span>
</li>
</ul>
</div>
<div class="HS_RightBtm">
<div class="HS_RitTop">
<span class="HS_RitTop_Left">订单总额</span>
<span class="HS_RitPrice">
<i>¥</i>7904
</span>
</div>
<div class="HS_RitBottom">
<div>
<span>房费</span>
<span class="HS_btLine"></span>
<span>¥1550</span>
</div>
<div>
<span>税和服务费</span>
<span class="HS_btLineTwo"></span>
<span>¥1550</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//查询条件
msg:{
hotelId:'',
sort:1,
displayFrom:1,
arrivalDate:'',
departureDate:'',
roomOptionCd:'',
searchroomGroup:[]
},
dataList:[],
};
},
mounted() {
let msgList = JSON.parse(this.$route.query.msg);
this.msg = msgList;
console.log(msgList,'msglist');
this.getBookInfo();
},
created() {
},
methods: {
//获取带过来信息
getBookInfo(){
this.apipost("dmc_post_Get_GetJAPAN_RoomsList",this.msg,res => {
console.log(res,'bookMsg');
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
}
};
</script>
src/router.js
View file @ 718702e7
......@@ -376,6 +376,42 @@ export default new Router({
title: "行程填写"
}
},
{
path: "/HotelHome",
name: "HotelHome",
component: resolve =>
require(["@/components/Hotel/HotelHome"], resolve),
meta: {
title: "酒店"
}
},
{
path: "/HotelList",
name: 'HotelList',
component: resolve =>
require(["@/components/Hotel/HotelList"], resolve),
meta: {
title: "酒店列表"
}
},
{
path: "/HotelDetail",
name: 'HotelDetail',
component: resolve =>
require(["@/components/Hotel/HotelDetail"], resolve),
meta: {
title: "酒店详情"
}
},
{
path: "/HotelSure",
name: "HotelSure",
component: resolve =>
require(["@/components/Hotel/HotelSure"], resolve),
meta: {
title: "酒店确认订单"
}
},
// {
// path: "/ticket/Pay/:id",
// name: "Pay",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment