#I2BC14 手机端查看页面适配

zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue

@@ -28,6 +28,7 @@
 										<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
 										<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth==1" icon="el-icon-s-check">权限设置</el-dropdown-item>
 										<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" icon="el-icon-share">查看开放文档</el-dropdown-item>
+										<el-dropdown-item command="showMobileView" v-if="spaceInfo.openDoc == 1" icon="el-icon-mobile-phone">手机端查看</el-dropdown-item>
 									</el-dropdown-menu>
 								</el-dropdown>
 							</div>
@@ -158,6 +159,13 @@
 				</el-tabs>
 			</el-col>
 		</el-row>
+		<!--手机扫码查看弹窗-->
+		<el-dialog title="手机扫码查看" :visible.sync="mobileScanDialogVisible" width="400px">
+			<div style="text-align: center;">
+				<div class="mobile-qr" ref="qrCodeDiv"></div>
+				<div>使用微信或手机浏览器扫一扫查看</div>
+			</div>
+		</el-dialog>
 		<!--点赞人员弹窗-->
 		<el-dialog title="赞了它的人" :visible.sync="zanUserDialogVisible" width="600px">
 			<el-table :data="zanUserList" border :show-header="false" style="width: 100%; margin-bottom: 5px;">
@@ -204,6 +212,7 @@
 </template>
 
 <script>
+	import QRCode from 'qrcodejs2'
 	import common from '../../common/lib/common'
 	import pageApi from '../../common/api/page'
 	import userApi from '../../common/api/user'
@@ -232,6 +241,8 @@
 				zanUserDialogVisible: false,
 				zanUserList: [],
 				parentPath: {},
+				// 手机扫码
+				mobileScanDialogVisible: false,
 				// 评论相关
 				commentTextInput: "",
 				commentList: [],
@@ -279,7 +290,7 @@
 					this.pageAuthUserLoading = false;
 				});
 			},
-			handleMoreCommand(val) {
+			handleMoreCommand: function (val) {
 				if (val == 'editAuth') {
 					this.editWikiAuth();
 				} else if (val == 'deletePage') {
@@ -296,6 +307,28 @@
 						});
 						window.open(routeUrl.href, '_blank');
 					}
+				} else if (val == 'showMobileView') {
+					if (this.spaceInfo.openDoc != 1) {
+						this.$message.warning("该空间未开放，无法查看开放文档地址");
+					} else {
+						let routeUrl = this.$router.resolve({
+							path: '/page/share/mobile/view',
+							query: {pageId: this.wikiPage.id, space: this.spaceInfo.uuid}
+						});
+						this.mobileScanDialogVisible = true;
+						let hostPath = window.location.href.split("#")[0];
+						setTimeout(() => {
+							this.$refs.qrCodeDiv.innerHTML = "";
+							new QRCode(this.$refs.qrCodeDiv, {
+								text: hostPath + routeUrl.href,
+								width: 250,
+								height: 250,
+								colorDark: "#333333", //二维码颜色
+								colorLight: "#ffffff", //二维码背景色
+								correctLevel: QRCode.CorrectLevel.M//容错率，L/M/H
+							});
+						}, 0);
+					}
 				}
 			},
             addPageAuthUser() {
@@ -715,5 +748,6 @@
 	.page-show-vue .comment-card:hover .comment-user-name .el-icon-delete{
 		display: inline-block;
 	}
+	.mobile-qr{width: 250px; height: 250px; border: 1px solid #ccc;display: inline-block;border-radius: 4px;margin-bottom: 10px;padding: 5px;}
 </style>
 

zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue

@@ -1,81 +0,0 @@
-<template>
-	<div style="padding: 10px;" class="page-share-home-vue">
-		<van-button type="primary" @click="popupShowChange">测试</van-button>
-	</div>
-</template>
-
-<script>
-	import pageApi from '../../../../common/api/page';
-
-	export default {
-		data() {
-			return {
-				totalCount: 0,
-				searchParam: {
-					spaceId: '',
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				},
-				spacePageNews: [],
-			};
-		},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted: function () {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			popupShowChange() {
-				this.$emit("popupShow", true);
-			},
-			getSpacePageNews() {
-				pageApi.openPageNews(this.searchParam).then(json => {
-					this.spacePageNews = json.data || [];
-					this.totalCount = json.total;
-				});
-			},
-			handleSizeChange(val) {
-				this.searchParam.pageSize = val;
-				this.getSpacePageNews();
-			},
-			showPageDetail(row) {
-				this.nowClickPath = {space: row.space, pageId: row.pageId};
-				this.$router.push({path: '/page/share/view', query: this.nowClickPath});
-			},
-			handleCurrentChange(val) {
-				this.searchParam.pageNum = val;
-				this.getSpacePageNews();
-			},
-			initQueryParam(to) {
-				this.searchParam = {
-					space: to.query.space,
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				};
-				if (!!this.searchParam.space) {
-					this.getSpacePageNews();
-				}
-			},
-		}
-	}
-</script>
-<style>
-	.page-share-home-vue .empty-news{text-align: center;padding: 100px;}
-	.page-share-home-vue .text-link {
-		color: #444;
-	}
-	.page-share-home-vue .line-box{color: #666;border-bottom: 1px solid #eee;padding: 20px 0;}
-	.page-share-home-vue .line-title{font-size: 14px;}
-	.page-share-home-vue .page-preview-box{}
-	.page-share-home-vue .page-preview-title{cursor: pointer;font-size: 20px;margin: 10px 0 5px 0;color: #3a8ee6;}
-	.page-share-home-vue .page-preview-content{font-size: 16px;margin-bottom: 5px;}
-	.page-share-home-vue .zan-img{vertical-align: middle;margin-top: -3px;}
-	.page-share-home-vue .view-img{font-size: 16px;color: #666;}
-
-	.page-share-home-vue .page-info-box{text-align: right;margin: 20px 0 50px 0;}
-</style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue

@@ -0,0 +1,158 @@
+<template>
+	<div class="page-share-view-vue">
+		<van-nav-bar :title="wikiPage.name">
+			<van-icon name="ellipsis" slot="left" @click="popupShowChange"></van-icon>
+		</van-nav-bar>
+		<el-row type="border-card">
+			<div style="max-width: 950px;margin: 0 auto;">
+<!--				<div class="wiki-title">{{wikiPage.name}}</div>-->
+				<div class="wiki-author">
+					<span v-if="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
+					<span v-else>创建时间：{{wikiPage.createTime}}</span>
+				</div>
+				<div class="wiki-files">
+					<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+						<el-table-column label="文件名">
+							<template slot-scope="scope">
+								<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
+							</template>
+						</el-table-column>
+						<el-table-column label="文件大小">
+							<template slot-scope="scope">{{computeFileSize(scope.row.fileSize)}}</template>
+						</el-table-column>
+						<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
+						<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
+					</el-table>
+				</div>
+				<div ref="pageContent" class="wiki-page-content">
+					<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
+					<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
+				</div>
+			</div>
+		</el-row>
+		<div ref="imagePreview">
+			<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"></el-image-viewer>
+		</div>
+	</div>
+</template>
+
+<script>
+	import pageApi from '../../../../common/api/page'
+	import {mavonEditor, markdownIt} from 'mavon-editor'
+	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+	import 'mavon-editor/dist/markdown/github-markdown.min.css'
+	import 'mavon-editor/dist/css/index.css'
+
+	export default {
+		data() {
+			return {
+				spaceUuid: '',
+				nowPageId: '',
+				// 页面展示相关
+				wikiPage: {},
+				pageFileList: [],
+				pageShowDetail: '',
+				// 大图预览
+				previewInitialIndex: 0,
+				showImagePreview: false,
+				showImagePreviewList: [],
+			};
+		},
+		components: {'el-image-viewer': ElImageViewer},
+		beforeRouteUpdate(to, from, next) {
+			this.initQueryParam(to);
+			next();
+		},
+		mounted() {
+			this.initQueryParam(this.$route);
+		},
+		methods: {
+			popupShowChange() {
+				this.$emit("popupShow", true);
+			},
+			loadPageDetail(pageId) {
+				let param = {pageId: pageId, space: this.spaceUuid};
+				pageApi.openPageDetail(param).then(json => {
+					let wikiPage = json.data.wikiPage || {};
+					wikiPage.selfZan = json.data.selfZan || 0;
+					this.wikiPage = wikiPage;
+					let pageContent = json.data.pageContent || {};
+					this.pageFileList = json.data.fileList || [];
+					if (this.wikiPage.editorType === 2) {
+						pageContent.content = markdownIt.render(pageContent.content);
+					}
+					this.pageShowDetail = pageContent.content;
+					document.title = wikiPage.name || 'WIKI-内容展示';
+					setTimeout(() => this.previewPageImage(), 500);
+				});
+			},
+			initQueryParam(to) {
+				this.spaceUuid = to.query.space;
+				this.nowPageId = to.query.pageId;
+				if (!!this.nowPageId) {
+					this.loadPageDetail(this.nowPageId);
+				}
+			},
+			computeFileSize(fileSize) {
+				if (!fileSize) {
+					return '-';
+				}
+				let size = "";
+				if (fileSize < 0.1 * 1024) {
+					size = fileSize.toFixed(2) + "B"
+				} else if (fileSize < 0.1 * 1024 * 1024) {
+					size = (fileSize / 1024).toFixed(2) + "KB"
+				} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
+					size = (fileSize / (1024 * 1024)).toFixed(2) + "MB"
+				} else {
+					size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB"
+				}
+				let sizeStr = size + "";
+				let index = sizeStr.indexOf(".");
+				let dou = sizeStr.substr(index + 1, 2);
+				if (dou == "00") {
+					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+				}
+				return size;
+			},
+			closeImagePreview() {
+				this.showImagePreview = false;
+			},
+			previewPageImage() {
+				const imgArr = [];
+				const imgSelector = this.$refs.pageContent.querySelectorAll('img');
+				imgSelector.forEach((item, index) => {
+					imgArr.push(item.src);
+					item.onclick = () => {
+						this.previewInitialIndex = index;
+						this.showImagePreviewList = imgArr;
+						this.showImagePreview = true;
+						setTimeout(() => this.initImageViewerMask(), 0);
+					}
+				});
+			},
+			initImageViewerMask() {
+				// 图片预览遮罩点击隐藏预览框
+				let imageViewerMask = this.$refs.imagePreview.querySelectorAll('.el-image-viewer__mask');
+				imageViewerMask.forEach(item => {
+					item.onclick = () => this.showImagePreview = false;
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	@import "../../../../common/lib/wangEditor.css";
+
+	.page-share-view-vue{padding: 10px;}
+	.page-share-view-vue .wiki-title{font-size: 20px;text-align: center;}
+	.page-share-view-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
+
+	.page-share-view-vue .wiki-page-content img{cursor: pointer;max-width: 100%;}
+	.page-share-view-vue .wiki-page-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
+
+	.page-share-view-vue .upload-page-file .el-upload-list{display: none;}
+	.page-share-view-vue .is-link{color: #1e88e5;cursor: pointer;}
+</style>
+