|
|
@@ -26,7 +26,7 @@
|
|
|
<el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
<span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
<div slot="content">
|
|
|
- <img :src="locaHref + 'jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
+ <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
<p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
@@ -47,13 +47,11 @@
|
|
|
<i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
|
|
|
<span>{{datas.docName}}</span>
|
|
|
</h3>
|
|
|
- <span><i>1</i> / {{datas.docPageSize}}</span>
|
|
|
+ <span class="pages"><i id="page_num"></i> / <i id="page_count"></i></span>
|
|
|
</div>
|
|
|
<div class="bottoms" id="colWidth" v-show="buyed">
|
|
|
<div class="page">
|
|
|
- <!-- <div class="cont-p" id="pdfPage"> -->
|
|
|
- <iframe :src="conts.data" width="920" height="900"></iframe>
|
|
|
- <!-- </div> -->
|
|
|
+ <div class="cont-p" id="pdfPage"></div>
|
|
|
</div>
|
|
|
<div class="foot-tip tops">
|
|
|
<div class="load-doc">
|
|
|
@@ -61,7 +59,7 @@
|
|
|
<el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
<span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
<div slot="content">
|
|
|
- <img :src="locaHref + 'jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
+ <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
<p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
@@ -87,7 +85,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { Button, Tooltip, Divider, Message } from 'element-ui'
|
|
|
-import { getDetails, getShow, getShare, getDown, getAdverse, getCoin, getAdd, getRemove } from '../api/modules/detail'
|
|
|
+import { getDetails, getShow, getDown, getAdverse, getCoin, getAdd, getRemove } from '../api/modules/detail'
|
|
|
export default {
|
|
|
components: {
|
|
|
[Button.name]: Button,
|
|
|
@@ -98,7 +96,6 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
docIds: '',
|
|
|
- wxImg: '',
|
|
|
locaHref: '',
|
|
|
datas: [],
|
|
|
conts: [],
|
|
|
@@ -110,16 +107,25 @@ export default {
|
|
|
offsetTop: 0,
|
|
|
offsetWidth: 0,
|
|
|
colWidth: 0,
|
|
|
- fixed: false
|
|
|
+ fixed: false,
|
|
|
+ pdfh5: null,
|
|
|
+ pdfDocument: null,
|
|
|
+ config: {
|
|
|
+ PAGE_TO_VIEW: 0,
|
|
|
+ SCALE: 1.0
|
|
|
+ },
|
|
|
+ pData: {
|
|
|
+ heightList: []
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.docIds = this.$route.params.id
|
|
|
// this.docIds = '19d53d64-8890-11eb-8699-0050568f51e7'
|
|
|
- this.locaHref = window.location.href
|
|
|
+ this.locaHref = window.location.origin
|
|
|
+ this.setTop()
|
|
|
this.details()
|
|
|
this.adverse()
|
|
|
- this.setTop()
|
|
|
},
|
|
|
mounted () {
|
|
|
// 监听滚轮
|
|
|
@@ -129,6 +135,67 @@ export default {
|
|
|
window.removeEventListener('scroll', this.initHeight)
|
|
|
},
|
|
|
methods: {
|
|
|
+ initHeight () {
|
|
|
+ // 获取页面滚动距离
|
|
|
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
|
+ this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
|
|
|
+ this.watchPage()
|
|
|
+ },
|
|
|
+ updateText ({type, value = ''}) {
|
|
|
+ switch (type) {
|
|
|
+ case 'count': {
|
|
|
+ document.querySelector('#page_count').textContent = value
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'num': {
|
|
|
+ document.querySelector('#page_num').textContent = value
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ renders () {
|
|
|
+ const container = document.getElementById("pdfPage")
|
|
|
+ return this.pdfDocument.getPage(this.config.PAGE_TO_VIEW).then((pdfPage) => {
|
|
|
+ var 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.data)
|
|
|
+ const loadingTask = pdfjsLib.getDocument({
|
|
|
+ url: this.conts.data
|
|
|
+ })
|
|
|
+ loadingTask.promise.then((pdfDocument) => {
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watchPage () {
|
|
|
+ let 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
details () {
|
|
|
getDetails({ docId: this.docIds }).then(res => {
|
|
|
console.log(res)
|
|
|
@@ -154,17 +221,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- getShare({ docId: this.docIds }).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.data.error_code === 0) {
|
|
|
- this.wxImg = res.data.data.url
|
|
|
- console.log(res.data)
|
|
|
- }
|
|
|
- })
|
|
|
getShow({ docId: this.docIds }).then(res => {
|
|
|
console.log(res.data)
|
|
|
if (res.data.error_code === 0) {
|
|
|
this.conts = res.data
|
|
|
+ this.init()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -177,17 +238,14 @@ export default {
|
|
|
setTop () {
|
|
|
this.$nextTick(() => {
|
|
|
// 获取到达页面顶端的值
|
|
|
- const height = document.getElementById('fixedTop')
|
|
|
- this.offsetTop = height.getBoundingClientRect().top
|
|
|
+ const heights = document.getElementById('fixedTop')
|
|
|
+ // this.offsetTop = heights.offsetTop
|
|
|
+ this.offsetTop = heights.getBoundingClientRect().top
|
|
|
console.log(this.offsetTop)
|
|
|
})
|
|
|
},
|
|
|
- initHeight () {
|
|
|
- // 获取页面滚动距离
|
|
|
- const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
|
- this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
|
|
|
- },
|
|
|
shoucang () {
|
|
|
+ console.log(this.collectd)
|
|
|
if (this.collectd === 0) {
|
|
|
getAdd({ docId: this.docIds }).then(res => {
|
|
|
console.log(res)
|
|
|
@@ -213,13 +271,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
continued () {
|
|
|
- // this.buyed = !this.buyed;
|
|
|
- // this.setTop();
|
|
|
+ this.loadFile()
|
|
|
},
|
|
|
loadFile () {
|
|
|
if (this.buyed) {
|
|
|
getDown({ docId: this.docIds }).then(res => {
|
|
|
- console.log(res.data)
|
|
|
if (res.data.error_code === 0) {
|
|
|
window.location.href = res.data.data
|
|
|
}
|
|
|
@@ -447,10 +503,10 @@ export default {
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
- span {
|
|
|
+ .pages {
|
|
|
color: #686868;
|
|
|
font-size: 14px;
|
|
|
- i {
|
|
|
+ i:first-child {
|
|
|
display: inline-block;
|
|
|
font-style: normal;
|
|
|
width: 22px;
|
|
|
@@ -473,7 +529,6 @@ export default {
|
|
|
flex-direction: column;
|
|
|
.page {
|
|
|
.cont-p {
|
|
|
- height: 1248px;
|
|
|
background: #fff;
|
|
|
padding: 24px 40px 32px;
|
|
|
}
|
xgwangman