7.19

zhongshujie

昨天 d11b7bf0ecbf1662ca96c127beda0581ecfd6853

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

@@ -1,56 +1,40 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div
      class="page-content"
      :style="{
        fontSize: fontSize + 'px',
        transform: `scale(${pageZoom})`,
        transformOrigin: 'center top',
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <!-- <chapterTwo
          v-if="showCatalogList.indexOf(3) > -1"
          :showPageList="loadPageList"
        ></chapterTwo>
        <chapterThree
          v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
          v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour>
        <chapterFive
          v-if="showCatalogList.indexOf(6) > -1"
          :showPageList="loadPageList"
        ></chapterFive>
        <chapterSix v-if="showCatalogList.indexOf(7) > -1"
          :showPageList="loadPageList" >
        </chapterSix>
        <chapterSeven  v-if="showCatalogList.indexOf(8) > -1"
          :showPageList="loadPageList" >
        </chapterSeven> -->
    <div class="page-content" :style="{
      fontSize: fontSize + 'px',
      transform: `scale(${pageZoom})`,
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterFive>
      <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" :resourceList="resourceList">
      </chapterSix>
      <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" :resourceList="resourceList">
      </chapterSeven>
      <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterEight>
      <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterNine>
      <chapterTen v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList" :resourceList="resourceList"></chapterTen>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
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 chapterSeven from "./chapter007.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 chapterSeven from "./chapter007.vue";
import chapterEight from "./chapter008.vue"
import chapterNine from "./chapter009.vue"
import chapterTen from "./chapter010.vue"
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -61,7 +45,7 @@
  name: "pageContent",
  data() {
    return {
      catalogLength: 2, // 总章节数
      catalogLength: 11, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -76,6 +60,7 @@
      audioPath: "",
      currentTime: null,
      videoList: [],
      resourceList: {},
    };
  },
  computed: {
@@ -127,6 +112,11 @@
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
    resourceList: {
      handler(newVal, oldVal) {
        this.resourceList = newVal;
      },
    },
  },
@@ -181,6 +171,8 @@
      threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.getBookResourceList();

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
@@ -188,22 +180,9 @@
    }, 500);

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

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -234,6 +213,14 @@
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // 请求资源Json
    async getBookResourceList() {
      this.resourceList = await this.config.getBookResources(
        process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "preschoolEvaluation")
      );
    },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture();
@@ -479,8 +466,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -497,8 +484,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -515,8 +502,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -742,12 +729,15 @@
      const pageData = {
        pageHeader,
        chapterOne,
        //   chapterTwo,
        //   chapterThree,
        //   chapterFour,
        //   chapterFive,
        //   chapterSix,
        //   chapterSeven
        chapterTwo,
        chapterThree,
        chapterFour,
        chapterFive,
        chapterSix,
        chapterSeven,
        chapterEight,
        chapterNine,
        chapterTen
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -847,7 +837,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -949,7 +939,11 @@
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
            if (playVudio.readyState) {
              setTimeout(() => {
                playVudio.requestPictureInPicture();
              }, 0)
            }
          } catch (error) {
            console.log(error, "小窗错误error");
          }
@@ -972,12 +966,15 @@
  components: {
    pageHeader,
    chapterOne,
    //   chapterTwo,
    //   chapterThree,
    //   chapterFour,
    //   chapterFive,
    //   chapterSix,
    //   chapterSeven
    chapterTwo,
    chapterThree,
    chapterFour,
    chapterFive,
    chapterSix,
    chapterSeven,
    chapterEight,
    chapterNine,
    chapterTen
  },
};
</script>