518-JSSWLT/定制化热点/src/views/Home.vue

<template>
  <div class="Home">
    <!-- 标题 -->
    <div class="title">{{ myTitle || "热点" }}</div>
    <!-- 主体带滚动条的盒子 -->
    <div class="main">
      <!-- 图片 -->
      <div class="imgBox" v-if="oneTxt" :class="{ imgBoxOne: !myTxt }">
        <Swiper class="warpper" ref="mySwiper" :options="swiperOptions">
          <SwiperSlide v-for="item in myDataArr" :key="item.url">
            <img
              :src="urlToFitFu(item.url)"
              alt=""
              @click="lookImg(urlToFitFu(item.url))"
              v-if="item.type === 'img'"
            />
            <video :src="urlToFitFu(item.url)" v-else controls autoplay />
          </SwiperSlide>
        </Swiper>
        <!-- 索引 -->
        <div class="myIndBox" v-if="myDataArr.length > 1">
          {{ myInd + 1 }} / <span>{{ myDataArr.length }}</span>
        </div>
      </div>
      <!-- 介绍 -->
      <div
        class="txtBox"
        :class="{ txtBoxOne: !oneTxt }"
        v-if="myTxt"
        v-html="myTxt || '暂无内容'"
      ></div>
    </div>
    <!-- 查看图片 -->
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      m: this.$route.query.m,
      id: this.$route.query.id,
      // 标题
      myTitle: "",
      // 图片数组
      myDataArr: [],
      // 简介
      myTxt: "",
      // 图片索引
      myInd: 0,
      // 轮播图设置
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides: true,
        on: {
          slideChangeTransitionEnd: () => {
            let swiper = this.$refs.mySwiper.$swiper;
            let activeIndex = swiper.activeIndex;
            this.myInd = activeIndex;
          },
        },
      },
      // 查看图片
      lookPics: [],
      // 单独只有文字
      oneTxt: true,
    };
  },
  computed: {},
  watch: {},
  methods: {
    urlToFitFu(url) {
      // 线上
      // return url;

      // 本地化
      const resUrl = url;
      if (url.includes("https://super.4dage.com")) {
        return url.replace("https://super.4dage.com", "");
      } else if (url.includes("http://super.4dage.com")) {
        return url.replace("http://super.4dage.com", "");
      } else return resUrl;
    },

    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      dom.show();
    },
    async getData() {
      // https://www.4dmodel.com/

      //线上数据
      // let url = `https://super.4dage.com/data/${
      let url = `/data/${
        // 本地化部署
        this.id
      }/hot/js/data.js?time=${Math.random()}`;
      let result = (await this.$http.get(url)).data;
      const resData = result[this.m];

      console.log("------", resData);

      if (!resData) return alert("热点解析错误");
      this.myTitle = resData.title;

      let temp1 = [];
      let temp2 = [];
      if (resData.images) {
        // 如果有图片
        temp1 = resData.images.map((v) => ({
          type: "img",
          url: v,
        }));
      }
      if (resData.video && resData.video.length > 0) {
        // 如果有视频
        temp2 = resData.video.map((v) => ({
          type: "video",
          url: v.url,
        }));
      }

      this.myDataArr = [...temp2, ...temp1];
      this.myTxt = resData.content;

      // 单独文字的情况
      if ([...temp2, ...temp1].length <= 0 && resData.content)
        this.oneTxt = false;
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Home {
  width: 100%;
  height: 100%;
  background-color: black;
  color: #fff;
  .viewerCla img {
    display: none;
  }
  .title {
    height: 50px;
    line-height: 49px;
    padding: 0 50px 0 10px;
    border-bottom: 1px solid #ccc;
  }
  .main {
    height: calc(100% - 50px);
    width: 100%;
    overflow-y: auto;

    .imgBox {
      height: 80vh;
      position: relative;
      .warpper {
        width: 100%;
        height: 100%;
        .swiper-wrapper {
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          video {
            width: 100%;
            height: 100%;
          }
        }
      }
      .myIndBox {
        z-index: 9;
        pointer-events: none;
        font-size: 12px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid #ccc;
        border-radius: 15px;
        padding: 6px 10px;
        & > span {
          opacity: 0.6;
        }
      }
    }
    .imgBoxOne {
      height: 100%;
    }
    .txtBox {
      padding: 40px 15px;
      font-size: 14px;
      line-height: 20px;
      color: black;
      background-color: #fff;
      border-radius: 8px 8px 0 0;
      min-height: 80vh;
      position: relative;
      &::before {
        content: "";
        width: 35px;
        height: 4px;
        background: #444;
        border-radius: 13px 13px 13px 13px;
        opacity: 1;
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .txtBoxOne {
      display: flex;
      align-items: center;
      color: #fff;
      background-color: transparent;
      &::before {
        opacity: 0;
      }
    }
  }
}
@media screen and (min-width: 1200px) {
  .Home {
    .main {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px transparent;
        background: #ccc;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: transparent;
      }
      .imgBox {
        .warpper {
          .swiper-wrapper {
            img {
              cursor: pointer;
            }
          }
        }
      }
    }

    .title {
      height: 70px;
      line-height: 70px;
      font-size: 22px;
    }
    .main {
      height: calc(100% - 70px);
      .imgBox {
        height: 72vh;
      }
      .txtBox {
        padding: 30px 20px 40px;
        min-height: 72vh;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 4px;
      }
    }
  }
}
</style>