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 || hotIdOrName.name"
            >
              <h3>{{ hotIdOrName.name }}</h3>
              <div v-html="item.content" v-show="type !== 'video'"></div>
            </div>

            <!-- 图片 -->
            <template v-if="type === 'img' || type === '2d'">
              <img
                @click="lookImg(`hotData/${hotIdOrName.id}/${type}/${item.id}`)"
                v-lazy="`hotData/${hotIdOrName.id}/${type}/${item.id}`"
                alt=""
              />
            </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="imgNameBox"
      v-show="type === 'img'"
      :class="{ hideImgNameBox: !imgNameBox }"
    >
      <div
        @click="Swiper.slideTo(index)"
        class="row"
        :class="{ rowAc: index === imgInd }"
        :title="item.name"
        v-for="(item, index) in data"
        :key="item.id"
      >
        {{ item.name }}
      </div>
      <!-- 收起按钮 -->
      <div class="hideName" @click="imgNameBox = false">
        <i class="el-icon-caret-right"></i>
      </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=""
        />

        <!-- 图片类型才有的展开按钮 -->
        <div
          class="showName"
          v-show="item.type === 'img' && !imgNameBox"
          @click="imgNameBox = true"
        >
          <i class="el-icon-caret-top"></i>
        </div>

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

<script>
import { hotData } from "./data";
import Audio from "./Audio.vue";
import Swiper from "./swiper.js";
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
    hotIdOrName: {
      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: "img" },
        { name: "二维", id: 5, show: false, type: "2d" },
      ],
      Swiper: null,
      KKNum: window.KKNum,
      audioIndex: 0,
      myinfo: {},
      imgInd: 0,
      imgNameBox: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    type(val) {
      // console.log('-----------',val);
      if (val === "video") {
        this.$nextTick(() => {
          setTimeout(() => {
            let videoDoms = document.querySelectorAll(".Hot video");
            videoDoms[0].play();
          }, 200);
        });
      } else if (val === "audio") this.audioIndex = 0;

      this.Swiper = null;

      // 定制化
      this.imgInd = 0;
      this.imgNameBox = true;
      const flag = ["img", "2d"];
      if (flag.includes(val)) {
        this.data = this.myinfo[val];
      } else 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",
              type: "fraction",
            },
            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") this.audioIndex = this.Swiper.activeIndex;
                if (flag.includes(val)) {
                  this.imgInd = this.Swiper.activeIndex;
                }
              },
            },
          });
        }, 100);
      });
    },

    info: {
      handler(val) {
        // 通过id获取配置化信息
        // console.log("------------------------", this.hotIdOrName);
        const myinfo = hotData.find((v) => v.hotId === this.hotIdOrName.id);
        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 (myinfo) {
          this.myinfo = myinfo;
          if (myinfo.img && myinfo.img.length) this.rightList[3].show = true;
          if (myinfo["2d"] && myinfo["2d"].length)
            this.rightList[4].show = true;
        }
        if (myinfo && myinfo.img && myinfo.img.length) this.type = "img";
        else if (myinfo && myinfo["2d"] && myinfo["2d"].length)
          this.type = "2d";
        // 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);

    // 如果有对应的点位音频，删除
    this.$nextTick(() => {
      let time = -1;
      let num = 0;
      time = window.setInterval(() => {
        const dotAudioDomId = document.querySelector("#dotAudioDomId");
        num++;
        // console.log("xxxxxxxxxxxx", dotAudioDomId);

        if (dotAudioDomId) {
          clearInterval(time);
          document.body.removeChild(dotAudioDomId);
        }
        if (num >= 5) clearInterval(time);
      }, 800);
    });
  },
  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;
      }
    }
    .showName {
      position: absolute;
      z-index: 998;
      top: -20px;
      left: 5px;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
  }

  .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;
      }
    }
  }
  .imgNameBox {
    opacity: 1;
    transition: all 0.3s;
    position: absolute;
    z-index: 998;
    width: 400px;
    padding: 10px 20px 20px;
    right: 0;
    bottom: 100px;
    background-image: url("../assets/img/Hot/nameBac.png");
    background-size: 100% 100%;
    border-radius: 6px;
    max-height: 700px;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 5px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 1px;
      -webkit-box-shadow: inset 0 0 5px transparent;
      background: #d8b275;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px transparent;
      border-radius: 10px;
      background: transparent;
    }

    .row {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      height: 50px;
      line-height: 49px;
      cursor: pointer;
      border-bottom: 1px solid #fff;
      &:hover {
        color: #d8b275;
      }
    }
    .rowAc {
      color: #d8b275;
      pointer-events: none;
    }
    .hideName {
      position: absolute;
      cursor: pointer;
      top: 50%;
      left: -20px;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #930909;
    }
  }
  .hideImgNameBox {
    opacity: 0;
    right: -400px;
    .hideName {
    }
  }
}
.active {
  opacity: 1;
  pointer-events: auto;
}
</style>