Skip to content

S
SuperMan
Commit 4dc61688 authored by 黄奎's avatar 黄奎
Browse files
Options

样式调整

parent 02a661dd
Hide whitespace changes
Inline Side-by-side
Showing with 1337 additions and 1339 deletions
src/components/Hotel/DiDa/HotelList.vue
View file @ 4dc61688
<style scoped>
.side-hotel-map__marker {
<style scoped>
.side-hotel-map__marker {
--map-marker-size: 24px;
display: inline-block;
color: #fff;
......@@ -12,53 +10,71 @@
border: 1px solid white;
background: #14808c;
text-align: center;
}
.hotelnamespan {
}
.hotelnamespan {
font-size: 18px;
font-weight: 600;
color: #606266;
height: 26px;
}
.q-pr-lg {
}
.q-pr-lg {
margin-right: 24px;
}
.hotelDiv{
display: inline-flex; cursor: pointer;
}
.hotelname{
display: inline-flex;
cursor: pointer;
max-width:83%;
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
border-bottom:1px solid white;
}
.hotelname p{
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
/* border-bottom:1px solid #606266 ; */
}
.hotelname:hover{
/* text-decoration: underline; */
border-bottom:1px solid #606266 ;
}
.hotel-card-img {
}
.hotelDiv {
display: inline-flex;
cursor: pointer;
}
.hotelname {
display: inline-flex;
cursor: pointer;
max-width: 83%;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
white-space: nowrap;
/* 隐藏 */
text-overflow: ellipsis;
/* 显示为省略号 */
border-bottom: 1px solid white;
}
.hotelname p {
white-space: nowrap;
/* 不换行 */
overflow: hidden;
white-space: nowrap;
/* 隐藏 */
text-overflow: ellipsis;
/* 显示为省略号 */
/* border-bottom:1px solid #606266 ; */
}
.hotelname:hover {
/* text-decoration: underline; */
border-bottom: 1px solid #606266;
}
.hotel-card-img {
position: relative;
overflow: hidden;
width: 160px;
height: 150px;
margin-right: 16px;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
margin-bottom: 12px;
}
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
.d12p {
margin-bottom: 12px;
}
.d12p {
margin-top: 3px;
font-size: 12px;
color: #333;
......@@ -72,27 +88,28 @@
-webkit-box-orient: vertical;
}
.d12p:hover {
.d12p:hover {
color: #999;
}
.pic_item {
position: relative;
height: 100%;
}
.pic_item:hover{
cursor: pointer;
}
position: relative;
height: 100%;
}
.pic_item:hover {
cursor: pointer;
}
.pic_item h3 {
.pic_item h3 {
position: absolute;
left: 4rem;
bottom: 1rem;
font-size: 50px;
color: white;
font-weight: 900;
font-family:Georgia, 'Times New Roman', Times, serif;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
line-height: 116%;
display: flex;
......@@ -100,189 +117,186 @@
flex: none;
order: 1;
align-self: stretch;
}
.ant-col {
}
.ant-col {
max-width: 100%;
min-height: 1px;
position: absolute; /* 设置div为绝对定位 */
right: 0; /* 距离右边0像素 */
bottom: 0; /* 距离底部0像素 */
font-size:18px;
}
.nd-price-tag_lg, .nd-price-tag_lg .nd-price-tag__currency {
position: absolute;
/* 设置div为绝对定位 */
right: 0;
/* 距离右边0像素 */
bottom: 0;
/* 距离底部0像素 */
font-size: 18px;
}
.nd-price-tag_lg,
.nd-price-tag_lg .nd-price-tag__currency {
font-size: 16px;
line-height: 24px;
}
.nd-price-tag_lg .nd-price-tag__price {
}
.nd-price-tag_lg .nd-price-tag__price {
font-size: 18px;
line-height: 26px;
font-weight: 700;
}
.nd-price-tag {
}
.nd-price-tag {
font-weight: 400;
color: #f32a4e;
}
.nd-reserve-btn {
}
.nd-reserve-btn {
/* --nd-reserve-btn-color-bg-hover: rgb(20 128 140 / 80%) */
color: #fff;
border-color: #14808c;
background-color: #14808c;
margin-left:24px;
}
.nd-reserve-btn:hover{
background-color:rgb(20 128 140 / 80%);
}
background-color: #14808c;
margin-left: 24px;
}
.nd-reserve-btn:hover {
background-color: rgb(20 128 140 / 80%);
}
</style>
<template>
<div class="page_iisMg" >
<div class="flexOne page_iisMg">
<div class="query-box">
<div @keyup.enter="resetPageIndex()">
<el-form class="iis_info_box clearfix" label-width="110px">
<el-row>
<el-col :span="4" :gutter="35">
<el-form-item label="国家" >
<el-select v-model="msg.Country" filterable @change="getCityList(msg.Country,'Destination')"
<ul>
<li>
<span>
<em>国家</em>
<el-select v-model="msg.Country" filterable @change="getCityList(msg.Country,'Destination')"
:placeholder="$t('hotel.hotel_province')" clearable @clear="msg.Province='',msg.City=''">
<el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
<el-option v-for="item in provinceList" :key="item.ISOCountryCode" :label="item.CountryName_CN" :value="item.ISOCountryCode"></el-option>
<el-option v-for="item in provinceList" :key="item.ISOCountryCode" :label="item.CountryName_CN"
:value="item.ISOCountryCode"></el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>省份</em>
<el-select v-model="msg.DestinationID" filterable remote reserve-keyword placeholder="请输入关键词"
:remote-method="remoteMethod" :loading="loading">
<el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
<el-option v-for="item in cityList" :key="item.CityCode" :label="item.CityName_CN" :value="item.CityCode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" :gutter="35">
<el-form-item label="省份">
<el-select
v-model="msg.DestinationID"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"><el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
<el-option v-for="item in cityList" :key="item.CityCode" :label="item.CityName_CN" :value="item.CityCode"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" :gutter="35">
<el-form-item :label="$t('pub.date')">
<el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
</span>
</li>
<li>
<span>
<em>{{$t('pub.date')}}</em>
<el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
</el-date-picker>
<el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4" :gutter="35">
<el-form-item :label="$t('hotel.hotel')">
<el-input type="" v-model="msg.HotelName" :placeholder="$t('hotel.table_hotelname')"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<ul>
</span>
</li>
<li>
<span>
<em>{{$t('hotel.hotel')}}</em>
<el-input type="" v-model="msg.HotelName" :placeholder="$t('hotel.table_hotelname')"></el-input>
</span>
</li>
<li>
<button
class="hollowFixedBtn"
@click="resetPageIndex()"
>{{$t('pub.searchBtn')}}</button>
<button class="hollowFixedBtn" @click="resetPageIndex()">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<div v-if="dataList.length>0">
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
</el-pagination>
</div>
<div style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<div v-loading="loading">
<el-card class="box-card" v-for="(item, index) in dataList" :key="index" >
<div v-loading="loading">
<el-card class="box-card" v-for="(item, index) in dataList" :key="index">
<div class="hotelDiv" style="width:100%;margin-bottom:12px;">
<div style="width:85%;">
<div class="side-hotel-map__marker q-pr-lg"> {{index+1}}</div>
<div class="hotelname ">
<p><span class="hotelnamespan"> {{item.hotelName}}</span> <span
style="font-size:12px;color:#606266;margin-left:8px;">{{item.hotelEName}}</span></p>
</div>
</div>
<div style="width:15%;">
<el-rate v-model="item.reviewRating" disabled :max="getPrice(item.reviewRating)" show-score
text-color="#ff9900" :colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)">
</el-rate>
</div>
</div>
<div style="display: inline-flex; width:100%;height:auto;margin-top:12px;">
<!-- 图片 -->
<div class="hotel-card-img" style="position: relative; width: 160px; height: 150px;">
<el-carousel indicator-position="outside" trigger="click" height="150px" :autoplay="false">
<div class="pic_item">
<template v-if="item.ImgList&&item.ImgList.length>0">
<el-carousel-item v-for="(itemi,indexi) in item.ImgList" :key="indexi">
<img loading="lazy" class="hotel-card-img__image" :src="itemi.ImageUrl" style="height:100%;">
<h3 v-if="item.ImgList.length>0">{{indexi+1}}/{{item.ImgList.length}} </h3>
</el-carousel-item>
</template>
</div>
</el-carousel>
</div>
<!-- 基本信息 -->
<div style="position: relative; width:100%;">
<div style="width:100%;line-height:26px;">
<p>
<i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place" size="xs"></i>
{{item.address}}
</p>
<div class="hotelDiv" style="width:100%;margin-bottom:12px;">
<div style="width:85%;">
<div class="side-hotel-map__marker q-pr-lg"> {{index+1}}</div>
<div class="hotelname " ><p ><span class="hotelnamespan"> {{item.hotelName}}</span> <span style="font-size:12px;color:#606266;margin-left:8px;">{{item.hotelEName}}</span></p></div>
</div>
<div style="width:15%;"><el-rate
v-model="item.reviewRating"
disabled
:max="getPrice(item.reviewRating)"
show-score
text-color="#ff9900"
:colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)"
>
</el-rate></div>
</div>
<div style="display: inline-flex; width:100%;height:auto;margin-top:12px;">
<!-- 图片 -->
<div class="hotel-card-img" style="position: relative; width: 160px; height: 150px;">
<el-carousel indicator-position="outside" trigger="click" height="150px" :autoplay="false">
<div class="pic_item">
<template v-if="item.ImgList&&item.ImgList.length>0">
<el-carousel-item v-for="(itemi,indexi) in item.ImgList" :key="indexi">
<img loading="lazy" class="hotel-card-img__image" :src="itemi.ImageUrl" style="height:100%;">
<h3 v-if="item.ImgList.length>0">{{indexi+1}}/{{item.ImgList.length}} </h3>
</el-carousel-item>
</template>
</div>
</el-carousel>
</div>
<!-- 基本信息 -->
<div style="position: relative; width:100%;">
<div style="width:100%;line-height:26px;">
<p >
<i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place" size="xs"></i>
{{item.address}}
</p>
<template v-if="item.DescriptionList&&item.DescriptionList.length>0">
<el-popover placement="top" width="600" title="酒店简介" trigger="click">
<div style="line-height:27px;" v-html="item.DescriptionList[0].HotelDescription_CN"></div>
<div slot="reference" class="d12p" style="line-height:26px;font-size:14px;">
<span class="hotelnamespan" style="float: left;">酒店简介</span>
<div v-html="item.DescriptionList[0].NoHtmlHotelDescription"></div>
</div>
</el-popover>
</template>
</div>
<div class="ant-col nd-price-tag">
<span class="nd-price-tag__currency nd-price-tag">CNY </span>
<span class="nd-price-tag__price nd-price-tag"
style="font-weight: bolder !important;font-size: 20px;">{{item.lowrateBySetCurrency}} </span>
<span class="nd-price-tag">起</span>
<el-button round class="nd-reserve-btn" @click="goUrlT('HotelDetails', item.hotelId)">立即预订</el-button>
</div>
</div>
</div>
<template v-if="item.DescriptionList&&item.DescriptionList.length>0">
<el-popover
placement="top"
width="600"
title="酒店简介"
trigger="click" >
<div style="line-height:27px;" v-html="item.DescriptionList[0].HotelDescription_CN"></div>
<div slot="reference" class="d12p" style="line-height:26px;font-size:14px;">
<span class="hotelnamespan" style="float: left;">酒店简介</span>
<div v-html="item.DescriptionList[0].NoHtmlHotelDescription"></div>
</div>
</el-popover>
</template>
</el-card>
</div>
<div class="ant-col nd-price-tag">
<span class="nd-price-tag__currency nd-price-tag">CNY </span>
<span class="nd-price-tag__price nd-price-tag" style="font-weight: bolder !important;font-size: 20px;">{{item.lowrateBySetCurrency}} </span>
<span class="nd-price-tag">起</span>
<el-button round class="nd-reserve-btn" @click="goUrlT('HotelDetails', item.hotelId)" >立即预订</el-button>
</div>
</div>
</div>
</el-card>
</div>
<div class="noDataNotice" v-if="dataList.length<1&&loading==false"><i class="iconfont icon-kong"></i>
<p>没有找到你需要的数据</p>
</div>
<div class="noDataNotice" v-if="dataList.length<1&&loading==false"><i class="iconfont icon-kong"></i> <p>没有找到你需要的数据</p></div>
<div v-if="dataList.length>0">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size='msg.pageSize'
:total='total'>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 1,
RB_Group_Id:'',
companyList:[],
msg: {
//只查询日本
Country: "JP",
DestinationID: '',
export default {
data() {
return {
active: 1,
RB_Group_Id: '',
companyList: [],
msg: {
//只查询日本
Country: "JP",
DestinationID: '',
City: 0,
//星级
Star: '',
......@@ -291,23 +305,23 @@ export default {
MaxPrice: 0,
MinPrice: 0,
HotelName: '',
StartDate:'',
EndDate:'',
pageIndex: 1,
pageSize: 10,
IsSelectImg:1,
},
productionDate: [],
dataList: [],
loading: false,
isShow: false,
currentPage: 0,
total:0,
StartDate: '',
EndDate: '',
pageIndex: 1,
pageSize: 10,
IsSelectImg: 1,
},
productionDate: [],
dataList: [],
loading: false,
isShow: false,
currentPage: 0,
total: 0,
//国家 省市 区
provinceList: [],
cityList: [],
district: [],
beforeCheck: {
beforeCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let endTime = new Date(this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd")));
......@@ -328,124 +342,122 @@ export default {
}
}
},
};
},
methods: {
remoteMethod(query) {
};
},
methods: {
remoteMethod(query) {
if (query !== '') {
let msg = {
let msg = {
CountryCode: this.msg.Country,
Type:'Destination',
CityName_CN:query
};
Type: 'Destination',
CityName_CN: query
};
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
this.cityList = res.data.data;
},
);
},
);
} else {
this.cityList = [];
}
},
getCityList(ID,Type) {
getCityList(ID, Type) {
//根据省份获取城市
let msg = { };
if(Type==="Destination"){
let msg = {};
if (Type === "Destination") {
msg = {
CountryCode: ID,
Type:Type
};
CountryCode: ID,
Type: Type
};
this.cityList = [];
}
else {
} else {
msg = {
ParentCityCode: ID,
Type:Type
};
this.district=[];
ParentCityCode: ID,
Type: Type
};
this.district = [];
}
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
if(Type==="Destination"){
if (Type === "Destination") {
this.cityList = res.data.data;
}
else {
this.district= res.data.data;
}
} else {
this.district = res.data.data;
}
},
);
},
getProvinceList(countryId) {
getProvinceList() {
//根据省份获取城市
this.provinceList = [];
this.apipost(
"dmc_post_GetDiDaCountryList",
{},
"dmc_post_GetDiDaCountryList", {},
res => {
this.provinceList = res.data.data;
},
);
},
goUrlT(url,id){
this.$router.push({ name:url,query:{"id":id,"StartDate":this.msg.StartDate,"EndDate":this.msg.EndDate,blank:'y',tab:'道旅酒店详情'}})
goUrlT(url, id) {
this.$router.push({
name: url,
query: {
"id": id,
"StartDate": this.msg.StartDate,
"EndDate": this.msg.EndDate,
blank: 'y',
tab: '道旅酒店详情'
}
})
},
getPageList: function () {
this.loading = true
this.apipost('dmc_post_GetDiDaHotelPageList', this.msg, res => {
this.loading = false
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
this.dataList = res.data.data.pageData
}
}, null)
},
handleCurrentChange: function (val) { //翻页
this.msg.pageIndex = val;
this.getPageList();
},
resetPageIndex: function () { // 重置页码
this.msg.pageIndex = 1;
this.currentPage = 1;
this.getPageList()
},
getPageList: function () {
this.loading = true
this.apipost('dmc_post_GetDiDaHotelPageList', this.msg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
this.dataList = res.data.data.pageData
}
}, null)
},
handleCurrentChange: function (val) { //翻页
this.msg.pageIndex = val;
this.getPageList();
},
resetPageIndex: function (){ // 重置页码
this.msg.pageIndex=1;
this.currentPage = 1;
this.getPageList()
},
getBranchList(){
this.RB_Group_Id = this.getLocalStorage().RB_Group_id;
this.apipost('admin_get_BranchGetList', {RB_Group_Id:this.RB_Group_Id}, res=>{
if (res.data.resultCode == 1) {
this.companyList=res.data.data;
}
}, null)
},
getPrice(price) {
getPrice(price) {
return Math.ceil(price);
},
},
mounted() {
var DateTime = new Date();
DateTime.setDate(DateTime.getDate() + 8);
var year = DateTime.getFullYear();
var month = DateTime.getMonth() + 1;
var day = DateTime.getDate();
this.msg.StartDate= year + "-" +
(month < 10 ? "0" : "") + month + "-" +
(day < 10 ? "0" : "") + day ;
},
mounted() {
var DateTime = new Date();
DateTime.setDate(DateTime.getDate() + 8);
var year = DateTime.getFullYear();
var month = DateTime.getMonth() + 1;
var day = DateTime.getDate();
this.msg.StartDate = year + "-" +
(month < 10 ? "0" : "") + month + "-" +
(day < 10 ? "0" : "") + day;
var eDateTime = new Date();
eDateTime.setDate(eDateTime.getDate() + 9);
var eyear = eDateTime.getFullYear();
var emonth = eDateTime.getMonth() + 1;
var eday = eDateTime.getDate();
this.msg.EndDate = eyear + "-" +
(emonth < 10 ? "0" : "") + emonth + "-" +
(eday < 10 ? "0" : "") + eday;
this.getProvinceList();
this.getPageList();
}
};
var eDateTime = new Date();
eDateTime.setDate(eDateTime.getDate() + 9);
var eyear = eDateTime.getFullYear();
var emonth = eDateTime.getMonth() + 1;
var eday = eDateTime.getDate();
this.msg.EndDate= eyear + "-" +
(emonth < 10 ? "0" : "") + emonth + "-" +
(eday < 10 ? "0" : "") + eday ;
this.getProvinceList("JP");
this.getPageList();
}
};
</script>
src/components/Hotel/DiDa/HotelSure.vue
View file @ 4dc61688
<style scoped>
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
display: inline;
content: "·";
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
height: 250px;
}
.hotel-details-table {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 680px;
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #f7f7f7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #fafafa;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.hotel-details-tableMoblie {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #f7f7f7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #fafafa;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce {
margin: auto;
height: auto;
border-bottom: 1px solid #dcdcdc;
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;
white-space: nowrap;
}
.bg-white {
background: #fff !important;
}
.q-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.q-py-lg8 {
padding-top: 8px;
padding-bottom: 8px;
}
.q-py-bottom8 {
padding-bottom: 8px;
}
.column {
flex-direction: column;
}
.row {
display: flex;
flex-wrap: wrap;
}
.q-mb-lg {
margin-bottom: 24px;
}
.justify-between {
justify-content: space-between;
}
.q-position-engine {
margin-top: var(--q-pe-top, 0) !important;
margin-left: var(--q-pe-left, 0) !important;
will-change: auto;
}
.scroll {
overflow: auto;
}
.q-menu {
position: fixed !important;
display: inline-block;
max-width: 95vw;
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
background: #fff;
border-radius: 4px;
overflow-y: auto;
overflow-x: hidden;
outline: 0;
max-height: 65vh;
z-index: 6000;
}
.q-pa-md {
padding: 16px;
}
.q-pa-mdlr {
padding: 0px 16px;
}
.rounded-borders {
border-radius: 4px;
}
.wrap {
flex-wrap: wrap;
}
.q-card {
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
border-radius: 4px;
vertical-align: top;
background: #fff;
position: relative;
}
.q-card > div:not(:last-child),
.q-card > img:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.q-card > div:first-child,
.q-card > img:first-child {
border-top: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.q-card > div {
border-left: 0;
border-right: 0;
box-shadow: none;
}
.q-mr-md {
margin-right: 16px;
}
.no-shadow {
display: flex;
justify-content: flex-start;
}
.el-date-editor .el-range-input {
width: 70px;
}
.el-range-separator {
width: 20px !important;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
width: 202px;
}
.el-input .el-input__inner,
.el-select .el-input {
border-radius: 4px;
height: 32px;
}
.HD_Green {
background-color: green;
}
.text-white {
color: #fff !important;
}
.absolute,
.absolute-full,
.absolute-center,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right {
position: absolute;
}
.HD_Black {
background-color: #000;
}
.q-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.q-pl-lg {
padding-left: 24px;
}
.q-pt-sm {
padding-top: 8px;
}
.q-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.q-pb-md8 {
padding-bottom: 8px;
}
.q-mb-md {
margin-bottom: 16px !important;
}
.q-mb-md8 {
margin-bottom:8px !important;
}
.text-right {
text-align: right;
}
.q-pt-md {
padding-top: 16px;
}
.text-green {
color: #4caf50 !important;
}
.text-grey-6 {
color: #9e9e9e !important;
}
.text-red {
color: #f44336 !important;
}
.q-focus-helper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.q-btn--actionable {
cursor: pointer;
}
.bg-green-6 {
background: #4caf50 !important;
}
.q-separator--horizontal {
display: block;
height: 1px;
}
.el-divider--horizontal {
margin: 0px !important;
}
.order-show {
text-align: center;
color: red;
}
.fz18 {
font-size: 18px;
font-weight: bold;
}
.text-orange-6 {
color: #ff9800 !important;
}
.text-green-6 {
color: #4caf50 !important;
}
.text-weight-bold {
font-weight: 700;
}
.text-grey-9 {
color: #424242 !important;
}
.fz20 {
font-size: 20px;
}
.text-red {
color: #f44336 !important;
}
.text-h5 {
font-size: 1.5rem;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal;
}
.q-ml-md {
margin-left: 6px;
}
.q-px-md {
padding-left: 16px;
padding-right: 16px;
}
.items-center,
.flex-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
/deep/ .el-card__body, .el-main {
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
display: inline;
content: "·";
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
height: 250px;
}
.hotel-details-table {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 680px;
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #f7f7f7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #fafafa;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.hotel-details-tableMoblie {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #f7f7f7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #fafafa;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce {
margin: auto;
height: auto;
border-bottom: 1px solid #dcdcdc;
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;
white-space: nowrap;
}
.bg-white {
background: #fff !important;
}
.q-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.q-py-lg8 {
padding-top: 8px;
padding-bottom: 8px;
}
.q-py-bottom8 {
padding-bottom: 8px;
}
.column {
flex-direction: column;
}
.row {
display: flex;
flex-wrap: wrap;
}
.q-mb-lg {
margin-bottom: 24px;
}
.justify-between {
justify-content: space-between;
}
.q-position-engine {
margin-top: var(--q-pe-top, 0) !important;
margin-left: var(--q-pe-left, 0) !important;
will-change: auto;
}
.scroll {
overflow: auto;
}
.q-menu {
position: fixed !important;
display: inline-block;
max-width: 95vw;
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
background: #fff;
border-radius: 4px;
overflow-y: auto;
overflow-x: hidden;
outline: 0;
max-height: 65vh;
z-index: 6000;
}
.q-pa-md {
padding: 16px;
}
.q-pa-mdlr {
padding: 0px 16px;
}
.rounded-borders {
border-radius: 4px;
}
.wrap {
flex-wrap: wrap;
}
.q-card {
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
border-radius: 4px;
vertical-align: top;
background: #fff;
position: relative;
}
.q-card>div:not(:last-child),
.q-card>img:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.q-card>div:first-child,
.q-card>img:first-child {
border-top: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.q-card>div {
border-left: 0;
border-right: 0;
box-shadow: none;
}
.q-mr-md {
margin-right: 16px;
}
.no-shadow {
display: flex;
justify-content: flex-start;
}
.el-date-editor .el-range-input {
width: 70px;
}
.el-range-separator {
width: 20px !important;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
width: 202px;
}
.el-input .el-input__inner,
.el-select .el-input {
border-radius: 4px;
height: 32px;
}
.HD_Green {
background-color: green;
}
.text-white {
color: #fff !important;
}
.absolute,
.absolute-full,
.absolute-center,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right {
position: absolute;
}
.HD_Black {
background-color: #000;
}
.q-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.q-pl-lg {
padding-left: 24px;
}
.q-pt-sm {
padding-top: 8px;
}
.q-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.q-pb-md8 {
padding-bottom: 8px;
}
.q-mb-md {
margin-bottom: 16px !important;
}
.q-mb-md8 {
margin-bottom: 8px !important;
}
.text-right {
text-align: right;
}
.q-pt-md {
padding-top: 16px;
}
.text-green {
color: #4caf50 !important;
}
.text-grey-6 {
color: #9e9e9e !important;
}
.text-red {
color: #f44336 !important;
}
.q-focus-helper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.q-btn--actionable {
cursor: pointer;
}
.bg-green-6 {
background: #4caf50 !important;
}
.q-separator--horizontal {
display: block;
height: 1px;
}
.el-divider--horizontal {
margin: 0px !important;
}
.order-show {
text-align: center;
color: red;
}
.fz18 {
font-size: 18px;
font-weight: bold;
}
.text-orange-6 {
color: #ff9800 !important;
}
.text-green-6 {
color: #4caf50 !important;
}
.text-weight-bold {
font-weight: 700;
}
.text-grey-9 {
color: #424242 !important;
}
.fz20 {
font-size: 20px;
}
.text-red {
color: #f44336 !important;
}
.text-h5 {
font-size: 1.5rem;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal;
}
.q-ml-md {
margin-left: 6px;
}
.q-px-md {
padding-left: 16px;
padding-right: 16px;
}
.items-center,
.flex-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
/deep/ .el-card__body,
.el-main {
padding: 10px !important;
}
.d-pr8 {
padding-right: 8px;
}
.table-list tr, td {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding:8px;
border-collapse: collapse; /* 移除单元格之间的间隔 */
font-size:12px;
}
.table-list tr:first-child td {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding:8px;
border-collapse: collapse; /* 移除单元格之间的间隔 */
}
}
.d-pr8 {
padding-right: 8px;
}
.table-list tr,
td {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding: 8px;
border-collapse: collapse;
/* 移除单元格之间的间隔 */
font-size: 12px;
}
.table-list tr:first-child td {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding: 8px;
border-collapse: collapse;
/* 移除单元格之间的间隔 */
}
</style>
<template>
<div class="q-py-lg">
<div
class="bg-white q-py-lg8 column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="bg-white q-py-lg8 column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<div class="row q-px-lg q-py-lg8 row justify-between">
<div
class="row no-wrap items-center q-mt-xs q-pt-sm text-orange-6 text-weight-bold"
style="width:100%;"
>
<el-button
class="bg-orange-6 text-white"
size="sm"
type="warning"
icon="el-icon-user"
circle
></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;"
>超过13岁视为成人处理</span
>
<div class="row no-wrap items-center q-mt-xs q-pt-sm text-orange-6 text-weight-bold" style="width:100%;">
<el-button class="bg-orange-6 text-white" size="sm" type="warning" icon="el-icon-user" circle></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;">超过13岁视为成人处理</span>
</div>
<div
class="row no-wrap items-center text-green-6 q-mt-xs q-pt-sm text-weight-bold"
style="width:100%;"
>
<el-button
class="bg-green-6 text-white"
size="sm"
type="success"
icon="el-icon-document"
circle
></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;"
>预定成功后房间将为您保留整晚</span
>
<div class="row no-wrap items-center text-green-6 q-mt-xs q-pt-sm text-weight-bold" style="width:100%;">
<el-button class="bg-green-6 text-white" size="sm" type="success" icon="el-icon-document" circle></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;">预定成功后房间将为您保留整晚</span>
</div>
</div>
</div>
<div class="bg-white column q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<div class="row q-py-bottom8 row justify-between">
<div style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;">
<div
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;">
预定信息
</div>
</div>
<template v-if="sureMsg&&sureMsg.BookingID&&sureMsg.BookingID.length>0">
<div class="row q-px-lg row justify-between q-mb-md">
<div
class="row no-wrap items-center q-mt-xs q-pt-sm text-red text-weight-bold"
style="width:100%;"
>
<span class="fz18 text-red">
{{ sureMsg.HotelName }}</span
>
<div class="row q-px-lg row justify-between q-mb-md">
<div class="row no-wrap items-center q-mt-xs q-pt-sm text-red text-weight-bold" style="width:100%;">
<span class="fz18 text-red">
{{ sureMsg.HotelName }}</span>
</div>
</div>
</div>
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i
class="text-grey-13 q-mr-xs el-icon-location-outline"
name="place"
size="xs"
></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place"
size="xs"></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{
Address
}}</span>
</span>
</div>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i
style="color:#c0c4cc;"
class="text-grey-13 q-mr-xs el-icon-phone"
name="place"
size="xs"
></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{ $route.query.tel }}</span>
</span>
</div>
</div>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i style="color:#c0c4cc;" class="text-grey-13 q-mr-xs el-icon-phone"
name="place" size="xs"></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{ $route.query.tel }}</span>
</span>
<div style="display:row;flex-direction:row;padding-bottom:16px;" class="justify-between">
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">房型</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 " >
{{ roomRateDetails.RatePlanList[0].RoomName_CN }}
</template>
</span>
</div>
</div>
</div>
</div>
<div style="display:row;flex-direction:row;padding-bottom:16px;" class="justify-between">
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">房型</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
{{ roomRateDetails.RatePlanList[0].RoomName_CN }}
</template>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">床型</span>
<span class="text-grey-9 q-pr-lg"
v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0" v-loading="loading">
{{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
</span>
</div>
</div>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">床型</span>
<span
class="text-grey-9 q-pr-lg"
v-if="
roomRateDetails.RatePlanList &&
roomRateDetails.RatePlanList.length > 0
"
v-loading="loading"
>
{{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
</span>
</div>
</div>
</div>
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">入住日期</span>
<span class="text-grey-9"> {{params.CheckInDate}} <span class="q-ml-md">{{ checkInWeek }}</span>
-
<span > {{params.CheckOutDate}} </span>
<span class="q-ml-md">{{ checkOutWeek }}</span>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">入住日期</span>
<span class="text-grey-9"> {{params.CheckInDate}} <span class="q-ml-md">{{ checkInWeek }}</span>
-
<span> {{params.CheckOutDate}} </span>
<span class="q-ml-md">{{ checkOutWeek }}</span>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">入住人數</span>
<span class="text-grey-9">
<span>成人 {{ auditNum }} 人</span>
<span class="q-pl-lg" v-if="childNum > 0"
>儿童{{ childNum }} 人</span
>
<span class="q-pl-lg" v-if="childNum > 0">儿童{{ childNum }} 人</span>
<span class="q-pl-lg" v-if="isBaoChild">不能报儿童</span>
</span>
</div>
</div>
</div>
<div style="padding-bottom: 8px;">
</div>
</div>
<div style="padding-bottom: 8px;">
<div style=" display: flex;">
<div style="width:50%;" v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 " v-for="(item, index) in roomRateDetails.RatePlanList" :key="index" >
<div class="q-pt-xs col q-px-lg q-mb-md8" >
<div style="width:50%;" v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0"
v-for="(item, index) in roomRateDetails.RatePlanList" :key="index">
<div class="q-pt-xs col q-px-lg q-mb-md8">
<span class="text-grey-6 q-pr-lg">房间数量</span>
<span class="text-grey-9"> {{ item.RoomOccupancy.RoomNum }} </span>
<span class="text-grey-9"
><i
class="text-grey-13 q-mr-xs el-icon-warning-outline text-orange-6"
name="place"
size="xs"
></i>
<span class="text-grey-9"><i class="text-grey-13 q-mr-xs el-icon-warning-outline text-orange-6"
name="place" size="xs"></i>
仅剩
<span class="text-orange text-orange-6">{{
item.InventoryCount
}}</span>
间
</span>
</div>
</div>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<div>
<span class="text-grey-6 q-pr-lg">报价是否即时确认</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 " >
{{ roomRateDetails.RatePlanList[0].IsOnRequest?"否":"是" }}
</template>
</span>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<div>
<span class="text-grey-6 q-pr-lg">报价是否即时确认</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
{{ roomRateDetails.RatePlanList[0].IsOnRequest?"否":"是" }}
</template>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md " >
<span class=" q-pr-lg d-pr8" style="float:left;" >订单总金额</span >
<div class="q-pt-xs col q-px-lg q-mb-md ">
<span class=" q-pr-lg d-pr8" style="float:left;">订单总金额</span>
<span class=" col row wrap text-red" style="font-size:18px;">
( {{DanWei}} ){{roomRateDetails.TotalPrice}}
( {{DanWei}} ){{roomRateDetails.TotalPrice}}
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md">
<span class="text-grey-6 q-pr-lg d-pr8" style="float:left;" >房費情況</span >
<span class="text-grey-6 q-pr-lg d-pr8" style="float:left;">房費情況</span>
<span class="text-grey-9 col row wrap">
<template v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
<table class="table-list" cellspacing="0" >
<tr style="background-color: #f1f1f1;">
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
{{getWeekD(itemp.StayDate)}}
</td>
</tr>
<tr>
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
<span class="text-red">{{DanWei }} {{itemp.Price}}</span>
<p >
<span :class="itemp.MealAmount>0?'text-green':'' " >
{{getMealtype(itemp.MealType)}}
<template v-if="itemp.MealAmount>0">
×{{itemp.MealAmount}}份
</template>
</span>
</p>
</td>
</tr>
</table>
</template>
<table class="table-list" cellspacing="0">
<tr style="background-color: #f1f1f1;">
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
{{getWeekD(itemp.StayDate)}}
</td>
</tr>
<tr>
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
<span class="text-red">{{DanWei }} {{itemp.Price}}</span>
<p>
<span :class="itemp.MealAmount>0?'text-green':'' ">
{{getMealtype(itemp.MealType)}}
<template v-if="itemp.MealAmount>0">
×{{itemp.MealAmount}}份
</template>
</span>
</p>
</td>
</tr>
</table>
</template>
</span>
</div>
</div>
</template>
<template v-else><div style="text-align:center;padding:18px;">暂无数据</div></template>
</div>
</template>
<template v-else>
<div style="text-align:center;padding:18px;">暂无数据</div>
</template>
</div>
<div
class="bg-white column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="bg-white column q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<div class="row q-py-bottom8 row justify-between">
<div
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;padding-left:10px; align-items: center;"
>
<span style="float: left; padding-top: 16px; display: block;"
>入住信息</span
>
<span
style="float: right; padding-top: 16px; padding-right:16px; display: block;"
class="text-orange-6"
>
<i
class="text-grey-13 q-mr-xs el-icon-warning-outline"
name="place"
size="xs"
></i
>所填姓名需和入住时所持证件一致</span
>
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;padding-left:10px; align-items: center;">
<span style="float: left; padding-top: 16px; display: block;">入住信息</span>
<span style="float: right; padding-top: 16px; padding-right:16px; display: block;" class="text-orange-6">
<i class="text-grey-13 q-mr-xs el-icon-warning-outline" name="place" size="xs"></i>所填姓名需和入住时所持证件一致</span>
</div>
</div>
<div class="row q-px-lg q-py-lg8 row justify-between" style="width: 100%; display: block;">
<el-form label-position="left" label-width="80px" class="iis_info_box clearfix"
ref="sureMsg" :rules="rules" :model="sureMsg" >
<el-form label-position="left" label-width="80px" class="iis_info_box clearfix" ref="sureMsg" :rules="rules"
:model="sureMsg">
<el-row>
<el-col :gutter="35" style="width:26%;">
<el-form-item label="预订人" prop="guestLastName" >
<el-input v-model="sureMsg.guestLastName" placeholder="姓（英文）"></el-input>
</el-form-item>
<el-col :gutter="35" style="width:26%;">
<el-form-item label="预订人" prop="guestLastName">
<el-input v-model="sureMsg.guestLastName" placeholder="姓（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" prop="guestFirstName">
<el-input v-model="sureMsg.guestFirstName" placeholder="名（英文）"></el-input>
</el-form-item>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" prop="guestFirstName">
<el-input v-model="sureMsg.guestFirstName" placeholder="名（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:30%;">
<el-form-item label="Email" prop="guestEmail">
<el-col :gutter="35" style="width:30%;">
<el-form-item label="Email" prop="guestEmail">
<el-input v-model="sureMsg.guestEmail" placeholder="Email"></el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col style="width:49%;":gutter="35">
<el-form-item label="电话" prop="guestPhoneNumber">
<el-col style="width:49%;" :gutter="35">
<el-form-item label="电话" prop="guestPhoneNumber">
<el-input v-model="sureMsg.guestPhoneNumber" placeholder="电话"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col style="width:49%;" :gutter="35">
<el-form-item label="客户需求" >
<el-form-item label="客户需求">
<el-input v-model="sureMsg.guestRequest" placeholder="客户需求"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label-width="0px" v-if="sureMsg.GuestList && sureMsg.GuestList.length > 0">
<template v-for="(item, subIndex) in sureMsg.GuestList" >
<el-form-item label-width="0px" v-if="sureMsg.GuestList && sureMsg.GuestList.length > 0">
<template v-for="(item, subIndex) in sureMsg.GuestList">
<div v-for="(itemguest, numberOfAdultsIndex) in item.GuestInfo" :key="subIndex">
<el-row style="margin-bottom:22px">
<el-row style="margin-bottom:22px">
<el-col :gutter="35" style="width:26%;margin-right:24px;">
<el-form-item :label="numberOfAdultsIndex==0?'房间'+(subIndex + 1):''"
:prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].LastName`"
:rules="rules.LastName" :style="numberOfAdultsIndex>0?'margin-left: 80px;':''">
<el-input v-model="itemguest.LastName" placeholder="姓（英文）"></el-input>
</el-form-item>
:prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].LastName`"
:rules="rules.LastName" :style="numberOfAdultsIndex>0?'margin-left: 80px;':''">
<el-input v-model="itemguest.LastName" placeholder="姓（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" :prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].FirstName`"
:rules="rules.FirstName" >
<el-input v-model="itemguest.FirstName" placeholder="名（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:30%;">
<el-form-item label="" >
<el-input type="number" v-model="itemguest.Age" :min="0" :max="12" placeholder="年龄（儿童必填）" ></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</template>
</el-form-item>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" :prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].FirstName`"
:rules="rules.FirstName">
<el-input v-model="itemguest.FirstName" placeholder="名（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:30%;">
<el-form-item label="">
<el-input type="number" v-model="itemguest.Age" :min="0" :max="12" placeholder="年龄（儿童必填）">
</el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</template>
</el-form-item>
<el-row>
<el-col :gutter="35">
<div class="row col-12 text-red q-mb-md" v-if="
roomRateDetails.CancellationPolicyList &&
roomRateDetails.CancellationPolicyList.length > 0
">
<div style="width:100%;" v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
<p v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消;</p>
<div v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
<p>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</p>
</div>
<div v-else>
<p>{{ getformatDateStr(itemCancella.FromDate) }}
<span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">- {{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} 之间</span>
取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</p>
</div>
<div style="width:100%;" v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
<p v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消;</p>
<div v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
<p>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</p>
</div>
<div v-else>
<p>{{ getformatDateStr(itemCancella.FromDate) }}
<span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">-
{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} 之间</span>
取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</p>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div
class="col row q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<el-button type="primary" :disabled="submDisabled" style="width:100%;" @click="submitForm('sureMsg')" :loading="submLoading">下单</el-button>
<div class="col row q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<el-button type="primary" :disabled="submDisabled" style="width:50%; margin:0 auto;" @click="submitForm('sureMsg')"
:loading="submLoading">下单</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowTime: true,
isLoginB2B: false,
Verification: "",
CouponIds: "",
CodeLoading: false,
UserCanUseCouponList: [],
CouponList: [],
Address: "", //兑换码
params: {
sort: 1,
displayFrom: 1,
CheckInDate: "",
CheckOutDate: "",
searchroomGroup: [],
ratePlanID: "",
imgUrl: "",
RoomCount: 1,
ChildCount: 0,
AdultCount: 1,
OccupancyDetails: [],
hotelId: 0
},
getParamsMsg: {},
urlParamsMsg: {},
adultList: [], //成人下拉
childrenList: [], //儿童下拉
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
submDisabled:false,
loading: false,
dateRange: "", //当前日期
dateRange2: "", //当前日期
roomRateDetails: {},
DanWei: "",
HotelRoomTypes: [], //散客房间类型
HotelMealTypes:[],//餐型
dataList: {},
GuestInfo:{
LastName: '',
FirstName: '',
Age: '',
},
//确认MSG参数
sureMsg: {
EmployeeIdStr: "",
CheckInDate: "",
RatePlanID: "",
CheckOutDate: "",
RoomCount: "",
guestLastName: "",
guestFirstName: "",
guestAddress: "",
guestPhoneNumber: "",
guestEmail: "",
BookingID: "",
HotelName: "",
HotelPic: "",
GuestList: [],
TotalPrice: 0,
CustomerPayMoney: 0,
DiscountMoney: 0,
OrderSource: 2,
OrderForm: 1,
//备注
guestRequest: "",
hotelId:'',
roomType:0,
},
auditNum: 0,
childNum: 0,
isBaoChild: false,
SettlementPrice: 0,
price: 0,
pickerBeginDateBefore: "", //入住时间前可选范围
pickerBeginDateAfter: "", //入住时间后可选范围
RoomTypeList: [], //房间等级
scatteredRoomTypeList: [], //散客房间类型
WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周一至周日
checkInWeek: "", //周一至周日
checkOutWeek: "",
beforeCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let endTime = new Date(
this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd"))
);
return time && endTime.getTime() >= time.getTime();
} else {
return false;
export default {
data() {
return {
isShowTime: true,
isLoginB2B: false,
Verification: "",
CouponIds: "",
CodeLoading: false,
UserCanUseCouponList: [],
CouponList: [],
Address: "", //兑换码
params: {
sort: 1,
displayFrom: 1,
CheckInDate: "",
CheckOutDate: "",
searchroomGroup: [],
ratePlanID: "",
imgUrl: "",
RoomCount: 1,
ChildCount: 0,
AdultCount: 1,
OccupancyDetails: [],
hotelId: 0
},
getParamsMsg: {},
urlParamsMsg: {},
adultList: [], //成人下拉
childrenList: [], //儿童下拉
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
submDisabled: false,
loading: false,
dateRange: "", //当前日期
dateRange2: "", //当前日期
roomRateDetails: {},
DanWei: "",
HotelRoomTypes: [], //散客房间类型
HotelMealTypes: [], //餐型
dataList: {},
GuestInfo: {
LastName: '',
FirstName: '',
Age: '',
},
//确认MSG参数
sureMsg: {
EmployeeIdStr: "",
CheckInDate: "",
RatePlanID: "",
CheckOutDate: "",
RoomCount: "",
guestLastName: "",
guestFirstName: "",
guestAddress: "",
guestPhoneNumber: "",
guestEmail: "",
BookingID: "",
HotelName: "",
HotelPic: "",
GuestList: [],
TotalPrice: 0,
CustomerPayMoney: 0,
DiscountMoney: 0,
OrderSource: 2,
OrderForm: 1,
//备注
guestRequest: "",
hotelId: '',
roomType: 0,
},
auditNum: 0,
childNum: 0,
isBaoChild: false,
SettlementPrice: 0,
price: 0,
pickerBeginDateBefore: "", //入住时间前可选范围
pickerBeginDateAfter: "", //入住时间后可选范围
RoomTypeList: [], //房间等级
scatteredRoomTypeList: [], //散客房间类型
WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周一至周日
checkInWeek: "", //周一至周日
checkOutWeek: "",
beforeCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let endTime = new Date(
this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd"))
);
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
}
}
},
afterCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let startTime = new Date(this.params.CheckInDate);
//可以选择当天
return (
time &&
time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000
);
} else {
return false;
},
afterCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let startTime = new Date(this.params.CheckInDate);
//可以选择当天
return (
time &&
time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000
);
} else {
return false;
}
}
}
},
rules: {
guestLastName: [{
required: true,
message: "请输入姓（英文）",
trigger: "blur",
}],
guestFirstName: [{
required: true,
message: "请输入名（英文）",
trigger: "blur",
}],
guestEmail: [{
required: true,
message: "请输入Email",
trigger: "blur",
}],
guestPhoneNumber: [{
required: true,
message: "请输入电话",
trigger: "blur",
}],
LastName: [{
required: true,
message: "请输入姓（英文）",
trigger: "blur",
}],
FirstName: [{
required: true,
message: "请输入名（英文）",
trigger: "blur",
}],
},
},
rules: {
guestLastName: [{
required: true,
message: "请输入姓（英文）",
trigger: "blur",
}],
guestFirstName: [{
required: true,
message: "请输入名（英文）",
trigger: "blur",
}],
guestEmail: [{
required: true,
message: "请输入Email",
trigger: "blur",
}],
guestPhoneNumber: [{
required: true,
message: "请输入电话",
trigger: "blur",
}],
LastName: [{
required: true,
message: "请输入姓（英文）",
trigger: "blur",
}],
FirstName: [{
required: true,
message: "请输入名（英文）",
trigger: "blur",
}],
},
};
},
methods: {
// 提交下单
submitForm(formName) {
this.$refs[formName].validate((valid)=>{
if(valid){
if (this.submLoading) return;
let flag = false;
this.sureMsg.hotelId = this.$route.query.hotelId;
this.sureMsg.RatePlanID = this.$route.query.RatePlanID;
this.sureMsg.CheckInDate = this.params.CheckInDate;
this.sureMsg.EmployeeIdStr =this.getLocalStorage().EmployeeId+"";
this.sureMsg.totalRoomCount = this.params.searchroomGroup.length;
this.sureMsg.RoomCount = this.params.searchroomGroup.length;
this.sureMsg.CheckOutDate = this.params.CheckOutDate;
if(this.roomRateDetails&&this.roomRateDetails.RatePlanList&&this.roomRateDetails.RatePlanList.length>0){
this.sureMsg.roomType = this.roomRateDetails.RatePlanList[0].BedType;
}
//判断选择的人数与入住人数
let Count1 = 0;
this.sureMsg.GuestList.forEach(item => {
if (item.numberOfChildren > 0) {
let ageNum = 0;
item.GuestInfo.forEach(guestItem => {
if (guestItem.Age <= 12) {
ageNum = ageNum + 1;
};
},
methods: {
// 提交下单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.submLoading) return;
let flag = false;
this.sureMsg.hotelId = this.$route.query.hotelId;
this.sureMsg.RatePlanID = this.$route.query.RatePlanID;
this.sureMsg.CheckInDate = this.params.CheckInDate;
this.sureMsg.EmployeeIdStr = this.getLocalStorage().EmployeeId + "";
this.sureMsg.totalRoomCount = this.params.searchroomGroup.length;
this.sureMsg.RoomCount = this.params.searchroomGroup.length;
this.sureMsg.CheckOutDate = this.params.CheckOutDate;
if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
.length > 0) {
this.sureMsg.roomType = this.roomRateDetails.RatePlanList[0].BedType;
}
});
if (item.numberOfChildren != ageNum) {
this.Error("儿童数不正确");
}
}
});
this.submLoading = true;
this.apipost("dmc_post_GetDiDaBookingConfirm", this.sureMsg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success("下单成功");
this.$router.push({ name:"HotelOrderTotal",query:{tab:'散卖酒店订单'}})
}
else{
this.Error(res.data.message);
//判断选择的人数与入住人数
let Count1 = 0;
this.sureMsg.GuestList.forEach(item => {
if (item.numberOfChildren > 0) {
let ageNum = 0;
item.GuestInfo.forEach(guestItem => {
if (guestItem.Age <= 12) {
ageNum = ageNum + 1;
}
});
if (item.numberOfChildren != ageNum) {
this.Error("儿童数不正确");
}
}
});
this.submLoading = true;
this.apipost("dmc_post_GetDiDaBookingConfirm", this.sureMsg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success("下单成功");
this.$router.push({
name: "HotelOrderTotal",
query: {
tab: '散卖酒店订单'
}
})
} else {
this.Error(res.data.message);
}
this.submLoading = false;
},
null
);
}
this.submLoading = false;
},
null
);
}
})
})
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
}, null)
this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res => {
this.loading = false
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
}, null)
},
//获取餐型
getMealtype(mealtypeId) {
//获取餐型
getMealtype(mealtypeId) {
let mealtypeName = "";
if (mealtypeId > 0) {
this.HotelMealTypes.forEach((item) => {
......@@ -945,241 +927,245 @@ export default {
}
return mealtypeName;
},
//日期格式化
getIsCancella(RatePlanCancellationPolicyList,TotalPrice) {
let IsCancel=0;//不可取消
let date2 = new Date();//当前时间
RatePlanCancellationPolicyList.forEach((item,index) => {
var dt = new Date(item.FromDate);//取消时间
if(IsCancel==0){
if (dt > date2 ) {
if(item.Amount==TotalPrice){
IsCancel=1;
}else{
IsCancel=2;
}
}
else{
if(item.Amount!=TotalPrice){
IsCancel=2;
//日期格式化
getIsCancella(RatePlanCancellationPolicyList, TotalPrice) {
let IsCancel = 0; //不可取消
let date2 = new Date(); //当前时间
RatePlanCancellationPolicyList.forEach((item, index) => {
var dt = new Date(item.FromDate); //取消时间
if (IsCancel == 0) {
if (dt > date2) {
if (item.Amount == TotalPrice) {
IsCancel = 1;
} else {
IsCancel = 2;
}
} else {
if (item.Amount != TotalPrice) {
IsCancel = 2;
}
}
}
});
});
return IsCancel;
},
//通过日期得到周几
getWeek() {
let CheckInDate = new Date(this.params.CheckInDate).getDay();
let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
//通过日期得到周几
getWeek() {
let CheckInDate = new Date(this.params.CheckInDate).getDay();
let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
this.checkInWeek = this.WeekList[CheckInDate];
this.checkOutWeek = this.WeekList[CheckOutDate];
},
this.checkInWeek = this.WeekList[CheckInDate];
this.checkOutWeek = this.WeekList[CheckOutDate];
},
//通过日期得到周几
getWeekD(dateTime) {
let dt = new Date(dateTime);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() + 1).toString().padStart(2, "0");
return month + "-" + date +"("+this.WeekList[dt.getDay()]+")";
},
//通过日期得到周几
getWeekD(dateTime) {
let dt = new Date(dateTime);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() + 1).toString().padStart(2, "0");
return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() ).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
optionsFnStar(cd) {
return (
cd <=
date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
);
},
optionsFnEnd(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
);
},
dateRangeHandler(e) {
if (qDateProxy.value) qDateProxy.value.hide();
this.initHotel();
},
dateRangeHandler2(e) {
if (qDateProxy2.value) qDateProxy2.value.hide();
this.initHotel();
},
dateRangeHandler3(e) {
if (qDateProxy3.value) qDateProxy3.value.hide();
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
optionsFnStar(cd) {
return (
cd <=
date.formatDate(date.addToDate(new Date(), {
days: 9
}), "YYYY/MM/DD")
);
},
optionsFnEnd(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), {
days: 9
}), "YYYY/MM/DD")
);
},
dateRangeHandler(e) {
if (qDateProxy.value) qDateProxy.value.hide();
this.initHotel();
},
dateRangeHandler2(e) {
if (qDateProxy2.value) qDateProxy2.value.hide();
this.initHotel();
},
dateRangeHandler3(e) {
if (qDateProxy3.value) qDateProxy3.value.hide();
},
initHotel() {
this.getWeek();
this.loading = true;
this.apipost(
"dmc_post_GetDiDaPriceConfirm",
this.params,
res => {
console.log("dmc_post_GetDiDaPriceConfirm", res);
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.PriceDetails;
this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
this.sureMsg.BookingID = res.data.data.PriceDetails.ReferenceNo;
this.sureMsg.checkInTime = res.data.data.PriceDetails.CheckInDate;
// this.sureMsg.HotelName = this.roomRateDetails.HotelName;
this.sureMsg.TotalPrice = this.roomRateDetails.TotalPrice;
this.sureMsg.RoomCount = this.$route.query.room;
this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
if (
Object.prototype.toString.call(this.dataList.HotelList) ==
"[object Object]"
) {
let arr = [];
arr.push(this.dataList.HotelList);
this.dataList.HotelList = arr;
initHotel() {
this.getWeek();
this.loading = true;
this.apipost(
"dmc_post_GetDiDaPriceConfirm",
this.params,
res => {
console.log("dmc_post_GetDiDaPriceConfirm", res);
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.PriceDetails;
this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
this.sureMsg.BookingID = res.data.data.PriceDetails.ReferenceNo;
this.sureMsg.checkInTime = res.data.data.PriceDetails.CheckInDate;
// this.sureMsg.HotelName = this.roomRateDetails.HotelName;
this.sureMsg.TotalPrice = this.roomRateDetails.TotalPrice;
this.sureMsg.RoomCount = this.$route.query.room;
this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
if (
Object.prototype.toString.call(this.dataList.HotelList) ==
"[object Object]"
) {
let arr = [];
arr.push(this.dataList.HotelList);
this.dataList.HotelList = arr;
}
this.TotalChildCount = 0;
let rateGrouoLen = 0;
}
this.TotalChildCount = 0;
let rateGrouoLen = 0;
}
if(this.roomRateDetails&&this.roomRateDetails.RatePlanList&&this.roomRateDetails.RatePlanList.length>0){
this.submDisabled=false;
if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
.length > 0) {
this.submDisabled = false;
} else {
this.submDisabled = true;
}
else{
this.submDisabled=true;
},
null
);
},
goShenqing() {
let dom = document.querySelector("#blankLink");
dom.href = `http://${window.location.host}/#/PsSystem/${1}`;
dom.click();
},
//获取道旅床类型列表
getdidaBedType() {
this.apipost(
"dmc_post_GetDidaBedTypeBaseInfo",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
},
null
);
},
goShenqing() {
let dom = document.querySelector("#blankLink");
dom.href = `http://${window.location.host}/#/PsSystem/${1}`;
dom.click();
},
//获取道旅床类型列表
getdidaBedType() {
this.apipost(
"dmc_post_GetDidaBedTypeBaseInfo",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
},
null
);
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost(
"dmc_post_GetDidaMealType",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
},
null
);
},
null
);
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost(
"dmc_post_GetDidaMealType",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
},
null
);
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId > 0) {
this.HotelRoomTypes.forEach(item => {
if (item.ID == roomtypeId) {
roomtypeName = item.Name_CN;
}
});
}
return roomtypeName;
},
getPrice(price) {
return Math.ceil(price);
}
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId > 0) {
this.HotelRoomTypes.forEach(item => {
if (item.ID == roomtypeId) {
roomtypeName = item.Name_CN;
created() {
let userInfo = this.getLocalStorage();
this.EmployeeId = userInfo.EmployeeId;
if (this.$route.query.StartDate) {
// this.dateList.push(this.$route.query.StartDate)
this.params.CheckInDate = this.$route.query.StartDate;
}
if (this.$route.query.EndDate) {
// this.dateList.push(this.$route.query.EndDate)
this.params.CheckOutDate = this.$route.query.EndDate;
}
if (this.$route.query.auditNum) {
this.params.AdultCount = this.$route.query.auditNum;
this.auditNum = this.$route.query.auditNum;
}
if (this.$route.query.childNum) {
this.params.childNum = this.$route.query.childNum;
}
if (this.$route.query.searchroomGroup) {
//JSON.parse(JSON.stringify(this.currentEditItemData))
this.params.searchroomGroup = JSON.parse(
decodeURIComponent(this.$route.query.searchroomGroup)
);
}
if (this.$route.query.RatePlanID) {
this.params.ratePlanID = this.$route.query.RatePlanID;
}
if (this.$route.query.hotelId) {
this.params.hotelId = this.$route.query.hotelId;
this.sureMsg.hotelId = this.$route.query.hotelId;
}
if (this.$route.query.Address) {
this.Address = this.$route.query.Address;
}
if (this.$route.query.HotelName) {
this.sureMsg.HotelName = this.$route.query.HotelName;
}
if (this.$route.query.room) {
this.params.RoomCount = this.$route.query.room;
}
if (this.params.searchroomGroup && this.params.searchroomGroup != null) {
this.sureMsg.GuestList = [];
this.params.searchroomGroup.forEach((item, index) => {
console.log("item", item);
var guestInfoList = [];
let allprople = item.numberOfAdults + item.numberOfChildren;
for (let i = 1; i <= allprople; i++) {
let obj = {
LastName: "",
FirstName: "",
Age: ""
};
guestInfoList.push(obj);
}
var obj = {
RoomNum: index + 1,
numberOfAdults: item.numberOfAdults,
numberOfChildren: item.numberOfChildren,
GuestInfo: guestInfoList
};
this.sureMsg.GuestList.push(obj);
console.log(" this.sureMsg.GuestList", this.sureMsg.GuestList);
});
}
return roomtypeName;
},
getPrice(price) {
return Math.ceil(price);
}
},
created() {
let userInfo = this.getLocalStorage();
this.EmployeeId = userInfo.EmployeeId;
if (this.$route.query.StartDate) {
// this.dateList.push(this.$route.query.StartDate)
this.params.CheckInDate = this.$route.query.StartDate;
}
if (this.$route.query.EndDate) {
// this.dateList.push(this.$route.query.EndDate)
this.params.CheckOutDate = this.$route.query.EndDate;
}
if (this.$route.query.auditNum) {
this.params.AdultCount = this.$route.query.auditNum;
this.auditNum = this.$route.query.auditNum;
}
if (this.$route.query.childNum) {
this.params.childNum = this.$route.query.childNum;
}
if (this.$route.query.searchroomGroup) {
//JSON.parse(JSON.stringify(this.currentEditItemData))
this.params.searchroomGroup = JSON.parse(
decodeURIComponent(this.$route.query.searchroomGroup)
);
}
if (this.$route.query.RatePlanID) {
this.params.ratePlanID = this.$route.query.RatePlanID;
}
if (this.$route.query.hotelId) {
this.params.hotelId = this.$route.query.hotelId;
this.sureMsg.hotelId = this.$route.query.hotelId;
}
if (this.$route.query.Address) {
this.Address = this.$route.query.Address;
}
if (this.$route.query.HotelName) {
this.sureMsg.HotelName = this.$route.query.HotelName;
}
if (this.$route.query.room) {
this.params.RoomCount = this.$route.query.room;
mounted() {
this.getdidaBedType();
this.getdidaMealType();
this.initHotel();
}
};
if (this.params.searchroomGroup && this.params.searchroomGroup != null) {
this.sureMsg.GuestList = [];
this.params.searchroomGroup.forEach((item, index) => {
console.log("item", item);
var guestInfoList = [];
let allprople = item.numberOfAdults + item.numberOfChildren;
for (let i = 1; i <= allprople; i++) {
let obj = {
LastName: "",
FirstName: "",
Age: ""
};
guestInfoList.push(obj);
}
var obj = {
RoomNum: index + 1,
numberOfAdults: item.numberOfAdults,
numberOfChildren: item.numberOfChildren,
GuestInfo: guestInfoList
};
this.sureMsg.GuestList.push(obj);
console.log(" this.sureMsg.GuestList", this.sureMsg.GuestList);
});
}
},
mounted() {
this.getdidaBedType();
this.getdidaMealType();
this.initHotel();
}
};
</script>
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