1747191978@qq.com
4 months ago
3 changed files with 290 additions and 2 deletions
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<view class="box" style="position: relative;"> |
|||
<image class="logo" src='../../imgs/logo.png' mode="widthFix" @click="handleLogo"></image> |
|||
<view class="box-cent"> |
|||
<view class="box-cent1"> |
|||
<view class="view-pdf"> |
|||
<pdf ref="pdf" :page="pageNum" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)" |
|||
@num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event" |
|||
:src="filePdfUrl"> |
|||
</pdf> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 底部背景图 --> |
|||
<view class="view-backimg"> |
|||
<view class="view-backimg-top"></view> |
|||
<view class="view-backimg-bottom"></view> |
|||
</view> |
|||
<!-- 头像 - 头像 --> |
|||
<view class="avatarobx"> |
|||
<view class="view-out" @click="handleOut">退出登录</view> |
|||
<image class="avatar" src='../../imgs/tx.png' mode="widthFix"></image> |
|||
</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> |
|||
</template> |
|||
|
|||
<script> |
|||
import pdf from 'vue-pdf' |
|||
export default { |
|||
name: 'MeetingList', |
|||
props: ['infos'], |
|||
components: { |
|||
pdf |
|||
}, |
|||
data() { |
|||
return { |
|||
pageNum: 1, |
|||
pageTotalNum: 1, |
|||
// 加载进度 |
|||
loadedRatio: 0, |
|||
curPageNum: 0, |
|||
filePdfUrl: '' |
|||
}; |
|||
}, |
|||
created() { |
|||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 |
|||
let curParam = routes[routes.length - 1].options; //获取路由参数 |
|||
this.filePdfUrl = curParam.filePdfUrl |
|||
}, |
|||
methods: { |
|||
// 退出登录 |
|||
handleOut() { |
|||
uni.clearStorage(); |
|||
uni.reLaunch({ |
|||
url: '/pages/user/login', |
|||
}); |
|||
}, |
|||
// logo 回到首页 |
|||
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 |
|||
}, |
|||
// 页面加载回调函数，其中e为当前页数 |
|||
pageLoaded(e) { |
|||
this.curPageNum = e |
|||
}, |
|||
// 其他的一些回调函数。 |
|||
pdfError(error) { |
|||
console.error(error) |
|||
}, |
|||
}, |
|||
// 页面显示调用接口 |
|||
onLoad() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.popup-close { |
|||
position: fixed; |
|||
right: 20px; |
|||
top: 20px; |
|||
z-index: 9999; |
|||
|
|||
/deep/.uni-icons { |
|||
font-size: 40px !important; |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
|
|||
.view-gb { |
|||
max-width: 100px; |
|||
margin-left: 16px; |
|||
} |
|||
|
|||
.view-li { |
|||
// padding-left: 10px; |
|||
} |
|||
|
|||
.view-pdf { |
|||
width: 60vw; |
|||
margin: auto; |
|||
} |
|||
|
|||
.tools { |
|||
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 |
|||
} |
|||
|
|||
.page { |
|||
line-height: 44px; |
|||
height: 44px; |
|||
width: 100px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.pathsName { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.pdfBox .el-button { |
|||
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; |
|||
} |
|||
|
|||
.pdfBox .page { |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.pdfBox .el-button-group { |
|||
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; |
|||
} |
|||
|
|||
.contLeft-pane>>>.el-form-item__label { |
|||
text-align: right; |
|||
margin-right: 10px !important; |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.contLeft-pane>>>.el-form-item--medium .el-form-item__content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.li-item { |
|||
uni-view { |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
|
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
|
|||
|
|||
.li-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
|
|||
.view-box { |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.view-none { |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 40px !important; |
|||
} |
|||
|
|||
.view-ul { |
|||
text-align: left; |
|||
margin-bottom: 16px; |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.box { |
|||
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-cent1 { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
overflow: auto; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
<style></style> |
|||
Loading…
Reference in new issue