|
|
@@ -11,17 +11,17 @@
|
|
|
<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>
|
|
|
- <van-sticky offset-top="120vh" @scroll="stickyScroll" v-show="buyed == 1">
|
|
|
+ <van-sticky :offset-top="Offset" @scroll="stickyScroll" v-show="buyed == 1">
|
|
|
<div class="head-tip" :class="{'is-fixed':fixed}">
|
|
|
- <h3 v-show="fixed">
|
|
|
+ <h3 class="flex" v-show="fixed">
|
|
|
<van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
|
|
|
- <span>{{detailData.docName}}</span>
|
|
|
+ <span class="flex">{{detailData.docName}}</span>
|
|
|
</h3>
|
|
|
- <span class="pages"><i id="page_num"></i> / <i id="page_count"></i></span>
|
|
|
+<!-- <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>
|
|
|
+ <pdf v-for="i in pdfPage.pageNum" :key="i" :src="pdfPage.url" :page="i"></pdf>
|
|
|
</div>
|
|
|
<van-goods-action>
|
|
|
<van-goods-action-icon class="no-icon">
|
|
|
@@ -49,8 +49,7 @@ import Recharge from '@/components/Recharge.vue'
|
|
|
import sharePop from '@/components/SharePopup.vue'
|
|
|
import { MixinTop } from '@/utils/mixin-top'
|
|
|
import { weChatShare } from '@/utils/wxShare'
|
|
|
-const pdfjsLib = require('pdfjs-dist/build/pdf.js')
|
|
|
-const pdfjsViewer = require('pdfjs-dist/web/pdf_viewer.js')
|
|
|
+import pdf from 'vue-pdf'
|
|
|
|
|
|
@Component({
|
|
|
name: 'details-p',
|
|
|
@@ -62,7 +61,8 @@ const pdfjsViewer = require('pdfjs-dist/web/pdf_viewer.js')
|
|
|
[GoodsActionIcon.name]: GoodsActionIcon,
|
|
|
[GoodsActionButton.name]: GoodsActionButton,
|
|
|
Recharge,
|
|
|
- sharePop
|
|
|
+ sharePop,
|
|
|
+ pdf
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions({
|
|
|
@@ -90,7 +90,11 @@ export default class extends Vue {
|
|
|
docIds = ''
|
|
|
fixed = false
|
|
|
coins: any = []
|
|
|
- conts: any = []
|
|
|
+ pdfPage = {
|
|
|
+ pageNum: 0,
|
|
|
+ url: ''
|
|
|
+ }
|
|
|
+
|
|
|
getAdd: any
|
|
|
getRemove: any
|
|
|
detailData: any = []
|
|
|
@@ -101,9 +105,9 @@ export default class extends Vue {
|
|
|
config: any = {
|
|
|
PAGE_TO_VIEW: 0,
|
|
|
SCALE: 0,
|
|
|
- CMAP_URL: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/cmaps/',
|
|
|
+ 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.1.266/build/pdf.worker.min.js'
|
|
|
+ workerSrc: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.worker.min.js'
|
|
|
}
|
|
|
|
|
|
pData: any = {
|
|
|
@@ -136,7 +140,7 @@ export default class extends Vue {
|
|
|
|
|
|
initHeight () {
|
|
|
const top = window.scrollY
|
|
|
- console.log(top)
|
|
|
+ // console.log(top)
|
|
|
let base = 0
|
|
|
for (let i = 0; i < this.pData.heightList.length; i++) {
|
|
|
base += this.pData.heightList[i]
|
|
|
@@ -147,6 +151,25 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ get Offset () {
|
|
|
+ const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
|
|
|
+ if (tempN) {
|
|
|
+ return tempN.offsetHeight - 1
|
|
|
+ } else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getNumPages (url: string) {
|
|
|
+ const loadingTask = pdf.createLoadingTask(url)
|
|
|
+ loadingTask.promise.then((pdf: any) => {
|
|
|
+ this.pdfPage.url = loadingTask
|
|
|
+ this.pdfPage.pageNum = pdf.numPages
|
|
|
+ }).catch((err: any) => {
|
|
|
+ console.error('pdf加载失败', err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
async getShareUrl () {
|
|
|
const { data } = await this.getShare({ docId: this.docIds })
|
|
|
this.links = data.url || location.href
|
|
|
@@ -164,8 +187,8 @@ export default class extends Vue {
|
|
|
;(this.$refs.shares as any).show = true
|
|
|
}
|
|
|
|
|
|
- updateText (data) {
|
|
|
- console.log(data)
|
|
|
+ updateText (data: any) {
|
|
|
+ // console.log(data)
|
|
|
switch (data.type) {
|
|
|
case 'count': {
|
|
|
;(document.getElementById('page_count') as HTMLDivElement).textContent = data.value
|
|
|
@@ -178,46 +201,9 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- 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)
|
|
|
- pdfjsLib.GlobalWorkerOptions.workerSrc = this.config.workerSrc
|
|
|
- const loadingTask = pdfjsLib.getDocument({
|
|
|
- url: this.conts,
|
|
|
- cMapUrl: this.config.CMAP_URL,
|
|
|
- cMapPacked: this.config.CMAP_PACKED
|
|
|
- })
|
|
|
- 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()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
stickyScroll (data: any) {
|
|
|
const tops = data.scrollTop
|
|
|
- console.log(this.$parent.$el.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]
|
|
|
@@ -235,15 +221,13 @@ export default class extends Vue {
|
|
|
|
|
|
buyShow () {
|
|
|
this.getShow({ docId: this.docIds }).then((res: any) => {
|
|
|
- console.log(res.data)
|
|
|
- this.conts = res.data
|
|
|
- this.init()
|
|
|
+ this.getNumPages(res.data)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onList () {
|
|
|
this.getDetails({ docId: this.docIds, from: this.$route.query.from }).then((res: any) => {
|
|
|
- console.log(res.data)
|
|
|
+ // console.log(res.data)
|
|
|
this.detailData = res.data.detail
|
|
|
this.detailData.docSummary = res.data.detail.docSummary.split('').length >= 500 ? res.data.detail.docSummary + '...' : res.data.detail.docSummary
|
|
|
this.buyed = res.data.status
|
|
|
@@ -254,7 +238,7 @@ export default class extends Vue {
|
|
|
this.getShareUrl()
|
|
|
})
|
|
|
this.getCoin({ B: true }).then((res: any) => {
|
|
|
- console.log(res.data.data)
|
|
|
+ // console.log(res.data.data)
|
|
|
this.coins = res.data.points
|
|
|
})
|
|
|
}
|
zhangyuhan