AoMenJiBenFa/hot/src/views/Home.vue

<template>
  <div class="home">
    <div class="main">
      <div v-show="selectedTitle !== '揭開看看吧！'" :class="['mainCon', { noImg: !activeObj.images[myInd]?.url }]">
        <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>

        <!-- 如果只有一个模块 -->
        <!-- <div
          class="oneTabNum"
          v-if="
            flooTab.length === 1 &&
            data[myType] &&
            data[myType].length &&
            data[myType].length > 1
          "
        >
          {{ myInd + 1 }} / {{ data[myType].length }}
        </div> -->

        <!-- 底部的tab -->
        <!-- <div class="flooTabBox" v-if="flooTab.length > 1">
          <div
            @click="myType = item.type"
            class="tabRow"
            :class="{ tabRowAc: myType === item.type }"
            v-for="item in flooTab"
            :key="item.id"
          >
            <img
              :src="
                require(`@/assets/images/pc/icon${item.id}${
                  myType === item.type ? 'Ac' : ''
                }.png`)
              "
              alt=""
            />
            {{ item.name }}
            <span
              v-if="
                data[item.type] &&
                data[item.type].length &&
                data[item.type].length > 1
              "
              >{{ item.type === myType ? myInd + 1 + "/" : null
              }}{{ data[item.type].length }}</span
            >
          </div>
        </div> -->

        <!-- 主要内容 -->

        <div class="contenBoxMain">
          <img class="logo" src="../assets/logo.png" alt="" />
          <div class="contenBox" v-show="!onImg" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in filteredImages" :key="item.url">
            <!-- 模型页面 -->
            <!-- <div class="modelBox" v-if="myType === 'model'">
              <iframe
                :src="urlToFitFu(item)"
                frameborder="0"
                v-if="index === myInd"
              ></iframe>
            </div> -->
            <!-- 视频页面 -->
            <!-- <div class="videoBox" v-else-if="myType === 'video'">
              <video
                controls
                :src="urlToFitFu(item.url)"
                v-if="index === myInd"
              ></video>
            </div> -->
            <!-- 图片页面  v-if="myType === 'img'"-->
            <div class="imgBox">
              <div class="smImgBox">
                <video
                  ref="videoRef"
                  v-if="(/\.(mp4|webm|ogg|mov)$/i.test(item.url) && curLanguage === 'zh-hk') || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) && curLanguage === 'en') || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) && curLanguage === 'pe')"
                  :src="curLanguage === 'zh-hk' ? item.url : curLanguage === 'en' ? item.url_en : item.url_pe"
                  controls
                />
                <img v-if="/\.(jpg|jpeg|png)$/i.test(item.url)" v-lazy="item.url" alt="" @click="lookImg(item.url)" />
              </div>
            </div>
          </div>
          <div class="tips" v-if="filteredImages.length < 1">
            {{ curLanguage === "zh-hk" ? "暂无内容" : curLanguage === "en" ? "No content" : "Nenhum conteúdo ainda" }}
          </div>
          <!-- 左右箭头 -->
          <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }" v-show="!onImg" v-if="activeObj.images && filteredImages.length > 1"></div>
          <div @click="cutMyInd(1, myInd === filteredImages.length - 1)" class="rightJJ awccJJ" v-show="!onImg" :class="{ noClick: myInd === filteredImages.length - 1 }" v-if="activeObj.images && filteredImages.length > 1"></div>
        </div>
        <div class="listBox">
          <div class="changeList">
            <div class="list">
              <div
                class="item"
                @click="
                  activeObj = element;
                  myInd = 0;
                "
                v-show="list.length > 1"
                v-for="(element, index) in list"
                :key="index"
                :class="{ active: element.id == activeObj.id }"
              >
                {{ element.title }}
              </div>
            </div>
          </div>
          <!-- 音频图标 v-if="audio && !isOneAduio"-->
          <div :class="onImg ? 'iconLists' : 'iconList'">
            <!-- <div
              class="audioIcon"
              @click="audioSta = !audioSta"
              :title="audioSta ? '关闭音频' : '打开音频'"
            >
              <img
                :src="
                  require(`@/assets/images/pc/audio${
                    !audioSta ? 'Ac' : ''
                  }.png`)
                "
                alt=""
              />
            </div> -->
            <!-- <div class="audioIcon" @click="showLanlist">
              <div class="ppList" v-show="isShowLanlist">
                <div
                  v-for="item in languageList"
                  :key="item.key"
                  @click="hanleType(item)"
                  :style="{
                    color: item.key == language ? '#0F7562' : '#00221C',
                  }"
                >
                  {{ item.name }}
                </div>
              </div>
              <img :src="require(`@/assets/images/pc/yuyan.png`)" alt="" />
            </div> -->
            <div
              class="audioIcon"
              @click="showAudlist"
              :style="{
                opacity: curLanguage === 'zh-hk' && audioList.length > 0 ? 1 : 0,
                pointerEvents: curLanguage === 'zh-hk' && audioList.length > 0 ? 'auto' : 'none',
              }"
            >
              <div class="ppList auList" v-show="isShowAudlist">
                <div
                  v-for="item in audioList"
                  :key="item.key"
                  @click="handleAudio(item)"
                  :style="{
                    color: item.key === audioType ? '#0F7562' : '#00221C',
                  }"
                >
                  {{ item.name }}
                </div>
              </div>
              <img :src="require(`@/assets/images/pc/yuyin.png`)" alt="" />
            </div>
            <div class="audioIcon" @click="autoAudioSta = !autoAudioSta" :title="autoAudioSta ? '关闭自动续播' : '打开自动续播'" v-show="audioList.length > 0">
              <img :src="require(`@/assets/images/pc/auto${!autoAudioSta ? 'Ac' : ''}.png`)" alt="" />
            </div>
          </div>
        </div>

        <!-- 下面的文字介绍 -->
        <div class="flooTxt" :class="{ onImg: !!onImg }" v-if="activeObj.images[myInd]">
          <div class="flooTxtBox">
            <div class="myTitle" v-html="showText('title')"></div>
            <div class="myTxt" v-html="showText('text')" style="display: none"></div>
          </div>
        </div>
      </div>
      <Book :lookImg="lookImg" :list="list" :curLang="curLanguage" v-show="selectedTitle === '揭開看看吧！'" />
    </div>
    <!-- 查看图片 -->
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
  </div>
</template>

<script>
// import { hotList } from "./data.js";
import Book from "@/components/Book.vue";
export default {
  name: "Home",
  data() {
    return {
      selectedTitle: this.$route.query.title,
      m: this.$route.query.m,
      id: this.$route.query.id,
      languageList: [],
      audioList: [],
      language: "",
      // 音频地址
      audio: "",
      audioType: "",
      // 如果只有单独的音频
      isOneAduio: false,
      // 音频状态
      audioSta: false,
      // 自动续播
      autoAudioSta: false,
      //无图，模式
      onImg: false,
      myInd: 0,
      // 当前 type
      list: [],
      // 查看图片
      lookPics: [],
      activeObj: {
        id: 1,
        images: [],
      },
      isShowLanlist: false,
      isShowAudlist: false,
      curLanguage: this.$route.query.curLang || localStorage.getItem("locale"),
    };
  },
  watch: {
    myType() {
      this.myInd = 0;
    },
    myInd(newVal, oldVal) {
      if (!this.activeObj.images || newVal < 0 || newVal >= this.activeObj.images.length) {
        this.audio = "";
        return;
      }
      let item = this.activeObj.images[this.myInd];
      this.resetList(item);
      // 切换暂停播放视频
      if (this.selectedTitle.includes("視頻") && this.$refs.videoRef?.[oldVal]) {
        console.log("----oldVal", oldVal);
        this.$refs.videoRef[oldVal].pause();
      }
    },
    activeObj(newVal) {
      this.resetList(newVal.images[this.myInd]);
    },
    // 音频的开启和关闭
    audioSta(val) {
      const dom = document.querySelector("#myAudio");
      console.log("----val", this.audio, val, dom);
      if (val) {
        dom.play();
        dom.onended = () => {
          // console.log("----音频播放完毕");
          if (this.autoAudioSta) {
            this.cutMyInd(1, this.myInd === this.activeObj.images.length - 1);
          } else {
            this.audioSta = false;
          }
        };
      } else dom.pause();
    },
    autoAudioSta(val) {
      this.audioSta = val;
    },
  },
  computed: {
    filteredImages() {
      if (!this.activeObj?.images) return [];
      const isVideo = (item) => {
        return (/\.(mp4|webm|ogg|mov)$/i.test(item.url) && this.curLanguage === "zh-hk") || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) && this.curLanguage === "en") || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) && this.curLanguage === "pe");
      };

      const isImage = (item) => /\.(jpg|jpeg|png)$/i.test(item.url);

      const isTitle = (item) => {
        return item.title_zh || item.title_zhhk || item.title_pe || item.title_en;
      };

      const filterArr = this.activeObj.images.filter((item) => {
        return isVideo(item) || isImage(item) || isTitle(item);
      });

      console.log(
        this.activeObj.images.filter((item) => {
          return isVideo(item) || isImage(item);
        })
      );

      // return filterArr.filter((i, index) => {
      //   return index <= this.myInd + 3;
      // });
      if (this.selectedTitle.includes("視頻")) {
        return this.activeObj.images.filter((item) => {
          return isVideo(item) || isImage(item);
        });
      }
      return filterArr;
    },
  },
  components: {
    Book,
  },
  methods: {
    handlePlay() {
      console.log("----this.$refs.videoRef", this.$refs.videoRef);
      const currentVideo = this.$refs.videoRef?.[this.myInd];
      if (!currentVideo) return;
      currentVideo.requestFullscreen();
      if (currentVideo.paused) {
        currentVideo.play().catch((err) => {
          console.error("视频播放失败:", err);
        });
      } else {
        currentVideo.pause();
      }
    },
    hanleType(item) {
      this.language = item.key;
      // this.$i18n.locale = 'fr';
    },
    handleAudio(item) {
      let data = this.activeObj.images[this.myInd];
      this.audio = data[item.key];
      this.audioType = item.key;
      this.audioSta = false;
      this.$nextTick(() => {
        this.audioSta = true;
      });
      localStorage.setItem("cnPreference", item.key);
    },
    showText(type) {
      let item = this.activeObj.images[this.myInd];
      let objTitle = {
        "zh-cn": item.title_zh,
        "zh-hk": item.title_zhhk,
        pe: item.title_pe,
        en: item.title_en,
        not: " ",
      };
      let objText = {
        "zh-cn": item.text_zh,
        "zh-hk": item.text_zhhk,
        pe: item.text_pe,
        en: item.text_en,
      };
      if (type == "title") {
        return objTitle[this.language];
      } else {
        return objText[this.language];
      }
    },
    // 本地化 url 适配
    urlToFitFu(url) {
      return url.url || 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;
    },

    // 点击左右箭头
    cutMyInd(num, flag) {
      if (flag) return;
      this.myInd += num;
      this.audioSta = false;
      if (this.autoAudioSta)
        this.$nextTick(() => {
          this.audioSta = true;
        });

      // this.activeObj = this.activeObj.images[this.myInd];
    },
    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url.url || url];
      console.log(this.lookPics);
      dom.show();
    },
    resetList(item) {
      this.languageList = [];
      this.audioList = [];
      const isHk = item?.title_zhhk || item?.text_zhhk;
      const isEn = item?.title_en || item?.text_en;
      const isPe = item?.title_pe || item?.text_pe;

      isHk && this.languageList.push({ name: "繁體中文", key: "zh-hk" });
      isEn && this.languageList.push({ name: "English", key: "en" });
      isPe && this.languageList.push({ name: "Português", key: "pe" });
      this.curLanguage === "zh-hk" && item?.mp3_zh && this.audioList.push({ name: "普通話", key: "mp3_zh" });
      this.curLanguage === "zh-hk" && item?.mp3_zhhk && this.audioList.push({ name: "粵語", key: "mp3_zhhk" });
      this.curLanguage === "en" && item?.mp3_en && this.audioList.push({ name: "English", key: "mp3_en" });
      this.curLanguage === "pe" && item?.mp3_pe && this.audioList.push({ name: "Português", key: "mp3_pe" });
      console.log(this.audioList, "this.audioList");
      const cnPreference = localStorage.getItem("cnPreference");
      console.log(cnPreference === "mp3_zh", 'cnPreference === "mp3_zh"');
      this.audio = (this.curLanguage === "zh-hk" && (cnPreference === "mp3_zh" ? item?.mp3_zh : item?.mp3_zhhk)) || (this.curLanguage === "en" && item?.mp3_en) || (this.curLanguage === "pe" && item?.mp3_pe) || "";
      console.log(this.audio, "-----------audio");
      this.audioType = this.curLanguage === "zh-hk" && item?.mp3_zhhk ? cnPreference || "mp3_zhhk" : this.curLanguage === "en" && item?.mp3_en ? "mp3_en" : this.curLanguage === "pe" && item?.mp3_pe ? "mp3_pe" : "";
      this.language = this.curLanguage === "zh-hk" && isHk ? "zh-hk" : this.curLanguage === "en" && isEn ? "en" : this.curLanguage === "pe" && isPe ? "pe" : "not";
      console.log(this.language, "===============");
      // this.$nextTick(() => {
      //   this.autoAudioSta = true;
      // });
    },
    getData() {
      // https://www.4dmodel.com/

      // let url = `https://houseoss.4dkankan.com/project/aoMenScene/static/hot/${
      // 线上数据
      // let url = `/static/data/${
      //本地化部署
      // this.m
      // }/data.json?time=${Math.random()}`;
      // let result = (await this.$http.get(url)).data;
      console.log("..................123", window.hotList);
      const resData = window.hotList.find((item) => item.key === this.selectedTitle)?.contentList;
      console.log("..................", resData);
      this.list = resData;
      let showData = resData && resData[0];
      let item = showData?.images[this.myInd];
      this.resetList(item);
      this.activeObj = {
        ...showData,
      };
    },
    showLanlist() {
      this.isShowLanlist = !this.isShowLanlist;
    },
    showAudlist() {
      this.isShowAudlist = !this.isShowAudlist;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.home {
  .viewerCla img {
    display: none;
  }
  width: 100%;
  height: 100%;
  background-color: rgba(255, 252, 247, 0.6);
  backdrop-filter: blur(10px);
  position: relative;
  #myAudio {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 60px;
  }
  .main {
    width: 70%;
    margin: 0 auto;
    height: 87%;
    padding-top: 95px;

    .mainCon {
      background-image: url("../assets/bg.png");
      background-size: 100% 100%;
      border-radius: 6px;
      overflow: hidden;
      width: 100%;
      height: 100%;
      .oneTabNum {
        z-index: 10;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }
      .flooTabBox {
        z-index: 10;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        .tabRow {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin: 0 12px;
          font-size: 12px;
          background-color: #dedede;
          padding: 0px 14px;
          height: 36px;
          border-radius: 18px;
          & > img {
            margin-right: 6px;
          }
        }
        .tabRowAc {
          background-color: #b90c0c;
          pointer-events: none;
          color: #d6b970;
        }
      }
      .contenBoxMain {
        position: relative;
        width: 100%;
        height: 70%;
        .logo {
          position: absolute;
          left: 52px;
          top: 37px;
          height: 60px;
        }
        .tips {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 22px;
          font-weight: 700;
        }
      }

      .listBox {
        position: relative;
        top: -54%;
        width: 72%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconList,
        .iconLists {
          display: flex;
          .audioIcon {
            z-index: 10;
            cursor: pointer;
            width: 62px;
            position: relative;
            img {
              width: 100%;
            }
            .ppList {
              padding: 8px 10px;
              width: 99px;
              position: absolute;
              top: 66px;
              left: -46px;
              background: #fff;
              opacity: 0.85;
              border-radius: 8px;
              div {
                height: 30px;
                line-height: 30px;
                font-family: Source Han Serif CN;
                font-weight: 600;
                font-size: 14px;
                color: #00221c;
                opacity: 0.85;
                text-align: center;
                border-bottom: 1px solid #d2c9c1;
                &:last-child {
                  border: none;
                }
              }
            }
            .auList {
              left: 6px;
            }
          }
        }
        .changeList {
          margin-left: 95px;
          .list {
            display: flex;
            align-items: center;
            .active {
              opacity: 1;
              color: #02362c;
            }
            div {
              height: 100%;
              padding: 8px 7px 10px 7px;
              min-width: 70px;
              text-align: center;
              background: #dde5e2;
              border-radius: 7px;
              font-family: Source Han Serif CN;
              font-weight: 500;
              font-size: 14px;
              color: #02362c;
              line-height: 14px;
              opacity: 0.79;
              margin-right: 20px;
            }
          }
        }
      }
      .contenBox {
        width: 51%;
        height: 80%;
        position: absolute;
        top: auto;
        left: calc(50% - 315px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s;
        bottom: 0 !important;
        left: 50% !important;
        transform: translate(-50%, 28px);

        .modelBox,
        .videoBox,
        .imgBox {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .modelBox {
          iframe {
            width: 100%;
            height: 100%;
          }
        }
        .videoBox {
          // padding: 100px 100px 120px;
          video {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .imgBox {
          // padding: 100px 100px 120px;
          .smImgBox {
            position: relative;
            width: 100%;
            height: 100%;

            & > img,
            & > video {
              // pointer-events: none;
              width: 100%;
              height: 100%;
              object-fit: contain;
            }

            & > img {
              cursor: zoom-in;
            }
          }
        }
      }
      .contenBoxAc {
        opacity: 1;
        pointer-events: auto;
      }
      .awccJJ {
        cursor: pointer;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-563px, -60px);
        width: 48px;
        height: 60px;
        background-image: url("../assets/images/icon/left.png");
        background-size: 100% 100%;
        &:focus {
          outline: none;
        }
      }
      .rightJJ {
        transform: translate(526px, -60px);
        background-image: url("../assets/images/icon/right.png");
      }
      .noClick {
        cursor: default;
        opacity: 0.4;
      }

      .flooTxt {
        margin-top: 20px;
        width: 80%;
        height: 135px;
        margin: 0 auto;
        // position: relative;
        top: -137px;
        .flooTxtBox {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          .myTitle {
            color: #dde5e2;
            font-size: 22px;
            font-weight: 700;
            line-height: 38px;
            margin-bottom: 10px;
            text-align: justify;
            text-indent: 2em;
          }
          .myTxt {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 19px;
            color: #dde5e2;
            line-height: 31px;
            * {
              text-indent: 2em;
            }
          }
          &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px transparent;
            background: #2f714a;
          }
          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px transparent;
            border-radius: 10px;
            background: transparent;
          }
        }
      }
    }

    .noImg {
      .contenBoxMain {
        height: 16%;
        .contenBox {
          display: none;
        }
        .tips {
          display: none;
        }
      }
      .listBox {
        position: initial;
      }
      .flooTxt {
        width: 51%;
        height: 48%;
      }
    }

    .onImg {
      top: -600px !important;
      height: 360px;
    }

    .flooTxtOne {
      height: 600px;
    }
  }
}

// 移动端
@media screen and (max-width: 1000px) {
  .home {
    .logo {
      display: none;
    }
    #myAudio {
      width: 90vw;
      max-width: 500px;
    }
    .main {
      width: 90%;
      height: 85%;
      padding: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .mainCon {
        border-radius: 8px 8px 0 0;
        background-image: url("../assets/images/mobileBg.png");
        .contenBoxMain {
          height: 42%;
          max-height: 260px;
          .contenBox {
            width: calc(100% - 84px);
            height: 165px;
            transform: translate(-50%, 0);
            .videoBox {
              padding: 0px 0;
              position: relative;
              video {
                width: 96%;
                max-height: 100%;
                height: auto;
                position: absolute;
                top: 50%;
                left: 2%;
                transform: translateY(-50%);
              }
            }
            .imgBox {
              // padding: 60px 50px 80px;
              .smImgBox {
                cursor: default;
              }
            }
          }
          .awccJJ {
            left: 0;
            width: 28px;
            top: 50%;
            bottom: 0;
            transform: translateY(-59px);
            height: 57px;
            cursor: default;
            background-image: url("../assets/images/icon/left.png");
          }
          .rightJJ {
            left: auto;
            right: 0;
            background-image: url("../assets/images/icon/right.png");
          }
        }
        .listBox {
          width: 76%;
          top: -188px;
          height: 0;
          .changeList {
            width: 100%;
            height: 30px;
            margin: 0;
            .list {
              gap: 5px;
            }

            div {
              font-size: 8px !important;
              .item {
                padding: 6px 4px !important;
                min-width: 35px;
                margin: 0;
              }
            }
          }
          .iconList {
            align-items: center;
            gap: 6px;
            .audioIcon {
              cursor: default;
              width: 30px;
              height: 30px;
              & > img {
                width: 30px;
              }
              .auList {
                left: -180px !important;
              }
              .ppList {
                top: 35px !important;
                left: -75px !important;
              }
            }
          }
        }

        .flooTabBox {
          width: 100%;
          bottom: 20px;
          justify-content: center;
          .tabRow {
            cursor: default;
            margin: 0 6px;
            padding: 0 10px;
            height: 32px;
            & > img {
              width: 16px;
            }
          }
        }

        .flooTxt {
          margin-top: 0;
          padding: 20px 0 15px;
          height: 52%;
          // background-color: #fff;
          border-radius: 0 0 8px 8px;
          top: -383px;
          .flooTxtBox {
            .myTitle {
              text-align: justify;
              text-indent: 2em;
              font-size: 18px;
              text-indent: 2em;
            }
            .myTxt {
              font-size: 14px;
              line-height: 22px;
            }
          }
        }
      }

      .noImg {
        .contenBoxMain {
          height: 10%;
        }
        .listBox {
          top: -7px;
          .iconList {
            .audioIcon {
              .auList {
                left: -4px !important;
              }
            }
          }
        }
        .flooTxt {
          height: 75%;
          width: 80%;
        }
      }

      .flooTxtOne {
        height: 100%;
      }
    }
  }
}
</style>