优化

unknown

2024-06-05 c3a97e9da90ab1a34f766acd35944d295cc5a6bf

 src/books/English/view/components/index.vue

@@ -18,12 +18,14 @@
        :showPageList="loadPageList"
      ></chapterOne>
    </div>
    <miniAudio :path="audioPath"></miniAudio>
  </div>
</template>

<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import miniAudio from "@/components/miniAudio/index.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -31,6 +33,7 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "page-main",
  data() {
    return {
      catalogLength: 2, // 总章节数
@@ -44,6 +47,7 @@
      loadPageList: [],
      questionData: {},
      renderSignMap: {},
      audioPath:''
    };
  },
  computed: {
@@ -75,10 +79,10 @@
    },
    loadPageList: {
      handler(newVal, oldVal) {
        console.log(newVal, "this.loadPageList");
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.getAduio();
        }, 200);
      },
    },
@@ -230,6 +234,12 @@

    // 处理标记数据
    handelSignData(type, data) {
      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
        // 立即渲染
        this.renderSign(type, data);
      }

      // 储存数据
      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
      if (!this.renderSignMap[type][data.page])
        this.renderSignMap[type][data.page] = [];
@@ -484,7 +494,6 @@
            //           testData[catalog][page],
            //           this.config.activeBook
            //         );

            //       } else {
            //         const obj = {};
            //         for (let key in testData[catalog][page]) {
@@ -496,7 +505,7 @@
            //         }
            //         this.questionData[page] = obj;
            //       }
            //       console.log('题目',this.questionData);
            //       console.log("题目", this.questionData);
            //     }
            //   }
            // }
@@ -521,7 +530,7 @@
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-container");
      ).querySelectorAll(".swiper-img");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Swiper(dom, {
@@ -555,6 +564,47 @@
          // }
        });
      }
      const pptDoms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper_ppt");
      for (let i = 0; i < pptDoms.length; i++) {
        const dom = pptDoms[i];
        new Swiper(dom, {
          loop: false, // 无缝
          autoplay: false,
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-prev"
            ),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          on: {
            init: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
            slideChange: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
        });
      }
    },
    initViewer() {
      const doms = (
@@ -573,22 +623,37 @@
      }
    },
    // 点击事件：将生僻单词传给 主应用 从而调用词典功能
    saveCharacters(event,word) {
      console.log('生僻字',event,word);
    saveCharacters(event, word) {
      console.log("生僻字", event, word);
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
          this.$store.state.qiankun.chooseWords({
            word,
            x: event.pageX,
            y: event.pageY
          });
        }
        this.$store.state.qiankun.chooseWords({
          type: "word",
          word,
          x: event.pageX,
          y: event.pageY,
        });
      }
      // chooseWords
    }

    },
    // 获取auido实例
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo)
      if (allVideo.length) {
        const playAudio = allVideo.reverse().find((item) => item.paused == false);
        if (playAudio) {
          console.log("第个音频在播放", playAudio.src);
          this.audioPath = playAudio.src
        }
      }
    },
  },
  components: {
    pageHeader,
    chapterOne,
    miniAudio,
  },
};
</script>