From 054cdefd40ac8963fac897e4fe98ffc1de4e0b69 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 17 Aug 2022 17:30:53 +0800 Subject: [PATCH] 重构消息盒子,优化表情组件 --- src/components/mini/mdDetail.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 135 insertions(+), 31 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index e75b1c7..c1fea4e 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -1,16 +1,22 @@ <template> - <div class="article-meta "> + <div class="article-meta"> <div> - <a-button @click="back" style="position: absolute;"> + <a-button @click="()=>this.$router.back(-1)" style="position: absolute;"> <a-icon type="left" /> </a-button> </div> + <div v-if="showMsg && !myLock"> + <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort"> + <p>碎碎念只有那么一点了</p> + <p>但是下面依旧可以碎碎念</p> + </div> - <div class="mySecret" v-if="showMsg && !myLock"> - <h1>怎样才能让你看到我呢</h1> - <h1>只要你要,只要我有...</h1> - <span class="myTip">{{errorMsg}}</span> + <div class="mySecret" v-else> + <h1>怎样才能让你看到我呢</h1> + <h1>只要你要,只要我有...</h1> + <span class="myTip">{{errorMsg}}</span> + </div> </div> <div v-else> @@ -24,8 +30,15 @@ </a-input-password> </a-auto-complete> <span class="myTip">{{errorMsg}}</span> + </div> - + <div class="mySecret" + v-else-if="articleFileType==myConstant.fileTypeVideo + || articleFileType==myConstant.fileTypeMp3 + || articleFileType==myConstant.fileTypeShort"> + <pre style="white-space: pre-line;"> + {{introduce}} + </pre> </div> <div class="markdown-body article-detail" v-else> @@ -33,38 +46,69 @@ </div> </div> + <div class="articleInfoMiniData"> + <div class="smallOption" @click="articleOptionHandle('dislike')"> + <a-icon type="dislike" style="margin-top: 2px;" /> + </div> + <div> + <a-icon type="read" class="samllPadding" /> + <span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span> + </div> + <div class="smallOption" @click="articleOptionHandle('like')"> + <a-icon type="like" class="samllPadding" /> + <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span> + </div> + <div> + <!-- <a-icon type="folder-open" class="samllPadding" /> --> + <a-icon type="book" class="samllPadding" /> + <span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span> + </div> + <div> + <a-icon type="calendar" class="samllPadding" /> + <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span> + </div> + </div> + <div class="articleComment"> + <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" /> + </div> </div> </template> <script> - // import esPath from '../../assets/es.md' import VueMarkdown from 'vue-markdown' import md5 from 'js-md5'; import { queryBlogArticleDetail } from '../../api/blogArticle.js' - + import comment from "../mini/box12-comment.vue" import axios from 'axios' + import myConstant from "../../config/myConstant.js" export default { components: { - VueMarkdown + VueMarkdown, + comment }, data() { return { + myConstant: myConstant, + articelMeta: "", + isAllowedComment: 1, + introduce: "", + articleId: "", + articleFileType: myConstant.fileTypeMarkDown, source: "", - acticleId: "", showMsg: false, myLock: false, errorMsg: '', secret: '', search: { placeholder: "", - autoFocus: true, + autoFocus: false, backfill: true, value: '', disabled: false @@ -72,28 +116,41 @@ } }, created() { - this.acticleId = this.$route.query.id; + this.articleId = this.$route.query.id; + this.articleFileType = this.$route.query.articleFileType; }, watch: { '$route'(to, from) { if ("mdDetail" === to.name) { - this.acticleId = this.$route.query.id; + this.articleId = this.$route.query.id; + this.articleFileType = this.$route.query.articleFileType; } }, - acticleId: function(newValue, oldValue) { + articleId: function(newValue, oldValue) { if (newValue == undefined || newValue == null || newValue == "") { this.showMsg = true; this.errorMsg = "日志id参数缺失"; } else { this.queryDetail(); + this.$refs.myComment.updateCommentList(this.articleId); } - } - + }, }, methods: { + articleOptionHandle(type) { + this.$message.info(type) + }, queryDetail() { + this.showMsg = true; + this.errorMsg = "加载中.."; + + // if (this.articleFileType == myConstant.fileTypeShort) { + // this.errorMsg = "该类型日志在这里没有更多啦.."; + // return + // } + queryBlogArticleDetail({ - id: this.acticleId, + id: this.articleId, authWord: this.secret == "" ? null : md5(this.secret) }).then((res) => { this.showMsg = true; @@ -117,19 +174,28 @@ placement: 'bottomRight' }); } - return } + // this.test = res.data.isAllowedComment == 1 ? true : false; + this.isAllowedComment = res.data.isAllowedComment; + this.introduce = res.data.introduce; + + this.articelMeta = res.data; + + if (res.data.articleFileType == myConstant.fileTypeMarkDown || + res.data.articleFileType == myConstant.fileTypeHtml) { + + this.$axios + .get(res.data.articleFileURL) + .then((res) => { + this.source = res.data; + }) + } //获取日志资源文件 this.showMsg = false; this.errorMsg = ""; - this.$axios - .get(res.data.articleFileURL) - .then((res) => { - this.source = res.data; - }) }) }, pressEnter() { @@ -145,20 +211,45 @@ this.search.disabled = false; }) - }, - back: function() { - this.$router.go(-1); } }, - + } </script> <style lang="less"> @import '../../assets/md.less'; + + .smallOption { + transition-function: ease-out; + transition-duration: 200ms; + -webkit-transition-function: ease-out; + -webkit-transition-duration: 200ms; + -moztransition-function: ease-out; + -moztransition-duration: 200ms; + -o-transition-function: ease-out; + -o-transition-duration: 200ms; + } + + .smallOption:hover { + transform: scale(1.55, 1.55); + -webkit-transform: scale(1.55, 1.55); + -moz-transform: scale(1.55, 1.55); + -o-transform: scale(1.55, 1.55); + } + + .articleInfoMiniData { + user-select: none; + box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff; + padding: 10px 50px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .mySecret { - height: 715px; + height: 515px; display: flex; flex-direction: column; justify-content: center; @@ -166,8 +257,21 @@ align-items: center; } - .markdown-body { - padding: 10px 20px 10px 20px; + .mySecretSamll { + padding: 30px 10px 10px; + height: 115px; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: auto; + align-items: center; + } + + + .markdown-body, + .articleComment { + min-height: 70%; + padding: 30px 20px 20px 20px; box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff; } -- Gitblit v1.9.1