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