Skip to content

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

11

parent 00eb1e81
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 368 deletions
src/components/busManagement/BookAcar/components/Details.vue
View file @ 1c65620a
<template> <template>
<div v-if="t"> <div v-if="t">
<div class="hotelDetails-header"> <div class="hotelDetails-header">
<span>{{ t.Name }}</span> <span>{{ t.Name }}</span>
</div> </div>
<div class="hotelDetails-content"> <div class="hotelDetails-content">
<div class="hotelDetails-infor"> <div class="hotelDetails-infor">
<div> <div>
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
<p v-if="t.CityList2&&t.CityList2.length>0&&t.CityList2[0]"><span>{{t.CityList2[0].CountryName }}{{t.CityList2[0].CityName}}</span></p> <p v-if="t.CityList2&&t.CityList2.length>0&&t.CityList2[0]">
</div> <span>{{t.CityList2[0].CountryName }}{{t.CityList2[0].CityName}}</span></p>
</div> </div>
<div class="hotelDetails-ImgMap"> </div>
<div class="hotelDetails-Img"> <div class="hotelDetails-ImgMap">
<div style="position: relative;"> <div class="hotelDetails-Img">
<el-image <div style="position: relative;">
v-if="images.length>0" <el-image v-if="images.length>0" style="width: 100%; height: 100%" :src="images[0]"
style="width: 100%; height: 100%" :preview-src-list="images" fit="cover">
:src="images[0]" <div slot="placeholder" class="image-slot">
:preview-src-list="images" fit="cover"> {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
<div slot="placeholder" class="image-slot"> </div>
{{$t('objFill.jiazazhong')}}<span class="dot">...</span> <div slot="error" class="image-slot">
</div> <i class="el-icon-picture-outline"></i>
<div slot="error" class="image-slot"> </div>
<i class="el-icon-picture-outline"></i> </el-image>
</div> </div>
</el-image> <div v-if="images.length>1">
</div> <div class="Img-right-box" :style="{'height':images.length==2?'100%':'50%'}">
<div v-if="images.length>1"> <el-image style="width: 100%; height: 100%" :src="images[1]" :preview-src-list="images" fit="cover">
<div class="Img-right-box" :style="{'height':images.length==2?'100%':'50%'}"> <div slot="placeholder" class="image-slot">
<el-image {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
style="width: 100%; height: 100%"
:src="images[1]"
:preview-src-list="images" fit="cover">
<div slot="placeholder" class="image-slot">
{{$t('objFill.jiazazhong')}}<span class="dot">...</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</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">
<div slot="placeholder" class="image-slot">
{{$t('objFill.jiazazhong')}}<span class="dot">...</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
</div> </div>
<div class="hotelDetails-Map"> <div slot="error" class="image-slot">
<Map :obj="ObjMap"></Map> <i class="el-icon-picture-outline"></i>
<!-- <div :style="{height:'100%',width:'100%'}" :id="`mapContainer_${detailsObj.Id}`"></div> -->
</div> </div>
</el-image>
</div> </div>
<div class="hotelDetails-prompt"> <div class="Img-right-box" v-if="images.length>2">
<p>{{$t('objFill.chanpinxq')}}</p> <div class="Img-right-num" v-if="images.length>3" @click="showImageHandler">
<div>{{ t.Description }}</div> <span class="fz20 text-weight-bold">+</span>
</div> <span class="text-h5 text-weight-bold">{{ images.length - 3 }}</span>
<div class="hotelDetails-service"> </div>
<div class="service"><span class="width120">{{$t('objFill.chanpinjiesao')}}</span><div>{{t.Introduce?t.Introduce:'-'}}</div></div> <el-image style="width: 100%; height: 100%" :src="images[2]" :preview-src-list="images" ref="images"
<div class="service" v-if="t.TravelHours"><span class="width120">{{$t('objFill.baocheshichang')}}</span><div>{{t.TravelHours?t.TravelHours:'-'}}</div></div> fit="cover">
<div class="service"><span class="width120">{{$t('objFill.feiyongbaohan')}}</span> <div slot="placeholder" class="image-slot">
<div> {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
<template v-if="t.PriceIncludeList">
<el-tag v-for="s in t.PriceIncludeList" :key="s" size="mini"
style="margin-right: 10px;text-align: center;" >{{s}}</el-tag>
</template>
<template v-else>-</template>
</div> </div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div> </div>
<div class="service"><span class="width120">{{$t('objFill.feiyongbubaohan')}}</span> </el-image>
<div>
<template v-if="t.PriceNotIncludeList">
<el-tag v-for="s in t.PriceNotIncludeList" :key="s" size="mini"
style="margin-right: 10px;text-align: center;" >{{s}}</el-tag>
</template>
<template v-else>-</template>
</div>
</div>
<div class="service"><span class="width120">{{$t('objFill.ruheshiyong')}}</span><div>{{t.HowUse?t.HowUse:'-'}}</div></div>
<div class="service"><span class="width120">{{$t('objFill.quxiaozhengce')}}</span><div>{{t.CancelPolicy?t.CancelPolicy:'-'}}</div></div>
</div>
<div class="hotelDetails-prompt prompt">
<p>{{$t('objFill.yudinxuzhi')}}</p>
<div>{{ t.BuyNotes }}</div>
</div> </div>
</div> </div>
</div>
<div class="hotelDetails-Map">
<Map :obj="ObjMap"></Map>
<!-- <div :style="{height:'100%',width:'100%'}" :id="`mapContainer_${detailsObj.Id}`"></div> -->
</div>
</div>
<div class="hotelDetails-prompt">
<p>{{$t('objFill.chanpinxq')}}</p>
<div>{{ t.Description }}</div>
</div>
<div class="hotelDetails-service">
<div class="service"><span class="width120">{{$t('objFill.chanpinjiesao')}}</span>
<div>{{t.Introduce?t.Introduce:'-'}}</div>
</div>
<div class="service" v-if="t.TravelHours"><span class="width120">{{$t('objFill.baocheshichang')}}</span>
<div>{{t.TravelHours?t.TravelHours:'-'}}</div>
</div>
<div class="service"><span class="width120">{{$t('objFill.feiyongbaohan')}}</span>
<div>
<template v-if="t.PriceIncludeList">
<el-tag v-for="s in t.PriceIncludeList" :key="s" size="mini"
style="margin-right: 10px;text-align: center;">{{s}}</el-tag>
</template>
<template v-else>-</template>
</div>
</div>
<div class="service"><span class="width120">{{$t('objFill.feiyongbubaohan')}}</span>
<div>
<template v-if="t.PriceNotIncludeList">
<el-tag v-for="s in t.PriceNotIncludeList" :key="s" size="mini"
style="margin-right: 10px;text-align: center;">{{s}}</el-tag>
</template>
<template v-else>-</template>
</div>
</div>
<div class="service"><span class="width120">{{$t('objFill.ruheshiyong')}}</span>
<div>{{t.HowUse?t.HowUse:'-'}}</div>
</div>
<div class="service"><span class="width120">{{$t('objFill.quxiaozhengce')}}</span>
<div>{{t.CancelPolicy?t.CancelPolicy:'-'}}</div>
</div>
</div>
<div class="hotelDetails-prompt prompt">
<p>{{$t('objFill.yudinxuzhi')}}</p>
<div>{{ t.BuyNotes }}</div>
</div>
</div> </div>
</template>
<script> </div>
import Map from "../../../public/echoMap.vue"; </template>
export default { <script>
props: ['detailsObj'], import Map from "../../../public/echoMap.vue";
components: { Map }, export default {
data() { props: ['detailsObj'],
return { components: {
map: null, Map
loading: true, },
t: {}, data() {
images: [], return {
center: null, map: null,
ObjMap:{ loading: true,
lng:'', t: {},
lat:'', images: [],
Range: '', center: null,
Address: '' ObjMap: {
} lng: '',
}; lat: '',
}, Range: '',
watch: { Address: ''
detailsObj: { }
handler: function (val, oldVal) { };
this.getInfo() },
}, watch: {
deep: true detailsObj: {
handler: function (val, oldVal) {
this.getInfo()
}, },
deep: true
}, },
created() { },
created() {},
mounted() {
if (this.detailsObj) {
this.getInfo()
}
},
methods: {
getInfo() {
let msg = {
ProductId: this.detailsObj.Id,
};
this.apipost(
"CarSingle_post_GetSaleCarSingleProductInfo",
msg,
res => {
this.t = res.data.data
this.images = this.t.ImageList
this.ObjMap = {
lng: this.t.PlaceList[0].Lng,
lat: this.t.PlaceList[0].Lat,
Range: Number(this.t.PlaceList[0].Range),
Address: this.t.PlaceList[0].Address
}
// this.initMap(this.t.PlaceList[0].Lng,this.t.PlaceList[0].Lat,this.t.Name)
},
err => {}
);
}, },
mounted() { initMap(lng, lat, name) {
if(this.detailsObj){ if (this.map) {
this.getInfo() this.map.clearOverlays()
} }
var that = this;
this.map = new BMap.Map(`mapContainer_${this.detailsObj.Id}`, {
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);
},
showImageHandler() {
this.$refs.images.showViewer = true
}, },
methods: {
getInfo(){
let msg = {
ProductId: this.detailsObj.Id,
};
this.apipost(
"CarSingle_post_GetSaleCarSingleProductInfo",
msg,
res => {
this.t = res.data.data
this.images = this.t.ImageList
this.ObjMap = {
lng:this.t.PlaceList[0].Lng,
lat:this.t.PlaceList[0].Lat,
Range:Number(this.t.PlaceList[0].Range),
Address: this.t.PlaceList[0].Address
}
// this.initMap(this.t.PlaceList[0].Lng,this.t.PlaceList[0].Lat,this.t.Name)
},
err => {}
);
},
initMap(lng,lat,name) {
if(this.map){
this.map.clearOverlays()
}
var that = this;
this.map = new BMap.Map(`mapContainer_${this.detailsObj.Id}`, {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);
},
showImageHandler(){
this.$refs.images.showViewer = true
},
}
};
</script>
<style scoped>
.image-slot{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.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{
height: 300px;
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: 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.width120{
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;
} }
};
</script>
</style>
<style scoped>
\ No newline at end of file .image-slot {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.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 {
height: 300px;
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: 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.width120 {
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