From 7319260f31c9a593418ff17b1ca42e0822c3c4eb Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 10 Jan 2024 22:07:04 +0800 Subject: [PATCH] 改正授权码md5加密 bgm链接修改 允许后置日期提交 简介提交支持 --- src/components/mini/mdDetail.vue | 122 +++++++++++++++++++++++++++++++++------- 1 files changed, 101 insertions(+), 21 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index dd91201..1160808 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -4,6 +4,16 @@ <div class="headertop filter-dot headertop-bar " v-if="coverURL.length>0"> <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}"> </figure> + <div class="countMeta" + v-if="articleFileType==fileType.fileTypeMarkDown_1|| articleFileType==fileType.fileTypeHtml_2"> + <div style="display: flex;justify-content: space-between;padding: 0px 10px;"> + <div style="display: flex;align-items: center;"> <span>发布时间:{{articelMeta.publishDate}}</span></div> + <div style="display: inline-grid;"> + <span style="text-align: end;">字数:{{wordCount}}</span> + <span>预计耗时:{{Math.floor(wordCount/500)}}~{{Math.ceil(wordCount/300)}}分钟</span> + </div> + </div> + </div> </div> <div class="mySecret" v-if="myLock"> @@ -27,11 +37,12 @@ </div> <div v-else> + <div v-if="articleFileType==fileType.fileTypeTalking_9"> <div class="markdown-body articleTitle"> <h4>{{articelMeta.title}}</h4> - <div class="introduceSamll" v-if="introduce.length==0"> + <div class="introduceSamll" v-if="introduce==null||introduce.length==0"> <p>空荡荡的..我好像忘记写点什么了OωO</p> </div> <div class="introduce" v-else> @@ -47,28 +58,40 @@ <div class="markdown-body articleTitle"> <h4>{{articelMeta.title}}</h4> </div> - <div class="playBox"> + <div class="playBox" + v-bind:class="{disabledPointer:articelMeta.videoUrlList==null||articelMeta.videoUrlList==0}"> <videoPlayBox ref="videoPlayBox" :showTar="true"></videoPlayBox> + </div> + <div class="introduceSamll" v-if="articelMeta.videoUrlList==null||articelMeta.videoUrlList==0"> + <p>该视频资源仍未上传</p> </div> <div class="introduce"> <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> {{introduce}} </pre> </div> + </div> <div class="introduce" v-else-if="articleFileType==fileType.fileTypePictures_5"> <div class="markdown-body articleTitle"> <h4>{{articelMeta.title}}</h4> </div> - <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)"> - <div> - <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy" - :onerror="img404"> + + <div> + <div class="introduceSamll" + v-if="articelMeta.pictureUrlList==null ||articelMeta.pictureUrlList.length==0"> + <p>空荡荡的..好像忘记传图了</p> </div> - <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div> + <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)" v-else> + <div> + <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy" + :onerror="img404"> + </div> + <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div> + </div> </div> - <div class="introduce"> + <div class="introduce" v-if="introduce!=null && introduce.length>0"> <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> {{introduce}} </pre> @@ -79,7 +102,17 @@ <div class="articleTitle"> <h4>{{articelMeta.title}}</h4> </div> - <vue-markdown :source="source"></vue-markdown> + <vue-markdown :source="source" v-if="source== null || source.length>0"></vue-markdown> + + <div class="introduceSamll" v-else-if="introduce==null || introduce.length==0"> + <p>空荡荡的..我好像忘记写点什么了OωO</p> + </div> + + <div class="introduce" v-else> + <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> + {{introduce}} + </pre> + </div> </div> </div> @@ -109,7 +142,7 @@ <div class="jumpURL" v-if="articelMeta.jumpURL"> 外链:<a target="_blank" :href="articelMeta.jumpURL" :title="articelMeta.jumpURL">{{articelMeta.jumpURL}}</a> </div> - + <div class="articleInfoMiniData"> <div class="myTitleDeal"> @@ -198,7 +231,7 @@ disabled: false }, videoData: { - img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", + pic: "", url: "", type: "normal", title: "", @@ -207,14 +240,14 @@ }, options: optionsConfig, img404: myConstant.img404, + + wordCount: 0 } }, created() { this.articleId = this.$route.query.id; this.articleFileType = this.$route.query.articleFileType; this.typeId = this.$route.query.typeId; - - }, watch: { '$route'(to, from) { @@ -237,6 +270,22 @@ }, }, methods: { + getWordCount() { + var iTotal = 0; + var c; + for (var i = 0; i < this.source.length; i++) { + c = this.source.charAt(i); + //基本汉字 + if (c.match(/[\u4e00-\u9fa5]/)) { + iTotal++; + } + //基本汉字补充 + else if (c.match(/[\u9FA6-\u9fcb]/)) { + iTotal++; + } + } + this.wordCount = iTotal; + }, articleOptionHandle(type) { this.$message.info(type) }, @@ -287,7 +336,7 @@ if (res.data.coverFileURL != null && res.data.coverFileURL != '') { this.coverURL = res.data.coverFileURL; } else { - this.coverURL = "http://t.inleft.com/share/media_photo/background.jpg"; + this.coverURL = myConstant.defaultBG; } this.articelMeta = res.data; @@ -301,7 +350,11 @@ this.source = res.data; }).catch(() => [ this.$message.error("获取文件好像失败了..", 3) - ]) + ]).finally(() => { + setTimeout(() => { + _this.getWordCount(); + }, 500); + }) } } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) { if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { @@ -312,12 +365,11 @@ } else { this.videoData.url = res.data.videoUrlList[0]; - this.videoData.img = res.data.coverFileURL; + this.videoData.pic = res.data.coverFileURL; this.videoData.title = res.data.title; this.videoData.introduce = res.data.introduce; this.videoData.id = res.data.id; if (this.lastArticleId != this.articleId) { - console.log(111); let tempParam = JSON.parse(JSON.stringify(this.videoData)) _this.$nextTick(function() { @@ -356,20 +408,36 @@ <style lang="less"> @import '../../assets/md.less'; + .disabledPointer { + position: relative; + pointer-events: none; + filter: blur(0.9px) brightness(.8); + } + + .disabledPointer:before { + content: "\ec2a"; + z-index: 2; + font-size: 4rem; + font-family: 'iconfont'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .articleTitle { h4 { - margin: 0px 0px 20px 0px; + margin: 0px 0px 10px 0px; -webkit-line-clamp: 1; } text-align: center; width: 100%; - } .myPicture { - display: grid; - width: 50%; + max-width: 70%; + margin: 0px auto; padding: 20px 0px 0px 0px; img { @@ -378,6 +446,14 @@ transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); border-radius: 16px; } + } + + .countMeta { + position: absolute; + bottom: 0px; + width: 100%; + background: #f0f2f5; + opacity: 0.6; } .headertop { @@ -522,5 +598,9 @@ max-width: 120px; } } + + .countMeta { + bottom: 10px; + } } </style> -- Gitblit v1.9.1