YuHuaTai-Pc/SWKK/src/components/Hot.vue

<template>
  <div class="Hot" :class="{ active: show }" @click.stop="">
    <div class="close" @click="$emit('hotClose')">
      <img src="../assets/img/hotClose.png" alt="" />
    </div>

    <!-- 查看图片 -->
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>

    <!-- 轮播图 -->
    <div class="swBox">
      <div class="swiper-container" ref="mySwiper" :key="type">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in data" :key="index">
            <div
              class="infoTxt"
              :class="{ videoAc: type === 'video' }"
              v-if="item.title"
            >
              <h3>{{ item.title.split("&")[0] }}</h3>
              <div v-html="item.content" v-show="type !== 'video'"></div>
            </div>

            <!-- 图片 -->
            <template v-if="type === 'image'">
              <img
                @click="
                  lookImg(
                    `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
                  )
                "
                v-if="item.media && item.media.image[0]"
                v-lazy="
                  `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
                "
                alt=""
              />
              <img
                src="../assets/img/IMGerror.png"
                style="pointer-events: none"
                alt=""
                v-else
              />
            </template>
            <!-- 视频 -->
            <template v-else-if="type === 'video'">
              <div class="videoBox">
                <div>
                  <video
                    v-if="item.media && item.media.video[0]"
                    controls
                    :src="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.video[0].src}`"
                  ></video>
                </div>
              </div>
            </template>
            <!-- 模型 -->
            <template v-else-if="type === 'link'">
              <div class="ifrBox">
                <iframe
                  v-if="item.media && item.media.link[0]"
                  :src="`${item.media.link[0].src}`"
                  frameborder="0"
                ></iframe>
              </div>
            </template>
            <!-- 音乐 -->
            <template v-else>
              <Audio
                :Aid="item.media.audio[0].src"
                v-if="item.media && item.media.audio[0]&&audioIndex===index"
                :audioSrc="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.audio[0].src}`"
              />
            </template>
          </div>
        </div>

        <div class="swiper-pagination" v-show="data.length > 1"></div>

        <div
          class="swiper-button-prev swiper-button-white"
          v-show="data.length > 1"
          :class="{ noneAc: true }"
        ></div>
        <div
          class="swiper-button-next swiper-button-white"
          v-show="data.length > 1"
          :class="{ noneAc: true }"
        ></div>
      </div>
    </div>

    <!-- 右下角的按钮 -->
    <div class="mainrr">
      <div
        class="row"
        v-show="item.show"
        v-for="item in rightList"
        :key="item.id"
        @click="type = item.type"
        :class="{ active: item.type === type }"
      >
        <img
          :src="
            require(`@/assets/img/Hot/inco${item.id}${
              item.type === type ? 'Ac' : ''
            }.png`)
          "
          alt=""
        />

        <p>{{ item.name }}{{ info[item.type] && info[item.type].length }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Audio from "./Audio.vue";
import Swiper from "./swiper.js";
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  name: "Hot",
  components: { Audio },
  data() {
    //这里存放数据
    return {
      lookPics: [],

      show: false,
      data: [],
      type: "",
      rightList: [
        { name: "视频", id: 1, show: false, type: "video" },
        { name: "模型", id: 2, show: false, type: "link" },
        { name: "音乐", id: 3, show: false, type: "audio" },
        { name: "图片", id: 4, show: false, type: "image" },
      ],
      Swiper: null,
      KKNum: window.KKNum,
      audioIndex:0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    type(val) {
      if (val === "video") {
        this.$nextTick(() => {
          setTimeout(() => {
            let videoDoms = document.querySelectorAll(".Hot video");
            videoDoms[0].play();
          }, 200);
        });
      } 
      // else if (val === "audio") {
      //   this.$nextTick(() => {
      //     setTimeout(() => {
      //       let audioDoms = document.querySelectorAll(".Hot audio");
      //       audioDoms[0].play();
      //     }, 200);
      //   });
      // }

      this.Swiper = null;
      this.data = this.info[val];
      this.$nextTick(() => {
        setTimeout(() => {
          this.Swiper = new Swiper(".Hot .swiper-container", {
            slidesPerView: 1,
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            pagination: {
              el: ".swiper-pagination",
            },
            on: {
              slideChange: () => {
                if (val === "video") {
                  let dom = document.querySelectorAll(
                    ".Hot .swiper-pagination-bullet"
                  );
                  let index;
                  dom.forEach((v, i) => {
                    if (v.className.includes("swiper-pagination-bullet-active"))
                      index = i;
                  });

                  this.$nextTick(() => {
                    setTimeout(() => {
                      let videoDoms = document.querySelectorAll(".Hot video");
                      videoDoms.forEach((v, i) => {
                        if (i === index) v.play();
                        else v.pause();
                      });
                    }, 200);
                  });
                }
                if (val === "audio") {
                  let dom = document.querySelectorAll(
                    ".Hot .swiper-pagination-bullet"
                  );
                  dom.forEach((v, i) => {
                    if (v.className.includes("swiper-pagination-bullet-active"))
                      this.audioIndex = i;
                  });

                  // this.$nextTick(() => {
                  //   setTimeout(() => {
                  //     let audioDoms = document.querySelectorAll(".Hot audio");
                  //     audioDoms.forEach((v, i) => {
                  //       if (i === this.audioIndex) v.play();
                  //       else v.pause();
                  //     });
                  //   }, 200);
                  // });
                }
              },
            },
          });
        }, 100);
      });
    },

    info: {
      handler(val) {
        this.info = val;
        let obj = {
          video: 0,
          link: 1,
          audio: 2,
          image: 3,
        };
        for (const k in val) {
          if (val[k].length) this.rightList[obj[k]].show = true;
        }
        if (val["image"] && val["image"].length) this.type = "image";
        else if (val["video"] && val["video"].length) this.type = "video";
        else if (val["link"] && val["link"].length) this.type = "link";
        else if (val["audio"] && val["audio"].length) this.type = "audio";
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      dom.show();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 300);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "./swiper.css";
.viewerCla img {
  display: none;
}
.Hot {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 251, 245, 0.9);
  backdrop-filter: blur(4px);
  .close {
    cursor: pointer;
    width: 60px;
    position: absolute;
    z-index: 10;
    top: 45px;
    right: 45px;
    img {
      width: 60px;
    }
  }

  .mainrr {
    display: flex;
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 10;
    .row {
      position: relative;
      cursor: pointer;
      width: 50px;
      text-align: center;
      margin-left: 15px;
      color: #666666;

      & > img {
        width: 50px;
      }
      p {
        font-size: 12px;
      }
      .likeMove {
        color: #930909;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
      }
    }
    .active {
      color: #930909;
      font-weight: 700;
      p {
        font-size: 12px;
      }
    }
  }

  .swBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .swiper-container {
      cursor: grab;
      height: 100%;
      .swiper-slide {
        position: relative;
        .infoTxt {
          z-index: 10;
          position: absolute;
          top: 40px;
          left: 40px;
          width: 310px;
          & > h3 {
            font-size: 20px;
            color: #930909;
            font-weight: 700;
            line-height: 28px;
            margin-bottom: 15px;
          }
          & > div {
            color: #666666;
            font-size: 16px;
          }
        }
        .videoAc {
          pointer-events: none;
          width: 1200px;
          height: 680px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 74px 0 0 140px;
          z-index: 30;
          h3 {
            color: #ffffff;
          }
        }
        .videoBox {
          width: 1200px;
          height: 680px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-image: url("../assets/img/Hot/videoBac.png");
          background-size: 100% 100%;
          padding: 135px 90px 0 140px;
          & > div {
            width: 100%;
            height: 100%;
            overflow: hidden;
            video {
              height: 100%;
            }
          }
        }
        .ifrBox {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          iframe {
            width: 100%;
            height: 100%;
          }
        }
        img {
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-width: 900px;
          max-height: 700px;
          object-fit: cover;
        }
      }
      .swiper-pagination {
        bottom: 50px;
      }
      .swiper-button-next {
        // opacity: 1;
        // pointer-events: auto;
        width: 40px;
        height: 60px;
        right: 60px;
        background-image: url("../assets/img/Hot/right.png");
        background-size: 100% 100%;
        color: transparent;
      }
      .swiper-button-prev {
        // opacity: 1;
        // pointer-events: auto;
        width: 40px;
        height: 60px;
        left: 60px;
        background-image: url("../assets/img/Hot/left.png");
        background-size: 100% 100%;
        color: transparent;
      }
      /deep/.swiper-pagination-bullet {
        width: 70px;
        height: 4px;
        border-radius: 1px;
        opacity: 1;
        background-color: #999999;
      }
      /deep/.swiper-pagination-bullet-active {
        background-color: #930909;
      }
    }
  }
}
.active {
  opacity: 1;
  pointer-events: auto;
}
</style>