datang-meeting/大唐会议前台1/pages/index/pdf.vue

<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>
::v-deep .u-modal__content {
	text-align: center;
}
.popup-close {
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 9999;

	::v-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 {
	max-width: 100%;
	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-y: scroll;
	}
}
</style>
<style></style>