|
@@ -1,15 +1,15 @@
|
|
|
<template>
|
|
|
- <div class="details-p">
|
|
|
- <div class="de-tops">
|
|
|
- <div class="word">
|
|
|
- <i class="word-imgs" :class="'van-icon van-icon-diy-' + fileType(detailData.docFileType)"></i>
|
|
|
+ <div class="details-p" ref="sContent" @scroll="showMorePage">
|
|
|
+ <div>
|
|
|
+ <div class="top-title-group flex-r-c">
|
|
|
+ <van-icon :name="'diy-' + fileType(detailData.docFileType)"></van-icon>
|
|
|
+ <div class="flex">{{detailData.docName}}</div>
|
|
|
</div>
|
|
|
- <span>{{detailData.docName}}</span>
|
|
|
- </div>
|
|
|
- <div class="middles">
|
|
|
+ <div class="middles">
|
|
|
<h3>摘要</h3>
|
|
|
<p>{{detailData.docSummary}}</p>
|
|
|
<div class="continue" v-show="buyed == 0">全文共{{detailData.docPageSize}}页,<span @click="uploaded">阅读全文<van-icon name="arrow-down" size="18" /></span></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<van-sticky :offset-top="Offset" @scroll="stickyScroll" v-show="buyed == 1">
|
|
|
<div class="head-tip" :class="{'is-fixed':fixed}">
|
|
@@ -17,11 +17,12 @@
|
|
|
<van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
|
|
|
<span class="flex">{{detailData.docName}}</span>
|
|
|
</h3>
|
|
|
- <!-- <span class="pages"><i id="page_num"></i> / <i>{{detailData.docPageSize}}</i></span> -->
|
|
|
+<!-- <span class="pages"><i id="page_num"></i> / <i>{{detailData.docPageSize}}</i></span>-->
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
<div class="botts" v-show="buyed == 1">
|
|
|
- <pdf v-for="i in pdfPage.pageNum" :key="i" :src="pdfPage.url" :page="i"></pdf>
|
|
|
+ <pdf v-for="i in getPageNum"
|
|
|
+ :key="i" :src="pdfPage.url" :page="i"></pdf>
|
|
|
</div>
|
|
|
<van-goods-action>
|
|
|
<van-goods-action-icon class="no-icon">
|
|
@@ -99,7 +100,7 @@ export default class extends Vue {
|
|
|
|
|
|
getAdd: any
|
|
|
getRemove: any
|
|
|
- detailData: any = []
|
|
|
+ detailData: any = {}
|
|
|
collectd = 0
|
|
|
buyed = 0
|
|
|
flag = false
|
|
@@ -119,11 +120,18 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ showPageNum = 2
|
|
|
+ showPageNumT: any = ''
|
|
|
+
|
|
|
created () {
|
|
|
this.docIds = this.$route.params.id
|
|
|
this.onList()
|
|
|
}
|
|
|
|
|
|
+ get getPageNum () {
|
|
|
+ return this.showPageNum
|
|
|
+ }
|
|
|
+
|
|
|
get Offset () {
|
|
|
const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
|
|
|
if (tempN) {
|
|
@@ -133,6 +141,27 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ getMorePage () {
|
|
|
+ if (this.showPageNum < this.pdfPage.pageNum) {
|
|
|
+ if (this.showPageNum + 2 <= this.pdfPage.pageNum) {
|
|
|
+ this.showPageNum = this.showPageNum + 2
|
|
|
+ } else {
|
|
|
+ this.showPageNum = this.pdfPage.pageNum
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ showMorePage () {
|
|
|
+ const tDom = this.$refs.sContent as HTMLDivElement
|
|
|
+ const beBottom = tDom.scrollHeight - tDom.clientHeight - tDom.scrollTop
|
|
|
+ if (beBottom <= 200) {
|
|
|
+ clearTimeout(this.showPageNumT)
|
|
|
+ this.showPageNumT = setTimeout(() => {
|
|
|
+ this.getMorePage()
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
getNumPages (url: string) {
|
|
|
const loadingTask = pdf.createLoadingTask(url)
|
|
|
loadingTask.promise.then((pdf: any) => {
|
|
@@ -176,16 +205,6 @@ export default class extends Vue {
|
|
|
}
|
|
|
|
|
|
stickyScroll (data: any) {
|
|
|
- const tops = data.scrollTop
|
|
|
- let base = 0
|
|
|
- // console.log(this.pData.heightList)
|
|
|
- for (let i = 0; i < this.pData.heightList.length; i++) {
|
|
|
- base += this.pData.heightList[i]
|
|
|
- if (tops <= base) {
|
|
|
- this.updateText({ type: 'num', value: i + 1 })
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
if (data.isFixed) {
|
|
|
this.fixed = true
|
|
|
} else {
|
|
@@ -293,16 +312,25 @@ export default class extends Vue {
|
|
|
@include diy-icon('guanzhu', 20, 20);
|
|
|
@include diy-icon('iconJianYu', 24, 24);
|
|
|
.details-p {
|
|
|
- // height: 100%;
|
|
|
- // overflow: scroll;
|
|
|
- display: contents!important;
|
|
|
+ height: 100%;
|
|
|
padding-bottom: 80px;
|
|
|
box-sizing: border-box;
|
|
|
+ .top-title-group {
|
|
|
+ padding: 24px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #171826;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ .van-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.de-tops {
|
|
|
+ min-height: 70px;
|
|
|
display: flex;
|
|
|
- flex-direction: initial;
|
|
|
- height: auto!important;
|
|
|
- min-height: auto!important;
|
|
|
background: #fff;
|
|
|
padding: 0 16px;
|
|
|
.word {
|
|
@@ -311,11 +339,14 @@ export default class extends Vue {
|
|
|
margin-right: 8px;
|
|
|
padding-top: 24px;
|
|
|
.word-imgs {
|
|
|
+ display: flex;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
}
|
|
|
- span {
|
|
|
+ .sp-text {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
padding: 24px 0;
|
|
|
color: #171826;
|
|
|
font-size: 20px;
|