图书bug修改

闫增涛

2024-07-11 6565078d7af60fe9496a43a7d3d9bf00f92f0531

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

@@ -18,28 +18,23 @@
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
@@ -59,10 +54,10 @@
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue"
import chapterFour from './chapter004.vue'
import chapterFive from './chapter005.vue'
import chapterSix from './chapter006.vue'
import chapterThree from "./chapter003.vue";
import chapterFour from "./chapter004.vue";
import chapterFive from "./chapter005.vue";
import chapterSix from "./chapter006.vue";
import NoteIcon from "@/assets/images/biji.png";
import miniAudio from "@/components/miniAudio/index.vue";
import _ from "lodash";
@@ -71,7 +66,7 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name:"pageContent",
  name: "pageContent",
  data() {
    return {
      catalogLength: 7, // 总章节数
@@ -123,6 +118,8 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
          this.closeVideo();
        }, 200);
      },
    },
@@ -194,21 +191,21 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(6, 26);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "题一学习主题一 运动",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    // setTimeout(() => {
    //   this.delSign({
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
    //   this.gotoPage(6, 29);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
      //       txt: "题一学习主题一 运动",
      //       page: "10",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      // setTimeout(() => {
      //   this.delSign({
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -243,7 +240,7 @@
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio()
        this.getAduio();
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
@@ -267,7 +264,7 @@
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        this.handleAudio()
        this.handleAudio();
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
@@ -346,7 +343,10 @@
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
@@ -611,7 +611,10 @@
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
@@ -655,23 +658,19 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true
          // observer: true,
          // observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -694,12 +693,8 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -718,8 +713,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },
@@ -763,7 +758,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -795,7 +790,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -809,7 +804,10 @@
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
@@ -850,7 +848,7 @@
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
        // 页面向下滚动，音频小窗播放功能
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
@@ -900,21 +898,43 @@
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if(allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if(item.currentSrc != path) {
            item.pause()
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener("play", () => {
          const audioList = Array.from(allAudio);
          for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if (citem.currentSrc != item.src) {
              citem.pause();
            }
          }
        }
          this.closeMiniAudio();
        });
      }
      this.closeMiniAudio()
    }
    },
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener("playing", (item) => {
          const path = item.srcElement.src;
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if (citem.currentSrc != path && path) {
              citem.pause();
            }
          }
        });
      }
    },
  },
  components: {
    pageHeader,
@@ -924,7 +944,7 @@
    chapterFour,
    chapterFive,
    chapterSix,
    miniAudio
    miniAudio,
  },
};
</script>