datang-meeting/大唐会议前台1/pages/components/MeetingList.vue

<template>
	<view>
		<view class="view-li" v-for="(item, index) in infos" :key="index">
			<view class="li-item" v-if="item.type == 'title'">
				<view class="li-title">{{ item.title }}</view>
			</view>
			<view class="li-item" v-if="item.type == 'file-pdf'">
				<view class="li-pdf" @click="handlePdf(item)">
					{{ item.filePdfName }}
					<span style="color: blue"> （预览）</span>
				</view>
			</view>
			<view class="li-item" v-if="item.type == 'richtext'">
				<view class="li-text">{{ item.richtext }}</view>
			</view>
			<view class="view-ul" v-if="item.infos && item.infos.length">
				<MeetingList
					:detailsId="detailsId"
					:infos="item.infos"
				></MeetingList>
			</view>
		</view>
		<u-popup :show="show" @close="handleClose" mode="center">
			<view class="popup-close" @click="handleClose">
				<uni-icons
					class="popup-icons"
					type="closeempty"
					size="30"
				></uni-icons>
			</view>
			<view class="popup-box">
				<view class="view-pdf">
					<pdf
						v-if="show"
						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>
					<div class="tools">
						<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>
					</div>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import pdf from 'vue-pdf';
export default {
	name: 'MeetingList',
	props: ['infos', 'detailsId'],
	components: {
		pdf,
	},
	data() {
		return {
			show: false,
			filePdfUrl: '',
			pageNum: 1,
			pageTotalNum: 1,
			// 加载进度
			loadedRatio: 0,
			curPageNum: 0,
			pdfId: '',
		};
	},
	onShow() {
		console.log('infos', infos);
	},
	methods: {
		// 关闭弹窗
		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);
		},
		// 显示pdf
		handlePdf(_item) {
			// this.filePdfUrl = _item.filePdfUrl
			// this.show = true
			uni.navigateTo({
				url: `/pages/index/pdf?filePdfUrl=${_item.filePdfUrl}&detailsId=${this.detailsId}`,
			});
		},
	},
	// 页面显示调用接口
	onLoad() {},
};
</script>

<style lang="scss" scoped>
.popup-close {
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 9999;

	::v-deep.uni-icons {
		font-size: 40px !important;
		color: #fff !important;
	}
}

::v-deep.u-popup__content {
	position: relative;
	.tools {
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 0px;
		background: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
.popup-box {
	max-height: 80vh;
	overflow: auto;
}

.view-gb {
	max-width: 100px;
	margin-left: 16px;
}

.view-li {
	// padding-left: 10px;
}

.view-pdf {
	width: 50vw;
	padding: 16px 16px 50px 16px;
	border: 1px solid #ededed;
	background: #fff;

	.tools {
		display: flex;

		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;
	}
}
</style>
<style></style>