<template>
|
<div
|
ref="mobile-mapContentContent"
|
v-show="!MobileWindowsHide"
|
id="mobile-map_content_content"
|
>
|
<div class="mobiletitle">{{ title }}</div>
|
<div class="mobilelabel-content">
|
<div class="mobile-popup-imgs-heard">
|
<div class="mobile-popup-imgs-h-close">
|
<i class="el-icon-close icon" @click="closeWindow"></i>
|
</div>
|
<video :src="video" controls="controls" autoplay v-if="video"></video>
|
<img :src="url" alt="" v-show="url && !video" />
|
<el-image
|
style="width: 100px; height: 100px"
|
:src="url"
|
id="mobileBigImgs"
|
v-show="false"
|
:preview-src-list="srcList"
|
>
|
</el-image>
|
<!-- <div>{{ query.query }}</div> -->
|
<div class="mobileBig-center-our" v-show="!video">
|
<div
|
v-for="(item, index) in center"
|
:key="index"
|
class="mobileBig-center"
|
>
|
<div class="m-c-title">{{ item.name }}：</div>
|
<span class="m-c-center">{{ item.value }}</span>
|
</div>
|
<div
|
class="mobileBig-center-introduce"
|
style="padding-top: 10px"
|
v-show="introduce"
|
v-html="introduce"
|
></div>
|
</div>
|
</div>
|
<div class="mobile-popup-control">
|
<div v-for="(item, index) in seebut" :key="index">
|
<el-link
|
:icon="
|
item.name == '实景'
|
? 'el-icon-place'
|
: item.name == '图集'
|
? 'el-icon-data-board'
|
: item.name == '去这'
|
? 'el-icon-finished'
|
: item.name == '视频' || item.name == '返回'
|
? 'el-icon-video-camera-solid'
|
: ''
|
"
|
class="mobilePopupOurOnce_r_d_in"
|
@click="openOnce(item.name)"
|
>{{ item.name }}</el-link
|
>
|
<el-divider
|
direction="vertical"
|
class="mobilePopupOurOnce_r_d_in"
|
v-if="index != seebut.length - 1"
|
></el-divider>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
export default {
|
name: "mobileWindow",
|
computed: {
|
...mapGetters(["MobileWindowsHide", "query", "MobileWindowChangeData"]),
|
},
|
watch: {
|
MobileWindowChangeData() {
|
//数据更改
|
// this.fullscreenLoading = true;
|
if (!this.MobileWindowsHide) {
|
this.video = ""; //清除视频
|
let queryData = this.query.query;
|
// console.log(queryData);
|
this.title = queryData.name;
|
|
if (queryData.seebut) {
|
this.seebut = queryData.seebut;
|
for (let k in this.seebut) {
|
if (this.seebut[k].name == "定位") {
|
this.seebut.splice(k, k + 1);
|
}
|
}
|
this.seebut.push({
|
name: "去这",
|
});
|
} else {
|
this.seebut = [
|
{
|
name: "实景",
|
},
|
{
|
name: "图集",
|
},
|
{
|
name: "去这",
|
},
|
];
|
}
|
if (queryData.bgImg) {
|
this.srcList = queryData.bgImg.split(",");
|
this.url = this.srcList[0];
|
} else {
|
this.seebut = this.seebut.filter((res) => {
|
return res.name != "图集";
|
});
|
}
|
if (queryData.video) {
|
if (queryData.from == "labels") {
|
this.seebut = [];
|
this.video = queryData.video;
|
} else {
|
this.seebut.push({ name: "视频" });
|
}
|
}
|
this.center = [];
|
for (let k in queryData) {
|
for (let n in this.getCenter) {
|
if (k == this.getCenter[n].name && queryData[k]) {
|
this.center.push({
|
name: this.getCenter[n].value,
|
value: queryData[k] ? queryData[k] : "暂无",
|
});
|
}
|
if (k == "introduce") {
|
this.introduce = queryData[k];
|
}
|
}
|
}
|
}
|
},
|
},
|
data() {
|
return {
|
getCenter: [
|
{
|
name: "websiteUrl",
|
value: "网址",
|
},
|
{
|
name: "telePhone",
|
value: "电话",
|
},
|
{
|
name: "address",
|
value: "地址",
|
},
|
// {
|
// name: "introduce",
|
// value: "详情",
|
// },
|
],
|
introduce: "暂无详情数据",
|
title: "",
|
fullscreenLoading: false,
|
url: "",
|
video: "",
|
positions: "",
|
srcList: [],
|
seebut: [],
|
center: [],
|
};
|
},
|
methods: {
|
openOnce(val) {
|
let that = this;
|
if (val == "去这") {
|
//定位
|
console.log(this.query.query);
|
} else if (val == "实景") {
|
this.$store.commit(
|
"MSET_OPENMOBILEPANORAMA",
|
"https://www.kuleiman.com/110487/index.html?m=1"
|
);
|
} else if (val == "图集") {
|
let imgsDom = document.getElementById("mobileBigImgs");
|
if (imgsDom) {
|
imgsDom.click();
|
}
|
} else if (val == "视频") {
|
this.seebut[this.seebut.length - 1].name = "返回";
|
this.video = this.query.query.video;
|
} else if (val == "返回") {
|
this.seebut[this.seebut.length - 1].name = "视频";
|
this.video = "";
|
}
|
},
|
closeWindow() {
|
if (!this.MobileWindowsHide) {
|
this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
|
}
|
},
|
},
|
};
|
</script>
|
|
<style>
|
</style>
|
