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

闫增涛

2024-06-11 d89711152df6f372e6de0ff2292f62688b441b39

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

 src/App.vue

@@ -72,7 +72,7 @@
        // embedded
        // english
        // artAndDance
        this.config.resourceCtx + "childHealth"
        this.config.resourceCtx + "sportsAndHealth"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/sportsAndHealth/css/default.less

@@ -212,12 +212,13 @@

              span {
                display: block;
                height: 25px;
                line-height: 15px;
                height: 30px;
                line-height: 19px;
                border: 1px solid #89a0d0;
                padding: 5px 15px;
                box-sizing: border-box;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                -webkit-user-select: none;
                /* Safari 3.1+ */
@@ -555,6 +556,7 @@
          margin: 0;
          // font-weight: 900;
          margin-bottom: 10px;
          text-indent: 2em;
        }



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

@@ -114,11 +114,22 @@
        </div>
      </div>
    </div>
    <!-- <div class="page-box" page="226">
      <div v-if="showPageList.indexOf(226)>-1">
        <div class="bodystyle">
          <pdfView :md5="md5"></pdfView>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
// import pdfView from '@/components/pdfview'
export default {
  name: "testD",
  // components:{
  //   pdfView
  // },
  props: {
    showPageList: {
      type: Array,
@@ -127,5 +138,10 @@
      type: Object,
    },
  },
  data(){
    return {
      md5:'54741d14a21eb47b2ed06a2231271cd5'
    }
  }
};
</script>

 src/components/pdfview/index.vue

New file
@@ -0,0 +1,145 @@
<template>
  <div class="imgbox">
    <img
      ref="image"
      :onLoad="initFun"
      :onDragStart="dragStart"
      :onWheel="handleScroll"
      :src="currentPageSrc"
      alt=""
    />
  </div>
</template>
<script>
export default {
  name: "pdf_view",
  props: {
    md5: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      currentPageSrc: "",
      fileLoading: false,
      visible: true,
      close: null,
      currentPage: 1,
      totalPage: 1,
      rcViewerOptions: {
        // inline: true
      },
      zoom: 1,
      catalogVisible: false,
      tocData: [],
      generateList: [],
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      drawerSize: "default",
    };
  },
  watch: {
    md5: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getFileInfo();
        }
      },
    },
  },
  created() {
    this.getFileInfo();
  },
  methods: {
    initFun() {
      // 初始化拖拽
      let image = this.refs.image;
      let imageBox = this.refs.imageBox;
      let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
      image.style.left = initLeft + "px";
      image.style.top = 0 + "px";
      let canMove = false;
      let offsetX, offsetY, oldLeft, oldTop;
      image.onmousedown = function (e) {
        canMove = true;
        offsetX = e.x;
        offsetY = e.y;
        oldLeft = parseFloat(image.style.left.split("px")[0]);
        oldTop = parseFloat(image.style.top.split("px")[0]);
      };
      imageBox.onmousemove = function (e) {
        if (canMove == true) {
          let left = e.clientX - offsetX;
          let top = e.clientY - offsetY;
          image.style.left = oldLeft + left + "px";
          image.style.top = oldTop + top + "px";
        }
      };
      image.onmouseup = function () {
        canMove = false;
      };
      this.fileLoading = false;
    },
    dragStart(e) {
      if (e && e.preventDefault) {
        e.preventDefault();
      } else {
        window.event.returnValue = false;
      }
    },
    handleScroll(e) {
      if (e.nativeEvent.deltaY <= 0) {
        if (this.zoom < 3) {
          let newZoom = this.zoom + 0.1;
          this.zoom = newZoom;
          this.refs.image.style.height = newZoom * 100 + "%";
        }
      } else {
        if (this.zoom > 0.5) {
          let newZoom = this.zoom - 0.1;
          this.zoom = newZoom;
          this.refs.image.style.height = newZoom * 100 + "%";
        }
      }
    },
    getFileInfo() {
      // 获取目录
      this.MG.file
        .getPdfInfo({ md5: this.md5 })
        .then((res) => {
          this.totalPage = res.totalPages;
          this.getPageImage(this.currentPage);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getPageImage(page) {
      const ctx = process.env.VUE_APP_API_URL;
      this.fileLoading = true;
      this.currentPageSrc =
        ctx +
        "/file/GetPdfPageImage" +
        "?md5=" +
        this.md5 +
        "&index=" +
        page +
        "&dpi=150";
    },
  },
};
</script>
<style scoped lang="less">
.imgbox {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  img {
    width: 100%;
  }
}
</style>