Merge remote-tracking branch 'origin/master'

jydocs-mobile/src/views/details/details.vue

@@ -12,9 +12,9 @@
             <div class="continue" v-show="!buyed">全文共{{detailData.docPageSize}}页，<span @click="continued">继续阅读<van-icon name="arrow-down" size="18" /></span></div>
         </div>
         <div class="botts" v-show="buyed">
-            <!-- <div class="cont-page"> -->
-                <iframe :src="conts.data" width="920" height="900"></iframe>
-            <!-- </div> -->
+            <div class="cont-page" id="pdfPage">
+                <iframe :src="conts" width="100%" height="100%"></iframe>
+            </div>
         </div>
         <van-goods-action>
             <van-goods-action-icon class="no-icon">
@@ -72,12 +72,91 @@ export default class extends Vue {
   detailData: any = []
   collectd = 0
   buyed = 0
+  pdfh5 = null
+  pdfDocument: any
+  config: any = {
+    PAGE_TO_VIEW: 0,
+    SCALE: 1.0
+  }
+
+  pData: any = {
+    heightList: []
+  }
+
   created () {
     this.docIds = this.$route.params.id
     // this.docIds = '19d53d64-8890-11eb-8699-0050568f51e7'
     this.onList()
   }
 
+  mounted () {
+    // 监听滚轮
+    window.addEventListener('scroll', this.watchPage)
+  }
+
+  destroyed () { // 移除监听
+    window.removeEventListener('scroll', this.watchPage)
+  }
+
+  // updateText (type: any, value = '') {
+  //   switch (type) {
+  //     case 'count': {
+  //       document.querySelector('#page_count').textContent = value
+  //       break
+  //     }
+  //     case 'num': {
+  //       document.querySelector('#page_num').textContent = value
+  //       break
+  //     }
+  //   }
+  // }
+
+  // renders () {
+  //   const container = document.getElementById('pdfPage')
+  //   return this.pdfDocument.getPage(this.config.PAGE_TO_VIEW).then((pdfPage: any) => {
+  //     const pdfPageView = new pdfjsViewer.PDFPageView({
+  //       container: container,
+  //       id: this.config.PAGE_TO_VIEW,
+  //       scale: this.config.SCALE,
+  //       defaultViewport: pdfPage.getViewport({ scale: this.config.SCALE }),
+  //       eventBus: new pdfjsViewer.EventBus(),
+  //       annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory()
+  //     })
+  //     pdfPageView.setPdfPage(pdfPage)
+  //     this.pData.heightList.push(pdfPageView.viewport.height)
+  //     return pdfPageView.draw()
+  //   })
+  // }
+
+  // init () {
+  //   console.log(this.conts)
+  //   const loadingTask = pdfjsLib.getDocument({
+  //     url: this.conts
+  //   })
+  //   loadingTask.promise.then((pdfDocument: any) => {
+  //     this.pdfDocument = pdfDocument
+  //     console.log(this.pdfDocument.numPages)
+  //     // this.updateText({type: 'count', value: this.pdfDocument.numPages})
+  //     // this.updateText({type: 'num', value: 1})
+  //     for (let i = 0; i < this.pdfDocument.numPages; i++) {
+  //       this.config.PAGE_TO_VIEW++
+  //       this.renders()
+  //     }
+  //   })
+  // }
+
+  watchPage () {
+    const top = window.scrollY
+    let base = 0
+    for (let i = 0; i < this.pData.heightList.length; i++) {
+      base += this.pData.heightList[i]
+      if (top <= base) {
+        // this.updateText({type: 'num', value: i + 1})
+        break
+      }
+    }
+  }
+
   onList () {
     this.getDetails({ docId: this.docIds }).then((res: any) => {
       console.log(res.data)
@@ -167,6 +246,7 @@ export default class extends Vue {
 .details-p {
     display: flex;
     flex-direction: column;
+    padding-bottom: 80px;
     .tops {
         display: flex;
         background: #fff;

jydocs-mobile/src/views/user/Library.vue

@@ -5,6 +5,7 @@
       :title-inactive-color="tabConf.titleInactiveColor"
       :line-width="tabConf.lineWidth"
       :color="tabConf.color"
+      :before-change="beforeTabChange"
       v-model="tabActive"
       class="j-container"
     >
@@ -55,13 +56,13 @@
             />
           </div>
         </van-list>
-        <Empty v-if="myLibListState.list.length === 0 && myCollectionListState.loaded">暂无数据</Empty>
+        <Empty v-if="myCollectionListState.list.length === 0 && myCollectionListState.loaded">暂无数据</Empty>
       </van-tab>
     </van-tabs>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { Tabs, Tab, List } from 'vant'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import Card from '@/components/docs-card/Card.vue'
@@ -139,11 +140,22 @@ export default class UserLibrary extends Vue {
     return map[this.tabActive] || map[0]
   }
 
+  @Watch('tabActive')
+  onTabChange () {
+    const i: any = this.$data[this.keyForList]
+    this.setScrollTop(i.scrollTop)
+  }
+
   created () {
     this.tabActive = this.$route.query.tab as string
     this.reStoreState()
   }
 
+  beforeTabChange () {
+    this.saveScrollTop()
+    return true
+  }
+
   toDocDetail (item: any) {
     const { docId: id } = item
     this.saveState()
@@ -188,7 +200,6 @@ export default class UserLibrary extends Vue {
   }
 
   reStoreState () {
-    console.log('reStoreState')
     const listInfo = this.userLibInfo
     if (!listInfo || Object.keys(listInfo).length === 0) {
       return false
@@ -211,10 +222,13 @@ export default class UserLibrary extends Vue {
     })
   }
 
-  saveState () {
-    console.log('saveState')
+  saveScrollTop () {
     const wrapper: any = document.querySelector('.van-tabs__content')
     this.$data[this.keyForList].scrollTop = wrapper.scrollTop
+  }
+
+  saveState () {
+    this.saveScrollTop()
     const d = {
       tabActive: this.tabActive,
       myLibListState: this.myLibListState,

jydocs-pc/public/index.html

@@ -18,6 +18,8 @@
       <script src="https://web2-jytest.jianyu360.cn/js/jquery-3.2.1.min.js?v=6302"></script>
       <script src="https://web2-jytest.jianyu360.cn/js/jquery.cookie.js"></script>
       <script src="https://web2-jytest.jianyu360.cn/js/bootstrap.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/web/pdf_viewer.js"></script>
 
       <link href='https://web2-jytest.jianyu360.cn/css/reset.css?v=6302' rel="stylesheet" type="text/css"/>
       <link href='https://web2-jytest.jianyu360.cn/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>

jydocs-pc/src/views/Content.vue

@@ -26,7 +26,7 @@
                       <el-tooltip placement="bottom" effect="light" popper-class="f-share">
                           <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
                           <div slot="content">
-                              <img :src="locaHref + 'jydocs/share/img?docId=' + docIds" width="110" height="108">
+                              <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
                               <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
                           </div>
                       </el-tooltip>
@@ -47,13 +47,11 @@
                 <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
                 <span>{{datas.docName}}</span>
                 </h3>
-                <span><i>1</i> / {{datas.docPageSize}}</span>
+                <span class="pages"><i id="page_num"></i> / <i id="page_count"></i></span>
           </div>
           <div class="bottoms" id="colWidth" v-show="buyed">
               <div class="page">
-                  <!-- <div class="cont-p" id="pdfPage"> -->
-                    <iframe :src="conts.data" width="920" height="900"></iframe>
-                  <!-- </div> -->
+                  <div class="cont-p" id="pdfPage"></div>
               </div>
               <div class="foot-tip tops">
                   <div class="load-doc">
@@ -61,7 +59,7 @@
                           <el-tooltip placement="bottom" effect="light" popper-class="f-share">
                               <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
                               <div slot="content">
-                                  <img :src="locaHref + 'jydocs/share/img?docId=' + docIds" width="110" height="108">
+                                  <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
                                   <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
                               </div>
                           </el-tooltip>
@@ -87,7 +85,7 @@
 
 <script>
 import { Button, Tooltip, Divider, Message } from 'element-ui'
-import { getDetails, getShow, getShare, getDown, getAdverse, getCoin, getAdd, getRemove } from '../api/modules/detail'
+import { getDetails, getShow, getDown, getAdverse, getCoin, getAdd, getRemove } from '../api/modules/detail'
 export default {
   components: {
     [Button.name]: Button,
@@ -98,7 +96,6 @@ export default {
   data () {
     return {
       docIds: '',
-      wxImg: '',
       locaHref: '',
       datas: [],
       conts: [],
@@ -110,16 +107,25 @@ export default {
       offsetTop: 0,
       offsetWidth: 0,
       colWidth: 0,
-      fixed: false
+      fixed: false,
+      pdfh5: null,
+      pdfDocument: null,
+      config: {
+        PAGE_TO_VIEW: 0,
+        SCALE: 1.0
+      },
+      pData: {
+        heightList: []
+      }
     }
   },
   created () {
     this.docIds = this.$route.params.id
     // this.docIds = '19d53d64-8890-11eb-8699-0050568f51e7'
-    this.locaHref = window.location.href
+    this.locaHref = window.location.origin
+    this.setTop()
     this.details()
     this.adverse()
-    this.setTop()
   },
   mounted () {
     // 监听滚轮
@@ -129,6 +135,67 @@ export default {
     window.removeEventListener('scroll', this.initHeight)
   },
   methods: {
+    initHeight () {
+      // 获取页面滚动距离
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
+      this.watchPage()
+    },
+    updateText ({type, value = ''}) {
+      switch (type) {
+        case 'count': {
+          document.querySelector('#page_count').textContent = value
+          break
+        }
+        case 'num': {
+          document.querySelector('#page_num').textContent = value
+          break
+        }
+      }
+    },
+    renders () {
+      const container = document.getElementById("pdfPage")
+      return this.pdfDocument.getPage(this.config.PAGE_TO_VIEW).then((pdfPage) => {
+        var pdfPageView = new pdfjsViewer.PDFPageView({
+          container: container,
+          id: this.config.PAGE_TO_VIEW,
+          scale: this.config.SCALE,
+          defaultViewport: pdfPage.getViewport({scale: this.config.SCALE}),
+          eventBus: new pdfjsViewer.EventBus(),
+          annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory()
+        })
+        pdfPageView.setPdfPage(pdfPage);
+        this.pData.heightList.push(pdfPageView.viewport.height)
+        return pdfPageView.draw();
+      });
+    },
+    init () {
+      console.log(this.conts.data)
+      const loadingTask = pdfjsLib.getDocument({
+        url: this.conts.data
+      })
+      loadingTask.promise.then((pdfDocument) => {
+        this.pdfDocument = pdfDocument
+        console.log(this.pdfDocument.numPages)
+        this.updateText({type: 'count', value: this.pdfDocument.numPages})
+        this.updateText({type: 'num', value: 1})
+        for (let i = 0; i < this.pdfDocument.numPages; i++) {
+          this.config.PAGE_TO_VIEW++
+          this.renders()
+        }
+      })
+    },
+    watchPage () {
+      let top = window.scrollY
+      let base = 0
+      for (let i = 0; i < this.pData.heightList.length; i++) {
+        base += this.pData.heightList[i]
+        if (top <= base) {
+          this.updateText({type: 'num', value: i + 1})
+          break
+        }
+      }
+    },
     details () {
       getDetails({ docId: this.docIds }).then(res => {
         console.log(res)
@@ -154,17 +221,11 @@ export default {
           }
         }
       })
-      getShare({ docId: this.docIds }).then(res => {
-        console.log(res)
-        if (res.data.error_code === 0) {
-          this.wxImg = res.data.data.url
-          console.log(res.data)
-        }
-      })
       getShow({ docId: this.docIds }).then(res => {
         console.log(res.data)
         if (res.data.error_code === 0) {
           this.conts = res.data
+          this.init()
         }
       })
     },
@@ -177,17 +238,14 @@ export default {
     setTop () {
       this.$nextTick(() => {
         // 获取到达页面顶端的值
-        const height = document.getElementById('fixedTop')
-        this.offsetTop = height.getBoundingClientRect().top
+        const heights = document.getElementById('fixedTop')
+        // this.offsetTop = heights.offsetTop
+        this.offsetTop = heights.getBoundingClientRect().top
         console.log(this.offsetTop)
       })
     },
-    initHeight () {
-      // 获取页面滚动距离
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-      this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
-    },
     shoucang () {
+      console.log(this.collectd)
       if (this.collectd === 0) {
         getAdd({ docId: this.docIds }).then(res => {
           console.log(res)
@@ -213,13 +271,11 @@ export default {
       }
     },
     continued () {
-      // this.buyed = !this.buyed;
-      // this.setTop();
+      this.loadFile()
     },
     loadFile () {
       if (this.buyed) {
         getDown({ docId: this.docIds }).then(res => {
-          console.log(res.data)
           if (res.data.error_code === 0) {
             window.location.href = res.data.data
           }
@@ -447,10 +503,10 @@ export default {
                     margin-right: 8px;
                 }
             }
-            span {
+            .pages {
                 color: #686868;
                 font-size: 14px;
-                i {
+                i:first-child {
                     display: inline-block;
                     font-style: normal;
                     width: 22px;
@@ -473,7 +529,6 @@ export default {
           flex-direction: column;
           .page {
               .cont-p {
-                  height: 1248px;
                   background: #fff;
                   padding: 24px 40px 32px;
               }