更新

jydocs-mobile/src/components/SharePopup.vue

@@ -52,7 +52,7 @@ export default class extends Vue {
         type: num, // options.type--1微信分享，2qq分享，3朋友圈分享
         title: this.detailData.docName,
         content: this.detailData.docSummary,
-        link: this.links.url
+        link: this.links
       })
     }
 

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

@@ -4,20 +4,22 @@
           <div class="word">
             <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
           </div>
-          <div class="title">{{detailData.docName}}</div>
+          {{detailData.docName}}
         </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>
+        <van-sticky offset-top="120vh" @scroll="stickyScroll" v-show="buyed == 1">
+          <div class="head-tip" :class="{'is-fixed':fixed}">
+              <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>
+        </van-sticky>
         <div class="botts" v-show="buyed == 1">
             <div class="cont-page" id="pdfPage"></div>
         </div>
@@ -42,7 +44,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { mapActions } from 'vuex'
-import { Icon, Toast, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
+import { Icon, Toast, GoodsAction, GoodsActionIcon, GoodsActionButton, Sticky } from 'vant'
 import Recharge from '@/components/Recharge.vue'
 import sharePop from '@/components/SharePopup.vue'
 import { MixinTop } from '@/utils/mixin-top'
@@ -55,6 +57,7 @@ const pdfjsViewer = require('pdfjs-dist/web/pdf_viewer.js')
   mixins: [MixinTop],
   components: {
     [Icon.name]: Icon,
+    [Sticky.name]: Sticky,
     [GoodsAction.name]: GoodsAction,
     [GoodsActionIcon.name]: GoodsActionIcon,
     [GoodsActionButton.name]: GoodsActionButton,
@@ -79,12 +82,11 @@ export default class extends Vue {
   getDown: any
   getShow: any
   getShare: any
-  links: any = []
+  links = ''
   docIds = ''
   fixed = false
   coins: any = []
   conts: any = []
-  offsets: any = 0
   getAdd: any
   getRemove: any
   detailData: any = []
@@ -94,7 +96,7 @@ export default class extends Vue {
   pdfDocument: any
   config: any = {
     PAGE_TO_VIEW: 0,
-    SCALE: 0,
+    SCALE: 1,
     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'
@@ -117,8 +119,6 @@ export default class extends Vue {
   created () {
     this.docIds = this.$route.params.id
     this.onList()
-    this.setTop()
-    console.log(window.screen.width)
   }
 
   mounted () {
@@ -130,21 +130,9 @@ export default class extends Vue {
     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
+    console.log(top)
     let base = 0
     for (let i = 0; i < this.pData.heightList.length; i++) {
       base += this.pData.heightList[i]
@@ -172,15 +160,15 @@ export default class extends Vue {
     ;(this.$refs.shares as any).show = true
   }
 
-  updateText (data: any) {
-    console.log(data)
-    switch (data.type) {
+  updateText ({ type = '', value = '' }) {
+    console.log(type, value)
+    switch (type) {
       case 'count': {
-        document.getElementById('page_count').textContent = data.value
+        document.getElementById('page_count').textContent = value
         break
       }
       case 'num': {
-        document.getElementById('page_num').textContent = data.value
+        document.getElementById('page_num').textContent = value
         break
       }
     }
@@ -188,8 +176,6 @@ export default class extends Vue {
 
   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,
@@ -225,16 +211,22 @@ export default class extends Vue {
     })
   }
 
-  watchPage () {
-    const top = window.scrollY
+  stickyScroll (data: any) {
+    const tops = data.scrollTop
+    console.log(this.$parent.$el.scrollTop)
     let base = 0
     for (let i = 0; i < this.pData.heightList.length; i++) {
       base += this.pData.heightList[i]
-      if (top <= base) {
+      if (tops <= base) {
         this.updateText({ type: 'num', value: i + 1 })
         break
       }
     }
+    if (data.isFixed) {
+      this.fixed = true
+    } else {
+      this.fixed = false
+    }
   }
 
   buyShow () {
@@ -338,28 +330,25 @@ export default class extends Vue {
 @include diy-icon('guanzhu', 20, 20);
 @include diy-icon('iconJianYu', 24, 24);
 .details-p {
-    display: flex;
-    flex-direction: column;
     padding-bottom: 80px;
+    box-sizing: border-box;
     .tops {
         display: flex;
         flex-direction: initial;
         background: #fff;
         padding: 24px 16px;
+        color: #171826;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 30px;
         .word {
           display: flex;
         }
         .word01 {
-            display: flex;
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-        }
-        .title {
-          color: #171826;
-          font-weight: 500;
-          font-size: 20px;
-          line-height: 30px;
+          display: flex;
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
         }
     }
     .middles {
@@ -397,7 +386,7 @@ export default class extends Vue {
     }
     .head-tip {
         width: auto;
-        height: 60px;
+        height: 40px;
         background: #fcfcfc;
         display: flex;
         justify-content: flex-end;
@@ -438,8 +427,6 @@ export default class extends Vue {
         }
     }
     .is-fixed {
-        position: fixed;
-        top: 0;
         justify-content: space-between;
     }
     .botts {

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

@@ -140,7 +140,7 @@ export default class extends Vue {
     this.getBool(this.validator(this.tel))
   }
 
-  getBool (bool) {
+  getBool (bool: any) {
     if (this.checked === true && bool === true) {
       this.btnChecked = true
     } else {