From e33959d3ca88b9fae5f6fe1048c8a1f7751e6f21 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 02 Mar 2022 01:36:00 +0800 Subject: [PATCH] 完成评论页 --- src/components/mini/mdDetail.vue | 170 +++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 149 insertions(+), 21 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index d681f69..d6e38b0 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -1,49 +1,177 @@ <template> - <div class="article-meta"> - <a-button @click="back"> - <a-icon type="left" /> - </a-button> - <a-divider orientation="left"> - 文章详情 - </a-divider> - <div class="markdown-body article-detail"> - <vue-markdown :source="source"></vue-markdown> + <div class="article-meta "> + <div> + <a-button @click="back" style="position: absolute;"> + <a-icon type="left" /> + </a-button> + </div> + + + <div class="mySecret" v-if="showMsg && !myLock"> + <h1>怎样才能让你看到我呢</h1> + <h1>只要你要,只要我有...</h1> + <span class="myTip">{{errorMsg}}</span> + </div> + + <div v-else> + <div class="mySecret" v-if="myLock"> + <h1>越不正经的人越深情..</h1> + <h3>受庇护的文字..输入神秘代码以解除封印</h3> + + <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter"> + <a-input-password @pressEnter="pressEnter"> + <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> + </a-input-password> + </a-auto-complete> + <span class="myTip">{{errorMsg}}</span> + + + </div> + + <div class="markdown-body article-detail" v-else> + <vue-markdown :source="source"></vue-markdown> + </div> </div> </div> + </template> <script> + // import esPath from '../../assets/es.md' import VueMarkdown from 'vue-markdown' - import esPath from '../../assets/es.md' + import md5 from 'js-md5'; + + import { + queryBlogArticleDetail + } from '../../api/blogArticle.js' + + + import axios from 'axios' export default { - // props: ['id'], //接收动态路由的值 components: { VueMarkdown }, data() { return { - source: esPath, + source: "", + acticleId: "", + showMsg: false, + myLock: false, + errorMsg: '', + secret: '', + search: { + placeholder: "", + autoFocus: true, + backfill: true, + value: '', + disabled: false + }, } + }, + created() { + this.acticleId = this.$route.query.id; + }, + watch: { + '$route'(to, from) { + if ("mdDetail" === to.name) { + this.acticleId = this.$route.query.id; + } + }, + acticleId: function(newValue, oldValue) { + if (newValue == undefined || newValue == null || newValue == "") { + this.showMsg = true; + this.errorMsg = "日志id参数缺失"; + } else { + this.queryDetail(); + } + } + }, methods: { + queryDetail() { + this.showMsg = true; + this.errorMsg = "加载中.."; + queryBlogArticleDetail({ + id: this.acticleId, + authWord: this.secret == "" ? null : md5(this.secret) + }).then((res) => { + this.showMsg = true; + this.myLock = false; + this.errorMsg = res.message; + this.source = ""; + if (res.code != 200) { + + if (res.code == 1019001) { + //日志需要授权 + this.errorMsg = ""; + this.myLock = true; + } else if (res.code == 1019002) { + //授权码错误 + this.errorMsg = "口令错误..神秘力量依然阻止了你的前进"; + this.myLock = true; + } else { + this.$notification.error({ + message: '好像哪里不对劲..', + description: res.message, + placement: 'bottomRight' + }); + } + + return + } + + this.$axios + .get(res.data.articleFileURL) + .then((res) => { + this.source = res.data; + }) + + //获取日志资源文件 + this.showMsg = false; + this.errorMsg = ""; + }) + }, + pressEnter() { + if (this.secret == "") { + return + } + this.search.disabled = true + this.source = ""; + this.$message + .loading('卍解..', 1) + .then(() => { + this.queryDetail(); + this.search.disabled = false; + }) + + }, back: function() { this.$router.go(-1); - } }, - mounted() { - // console.log(this.$route.params) - // console.log(this.$route.params.id) - // console.log(this.$route.query.id) - } + } </script> -<style scoped > - /* @import '../../assets/md.less'; */ +<style lang="less"> + @import '../../assets/md.less'; - + .mySecret { + height: 715px; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: auto; + align-items: center; + } + + .markdown-body { + min-height: 750px; + padding: 35px 20px 10px 20px; + box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), + -8px -8px 18px #ffffff; + } /* #test{ padding-left: 25%; -- Gitblit v1.9.1