#I2BC14 手机端查看页面适配

2021-05-14 23:45:12 +08:00
parent 477fef11d3
commit dcf487d55c
34 changed files with 308 additions and 168 deletions
--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/PageTree.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/PageTree.vue
@@ -0,0 +1,34 @@
+<template>
+	<van-collapse v-model="pageSelect">
+		<template v-for="page in pageList">
+			<div v-if="!page.children" @click="pageSelectChange(page.id)" class="van-cell van-cell--clickable">{{page.name}}</div>
+			<van-collapse-item :name="page.id" v-else>
+				<span slot="title" @click="pageSelectChange(page.id)">{{page.name}}</span>
+				<page-tree :page-list="page.children" @pageChange="pageSelectChange"></page-tree>
+			</van-collapse-item>
+		</template>
+	</van-collapse>
+</template>
+
+<script>
+	export default {
+		name: 'pageTree',
+		data() {
+			return {
+				pageSelect: [],
+			}
+		},
+		props: {pageList: Array},
+		mounted () {
+		},
+		methods: {
+			pageSelectChange(value) {
+				this.$emit('pageChange', value);
+			},
+		}
+	};
+</script>
+
+<style scoped>
+</style>
+
--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareMobileLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareMobileLayout.vue
@@ -1,24 +1,13 @@
 <template>
-	<div style="height: 100%;">
-		<van-popup v-model="popupShow" closeable position="left" :style="{ height: '100%', width: '80%' }">
-			<van-nav-bar :title="nowSpaceShow.name"></van-nav-bar>
-			<van-collapse v-model="pageSelect" @change="pageSelectChange">
-				<template v-for="page in wikiPageList">
-					<div v-if="!page.children" class="van-cell van-cell--clickable">{{page.name}}</div>
-					<van-collapse-item :title="page.name" :name="page.id" v-else>
-						<template v-for="page1 in page.children">
-							<van-collapse v-model="pageSelect" @change="pageSelectChange">
-								<div v-if="!page1.children" class="van-cell van-cell--clickable">{{page1.name}}</div>
-								<van-collapse-item :title="page1.name" :name="page1.id" v-else>
-									<template v-for="page2 in page1.children">
-										<div v-if="!page2.children">{{page2.name}}</div>
-									</template>
-								</van-collapse-item>
-							</van-collapse>
-						</template>
-					</van-collapse-item>
-				</template>
-			</van-collapse>
+	<div class="share-mobile-layout">
+		<van-popup v-model="popupShow" closeable position="left" class="popup-module" :style="{ height: '100%', width: '80%' }">
+			<div class="header">
+				<van-nav-bar :title="nowSpaceShow.name"></van-nav-bar>
+			</div>
+			<div class="main">
+				<page-tree :page-list="wikiPageList" @pageChange="pageSelectChange"></page-tree>
+				<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
+			</div>
 		</van-popup>
 		<router-view @popupShow="popupShowChange"></router-view>
 	</div>
@@ -27,6 +16,7 @@
 <script>
 	import Vue from 'vue';
 	import pageApi from '../../common/api/page'
+	import PageTree from './PageTree'
 	import Vant from 'vant';
 	import 'vant/lib/index.css';
 	Vue.use(Vant);
@@ -47,11 +37,12 @@
 				// 页面展示相关
 				wikiPageList:[],
 				wikiPageExpandedKeys: [],
-				popupShow: true,
+				popupShow: false,
 				pageSelect: [],
 			}
 		},
 		components: {
+			PageTree: PageTree
 		},
 		mounted: function () {
 			this.spaceUuid = this.$route.query.space || '';
@@ -65,22 +56,13 @@
 			},
 			pageSelectChange(value) {
 				console.log("页面修改：" + value);
+				this.popupShow = false;
+				this.$router.replace({path: '/page/share/mobile/view', query: {pageId: value, space: this.spaceUuid}});
 			},
 			popupShowChange(value) {
 				this.popupShow = value;
 				console.log(this.pageSelect)
 			},
-			handleNodeClick(data) {
-				if (this.nowPageId == data.id) {
-					return;
-				}
-				console.log("点击节点：", data);
-				this.nowPageId = data.id;
-				this.$router.push({path: '/page/share/view', query: {pageId: data.id, space: this.spaceUuid}});
-			},
-			searchByKeywords() {
-				this.$refs.wikiPageTree.filter(this.searchKeywords);
-			},
 			doGetPageList() {
 				pageApi.openPageList({space: this.spaceUuid}).then(json => {
 					this.wikiPageList = json.data || [];
@@ -98,6 +80,12 @@

 <style scoped>
 	html,body,#app {margin: 0; padding: 0; height: 100%;}
+
+	.share-mobile-layout{height: 100%;}
+	.popup-module .header{width:100%;height:46px;}
+	.popup-module .main{position:absolute;top:46px;bottom: 0;right:0;left:0;overflow:auto;}
+	.popup-module .footer{width:100%;height:26px;position:fixed;bottom:0}
+
 	pre{margin: 0;white-space: pre-wrap;font-size: 14px; font-family: auto;}
 	.el-menu {box-sizing: border-box;border-right: 0;margin-right: 3px;}
 	.el-header {background-color: #409EFF; color: #333; line-height: 40px; text-align: right;height: 40px !important;}
@@ -120,8 +108,7 @@
 		width: 45px; height: 45px; line-height: 45px;text-align: center;color: #fff;
 	}
 	.build-info{
-		position: fixed;bottom: 0;left: 0;background: #fafafa;width: 240px;text-align: center;
-		padding: 5px 0;color: #aaa;font-size: 12px;
+		text-align: center; padding: 5px 0;color: #aaa;font-size: 12px; margin: 10px 0;
 	}
 	.build-info a{color: #4183c4;cursor: pointer;text-decoration:none;}
 </style>
--- a/zyplayer-doc-ui/wiki-ui/src/routes.js
+++ b/zyplayer-doc-ui/wiki-ui/src/routes.js
@@ -33,7 +33,7 @@ let routes = [
 		name: '页面管理',
 		component: ShareMobileLayout,
 		children: [
-			{path: '/page/share/mobile/home', name: 'WIKI-开放文档', component: () => import('@/views/page/share/mobile/Home')},
+			{path: '/page/share/mobile/view', name: 'WIKI-开放文档', component: () => import('@/views/page/share/mobile/View')},
 		]
 	},
 ];
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
+++ b/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>

--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue
+++ b/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>
-
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
+++ b/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>
+