From 5e47738f99e307bab1c8a5ee9ecd96d8c7f4a968 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 08 Jan 2022 10:43:01 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/mobileWindow/index.vue | 137 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 112 insertions(+), 25 deletions(-)
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index 42a25d3..39fc902 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -4,13 +4,30 @@
v-show="!MobileWindowsHide"
id="mobile-map_content_content"
>
- <div class="mobiletitle">{{ title }}</div>
+ <div class="mobiletitle">
+ {{ title }}
+ <span class="mobile_audio" @click="openAudio" v-show="introduce">
+ <i class="el-icon-video-play icon" v-show="!audioState"></i>
+ <i class="el-icon-video-pause icon" v-show="audioState"></i>
+ <!-- <div id="bdtts_div_id">
+ <audio id="tts_autio_id" autoplay="autoplay">
+ <source
+ id="tts_source_id"
+ src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=请输入文字"
+ type="audio/mpeg"
+ />
+ <embed id="tts_embed_id" height="0" width="0" src="" />
+ </audio>
+ </div> -->
+ </span>
+ </div>
<div class="mobilelabel-content">
<div class="mobile-popup-imgs-heard">
<div class="mobile-popup-imgs-h-close">
- <i class="el-icon-circle-close icon" @click="closeWindow"></i>
+ <i class="el-icon-close icon" @click="closeWindow"></i>
</div>
- <img :src="url" alt="" />
+ <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"
@@ -20,7 +37,7 @@
>
</el-image>
<!-- <div>{{ query.query }}</div> -->
- <div class="mobileBig-center-our">
+ <div class="mobileBig-center-our" v-show="!video">
<div
v-for="(item, index) in center"
:key="index"
@@ -29,6 +46,12 @@
<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">
@@ -41,6 +64,8 @@
? 'el-icon-data-board'
: item.name == '去这'
? 'el-icon-finished'
+ : item.name == '视频' || item.name == '返回'
+ ? 'el-icon-video-camera-solid'
: ''
"
class="mobilePopupOurOnce_r_d_in"
@@ -63,20 +88,26 @@
export default {
name: "mobileWindow",
computed: {
- ...mapGetters(["MobileWindowsHide", "query", "MobileWindowChangeData"]),
+ ...mapGetters([
+ "MobileWindowsHide",
+ "query",
+ "MobileWindowChangeData",
+ "audioState",
+ ]),
},
watch: {
MobileWindowChangeData() {
+ this.$store.dispatch("MSET_GETAUDIOBEGIN", "notOpen");
+ //数据更改
// this.fullscreenLoading = true;
if (!this.MobileWindowsHide) {
- // console.log("地图点击弹窗数据请求参数", this.query);
- this.title = this.query.query.name;
- if (this.query.query.bgImg) {
- this.srcList = this.query.query.bgImg.split(",");
- this.url = this.srcList[0];
- }
- if (this.query.query.seebut) {
- this.seebut = this.query.query.seebut;
+ 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);
@@ -98,14 +129,41 @@
},
];
}
+ 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 this.query.query) {
+ for (let k in queryData) {
for (let n in this.getCenter) {
- if (k == this.getCenter[n].name && this.query.query[k]) {
+ if (k == this.getCenter[n].name && queryData[k]) {
this.center.push({
name: this.getCenter[n].value,
- value: this.query.query[k] ? this.query.query[k] : "暂无",
+ value: queryData[k] ? queryData[k] : "暂无",
});
+ }
+ if (k == "introduce") {
+ this.introduce = queryData[k];
+ if (this.introduce) {
+ setTimeout(() => {
+ let Str = document.querySelector(
+ ".mobileBig-center-introduce"
+ ).innerText;
+ this.$store.dispatch("MSET_GETAUDIO", Str); //加入语音
+ }, 20);
+ }
}
}
}
@@ -127,14 +185,16 @@
name: "address",
value: "地址",
},
- {
- name: "introduce",
- value: "详情",
- },
+ // {
+ // name: "introduce",
+ // value: "详情",
+ // },
],
+ introduce: "暂无详情数据",
title: "",
fullscreenLoading: false,
- url: "/img/job/one.jpg",
+ url: "",
+ video: "",
positions: "",
srcList: [],
seebut: [],
@@ -144,9 +204,9 @@
methods: {
openOnce(val) {
let that = this;
- // console.log(val, this.onceData);
if (val == "去这") {
//定位
+ console.log(this.query.query);
} else if (val == "实景") {
this.$store.commit(
"MSET_OPENMOBILEPANORAMA",
@@ -154,7 +214,15 @@
);
} else if (val == "图集") {
let imgsDom = document.getElementById("mobileBigImgs");
- imgsDom.click();
+ 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() {
@@ -162,9 +230,28 @@
this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
}
},
+ openAudio() {
+ if (this.introduce) {
+ this.$store.dispatch("MSET_GETAUDIOBEGIN");
+ }
+ },
},
};
</script>
-<style>
-</style>
\ No newline at end of file
+<style lang="scss">
+.mobile_audio {
+ margin-left: 3px;
+ .icon {
+ font-size: 20px;
+ }
+}
+#bdtts_div_id {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+ position: absolute;
+ top: -50px;
+ background-color: #fff;
+}
+</style>
--
Gitblit v1.9.3