Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2024-07-26 bd4d2df3c20c2baea23567f57556a70a38e1960d

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

@@ -1,29 +1,65 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content" :style="{
      fontSize: fontSize ? fontSize + 'px' : '16px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
      <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
        <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
        <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
        <chapterFive @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
        <chapterSex @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSex>
        <chapterSeven @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven>
        <chapterEight @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight>
    <div
      class="page-content"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
      <chapterSeven
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
      ></chapterSeven>
      <chapterEight
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
      ></chapterEight>
      
    </div>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    >
    </miniAudio>
  </div>
</template>
@@ -35,7 +71,7 @@
import chapterThree from "./chapter003.vue";
import chapterFour from "./chapter004.vue";
import chapterFive from "./chapter005.vue";
import chapterSex from "./chapter006.vue";
import chapterSix from "./chapter006.vue";
import chapterSeven from "./chapter007.vue";
import chapterEight from "./chapter008.vue";
import miniAudio from "@/components/miniAudio/index.vue";
@@ -97,6 +133,8 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
           this.saveWord()
        }, 200);
      },
    },
@@ -167,36 +205,36 @@
    }, 500);

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

      // const pageDom = (this.container ? this.container : document)
      //   .querySelector("#app")
      //   .querySelectorAll(".page-box");
      // 检索
      // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
      // 检索跳转
      // this.searchItemLocation({
      //   catalog: 2,
      //   page: 10,
      //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
     }, 500);
    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    //  }, 50);
  },
  methods: {
    // setZoom1() {
@@ -455,8 +493,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -473,8 +511,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -491,8 +529,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -635,23 +673,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
          observeParents: true,
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -674,12 +708,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,
@@ -698,8 +728,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },
@@ -731,7 +761,7 @@
        chapterThree,
        chapterFour,
        chapterFive,
        chapterSex,
        chapterSix,
        chapterSeven,
        chapterEight,
      };
@@ -745,7 +775,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -777,7 +807,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -833,22 +863,40 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => { });
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 点击事件：将生僻单词传给 主应用 从而调用词典功能
    saveCharacters(event, word) {
      console.log("生僻字", event, word);
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
          type: "word",
          word,
          x: event.pageX,
          y: event.pageY,
        });
    // saveCharacters(event, word) {
    //   if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
    //     this.$store.state.qiankun.chooseWords({
    //       type: "word",
    //       word,
    //       x: event.pageX,
    //       y: event.pageY,
    //     });
    //   }
    // },
    saveWord() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".word-bc");
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.addEventListener('click',(e) => {
          let word = null
          dom.getAttribute('word') ? word = dom.getAttribute('word') : word = e.srcElement.innerText
          console.log('单词',word)
          if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
            this.$store.state.qiankun.chooseWords({
              type: "word",
              word,
              x: e.pageX,
              y: e.pageY,
            });
          }
        })
      }
      // chooseWords
    },

    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
@@ -898,6 +946,25 @@
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      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();
        });
      }
    },
  },
  components: {
    pageHeader,
@@ -906,7 +973,7 @@
    chapterThree,
    chapterFour,
    chapterFive,
    chapterSex,
    chapterSix,
    chapterSeven,
    chapterEight,
    miniAudio,