Skip to content

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

页面修改

parent ec4a0f81
Hide whitespace changes
Inline Side-by-side
Showing with 839 additions and 738 deletions
src/components/Hotel/singleProduct/components/TableOperation.vue
View file @ dc509f5d
<template>
<div>
<div class="header-Title">
<span class="header-name">{{ parameters.HotelName }}</span>
<div class="header-Title-right">
<div>
<i :class="{'el-icon-check':parameters.PriceIsBreakfast==1,
'el-icon-close':parameters.PriceIsBreakfast!=1}"
:style="{'color': parameters.PriceIsBreakfast==1?'#2196f3':'#f44336'}"></i>
<span>早餐</span>
</div>
<div>
<i :class="{'el-icon-check':parameters.PriceIsDinner==1,
'el-icon-close':parameters.PriceIsDinner!=1}"
:style="{'color': parameters.PriceIsDinner==1?'#2196f3':'#f44336'}"></i>
<span>晚餐</span>
</div>
<div>
<div class="header-Title">
<span class="header-name">{{ parameters.HotelName }}</span>
<div class="header-Title-right">
<div>
<i :class="{'el-icon-check':parameters.PriceIsBreakfast==1,
'el-icon-close':parameters.PriceIsBreakfast!=1}"
:style="{'color': parameters.PriceIsBreakfast==1?'#2196f3':'#f44336'}"></i>
<span>早餐</span>
</div>
</div>
<div class="TableOperation-time">
<div>
<div class="datetimerange">
{{joinHouse.dateRangeFormat}}
</div>
<i :class="{'el-icon-check':parameters.PriceIsDinner==1,
'el-icon-close':parameters.PriceIsDinner!=1}"
:style="{'color': parameters.PriceIsDinner==1?'#2196f3':'#f44336'}"></i>
<span>晚餐</span>
</div>
<div class="TableOperation-time-right">
共计
<span>{{joinHouse.days}}</span>
晚
</div>
</div>
<div class="TableOperation-time">
<div>
<div class="datetimerange">
{{joinHouse.dateRangeFormat}}
</div>
</div>
<div class="TableOperation-note">注意：以下计费与报价均是按照人数进行计费</div>
<div class="TableOperation-list" v-if="parameters.DetailList">
<template v-for="(item, index) in parameters.DetailList">
<el-row :gutter="20" :style="{'margin-bottom': (parameters.DetailList.length-1)==index?'0':'15px'}">
<el-col :span="3">
{{ item.RoomName }}
</el-col>
<el-col :span="9">
<span class="fz10 colorf44336"><!-- ¥ -->円</span>
<span class="din colorf44336">{{ item.UPriceFormat }}</span>
<span class="text-dark" style="font-size: 12px">/人</span>
</el-col>
<el-col :span="6">
<div><el-input-number v-model="item.PeopleNumber" :min="0" :step="1" step-strictly @change="calculateNum"></el-input-number></div>
</el-col>
<el-col :span="6">
<div>预计
<span>{{item.Number}}</span>
间房
</div>
</el-col>
</el-row>
</template>
<div class="TableOperation-time-right">
共计
<span>{{joinHouse.days}}</span>
晚
</div>
<div class="TableOperation-buttom">
<div>
<div class="buttom-left">
<div>
仅剩
<span>{{ onlyNum }}</span>
间
</div>
<div v-if="total > 0">
已选
<span>{{ sumPeople }}</span>
人
<span>{{ total }}</span>
间
</div>
</div>
<div class="TableOperation-note">注意：以下计费与报价均是按照人数进行计费</div>
<div class="TableOperation-list" v-if="parameters.DetailList">
<template v-for="(item, index) in parameters.DetailList">
<el-row :gutter="20" :style="{'margin-bottom': (parameters.DetailList.length-1)==index?'0':'15px'}">
<el-col :span="3">
{{ item.RoomName }}
</el-col>
<el-col :span="9">
<span class="fz10 colorf44336"
v-if="currentUserInfo&&currentUserInfo.RB_Group_id==2 && parameters.CurrencyName=='日元'"> 円</span>
<span class="din colorf44336">{{ item.UPriceFormat }}</span>
<span class="text-dark" style="font-size: 12px">
<template v-if="parameters.CurrencyName&& parameters.CurrencyName!='日元'">
{{ parameters.CurrencyName}}
</template>
/人</span>
</el-col>
<el-col :span="6">
<div>
<el-input-number v-model="item.PeopleNumber" :min="0" :step="1" step-strictly @change="calculateNum">
</el-input-number>
</div>
<div v-if="(total-onlyNum)>0" class="prompt">
超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅
</el-col>
<el-col :span="6">
<div>预计
<span>{{item.Number}}</span>
间房
</div>
</el-col>
</el-row>
</template>
</div>
<div class="TableOperation-buttom">
<div>
<div class="buttom-left">
<div>
仅剩
<span>{{ onlyNum }}</span>
间
</div>
<div v-if="total > 0">
已选
<span>{{ sumPeople }}</span>
人
<span>{{ total }}</span>
间
</div>
</div>
<div>
<button :class="{'normalBtn':sumPeople>0,'hollowFixedBtn':!sumPeople}" type="primary" @click="join">
<i class="el-icon-goods"></i>
暂存购物车
</button>
<div v-if="(total-onlyNum)>0" class="prompt">
超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅
</div>
</div>
<div>
<button :class="{'normalBtn':sumPeople>0,'hollowFixedBtn':!sumPeople}" type="primary" @click="join">
<i class="el-icon-goods"></i>
暂存购物车
</button>
</div>
</div>
</template>
<script>
export default {
props: {
editorType: {
type: Number,
require: false
},
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
</div>
</template>
<script>
export default {
props: {
editorType: {
type: Number,
require: false
},
data() {
return {
onlyNum: 0,
parameters: {
HotelId: '',
HotelName: '',
Date: '',
RemainingInventory: '',
total: 0,
Money: 0,
DetailList: [],
Remark: '',
TaxesPrice:0,
PriceInTangTax:0,
PriceIsBreakfast:0,
PriceIsDinner:0,
CurrencyName: ''
},
total: 0,
joinHouse: {
StartDate: '',
EndDate: '',
dateRange: [],
dateRangeFormat: '',
days: 1
},
sumPrice: 0,
sumPeople: 0,
cars: [],//购物车参数
HotelLength: 0,//购物车酒店数
editor: {},//预定订单对象
contrastCars: [],//对比缓存cars
};
HotelRow: {
type: Object,
require: false
},
watch: {
editorType: {
handler: function (val, oldVal) {
this.setList()
},
deep: true
hotelInfor: {
type: Object,
require: false
}
},
data() {
return {
onlyNum: 0,
parameters: {
HotelId: '',
HotelName: '',
Date: '',
RemainingInventory: '',
total: 0,
Money: 0,
DetailList: [],
Remark: '',
TaxesPrice: 0,
PriceInTangTax: 0,
PriceIsBreakfast: 0,
PriceIsDinner: 0,
CurrencyName: ''
},
HotelRow: {
handler: function (val, oldVal) {
this.HotelRow = val
this.setList()
},
deep: true
total: 0,
joinHouse: {
StartDate: '',
EndDate: '',
dateRange: [],
dateRangeFormat: '',
days: 1
},
hotelInfor: {
handler: function (val, oldVal) {
if(this.hotelInfor&&this.hotelInfor.RemainingInventory){
this.onlyNum = this.hotelInfor.RemainingInventory
}
if(this.HotelRow && this.hotelInfor){
this.setList()
}
},
deep: true
sumPrice: 0,
sumPeople: 0,
cars: [], //购物车参数
HotelLength: 0, //购物车酒店数
editor: {}, //预定订单对象
contrastCars: [], //对比缓存cars
currentUserInfo: {}, //当前人员
};
},
watch: {
editorType: {
handler: function (val, oldVal) {
this.setList()
},
parameters: {
handler: function (val, oldVal) {
this.calculateNum()
},
deep: true
}
deep: true
},
created() {
HotelRow: {
handler: function (val, oldVal) {
this.HotelRow = val
this.setList()
},
deep: true
},
mounted() {
if(this.hotelInfor&&this.hotelInfor.RemainingInventory){
hotelInfor: {
handler: function (val, oldVal) {
if (this.hotelInfor && this.hotelInfor.RemainingInventory) {
this.onlyNum = this.hotelInfor.RemainingInventory
}
if(this.HotelRow && this.hotelInfor){
}
if (this.HotelRow && this.hotelInfor) {
this.setList()
}
},
methods: {
changePeople(val){
setTimeout(()=>{
this.calculateNum()
},50)
}
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.parameters.DetailList.forEach(item => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
this.total += item.Number
this.sumPeople += parseInt(item.PeopleNumber)
})
deep: true
},
parameters: {
handler: function (val, oldVal) {
this.calculateNum()
},
join(){
this.cars = []
if(JSON.parse(localStorage.getItem('cars'))){
this.cars = JSON.parse(localStorage.getItem('cars'))
}
if(!this.sumPeople) return this.Error('请加入人数');
const temp= JSON.parse(JSON.stringify(this.parameters))
temp.Money=0
temp.Total=this.total
temp.SumPeople = this.sumPeople
temp.DetailList = temp.DetailList.filter(((x)=>x.PeopleNumber>0))
temp.DetailList.forEach((x) => {
temp.Money+=(x.PeopleNumber*(x.Unit_Price+x.TaxesPrice+x.PriceInTangTax))
});
let existsIndex = this.cars.findIndex((x)=>x.Date == temp.Date)
let exists = existsIndex==-1?null:this.cars[existsIndex]
if(exists){
let existsHotel = exists.Hotels.findIndex((h)=>h.HotelId==temp.HotelId)
if(existsHotel!=-1) exists.Hotels.splice(existsHotel,1)
}else{
exists = {
Date:temp.Date,
CurrencyName: this.parameters.CurrencyName,
Hotels:[]
}
this.cars.push(exists)
}
exists.Hotels.push(temp)
this.cars.sort((x,y)=>{
return new Date(x.Date).getTime()-new Date(y.Date).getTime()
})
this.HotelLength = this.cars.length
deep: true
}
},
created() {
this.currentUserInfo = this.getLocalStorage();
},
mounted() {
if (this.hotelInfor && this.hotelInfor.RemainingInventory) {
this.onlyNum = this.hotelInfor.RemainingInventory
}
if (this.HotelRow && this.hotelInfor) {
this.setList()
}
},
methods: {
changePeople(val) {
setTimeout(() => {
this.calculateNum()
}, 50)
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.parameters.DetailList.forEach(item => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
this.total += item.Number
this.sumPeople += parseInt(item.PeopleNumber)
})
},
join() {
this.cars = []
if (JSON.parse(localStorage.getItem('cars'))) {
this.cars = JSON.parse(localStorage.getItem('cars'))
}
if (!this.sumPeople) return this.Error('请加入人数');
const temp = JSON.parse(JSON.stringify(this.parameters))
temp.Money = 0
temp.Total = this.total
temp.SumPeople = this.sumPeople
temp.DetailList = temp.DetailList.filter(((x) => x.PeopleNumber > 0))
temp.DetailList.forEach((x) => {
temp.Money += (x.PeopleNumber * (x.Unit_Price + x.TaxesPrice + x.PriceInTangTax))
});
let existsIndex = this.cars.findIndex((x) => x.Date == temp.Date)
let exists = existsIndex == -1 ? null : this.cars[existsIndex]
if (exists) {
let existsHotel = exists.Hotels.findIndex((h) => h.HotelId == temp.HotelId)
if (existsHotel != -1) exists.Hotels.splice(existsHotel, 1)
} else {
exists = {
Date: temp.Date,
CurrencyName: this.parameters.CurrencyName,
Hotels: []
}
this.cars.push(exists)
}
exists.Hotels.push(temp)
this.cars.sort((x, y) => {
return new Date(x.Date).getTime() - new Date(y.Date).getTime()
})
this.HotelLength = this.cars.length
localStorage.setItem("cars",JSON.stringify(this.cars))
localStorage.setItem("HotelLength",this.HotelLength)
this.Success('加入购物车成功');
this.editor={}
this.$emit('close')
},
// 组装可选房间
setList() {
this.editor = JSON.parse(localStorage.getItem('editor'))
this.parameters.DetailList = []
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = ['标准间', '大床房', '自然单间', '三人间', '司机间']
let tips = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
let limitGuestNum = [2, 1, 1, 3, 1]
let tempPrice = this.hotelInfor.PriceList[0]
let hotel = this.hotelInfor
this.parameters.HotelId = this.HotelRow.HotelId
this.parameters.HotelName = this.HotelRow.HotelName
this.parameters.Date = hotel.DateStr
this.parameters.RemainingInventory = hotel.RemainingInventory
this.parameters.TaxesPrice = tempPrice.TaxesPrice
this.parameters.PriceInTangTax= tempPrice.PriceInTangTax
this.parameters.PriceIsBreakfast = tempPrice.PriceIsBreakfast
this.parameters.PriceIsDinner = tempPrice.PriceIsDinner
this.parameters.CurrencyName = tempPrice.CurrencyName
localStorage.setItem("cars", JSON.stringify(this.cars))
localStorage.setItem("HotelLength", this.HotelLength)
this.Success('加入购物车成功');
this.editor = {}
this.$emit('close')
},
// 组装可选房间
setList() {
this.editor = JSON.parse(localStorage.getItem('editor'))
this.parameters.DetailList = []
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = ['标准间', '大床房', '自然单间', '三人间', '司机间']
let tips = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
let limitGuestNum = [2, 1, 1, 3, 1]
let tempPrice = this.hotelInfor.PriceList[0]
let hotel = this.hotelInfor
this.parameters.HotelId = this.HotelRow.HotelId
this.parameters.HotelName = this.HotelRow.HotelName
this.parameters.Date = hotel.DateStr
this.parameters.RemainingInventory = hotel.RemainingInventory
this.parameters.TaxesPrice = tempPrice.TaxesPrice
this.parameters.PriceInTangTax = tempPrice.PriceInTangTax
this.parameters.PriceIsBreakfast = tempPrice.PriceIsBreakfast
this.parameters.PriceIsDinner = tempPrice.PriceIsDinner
this.parameters.CurrencyName = tempPrice.CurrencyName
this.setDateRange()
roomTyps.forEach((x, i) => {
if (tempPrice[x] > 0) {
let dataMsg = {
HotelId: this.HotelRow.HotelId,
Date: hotel.DateStr,
RoomType: i + 1,
RoomName: roomLangs[i],
Unit_Price: tempPrice[x],
UPriceFormat: this.moneyFormat(tempPrice[x]),
LimitGuestNum: limitGuestNum[i],
Tips: tips[i],
Number: 0,
PeopleNumber: 0,
Destription: '',
TaxesPrice: tempPrice.TaxesPrice,
PriceInTangTax: tempPrice.PriceInTangTax,
HotelName: this.HotelRow.HotelName,
}
this.parameters.DetailList.push(dataMsg)
}
})
this.setInjectHandler()
},
setDateRange() {
if(!this.editorType&&!this.editor&&this.parameters.Date){
this.joinHouse.StartDate = this.parameters.Date
}else if(this.editorType&&this.editor&&this.editor.Date){
this.joinHouse.StartDate = this.editor.Date
this.setDateRange()
roomTyps.forEach((x, i) => {
if (tempPrice[x] > 0) {
let dataMsg = {
HotelId: this.HotelRow.HotelId,
Date: hotel.DateStr,
RoomType: i + 1,
RoomName: roomLangs[i],
Unit_Price: tempPrice[x],
UPriceFormat: this.moneyFormat(tempPrice[x]),
LimitGuestNum: limitGuestNum[i],
Tips: tips[i],
Number: 0,
PeopleNumber: 0,
Destription: '',
TaxesPrice: tempPrice.TaxesPrice,
PriceInTangTax: tempPrice.PriceInTangTax,
HotelName: this.HotelRow.HotelName,
}
this.joinHouse.EndDate = this.getBeforeDate(-1, this.joinHouse.StartDate)
this.joinHouse.dateRangeFormat = `${this.joinHouse.StartDate} 至 ${this.joinHouse.EndDate} `
this.joinHouse.days = 1
},
setInjectHandler(){
if(!this.editorType&&!this.editor) return
this.parameters.DetailList.forEach(item=>{
this.editor.DetailList.forEach(x=>{
if(item.RoomName==x.RoomName&&item.UPriceFormat==x.UPriceFormat){
item.PeopleNumber = x.PeopleNumber
item.Number = x.Number
}
})
})
this.calculateNum()
this.setDateRange()
this.parameters.DetailList.push(dataMsg)
}
})
this.setInjectHandler()
},
setDateRange() {
if (!this.editorType && !this.editor && this.parameters.Date) {
this.joinHouse.StartDate = this.parameters.Date
} else if (this.editorType && this.editor && this.editor.Date) {
this.joinHouse.StartDate = this.editor.Date
}
this.joinHouse.EndDate = this.getBeforeDate(-1, this.joinHouse.StartDate)
this.joinHouse.dateRangeFormat = `${this.joinHouse.StartDate} 至 ${this.joinHouse.EndDate} `
this.joinHouse.days = 1
},
setInjectHandler() {
if (!this.editorType && !this.editor) return
this.parameters.DetailList.forEach(item => {
this.editor.DetailList.forEach(x => {
if (item.RoomName == x.RoomName && item.UPriceFormat == x.UPriceFormat) {
item.PeopleNumber = x.PeopleNumber
item.Number = x.Number
}
})
})
this.calculateNum()
this.setDateRange()
}
};
</script>
<style scoped>
.header-name{
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 18px;
color: #009ef7;
}
.header-Title,
.header-Title-right,
.TableOperation-time,
.TableOperation-buttom{
display: flex;
justify-content: space-between;
}
.header-Title-right>div{
margin-left: 15px;
}
/deep/.TableOperation-time .el-input__inner{
background-color: rgba(237,237,237,.1);
}
.TableOperation-time{
border-radius: 10px;
background: #FFFDE7;
margin: 15px 0;
padding: 10px;
align-items: center;
}
.TableOperation-time-right span{
color: #f57f17;
font-weight: bold;
}
.TableOperation-note{
color: #f1416c;
}
.TableOperation-list{
background: #fafafa;
padding: 15px;
border-radius: 10px;
margin: 10px 0;
}
.TableOperation-list .el-row{
display: flex;
align-items: center;
}
.TableOperation-list .el-row .el-col:last-child{
text-align: center;
}
.TableOperation-list .el-row .el-col:last-child span{
color: #f57f17 ;
font-weight: bold;
}
.TableOperation-buttom{
align-items: center;
margin-top: 25px;
}
.buttom-left{
display: flex;
color: #9e9e9e;
}
.buttom-left>div:first-child{
margin-right: 10px;
}
.buttom-left>div:first-child span{
color: #ff6d00;
}
.buttom-left>div>span{
color: #f44336;
}
.datetimerange{
border: 1px solid #eeeeee;
padding: 8px 15px;
background: rgba(237,237,237,.1);
border-radius: 3px;
}
.colorf44336{
color: #f44336;
}
.fz10{
font-size: 10px;
}
.din{
font-weight: bold;
}
.text-dark{
color: #181c32;
font-size: 12px;
}
.prompt{
background: #fff3e0;
color: #e65100;
padding: 5px 8px;
margin-top: 8px;
border-radius: 5px;
font-size: 12px;
}
</style>
\ No newline at end of file
};
</script>
<style scoped>
.header-name {
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 18px;
color: #009ef7;
}
.header-Title,
.header-Title-right,
.TableOperation-time,
.TableOperation-buttom {
display: flex;
justify-content: space-between;
}
.header-Title-right>div {
margin-left: 15px;
}
/deep/.TableOperation-time .el-input__inner {
background-color: rgba(237, 237, 237, .1);
}
.TableOperation-time {
border-radius: 10px;
background: #FFFDE7;
margin: 15px 0;
padding: 10px;
align-items: center;
}
.TableOperation-time-right span {
color: #f57f17;
font-weight: bold;
}
.TableOperation-note {
color: #f1416c;
}
.TableOperation-list {
background: #fafafa;
padding: 15px;
border-radius: 10px;
margin: 10px 0;
}
.TableOperation-list .el-row {
display: flex;
align-items: center;
}
.TableOperation-list .el-row .el-col:last-child {
text-align: center;
}
.TableOperation-list .el-row .el-col:last-child span {
color: #f57f17;
font-weight: bold;
}
.TableOperation-buttom {
align-items: center;
margin-top: 25px;
}
.buttom-left {
display: flex;
color: #9e9e9e;
}
.buttom-left>div:first-child {
margin-right: 10px;
}
.buttom-left>div:first-child span {
color: #ff6d00;
}
.buttom-left>div>span {
color: #f44336;
}
.datetimerange {
border: 1px solid #eeeeee;
padding: 8px 15px;
background: rgba(237, 237, 237, .1);
border-radius: 3px;
}
.colorf44336 {
color: #f44336;
}
.fz10 {
font-size: 10px;
}
.din {
font-weight: bold;
}
.text-dark {
color: #181c32;
font-size: 12px;
}
.prompt {
background: #fff3e0;
color: #e65100;
padding: 5px 8px;
margin-top: 8px;
border-radius: 5px;
font-size: 12px;
}
</style>
src/components/Hotel/singleProduct/components/hotelDetails.vue
View file @ dc509f5d
<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" fit="cover">
</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" fit="cover">
</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">{{ images.length - 3 }}</span>
</div>
<el-image
style="width: 100%; height: 100%"
:src="images[2]"
:preview-src-list="images" ref="images" fit="cover">
</el-image>
</div>
</div>
</div>
<div class="hotelDetails-Map">
<!-- <Map :obj="h"></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-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>
<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>
<el-image style="width: 100%; height: 100%" :src="images[0]" :preview-src-list="images" fit="cover">
</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" fit="cover">
</el-image>
</div>
<div class="hotelDetails-prompt prompt">
<p>溫馨提醒</p>
<div>{{ h.WarmTip }}</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">{{ images.length - 3 }}</span>
</div>
<el-image style="width: 100%; height: 100%" :src="images[2]" :preview-src-list="images" ref="images"
fit="cover">
</el-image>
</div>
</div>
</div>
</div>
<div class="hotelDetails-Map">
<!-- <Map :obj="h"></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>
</template>
<script>
import Map from "../../../public/echoMap.vue";
export default {
components: { Map },
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
};
</div>
</template>
<script>
import Map from "../../../public/echoMap.vue";
export default {
components: {
Map
},
props: {
hotelId: {
type: Number,
require: false
},
watch: {
hotelId: {
handler: function (val, oldVal) {
this.initHotel()
},
deep: true
},
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()
},
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);
},
methods: {
initMap(lng,lat,name) {
if(this.map){
this.map.clearOverlays()
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
})
}
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{
width: 60%;
}
.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: 100%;
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;
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
},
}
</style>
\ No newline at end of file
};
</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 {
width: 60%;
}
.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: 100%;
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>
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