1747191978@qq.com
4 months ago
1 changed files with 303 additions and 0 deletions
@ -0,0 +1,303 @@ |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
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`, |
|||
}); |
|||
}, |
|||
|
|||
// 关闭弹窗 |
|||
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> |
|||
/deep/ .u-modal__content{ |
|||
text-align: center; |
|||
} |
|||
.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