Skip to content

S
SuperMan
Commit 7614830a authored by 吴春's avatar 吴春
Browse files
Options

1

parent ce0ae7a3
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 136 deletions
src/components/Hotel/DiDa/HotelDetails.vue
View file @ 7614830a
......@@ -226,6 +226,11 @@
padding-left: 24px;
padding-right: 24px;
}
.q-px-lg12 {
padding-left: 12px;
padding-right: 12px;
}
.q-pl-lg {
padding-left: 24px;
}
......@@ -298,8 +303,9 @@
overflow: hidden;
}
.Img-absolute {
height:13%;
position: absolute;
top: 0;
top: 87%;
left: 0;
right: 0;
bottom: 0;
......@@ -334,28 +340,7 @@
opacity: 0.9; /* 悬停时半透明 */
}
/* .table-list {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
border-collapse: collapse;
border-left:1px solid #ddd;
}
.table-list li {
min-width:100px;
white-space: nowrap;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 8px;
}
.table-list li:last-child {
margin-bottom: 0;
margin-top: 0;
margin-right: 0;
} */
.table-list tr, td {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
......@@ -383,6 +368,41 @@
border-bottom: 1px dotted #f90;
cursor: pointer;
}
.hotel-info-section__warning {
font-size: 12px;
line-height: 20px;
font-weight: 400;
color: #f90;
margin-left:15px;
}
/deep/.el-timeline-item__wrapper{
top:-16px !important;
}
/deep/.el-timeline .el-timeline-item .el-timeline-item__tail{
margin-top:8px !important;
}
/deep/.el-timeline-item{
padding-bottom:0px !important;
}
.PolicyDiv{
line-height:27px;
}
/deep/.PolicyDiv p{
margin-top:15px !important;
}
/deep/.DidaDescriptionDiv p:first-child{
margin-top:0px !important;
}
.Facilities{
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
width:200px;
float:left;
cursor: pointer;
}
</style>
<template>
<div class="q-py-lg">
......@@ -821,31 +841,98 @@
</template>
<template v-else>
<div class="q-my-md q-px-lg" style="text-align:center;">暂无数据</div>
<div class="q-my-md q-px-lg" style="text-align:center;margin-top:15px;">暂无数据</div>
</template>
</div>
<!-- 价格循环结束 -->
<div class="rounded-borders bg-white row items-center q-pb-md" style="margin-top:20px;width: 1300px;">
<div class="row q-px-lg q-mb-lg row justify-between " style="width:100%;">
<div style=" border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;" class="text-weight-bold">酒店详情</div>
<el-card style="width:100%;">
<div style=" border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;font-size:16px;" class="text-weight-bold"><b>酒店详情</b></div>
<template v-if="DidaDescription&&DidaDescription.length>0">
<div class="q-pt-sm" v-for="(item, index) in DidaDescription">
{{item.HotelDescription_CN}}
<div class="q-pt-sm q-px-lg12 PolicyDiv DidaDescriptionDiv" v-for="(itemDe, indexDe) in DidaDescription" style="line-height:27px;" v-html="itemDe.HotelDescription_CN">
</div>
</template>
<template v-else>
<div class="q-my-md q-px-lg" style="text-align:center;margin-top:15px;">暂无数据</div>
</template>
</el-card>
</div>
</div>
<!-- <div class="rounded-borders bg-white row items-center q-pb-md" style="margin-top:20px;width: 1300px;">
<div class="row q-px-lg q-mb-lg row justify-between" style="width:100%;">
<div style=" border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;">酒店详情</div>
<div class="q-pt-sm">我是详情哈哈哈哈哈</div>
<div class="rounded-borders bg-white row items-center q-pb-md" style="width: 1300px;">
<div class="row q-px-lg q-mb-lg row justify-between " style="width:100%;">
<el-card style="width:100%;">
<div style="border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;font-size:16px;" class="text-weight-bold"><b>酒店政策</b></div>
<template v-if="Policy&&Policy.length>0">
<div v-for="(itemp, indexp) in Policy" style="width:100%;" class="q-px-lg12" >
<div v-if="itemp.Type=='CheckInOut'" style="margin-top:15px;">
<el-timeline>
<el-timeline-item
v-for="(itempo, indexpo) in itemp.List"
:key="indexpo"
>
<div v-html="itempo.Description_CN" style="line-height:27px;"></div>
</el-timeline-item>
</el-timeline>
</div>
<template v-else>
<div class="q-pt-sm PolicyDiv" :style="indexp==1?'':'margin-top:15px'" v-if="itempo.Description_CN&&itempo.Description_CN.length>0" v-for="(itempo, indexpo) in itemp.List" v-html="itempo.Description_CN"> </div>
</template>
</div>
</template>
<template v-else>
<div class="q-my-md q-px-lg" style="text-align:center;margin-top:15px;">暂无数据</div>
</template>
</el-card>
</div>
</div> -->
</div>
<div class="rounded-borders bg-white row items-center q-pb-md" style="width: 1300px;">
<div class="row q-px-lg q-mb-lg row justify-between " style="width:100%;">
<el-card style="width:100%;padding-bottom:20px;">
<div style=" border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;font-size:16px;" class="text-weight-bold"><b>酒店设施</b></div>
<template v-if="Facilities&&Facilities.length>0">
<div class="q-pt-sm q-px-lg12 Facilities" v-for="(itemf, indexf) in Facilities" v-if="itemf.Description_CN&&itemf.Description_CN.length>0" style="line-height:27px;" >
<el-tooltip :content="itemf.Description_CN" placement="bottom" effect="light">
<span >{{itemf.Description_CN}}</span>
</el-tooltip>
</div>
</template>
<template v-else>
<div class="q-my-md q-px-lg" style="text-align:center;margin-top:15px;">暂无数据</div>
</template>
</el-card>
</div>
</div>
<div class="rounded-borders bg-white row items-center q-pb-md" style="width: 1300px;">
<div class="row q-px-lg q-mb-lg row justify-between " style="width:100%;">
<el-card style="width:100%;padding-bottom:20px;">
<div style=" border-bottom: 1px solid #ddd; width:100%;padding-bottom:8px;font-size:16px;" class="text-weight-bold"><b>房间设施</b><span class="hotel-info-section__warning">酒店的全部客房设施信息仅供参考，可能与您入住的房型不同而略有差异，请知晓</span></div>
<template v-if="RoomFacilities&&RoomFacilities.length>0">
<div class="q-pt-sm q-px-lg12 Facilities" v-for="(itemf, indexf) in RoomFacilities" v-if="itemf.Description_CN&&itemf.Description_CN.length>0" style="line-height:27px;" >
<el-tooltip :content="itemf.Description_CN" placement="bottom" effect="light">
<span >{{itemf.Description_CN}}</span>
</el-tooltip>
</div>
</template>
<template v-else>
<div class="q-my-md q-px-lg" style="text-align:center;margin-top:15px;">暂无数据</div>
</template>
</el-card>
</div>
</div>
</div>
</div>
</template>
......@@ -877,7 +964,10 @@ export default {
ScatMeaList: [] , //散客房间餐型
HotelMealTypes:[],//餐食类型
DidaHotelDetails:{},
DidaDescription:[],
DidaDescription:[],//酒店简介
Facilities:[],//酒店设施
RoomFacilities:[],//房间设施
Policy:[],//酒店政策
DidaHotelImg:[],
WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周一至周日
checkInWeek: "", //周一至周日
......@@ -1087,6 +1177,29 @@ export default {
}
}, null)
},
//获取酒店设施信息
getDidaFacilitiesList() {
this.apipost('dmc_post_GetDiDaHotelFacilitiesList', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.Facilities = res.data.data.HotelFacility;
this.RoomFacilities = res.data.data.RoomFacility;
}
}, null)
},
//获取酒店政策信息
getDidaPolicyList() {
this.apipost('dmc_post_GetDiDaHotelPolicyList', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.Policy = res.data.data;
console.log("this.Policy",this.Policy);
}
}, null)
},
//日期格式化
getformatDateStr(value) {
......@@ -1270,7 +1383,8 @@ export default {
this.getDiDaHotelImgList();
this.getDidaHotelDetails();
this.getDidaDescriptionList();
this.getDidaFacilitiesList();
this.getDidaPolicyList();
}
};
</script>
\ No newline at end of file
src/components/Hotel/DiDa/HotelList.vue
View file @ 7614830a
<style scoped>
.page_iisMg ._nav {
margin: 20px 0 0 0;
background-color: #f5f5f5;
.side-hotel-map__marker {
--map-marker-size: 24px;
display: inline-block;
color: #fff;
width: var(--map-marker-size);
height: var(--map-marker-size);
line-height: var(--map-marker-size);
border-radius: var(--map-marker-size);
border: 1px solid white;
background: #14808c;
text-align: center;
}
.page_iisMg ._nav li {
float: left;
font-size: 14px;
color: #666666;
padding: 15px 20px;
cursor: pointer;
position: relative;
background-color: #f1f1f1;
margin-right: 5px;
.hotelnamespan {
font-size: 18px;
font-weight: 600;
color: #606266;
height: 26px;
}
.page_iisMg ._nav li._active {
background-color: #ffffff;
color: #333333;
.q-pr-lg {
margin-right: 24px;
}
.page_iisMg ._nav li._active::after {
content: "";
width: 20px;
height: 3px;
background-color: #e95252;
display: inline-block;
position: absolute;
bottom: 0;
left: 38%;
.hotelDiv{
display: inline-flex; cursor: pointer;
}
.page_iisMg .query-box {
padding-bottom: 0;
.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;
}
.page_iisMg .iis_info_box {
padding-top: 15px;
.hotelname p{
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
/* border-bottom:1px solid #606266 ; */
}
.page_iisMg .el-date-editor .el-range-separator {
width: 9% !important;
.hotelname:hover{
/* text-decoration: underline; */
border-bottom:1px solid #606266 ;
}
.page_iisMg td span.status_Application{
color: #409EFF;
.hotel-card-img {
position: relative;
overflow: hidden;
width: 160px;
height: 150px;
margin-right: 16px;
}
.page_iisMg td span.status_Cancle{
color: #909399;
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
margin-bottom: 12px;
}
.page_iisMg td span.status_Passed{
color: #67C23A;
.d12p {
margin-top: 3px;
font-size: 12px;
color: #333;
cursor: pointer;
max-height: 52px;
line-height: 26px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.d12p:hover {
color: #999;
}
.pic_item {
position: relative;
height: 100%;
}
.page_iisMg td span.status_Rejected{
color: #F56C6C;
.pic_item:hover{
cursor: pointer;
}
.page_iisMg td span.status_owe{
color: #E6A23C;
.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-size: 12px;
line-height: 116%;
display: flex;
align-items: center;
flex: none;
order: 1;
align-self: stretch;
}
.page_iisMg td span.status_Recover{
color: #67C23A;
.ant-col {
max-width: 100%;
min-height: 1px;
position: absolute; /* 设置div为绝对定位 */
right: 0; /* 距离右边0像素 */
bottom: 0; /* 距离底部0像素 */
font-size:18px;
}
.page_iisMg .cursorpointer{
text-decoration: underline;
.nd-price-tag_lg, .nd-price-tag_lg .nd-price-tag__currency {
font-size: 16px;
line-height: 24px;
}
.page_iisMg ._icon_btn i{
width: 30px;
height: 30px;
display: inline-block;
color: white !important;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin-right: 10px;
cursor: pointer;
outline: none;
.nd-price-tag_lg .nd-price-tag__price {
font-size: 18px;
line-height: 26px;
font-weight: 700;
}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul{background-color: #F16C3C;}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul:hover{background-color: #e87c54}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul:active{background-color: #f76630}
.page_iisMg ._icon_btn i.icon-quxiao1{background-color: #E95252;}
.page_iisMg ._icon_btn i.icon-quxiao1:hover{background-color: #ea6d6d}
.page_iisMg ._icon_btn i.icon-quxiao1:active{background-color:#e42d2d}
.page_iisMg ._icon_btn i.icon-sousuo{background-color: #47BF8C;}
.page_iisMg ._icon_btn i.icon-sousuo:hover{background-color: #66bb97}
.page_iisMg ._icon_btn i.icon-sousuo:active{background-color: #35ab79}
._zhuihui{
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
color: white;
background-color: #e42d2d;
text-align: center;
line-height: 30px;
cursor: pointer;
margin-right: 10px
.nd-price-tag {
font-weight: 400;
color: #f32a4e;
}
.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;
}
._zhuihui.xiugai{
background-color: #409EFF;
.nd-reserve-btn:hover{
background-color:rgb(20 128 140 / 80%);
}
</style>
<template>
<div class="page_iisMg">
<div class="page_iisMg" >
<div class="query-box">
<div @keyup.enter="resetPageIndex()">
......@@ -149,22 +189,17 @@
</li>
</ul>
</div>
<table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0">
<tr>
<th >酒店名称
</th>
<th width="180">星级</th>
<th width="180">价格</th>
<th>主题</th>
<th>地址</th>
<!-- <th width="180">{{$t('system.table_operation')}}</th> -->
</tr>
<template v-for="(item, index) in dataList" v-loading="loading">
<tr>
<td class="cursorpointer" @click="goUrlT('HotelDetails', item.hotelId)" >
{{item.hotelName}}
</td>
<td> <el-rate
<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 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 " @click="goUrlT('HotelDetails', item.hotelId)" ><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
show-score
......@@ -172,14 +207,57 @@
:colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)"
>
</el-rate> </td>
<td ></td>
<td ></td>
<td >{{item.address}}</td>
</tr>
</template>
</table>
<div class="noDataNotice" v-if="dataList.length<1"><i class="iconfont icon-kong"></i> <p>没有找到你需要的数据</p></div>
</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>
</el-card>
</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">
<el-pagination
background
......@@ -216,6 +294,7 @@ export default {
EndDate:'',
pageIndex: 1,
pageSize: 10,
IsSelectImg:1,
},
productionDate: [],
dataList: [],
......
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