ccsens_zhengzhichuan
/
datang-meeting
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改pdf预览慢

master
lzp 4 days ago
parent
1e5236919b
commit
fb3b4fc780
2 changed files with 244 additions and 245 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      大唐会议前台1/node_modules/vuedraggable/src/vuedraggable.js
  2. 487
      大唐会议前台1/pages/index/pdf.vue

2
大唐会议前台1/node_modules/vuedraggable/src/vuedraggable.js
View File

@ -28,7 +28,7 @@ function computeIndexes(slots, children, isTransition, footerOffset) {
} }
function emit(evtName, evtData) { function emit(evtName, evtData) {
this.$nextTick(() => this.$emit(evtName.toLowerCase(), {...evtData})); this.$nextTick(() => this.$emit(evtName.toLowerCase(), evtData));
} }
function delegateAndEmit(evtName) { function delegateAndEmit(evtName) {

487
大唐会议前台1/pages/index/pdf.vue
View File

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

Write Preview
Loading…
Cancel
Save