zhengzhou_university/hotspot/src/views/Home.vue

<template>
  <div class="home" @click="autoplay" @touchstart="autoplay">
    <audio
      v-if="audio"
      class="audio"
      id="audio1"
      :src="audio"
      preload
      autoplay
      ref="musicBg"
    ></audio>
    <div class="content" v-if="fixIcon.length > 0">
      <img
        class="close"
        @click="colseParent"
        :src="require('@/assets/images/close@2x.png')"
        alt=""
      />
      <img class="bg" :src="require('@/assets/images/bg.png')" alt="" />
      <ul class="iconarr" v-if="fixIcon.length > 1">
        <li
          :class="{ active: item.id === active }"
          @click="active = item.id"
          v-for="(item, i) in fixIcon"
          :key="i"
        >
          <img
            :src="
              require(`@/assets/images/icon/${item.img}${
                item.id === active ? '2' : '1'
              }.png`)
            "
            alt=""
          />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div class="title" v-html="data.title"></div>
      <div
        @click="slideto('slidePrev')"
        v-if="data[active].length > 1"
        class="swiper-button-prev"
      ></div>
      <swiper class="warpper" ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, i) in data[active]" :key="i">
          <div class="slide">
          <div class="tips" v-if="active === 'video'">
            如遇视频抖动，请点击“新窗口打开”观看。<span class="btn" @click="openVideo(item.url)">新窗口打开</span>
          </div>
            <img
              style="cursor: pointer"
              v-viewer
              v-if="active === 'images'"
              :src="fixUrl(item)"
              alt=""
            />
            <video
              v-else-if="active === 'video'"
              controls
              autoplay
              :id="'video'+ (i + 1)"
            >
              <source :src="fixUrl(item.url)" type="video/mp4" />
            </video>
            <iframe v-else :src="fixUrl(item)" frameborder="0"></iframe>
          </div>
        </swiper-slide>
        <div
          class="swiper-pagination"
          v-if="data[active].length > 1"
          slot="pagination"
        ></div>
      </swiper>
      <div
        @click="slideto('slideNext')"
        v-if="data[active].length > 1"
        class="swiper-button-next"
      ></div>
      <p
        class="desc"
        ref="desc"
        :class="{ 'desc-duo': data.content && data.content.length > 60 }"
        v-html="data.content"
      ></p>
    </div>

    <div class="content" v-if="fixIcon.length <= 0 && hadLoad">
      <img
        class="close"
        @click="colseParent"
        :src="require('@/assets/images/close@2x.png')"
        alt=""
      />
      <img class="bg" :src="require('@/assets/images/bg.png')" alt="" />
      <div class="norecord">该热点无数据</div>
    </div>

    <div class="intro" :class="{ ismtop: fixIcon.length <= 0 }"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import browser from "@/utils/browser";

let iconArr = [
  { name: "图片", id: "images", img: "ICON_xiangpian", display: false },
  { name: "视频", id: "video", img: "ICON_bofang", display: false },
  { name: "网页", id: "iframe", img: "ICON_wangluo", display: false },
  { name: "模型", id: "model", img: "ICON_moxing", display: false },
];

browser.mobile &&
  iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });

export default {
  name: "Home",
  data() {
    return {
      // http://8.135.106.227:8009
      server: "http://192.168.1.101",
      loadAuto: false,
      hadLoad: false,
      audio: "",
      m: this.$route.query.m,
      id: this.$route.query.id,
      isAndriod: browser.android,
      swiperOptions: browser.mobile
        ? {
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          }
        : {
            spaceBetween: 0,
            centeredSlides: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          },
      data: {},
      iconArr,
      active: "",
    };
  },
  watch: {
    active(newVal) {
      if (!newVal) {
        return;
      }
      if (!this.$refs.musicBg) {
        return;
      }
      setTimeout(() => {
        if (newVal == "video") {
          if (!this.$refs.musicBg.paused) {
            this.$refs.musicBg.pause();
          }
        } else {
          if (this.$refs.musicBg.paused) {
            this.$refs.musicBg.play(); // 暂停
          }
        }
      }, 500);
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    fixIcon() {
      let arr = this.iconArr.filter((item) => !!item.display);
      return arr;
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    autoplay() {
      if (this.loadAuto) {
        return;
      }
      try {
        this.$refs.musicBg.play();
        this.loadAuto = true;
      } catch (error) {
        error;
      }
    },
    openVideo(url){
        if (this.active == "video") {
          for (let i = 0; i < this.data[this.active].length; i++) {
            console.log(document.querySelector("#video" + (i + 1)));
            document.querySelector("#video" + (i + 1)).pause()
          }
        }
        window.open(this.fixUrl(url),'_blank')
    },
    async getData() {
      // http://super.4dage.com
      let url = `${this.server}/data/${
        this.id
      }/hot/js/data.js?time=${Math.random()}`;
      let result = (await this.$http.get(url)).data;
      this.data = result[this.m];
      if (!this.data) {
        return alert("热点解析错误");
      }

      this.audio = this.data["backgroundMusic"];

      if (!this.data.content && this.isMobile) {
        this.iconArr.pop();
      }
      this.iconArr.forEach((item) => {
        if (this.data[item.id]) {
          this.active = !this.active ? item.id : this.active;
          item.display = true;
        }
      });
      this.hadLoad = true;
    },

    colseParent() {
      window.parent.document.getElementById("closepop").click();
    },
    fixUrl(item) {
      return this.server + item;
    },
    slideto(action) {
      this.swiper[action]();
    },
  },
  mounted() {
    this.getData();

    document.addEventListener(
      "WeixinJSBridgeReady",
      () => {
        this.autoplay();
      },
      false
    );
  },
};
</script>

<style lang="less" scoped>
.audio {
  position: fixed;
  top: -100px;
  left: -100px;
  opacity: 0;
}

.swiper-button-prev,
.swiper-button-next {
  background: none !important;
  padding: 10px 30px !important;
}

.mb-intro {
  color: #fff;
  padding: 10px;
  > p {
    line-height: 1.5;
    letter-spacing: 1px;
    &:first-of-type {
      font-weight: bold;
      font-size: 20px;
    }
  }
}

.home {
  width: 100%;
  height: 100%;
  position: relative;
  .ismtop {
    padding-top: 40px !important;
  }
  .content {
    width: 1200px;
    height: 86%;
    margin: 2% auto;
    position: relative;
    .norecord {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .warpper {
      width: 100%;
      height: calc(100% - 40px);
      margin: 0 auto;
      .slide {
        font-size: 0;
        width: 100%;
        height: calc(100% - 180px);
        position: relative;
        .tips{
          top: 10px;
          left: 100px;
          z-index: 999;
          font-size: 16px;
          color: #fff;
          position: absolute;
          .btn{
              font-size: 16px;
              color: #fcd67b;
              background-color: #a01c26;
              border-radius: 36px;
              display: inline-block;
              cursor: pointer;
              letter-spacing: 2px;
              padding: 10px 20px;
          }
        }
        img,
        video,
        iframe {
          max-height: 100%;
          max-width: calc(100% - 220px);
          border-radius: 14px;
          box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          position: absolute;
        }
        iframe {
          width: calc(100% - 220px);
          height: 100%;
        }
        video {
          width: 100%;
        }
      }
    }
    .desc {
      color: #fff;
      width: 76%;
      margin: -40px auto 0;
      max-height: 120px;
      overflow-y: auto;
      overflow-x: hidden;
      text-align: center;
      position: relative;
      z-index: 999;
    }
    .desc-duo {
      text-indent: 32px;
      text-align: left;
    }
    .close {
      position: absolute;
      bottom: 50px;
      right: 50px;
      box-shadow: none;
      width: 24px;
      cursor: pointer;
      z-index: 999;
    }
    .bg {
      position: absolute;
      box-shadow: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-height: unset;
      z-index: -1;
    }
  }

  .iconarr {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    position: absolute;
    left: 40px;
    top: 20px;
    z-index: 999;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      list-style: none;
      font-size: 14px;
      width: 90px;
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      border-radius: 10px;
      span {
        margin-left: 10px;
      }
      > img {
        width: 24px;
      }
    }
    .active {
      color: rgba(252, 214, 123, 1);
      border: none;
    }
  }
  .title {
    color: rgba(252, 214, 123, 1);
    width: 100%;
    text-align: center;
    transform: translateX(-50%);
    top: 24px;
    left: 50%;
    font-size: 18px;
    position: absolute;
  }
  .intro {
    max-height: 20vh;
    overflow: auto;
    width: 70%;
    color: #fff;
    margin: 0 auto;
    > h3 {
      font-size: 20px;
      font-weight: 600;
    }
    > p {
      line-height: 1.5;
      margin-top: 10px;
      font-size: 16px;
      text-indent: 32px;
    }
  }
}

@media screen and (max-width: 1400px) {
  .home {
    .content {
      .warpper {
        .slide {
          img,
          video,
          iframe {
          }
          iframe {
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .home {
    background: rgba(0, 0, 0, 0.8);
    .content {
      .warpper {
        .slide {
          width: 100%;
          img,
          video,
          iframe {
            max-height: none;
            width: 100%;
            border-radius: 0;
          }
          iframe {
            width: 100%;
            height: 100vh;
          }
        }
      }
    }
    .iconarr {
      list-style: none;
      margin-right: 0px;
      position: fixed;
      bottom: 10px;
      right: 0px;
      z-index: 10000;
      li {
        width: 70px;
      }
    }
  }
}

@media only screen and (max-width: 906px) and (orientation: landscape) {
  .home {
    .content {
      .warpper {
        .slide {
          width: 100%;
          img,
          video,
          iframe {
            max-width: 70%;
            max-height: 80vh;
          }
          iframe {
            width: 100%;
            max-width: unset;
            height: 100vh;
          }
        }
      }
    }
  }
}
</style>

<style>
* {
  word-break: break-all;
}
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullets {
  bottom: 40px !important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
  position: relative;
  opacity: 0.5;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
  opacity: 1;
  z-index: 999;
}

.swiper-button-prev,
.swiper-button-next {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  color: #fff !important;
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-next {
  right: 0;
}

@media screen and (max-width: 500px) {
  .swiper-slide {
    width: 100%;
  }
}

::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
}
::-webkit-scrollbar {
  width: 8px;
  overflow: hidden;
  height: 13px;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  background-clip: padding-box;
  min-height: 10px;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #929292;
}
</style>