体育与健康pdf预览功能迁移

闫增涛

2024-06-25 9bf6cb8f4e3fcca03d011371678806dd2904b910

体育与健康pdf预览功能迁移

 src/books/sportsAndHealth/css/default.less

@@ -1921,71 +1921,6 @@
  }
}

.pdfModal {
  width: 100%;
  height: 90vh;
}

@media screen and (max-width: 1024px) {
  .pdfModal {
    width: 100%;
    height: 80vh;
  }

  .custom-dialog {
    .el-dialog {
      width: 90vw !important;
    }
  }
}

@media screen and (max-width: 800px) {
  .pdfModal {
    width: 100%;
    height: 60vh;
  }

  .custom-dialog {
    .el-dialog {
      width: 90vw !important;
    }
  }
}


.custom-dialog {
  overflow: hidden !important;

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    background-color: rgba(0, 0, 0, 0.8);

    .header_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";

      span:nth-child(2):hover {
        cursor: pointer;
      }
    }

    .el-dialog__title,
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";
    }
  }
}

.tablePublic input[type="checkbox"]:checked + .checkmark {
  background: #000 !important;

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

@@ -26,6 +26,7 @@
      <ChapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        @openPDFChange="swdtChange"
      />
      <!-- <ChapterFour
        v-if="showCatalogList.indexOf(5) > -1"
@@ -281,11 +282,18 @@
  },
  methods: {
    swdtChange(data) {
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
      console.log("子应用pdf", data);
      if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) {
        if (data.type == "pdf") {
          this.$store.state.qiankun.openPDF({
            data: data.data,
          });
        } else {
        this.$store.state.qiankun.chooseWords({
          type: data.type,
          data: data.data,
        });
        }
      }
    },
    changeDomViewer() {
@@ -724,23 +732,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(
@@ -763,12 +767,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,
@@ -787,8 +787,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },

 src/books/sportsAndHealth/view/components/testPp.vue

@@ -1461,7 +1461,6 @@
        :visible.sync="dialogVisible"
        width="60vw"
        top="2vh"
        append-to-body
        lock-scroll
        :show-close="false"
        class="custom-dialog"
@@ -1693,9 +1692,18 @@
    },
    toUrl(val) {
      if (val) {
        this.dialogVisible = true;
        this.p_md5 = this.chapter002.pdfMd5[val].md5;
        this.pdfTitle = this.chapter002.pdfMd5[val].name;
        const obj = {
          type: "pdf",
          data: {
            md5: this.chapter002.pdfMd5[val].md5,
            title: this.chapter002.pdfMd5[val].name,
          },
        };
        this.$emit("openPDFChange", obj);

        // this.dialogVisible = true;
        // this.p_md5 = this.chapter002.pdfMd5[val].md5;
        // this.pdfTitle = this.chapter002.pdfMd5[val].name;
      }
    },
    async getVideo(md5, val) {
@@ -1730,3 +1738,69 @@
  },
};
</script>

<style lang="less">
.pdfModal {
  width: 100%;
  height: 90vh;
}
.custom-dialog {
  overflow: hidden !important;

  /deep/ .el-dialog__body {
    padding: 0;
  }

  /deep/ .el-dialog__header {
    background-color: rgba(0, 0, 0, 0.8);

    .header_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";

      span:nth-child(2):hover {
        cursor: pointer;
      }
    }

    /deep/.el-dialog__title,
    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";
    }
  }
}

@media screen and (max-width: 1024px) {
  .pdfModal {
    width: 100%;
    height: 80vh;
  }

  .custom-dialog {
    /deep/ .el-dialog {
      width: 90vw !important;
    }
  }
}

@media screen and (max-width: 800px) {
  .pdfModal {
    width: 100%;
    height: 60vh;
  }

  .custom-dialog {
    /deep/ .el-dialog {
      width: 90vw !important;
    }
  }
}
</style>

 src/components/pdfview/index.vue

@@ -92,12 +92,12 @@
      });
    },
    clearDom() {
      let ele = (this.container ? this.container : document).getElementById("imageParent");
      let ele = document.getElementById("imageParent");
      ele.innerHtml = "";
    },
    createDom(page) {
      var that = this;
      let ele = (this.container ? this.container : document).getElementById("imageParent");
      let ele = document.getElementById("imageParent");
      const img = document.createElement("img");
      img.src = this.getPageImage(page);
      img.alt = "";
@@ -112,7 +112,7 @@
    },
    scrollBottom() {
      var that = this;
      var ele = (this.container ? this.container : document).getElementById("imageParent");
      var ele = document.getElementById("imageParent");
      ele.addEventListener("scroll", function () {
        // 计算滚动条距离底部的位置
        const scrollBottom =