pdf预览由分页改为平铺

大唐会议前台1/common/config.js

@@ -1,6 +1,6 @@
 module.exports = {
-	// baseUrl: 'https://test.tall.wiki/datangMeeting/', // 测试
+	baseUrl: 'https://test.tall.wiki/datangMeeting/', // 测试
-	baseUrl: 'http://10.89.114.11:9001/datangMeeting/', // 大唐
+	// baseUrl: 'http://10.89.114.11:9001/datangMeeting/', // 大唐
 	versionsNum: '1.0.1.7',
 	versions: '测试版',
 };

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

@@ -6,16 +6,11 @@
 			<view class="box-cent1">
 				<view class="view-pdf">
 					<pdf
-						ref="pdf"
+						v-for="i in numPages"
-						:page="pageNum"
+						:key="i"
-						@progress="loadedRatio = $event"
-						@page-loaded="pageLoaded($event)"
-						@num-pages="pageTotalNum = $event"
-						@error="pdfError($event)"
-						@link-clicked="page = $event"
 						:src="filePdfUrl"
-					>
+						:page="i"
-					</pdf>
+					></pdf>
 				</view>
 			</view>
 			<u-modal
@@ -32,27 +27,17 @@
 			<view class="view-backimg-top"></view>
 			<!-- <view class="view-backimg-bottom"></view> -->
 		</view>
-		<div class="tools">
+		<!-- <div class="tools">
-			<view style="width: 50vw; display: flex; margin: auto">
+			<view style="width:50vw;display: flex;margin: auto;">
-				<button
+				<button :theme="'default'" type="submit" @click.stop="prePage" class="mr10">
-					:theme="'default'"
-					type="submit"
-					@click.stop="prePage"
-					class="mr10"
-				>
 					上一页
 				</button>
-				<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
+				<div class="page">{{pageNum}}/{{pageTotalNum}}</div>
-				<button
+				<button :theme="'default'" type="submit" @click.stop="nextPage" class="mr10">
-					:theme="'default'"
-					type="submit"
-					@click.stop="nextPage"
-					class="mr10"
-				>
 					下一页
 				</button>
 			</view>
-		</div>
+		</div> -->
 		<!-- 头像 - 头像 -->
 		<view class="avatarobx">
 			<view class="name">{{ userName }}</view>
@@ -82,25 +67,29 @@ export default {
 	},
 	data() {
 		return {
-			pageNum: 1,
-			pageTotalNum: 1,
-			// 加载进度
-			loadedRatio: 0,
-			curPageNum: 0,
 			filePdfUrl: '',
 			userName: uni.getStorageSync('userName'),
-			show: false,
 			detailsId: '',
+			numPages: '',
+			show: false,
 		};
 	},
 	created() {
 		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
 		let curParam = routes[routes.length - 1].options; //获取路由参数
 		this.detailsId = curParam.detailsId;
-		console.log('this.detailsId ', this.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({

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

@@ -0,0 +1,333 @@
+<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
+						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>
+			<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 {
+			pageNum: 1,
+			pageTotalNum: 1,
+			// 加载进度
+			loadedRatio: 0,
+			curPageNum: 0,
+			filePdfUrl: '',
+			userName: uni.getStorageSync('userName'),
+			show: false,
+			detailsId: '',
+		};
+	},
+	created() {
+		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
+		let curParam = routes[routes.length - 1].options; //获取路由参数
+		this.detailsId = curParam.detailsId;
+		console.log('this.detailsId ', this.detailsId);
+		this.filePdfUrl = curParam.filePdfUrl;
+	},
+	methods: {
+		// 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 {
+	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>