提交

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

@@ -1,20 +1,25 @@
 <template>
     <div class="details-p">
         <div class="tops">
-            <h3>
-                <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
-                {{detailData.docName}}
-            </h3>
+          <div class="word">
+            <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
+          </div>
+          <div class="title">{{detailData.docName}}</div>
         </div>
         <div class="middles">
             <h3>摘要</h3>
             <p>{{detailData.docSummary}}</p>
             <div class="continue" v-show="buyed == 0">全文共{{detailData.docPageSize}}页，<span @click="continued">继续阅读<van-icon name="arrow-down" size="18" /></span></div>
         </div>
+        <div class="head-tip" id="fixedTop" :class="{'is-fixed':fixed}" v-show="buyed == 1">
+            <h3 v-show="fixed">
+              <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
+              <span>{{detailData.docName}}</span>
+            </h3>
+            <span class="pages"><i id="page_num"></i> / <i id="page_count"></i></span>
+        </div>
         <div class="botts" v-show="buyed == 1">
-            <div class="cont-page" id="pdfPage" style="width: 375px">
-                <!-- <iframe :src="conts" width="100%" height="100%"></iframe> -->
-            </div>
+            <div class="cont-page" id="pdfPage"></div>
         </div>
         <van-goods-action>
             <van-goods-action-icon class="no-icon">
@@ -24,7 +29,7 @@
                 </template>
             </van-goods-action-icon>
             <van-goods-action-icon icon="diy-jubao" text="投诉举报" @click="jubaod" />
-            <van-goods-action-icon :icon="collectd==1?'diy-guanzhu':'diy-weiguanzhu'" text="收藏" @click="canged" />
+            <van-goods-action-icon :icon="collectd==1?'diy-guanzhu':'diy-weiguanzhu'" :text="collectd==1?'已收藏':'收藏'" @click="canged" />
             <van-goods-action-button text="下载文档" @click="uploaded" />
         </van-goods-action>
         <!-- 充值 -->
@@ -75,8 +80,10 @@ export default class extends Vue {
   getShare: any
   links: any = []
   docIds = ''
+  fixed = false
   coins: any = []
   conts: any = []
+  offsets: any = 0
   getAdd: any
   getRemove: any
   detailData: any = []
@@ -86,7 +93,7 @@ export default class extends Vue {
   pdfDocument: any
   config: any = {
     PAGE_TO_VIEW: 0,
-    SCALE: 0.9,
+    SCALE: 0,
     CMAP_URL: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/',
     CMAP_PACKED: true,
     workerSrc: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/es5/build/pdf.worker.min.js'
@@ -97,7 +104,7 @@ export default class extends Vue {
   }
 
   TopConfig: any = {
-    actionRightText: '<div style="display:flex;flex-direction: column;align-items: center;"><i class="j-icon icon-iconJianYu"></i><p style="color: #171826;font-size: 10px;line-height: 12px;margin-top:3px;">分享赚积分</p></div>',
+    actionRightText: '<div style="display:flex;flex-direction: column;align-items: center;"><i class="j-icon icon-iconJianYu"></i><p style="color: #171826;font-size: 10px;line-height: 12px;margin-top:3px;">分享赚剑鱼币</p></div>',
     actionRightCallback: this.shared,
     actionRightStyle: {
       color: '#5F5E64',
@@ -109,15 +116,41 @@ export default class extends Vue {
   created () {
     this.docIds = this.$route.params.id
     this.onList()
+    this.setTop()
   }
 
   mounted () {
     // 监听滚轮
-    window.addEventListener('scroll', this.watchPage)
+    window.addEventListener('scroll', this.initHeight)
   }
 
   destroyed () { // 移除监听
-    window.removeEventListener('scroll', this.watchPage)
+    window.removeEventListener('scroll', this.initHeight)
+  }
+
+  setTop () {
+    this.$nextTick(() => {
+      // 获取到达页面顶端的值
+      const heights = document.getElementById('fixedTop')
+      this.offsets = heights.offsetTop
+      // this.offsets = heights.getBoundingClientRect().top
+      console.log(this.offsets)
+    })
+  }
+
+  initHeight () {
+    // 获取页面滚动距离
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+    this.fixed = !!(scrollTop > this.offsets && this.buyed)
+    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
+      }
+    }
   }
 
   shared () {
@@ -128,21 +161,24 @@ export default class extends Vue {
     })
   }
 
-  // updateText (type: any, value = '') {
-  //   switch (type) {
-  //     case 'count': {
-  //       document.querySelector('#page_count').textContent = value
-  //       break
-  //     }
-  //     case 'num': {
-  //       document.querySelector('#page_num').textContent = value
-  //       break
-  //     }
-  //   }
-  // }
+  updateText (data: any) {
+    console.log(data)
+    switch (data.type) {
+      case 'count': {
+        document.getElementById('page_count').textContent = data.value
+        break
+      }
+      case 'num': {
+        document.getElementById('page_num').textContent = data.value
+        break
+      }
+    }
+  }
 
   renders () {
     const container = document.getElementById('pdfPage')
+    // let notes = document.getElementById('pdfPage')
+    // document.getElementById('pdfPage').style.width = '100vw'
     return this.pdfDocument.getPage(this.config.PAGE_TO_VIEW).then((pdfPage: any) => {
       const pdfPageView = new pdfjsViewer.PDFPageView({
         container: container,
@@ -169,8 +205,8 @@ export default class extends Vue {
     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})
+      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()
@@ -184,7 +220,7 @@ export default class extends Vue {
     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})
+        this.updateText({ type: 'num', value: i + 1 })
         break
       }
     }
@@ -247,7 +283,6 @@ export default class extends Vue {
   }
 
   uploaded () {
-    Toast('点击按钮')
     if (this.buyed === 1) {
       this.getDown({ docId: this.docIds }).then((res: any) => {
         if (res.error_code === 0) {
@@ -258,7 +293,7 @@ export default class extends Vue {
       if (this.coins.balance < this.detailData.price) {
         ;(this.$refs.charge as any).show = true
       } else {
-        this.$router.push('/purchase/' + this.detailData.docId)
+        this.$router.replace('/purchase/' + this.detailData.docId)
       }
     }
   }
@@ -296,22 +331,23 @@ export default class extends Vue {
     padding-bottom: 80px;
     .tops {
         display: flex;
+        flex-direction: initial;
         background: #fff;
         padding: 24px 16px;
-        h3 {
+        .word {
+          display: flex;
+        }
+        .word01 {
             display: flex;
-            flex-direction: initial;
-            width: 100%;
-            color: #171826;
-            font-weight: 500;
-            font-size: 20px;
-            line-height: 30px;
-            .word01 {
-                display: inline-table;
-                width: 26px;
-                height: 24px;
-                margin-right: 8px;
-            }
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+        }
+        .title {
+          color: #171826;
+          font-weight: 500;
+          font-size: 20px;
+          line-height: 30px;
         }
     }
     .middles {
@@ -347,12 +383,60 @@ export default class extends Vue {
             }
         }
     }
+    .head-tip {
+        width: auto;
+        height: 60px;
+        background: #fcfcfc;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 16px;
+        border-bottom: 1px solid #F2F2F4;
+        h3 {
+            display: flex;
+            align-items: center;
+            span {
+                width: 260px;
+                color: #686868;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 24px;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+            }
+            i {
+                margin-right: 8px;
+            }
+        }
+        .pages {
+            color: #686868;
+            font-size: 14px;
+            i:first-child {
+                display: inline-block;
+                font-style: normal;
+                width: 16px;
+                height: 16px;
+                line-height: 18px;
+                text-align: center;
+                border-radius: 2px;
+                background: #FFFFFF;
+                border: 1px solid #ECECEC;
+            }
+        }
+    }
+    .is-fixed {
+        position: fixed;
+        top: 0;
+        justify-content: space-between;
+    }
     .botts {
         // padding: 16px 24px;
         // width: 375px;
         background: #fff;
         .cont-page {
           // width: 375px;
+          overflow-y: scroll;
           background: #fff;
         }
     }

jydocs-mobile/vue.config.js

@@ -46,7 +46,8 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '^/dev/api': {
-        target: 'http://192.168.20.180:821',
+        target: 'http://web2-jytest.jydev.jianyu360.com',
+        // target: 'http://192.168.20.180:821',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
@@ -59,8 +60,8 @@ module.exports = {
         logLevel: 'debug'
       },
       '^/jyintegral': {
-        // target: 'http://web2-jytest.jydev.jianyu360.com',
-        target: 'http://192.168.20.145:820',
+        target: 'http://web2-jytest.jydev.jianyu360.com',
+        // target: 'http://192.168.20.145:820',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {