|
@@ -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, mapMutations } 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,
|
|
@@ -83,12 +86,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 = []
|
|
@@ -121,8 +123,6 @@ export default class extends Vue {
|
|
|
created () {
|
|
|
this.docIds = this.$route.params.id
|
|
|
this.onList()
|
|
|
- this.setTop()
|
|
|
- console.log(window.screen.width)
|
|
|
}
|
|
|
|
|
|
mounted () {
|
|
@@ -134,21 +134,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]
|
|
@@ -176,7 +164,7 @@ export default class extends Vue {
|
|
|
;(this.$refs.shares as any).show = true
|
|
|
}
|
|
|
|
|
|
- updateText (data: any) {
|
|
|
+ updateText (data) {
|
|
|
console.log(data)
|
|
|
switch (data.type) {
|
|
|
case 'count': {
|
|
@@ -192,8 +180,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,
|
|
@@ -229,16 +215,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 () {
|
|
@@ -342,28 +334,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 {
|
|
@@ -401,7 +390,7 @@ export default class extends Vue {
|
|
|
}
|
|
|
.head-tip {
|
|
|
width: auto;
|
|
|
- height: 60px;
|
|
|
+ height: 40px;
|
|
|
background: #fcfcfc;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
@@ -442,8 +431,6 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
.is-fixed {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.botts {
|