+3d 2.5d

liuyg

2021-12-31 e40ee62d3e9b71ffe3432d32a53a00c4097b5708

 src/components/mobileWindow/index.vue

@@ -4,27 +4,65 @@
    v-show="!MobileWindowsHide"
    id="mobile-map_content_content"
  >
    <div class="mobile-popup-imgs-heard">
      <img :src="url" alt="" />
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        id="mobileBigImgs"
        v-show="false"
        :preview-src-list="srcList"
      >
      </el-image>
      <div>{{ query }}</div>
      <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
    </div>
    <div class="mobile-popup-control">
      <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
        >图集</el-link
      >
      <el-divider direction="vertical"></el-divider>
      <el-link icon="el-icon-map-location">实景</el-link>
      <el-divider direction="vertical"></el-divider>
      <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
    <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>
@@ -34,34 +72,134 @@
export default {
  name: "mobileWindow",
  computed: {
    ...mapGetters(["MobileWindowsHide", "query"]),
    ...mapGetters(["MobileWindowsHide", "query", "MobileWindowChangeData"]),
  },
  watch: {
    MobileWindowsHide() {
    MobileWindowChangeData() {
      //数据更改
      //   this.fullscreenLoading = true;
      setTimeout(() => {
        // this.fullscreenLoading = false;
        console.log("地图点击弹窗数据请求参数", this.query);
      }, 500);
      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 {
      fullscreenLoading: false,
      url: "/img/job/one.jpg",
      positions: "",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      getCenter: [
        {
          name: "websiteUrl",
          value: "网址",
        },
        {
          name: "telePhone",
          value: "电话",
        },
        {
          name: "address",
          value: "地址",
        },
        // {
        //   name: "introduce",
        //   value: "详情",
        // },
      ],
      introduce: "暂无详情数据",
      title: "",
      fullscreenLoading: false,
      url: "",
      video: "",
      positions: "",
      srcList: [],
      seebut: [],
      center: [],
    };
  },
  methods: {
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    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 = "";
      }
    },
    goOn() {},
    closeWindow() {
      if (!this.MobileWindowsHide) {
        this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
      }
    },
  },
};
</script>