Skip to content

S
SuperMan
Commit e7419af5 authored by youjie's avatar youjie
Browse files
Options

no message

parent f50467e2
Show whitespace changes
Inline Side-by-side
Showing with 366 additions and 0 deletions
src/components/Hotel/singleProduct/components/hotelDetails.vue 0 → 100644
View file @ e7419af5
<template>
<div>
<div class="hotelDetails-header">
<span>{{ h.Name }}</span>
<el-rate v-model="h.Star" disabled text-color="#ff9900"></el-rate>
</div>
<div class="hotelDetails-content">
<div class="hotelDetails-infor">
<div>
<i class="el-icon-location"></i>
<p><span>{{ h.Address }}</span></p>
</div>
<div>
<i class="el-icon-phone"></i>
<p><span>座机:</span><span>{{ h.Tel }}</span></p>
<p><span>傳真:</span><span>{{ h.Fax == '' ? '无' : h.Fax }}</span></p>
<p><span>官网:</span><a :href="h.URL" target="_blank">{{ h.URL }}</a></p>
</div>
</div>
<div class="hotelDetails-ImgMap">
<div class="hotelDetails-Img">
<div style="position: relative;">
<div v-if="h.ChainBrand" class="Img-absolute">
<div class="Img-absolute-box">
<div>品牌</div>
<div>{{ h.ChainBrand }}</div>
</div>
</div>
<el-image
style="width: 100%; height: 100%"
:src="images[0]"
:preview-src-list="images">
</el-image>
</div>
<div v-if="images.length>1">
<div class="Img-right-box" :style="{'height':images.length==2?'100%':'50%'}">
<el-image
style="width: 100%; height: 100%"
:src="images[1]"
:preview-src-list="images">
</el-image>
</div>
<div class="Img-right-box" v-if="images.length>2">
<div class="Img-right-num" v-if="images.length>3" @click="showImageHandler">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
</div>
<el-image
style="width: 100%; height: 100%"
:src="images[2]"
:preview-src-list="images" ref="images">
</el-image>
</div>
</div>
</div>
<div class="hotelDetails-Map">
<div :style="{height:'100%',width:'100%'}" id="mapContainer"></div>
</div>
</div>
<div class="hotelDetails-prompt">
<p>酒店详情</p>
<div>{{ h.Descriptions }}</div>
</div>
<div class="hotelDetails-service">
<div class="service"><span>入汤税</span><div>{{ moneyFormat(h.InTangTax) }}</div></div>
<div class="service"><span>城市税</span><div>{{ moneyFormat(h.CityTax) }}</div></div>
<div class="service"><span>停车场</span><div><p>{{ h.IsHavearking == 0 ? '无' : '有' }}</p><li>{{ h.ParkFee == 0 ? '免費' : moneyFormat(h.ParkFee) + '元' }}</li></div></div>
<div class="service"><span>预约截止天数</span><div>提前{{ h.DieLine }}天</div></div>
<div class="service"><span>是否含餐</span><div><p>{{ !h.isDinner ? '无' : '有' }}</p><li v-if="h.isDinner" v-for="x in h.Dinners">{{ x.Name }}</li></div></div>
<div class="service"><span>酒店类型</span><div><p>{{ h.HotelTypeInfo?h.HotelTypeInfo.Name:'-' }}</p></div></div>
<div class="service"><span>设施服务</span><div><li v-for="(x, i) in h.CheckHotelService">{{ x.Content }}</li></div></div>
</div>
<div class="hotelDetails-prompt prompt">
<p>溫馨提醒</p>
<div>{{ h.WarmTip }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
hotelId: {
type: Number,
require: false
},
},
data() {
return {
map: null,
loading: true,
h: {},
dinners: [
{Id:1,Name:'早餐'},
{Id:2,Name:'无午'},
{Id:3,Name:'晚餐'},
],
hotelTyps: [
{Id:1,Name:'商务酒店'},
{Id:2,Name:'豪华酒店'},
{Id:3,Name:'溫泉酒店'},
{Id:4,Name:'海滩度假酒店'},
],
images: [],
currentImage: '',
center: null
};
},
watch: {
hotelId: {
handler: function (val, oldVal) {
this.initHotel()
},
deep: true
},
},
created() {
},
mounted() {
this.initHotel()
},
methods: {
initMap(lng,lat,name) {
if(this.map){
this.map.clearOverlays()
}
var that = this;
this.map = new BMap.Map("mapContainer", {enableMapClick:false,
minZoom: 3,
maxZoom: 50,
}) //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
var point = new BMap.Point(lng,lat);
this.map.centerAndZoom(new BMap.Point(lng, lat),15)
this.map.enableScrollWheelZoom(false)
var marker = new BMap.Marker(point); //标记点
var label = new BMap.Label(name,{offset:new BMap.Size(0,28)});//标签
label.setStyle({
color: "#FFF",
fontSize: "10px",
height: "24px",
lineHeight: "20px",
padding: "2px 5px",
border: "1px solid rgba(230, 0, 0, 0.7)",
background: "rgba(230, 0, 0, 0.7)",
fontWeight: "bold",
transform: 'translateX(-50%)',
fontFamily: "微软雅黑"
})
marker.setLabel(label)
this.map.addOverlay(marker);
},
initHotel() {
this.loading = true
this.apipost("hotel_post_GetAll", {
hotelID: this.hotelId
},r=> {
if (r.data.resultCode == 1) {
let temp = r.data.data
temp.isDinner = temp.UseDinnerType && temp.UseDinnerType != ''
if (temp.isDinner) {
temp.Dinners = this.dinners.filter((x) => {
return temp.UseDinnerType.split(',').indexOf(x.Id.toString()) != -1
})
}
temp.HotelTypeInfo = this.hotelTyps.find((x) => x.Id == temp.HotelType)
let tempService = JSON.parse(temp.FacilityServices)[0]?JSON.parse(temp.FacilityServices)[0]: {}
temp.CheckHotelService = tempService.list.filter((x) => tempService.checked.indexOf(x.ID) != -1)
this.h = temp
this.h.List.forEach((x) => {
this.images.push(`http://imgfile.oytour.com${x.Path}`)
})
this.initMap(this.h.Lng, this.h.Lat, this.h.Name)
}else{
this.Error(r.data.message);
}
this.loading = false
},null)
},
showImageHandler(){
this.$refs.images.showViewer = true
},
}
};
</script>
<style scoped>
.hotelDetails-header{
display: flex;
align-items: center;
}
.hotelDetails-header span{
font-size: 18px;
font-weight: bold;
margin-right: 10px;
color: black;
}
.hotelDetails-content{
}
.hotelDetails-infor{
padding: 20px 0;
}
.hotelDetails-infor div{
display: flex;
align-items: center;
}
.hotelDetails-infor>div:first-child{
margin-bottom: 5px;
}
.hotelDetails-infor div i{
color: #BDBDBD;
margin-right: 5px;
}
.hotelDetails-infor div p{
margin-right: 10px;
}
.hotelDetails-infor div p span{
font-size: 13px;
color: black;
}
.hotelDetails-infor div p span:nth-child(2),.hotelDetails-infor div p a{
color: #2196F3;
margin-left: 5px;
}
.hotelDetails-infor div p a{
cursor: pointer;
text-decoration:underline
}
.hotelDetails-ImgMap{
display: flex;
justify-content: space-between;
}
.hotelDetails-Img,.hotelDetails-Map{
flex: 1;
flex-shrink: 0;
}
.hotelDetails-Map{
margin-left: 10px;
}
.hotelDetails-Img{
display: flex;
/* overflow: hidden; */
}
.hotelDetails-Img>div:first-child{
flex-grow: 1;
}
.hotelDetails-Img>div:nth-child(2){
width: 50%;
margin-left: 10px;
display: flex;
flex-direction: column;
}
.Img-right-box:nth-child(2){
margin-top: 8px;
}
.Img-right-box{
height: 50%;
position: relative;
overflow: hidden;
}
.Img-right-num{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,.5);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.Img-right-num span{
color: #ffffff;
font-size: 23px;
font-weight: bold;
}
.Img-right-num span:first-child{
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.hotelDetails-prompt{
margin: 20px 0;
border-radius: 3px;
background: #E1F5FE;
padding: 10px;
}
.hotelDetails-prompt p{
font-weight: 500;
font-size: 13px;
padding: 0 0 10px 0;
}
.hotelDetails-prompt div{
color: #5E5E5E;
font-size: 12px;
line-height: 25px;
}
.hotelDetails-prompt.prompt{
background: #FFF3E0;
border: 1px dashed #FFA500;
}
.hotelDetails-service{
padding: 0 15px;
}
.service{
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.service span{
color: #A8ABBC;
font-size: 12px;
width: 120px;
flex-shrink: 0;
}
.service div{
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
color: black;
}
.service div p{
margin-right: 15px;
}
.service div li{
list-style-type: disc;
list-style-position: outside;
white-space: nowrap;
margin-right: 15px;
}
.Img-absolute{
position: absolute;
padding: 5px;
bottom: unset;
z-index: 1;
border-bottom-right-radius: 4px;
left: 0;
top: 0;
font-size: 12px;
background: #ffffff;
}
.Img-absolute-box{
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.Img-absolute-box div:first-child{
padding: 0 4px; font-size: 12px;background: black;color: white;
}
.Img-absolute-box div:last-child{
padding: 0 4px; font-size: 12px; background: #f0bd86;color: black;
}
</style>
\ No newline at end of file
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