acupuncture/大唐会议前台1/pages/index/pdf.vue

<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>