lzp
3 days ago
2 changed files with 244 additions and 245 deletions
@ -1,323 +1,322 @@ |
|||
<template> |
|||
<view class="box" style="position: relative"> |
|||
<!-- <image class="back" src='../../imgs/back.png' mode="widthFix" @click="handleBack"></image> --> |
|||
<image class="logo" src="../../imgs/logo.png" mode="widthFix"></image> |
|||
<view class="box-cent"> |
|||
<view class="box-cent1"> |
|||
<view class="view-pdf"> |
|||
<pdf |
|||
v-for="i in numPages" |
|||
:key="i" |
|||
:src="filePdfUrl" |
|||
:page="i" |
|||
></pdf> |
|||
</view> |
|||
</view> |
|||
<u-modal |
|||
v-if="show" |
|||
:show="show" |
|||
@cancel="show = false" |
|||
:showCancelButton="true" |
|||
content="是否确认退出登录？" |
|||
@confirm="handleOut" |
|||
></u-modal> |
|||
</view> |
|||
<!-- 底部背景图 --> |
|||
<view class="view-backimg"> |
|||
<view class="view-backimg-top"></view> |
|||
<!-- <view class="view-backimg-bottom"></view> --> |
|||
</view> |
|||
<!-- <div class="tools"> |
|||
<view style="width:50vw;display: flex;margin: auto;"> |
|||
<button :theme="'default'" type="submit" @click.stop="prePage" class="mr10"> |
|||
上一页 |
|||
</button> |
|||
<div class="page">{{pageNum}}/{{pageTotalNum}}</div> |
|||
<button :theme="'default'" type="submit" @click.stop="nextPage" class="mr10"> |
|||
下一页 |
|||
</button> |
|||
</view> |
|||
</div> --> |
|||
<!-- 头像 - 头像 --> |
|||
<view class="avatarobx"> |
|||
<view class="name">{{ userName }}</view> |
|||
<image |
|||
@click="handleBack" |
|||
class="avatar" |
|||
src="../../imgs/arrow-left.png" |
|||
mode="widthFix" |
|||
></image> |
|||
<image |
|||
@click="show = true" |
|||
class="avatar" |
|||
src="../../imgs/out.png" |
|||
mode="widthFix" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="box" style="position: relative"> |
|||
<image class="logo" src="../../imgs/logo.png" mode="widthFix"></image> |
|||
<view class="box-cent"> |
|||
<view class="box-cent1"> |
|||
<view class="view-pdf"> |
|||
<pdf |
|||
v-for="i in loadedPages" |
|||
:key="i" |
|||
:src="filePdfUrl" |
|||
:page="i" |
|||
></pdf> |
|||
</view> |
|||
</view> |
|||
<u-modal |
|||
v-if="show" |
|||
:show="show" |
|||
@cancel="show = false" |
|||
:showCancelButton="true" |
|||
content="是否确认退出登录？" |
|||
@confirm="handleOut" |
|||
></u-modal> |
|||
</view> |
|||
<view class="view-backimg"> |
|||
<view class="view-backimg-top"></view> |
|||
</view> |
|||
<view class="avatarobx"> |
|||
<view class="name">{{ userName }}</view> |
|||
<image |
|||
@click="handleBack" |
|||
class="avatar" |
|||
src="../../imgs/arrow-left.png" |
|||
mode="widthFix" |
|||
></image> |
|||
<image |
|||
@click="show = true" |
|||
class="avatar" |
|||
src="../../imgs/out.png" |
|||
mode="widthFix" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import pdf from 'vue-pdf'; |
|||
import pdf from "vue-pdf"; |
|||
export default { |
|||
name: 'MeetingList', |
|||
props: ['infos'], |
|||
components: { |
|||
pdf, |
|||
}, |
|||
data() { |
|||
return { |
|||
filePdfUrl: '', |
|||
userName: uni.getStorageSync('userName'), |
|||
detailsId: '', |
|||
numPages: '', |
|||
show: false, |
|||
}; |
|||
}, |
|||
created() { |
|||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 |
|||
let curParam = routes[routes.length - 1].options; //获取路由参数 |
|||
this.detailsId = curParam.detailsId; |
|||
this.filePdfUrl = curParam.filePdfUrl; |
|||
this.getNumPages(this.filePdfUrl); |
|||
}, |
|||
methods: { |
|||
getNumPages(url) { |
|||
this.pdfSrc = url; |
|||
this.pdfSrc = pdf.createLoadingTask(this.pdfSrc); |
|||
this.pdfSrc.promise.then((pdf) => { |
|||
this.numPages = pdf.numPages; |
|||
console.log('this.numPages', this.numPages); |
|||
}); |
|||
}, |
|||
// logo 回到首页 |
|||
handleBack() { |
|||
uni.navigateTo({ |
|||
url: `/pages/index/details?id=${this.detailsId}`, |
|||
}); |
|||
// uni.navigateBack({ |
|||
// delta: 1 |
|||
// }); |
|||
}, |
|||
// 退出登录 |
|||
handleOut() { |
|||
uni.clearStorage(); |
|||
uni.reLaunch({ |
|||
url: '/pages/user/login', |
|||
}); |
|||
}, |
|||
// logo 回到首页 |
|||
handleLogo() { |
|||
uni.navigateTo({ |
|||
url: `/pages/index/index`, |
|||
}); |
|||
}, |
|||
name: "MeetingList", |
|||
props: ["infos"], |
|||
components: { |
|||
pdf, |
|||
}, |
|||
data() { |
|||
return { |
|||
filePdfUrl: "", |
|||
userName: uni.getStorageSync("userName"), |
|||
detailsId: "", |
|||
numPages: 0, |
|||
show: false, |
|||
loadedPages: [], |
|||
currentPage: 1, |
|||
loadInterval: null, |
|||
loadCount: 5, // 默认每次加载5页 |
|||
}; |
|||
}, |
|||
created() { |
|||
let routes = getCurrentPages(); |
|||
let curParam = routes[routes.length - 1].options; |
|||
this.detailsId = curParam.detailsId; |
|||
this.filePdfUrl = curParam.filePdfUrl; |
|||
this.getNumPages(this.filePdfUrl); |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.loadInterval) { |
|||
clearInterval(this.loadInterval); |
|||
} |
|||
}, |
|||
methods: { |
|||
getNumPages(url) { |
|||
this.pdfSrc = url; |
|||
this.pdfSrc = pdf.createLoadingTask(this.pdfSrc); |
|||
this.pdfSrc.promise.then((pdf) => { |
|||
this.numPages = pdf.numPages; |
|||
this.startLoadingPages(); |
|||
}); |
|||
}, |
|||
|
|||
// 关闭弹窗 |
|||
handleClose() { |
|||
this.pdfId = ''; |
|||
this.show = false; |
|||
}, |
|||
// 上一页函数， |
|||
prePage() { |
|||
var page = this.pageNum; |
|||
page = page > 1 ? page - 1 : this.pageTotalNum; |
|||
this.pageNum = page; |
|||
}, |
|||
// 下一页函数 |
|||
nextPage() { |
|||
var page = this.pageNum; |
|||
page = page < this.pageTotalNum ? page + 1 : 1; |
|||
this.pageNum = page; |
|||
}, |
|||
// 页面加载回调函数，其中e为当前页数 |
|||
pageLoaded(e) { |
|||
this.curPageNum = e; |
|||
}, |
|||
// 其他的一些回调函数。 |
|||
pdfError(error) { |
|||
console.error(error); |
|||
}, |
|||
}, |
|||
// 页面显示调用接口 |
|||
onLoad() {}, |
|||
startLoadingPages() { |
|||
this.loadInterval = setInterval(() => { |
|||
if (this.currentPage <= this.numPages) { |
|||
// 每次加载loadCount页 |
|||
const endPage = Math.min( |
|||
this.currentPage + this.loadCount - 1, |
|||
this.numPages |
|||
); |
|||
for (let i = this.currentPage; i <= endPage; i++) { |
|||
this.loadedPages.push(i); |
|||
} |
|||
this.currentPage = endPage + 1; |
|||
} else { |
|||
clearInterval(this.loadInterval); |
|||
} |
|||
}, 500); |
|||
}, |
|||
handleBack() { |
|||
uni.navigateTo({ |
|||
url: `/pages/index/details?id=${this.detailsId}`, |
|||
}); |
|||
}, |
|||
handleOut() { |
|||
uni.clearStorage(); |
|||
uni.reLaunch({ |
|||
url: "/pages/user/login", |
|||
}); |
|||
}, |
|||
handleLogo() { |
|||
uni.navigateTo({ |
|||
url: `/pages/index/index`, |
|||
}); |
|||
}, |
|||
handleClose() { |
|||
this.pdfId = ""; |
|||
this.show = false; |
|||
}, |
|||
prePage() { |
|||
var page = this.pageNum; |
|||
page = page > 1 ? page - 1 : this.pageTotalNum; |
|||
this.pageNum = page; |
|||
}, |
|||
nextPage() { |
|||
var page = this.pageNum; |
|||
page = page < this.pageTotalNum ? page + 1 : 1; |
|||
this.pageNum = page; |
|||
}, |
|||
pageLoaded(e) { |
|||
this.curPageNum = e; |
|||
}, |
|||
pdfError(error) { |
|||
console.error(error); |
|||
}, |
|||
}, |
|||
onLoad() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .u-modal__content { |
|||
text-align: center; |
|||
text-align: center; |
|||
} |
|||
.popup-close { |
|||
position: fixed; |
|||
right: 20px; |
|||
top: 20px; |
|||
z-index: 9999; |
|||
position: fixed; |
|||
right: 20px; |
|||
top: 20px; |
|||
z-index: 9999; |
|||
|
|||
::v-deep.uni-icons { |
|||
font-size: 40px !important; |
|||
color: #fff !important; |
|||
} |
|||
::v-deep.uni-icons { |
|||
font-size: 40px !important; |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
|
|||
.view-gb { |
|||
max-width: 100px; |
|||
margin-left: 16px; |
|||
max-width: 100px; |
|||
margin-left: 16px; |
|||
} |
|||
|
|||
.view-li { |
|||
// padding-left: 10px; |
|||
// padding-left: 10px; |
|||
} |
|||
|
|||
.view-pdf { |
|||
max-width: 100%; |
|||
width: 60vw; |
|||
margin: auto; |
|||
max-width: 100%; |
|||
width: 60vw; |
|||
margin: auto; |
|||
} |
|||
|
|||
.tools { |
|||
display: flex; |
|||
align-items: center; |
|||
position: absolute; |
|||
bottom: 26px; |
|||
left: 16px; |
|||
right: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
position: absolute; |
|||
bottom: 26px; |
|||
left: 16px; |
|||
right: 16px; |
|||
|
|||
uni-button { |
|||
font-size: 18px; |
|||
line-height: 44px; |
|||
height: 44px; |
|||
flex: 1; |
|||
} |
|||
uni-button { |
|||
font-size: 18px; |
|||
line-height: 44px; |
|||
height: 44px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.page { |
|||
line-height: 44px; |
|||
height: 44px; |
|||
width: 100px; |
|||
text-align: center; |
|||
} |
|||
.page { |
|||
line-height: 44px; |
|||
height: 44px; |
|||
width: 100px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.pathsName { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.pdfBox .el-button { |
|||
background: rgba(255, 255, 255, 0); |
|||
border: none; |
|||
/* width: 30px; */ |
|||
background: rgba(255, 255, 255, 0); |
|||
border: none; |
|||
/* width: 30px; */ |
|||
} |
|||
|
|||
.pdfBox >>> .el-icon-arrow-left, |
|||
.pdfBox >>> .el-icon-arrow-right { |
|||
font-size: 18px; |
|||
color: #000; |
|||
font-size: 18px; |
|||
color: #000; |
|||
} |
|||
|
|||
.pdfBox .page { |
|||
margin: 0 10px; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.pdfBox .el-button-group { |
|||
width: 100%; |
|||
justify-content: center; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-top: 20px; |
|||
width: 100%; |
|||
justify-content: center; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
.pdfBox { |
|||
padding-bottom: 20px; |
|||
margin-top: 20px; |
|||
background: #fff; |
|||
min-height: 300px; |
|||
padding-bottom: 20px; |
|||
margin-top: 20px; |
|||
background: #fff; |
|||
min-height: 300px; |
|||
} |
|||
|
|||
.contLeft-pane >>> .el-form-item__label { |
|||
text-align: right; |
|||
margin-right: 10px !important; |
|||
padding: 0 !important; |
|||
text-align: right; |
|||
margin-right: 10px !important; |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.contLeft-pane >>> .el-form-item--medium .el-form-item__content { |
|||
flex: 1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.li-item { |
|||
uni-view { |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
uni-view { |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
|
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
|
|||
.li-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 30px; |
|||
} |
|||
.li-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
|
|||
.view-box { |
|||
margin-top: 50px; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.view-none { |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 40px !important; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 40px !important; |
|||
} |
|||
|
|||
.view-ul { |
|||
text-align: left; |
|||
margin-bottom: 16px; |
|||
text-align: left; |
|||
margin-bottom: 16px; |
|||
|
|||
.view-li { |
|||
span { |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
.view-li { |
|||
span { |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.view-title { |
|||
display: inline-block; |
|||
border: 1px solid #000; |
|||
padding: 0 14px; |
|||
margin-bottom: 30px; |
|||
line-height: 50px; |
|||
border-radius: 6px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
border: 1px solid #000; |
|||
padding: 0 14px; |
|||
margin-bottom: 30px; |
|||
line-height: 50px; |
|||
border-radius: 6px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.box { |
|||
height: 100vh; |
|||
background-size: cover; |
|||
box-sizing: border-box; |
|||
padding: 20px 100px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100vh; |
|||
background-size: cover; |
|||
box-sizing: border-box; |
|||
padding: 20px 100px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.box-cent { |
|||
flex: 1; |
|||
margin-top: 70px; |
|||
position: relative; |
|||
} |
|||
.box-cent { |
|||
flex: 1; |
|||
margin-top: 70px; |
|||
position: relative; |
|||
} |
|||
|
|||
.box-cent1 { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
overflow-y: scroll; |
|||
} |
|||
.box-cent1 { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
overflow-y: scroll; |
|||
} |
|||
} |
|||
</style> |
|||
<style></style> |
|||
|
|||
Loading…
Reference in new issue