inleft
2022-03-03 5dfef883049e7f0670f6c6b1b225b233aee41eea
commit | author | age
56a4b8 1 <template>
b505f3 2     <div class="article-meta ">
7b98c8 3         <div>
I 4             <a-button @click="back" style="position: absolute;">
5                 <a-icon type="left" />
6             </a-button>
7         </div>
8
9
28d46d 10         <div class="mySecret" v-if="showMsg && !myLock">
I 11             <h1>怎样才能让你看到我呢</h1>
12             <h1>只要你要,只要我有...</h1>
13             <span class="myTip">{{errorMsg}}</span>
7b98c8 14         </div>
28d46d 15
7b98c8 16         <div v-else>
I 17             <div class="mySecret" v-if="myLock">
18                 <h1>越不正经的人越深情..</h1>
19                 <h3>受庇护的文字..输入神秘代码以解除封印</h3>
28d46d 20
I 21                 <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
22                     <a-input-password @pressEnter="pressEnter">
7b98c8 23                         <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
I 24                     </a-input-password>
25                 </a-auto-complete>
28d46d 26                 <span class="myTip">{{errorMsg}}</span>
I 27
28
7b98c8 29             </div>
I 30
31             <div class="markdown-body article-detail" v-else>
32                 <vue-markdown :source="source"></vue-markdown>
33             </div>
56a4b8 34         </div>
846bd0 35         <div class="articleComment">
5dfef8 36             <comment ref="myComment" :articleId="articleId"> </comment>
846bd0 37         </div>
56a4b8 38     </div>
28d46d 39
56a4b8 40 </template>
I 41
42 <script>
43     import VueMarkdown from 'vue-markdown'
28d46d 44     import md5 from 'js-md5';
I 45
46     import {
47         queryBlogArticleDetail
48     } from '../../api/blogArticle.js'
846bd0 49     import comment from "../mini/box12-comment.vue"
28d46d 50
I 51     import axios from 'axios'
56a4b8 52
I 53     export default {
54         components: {
846bd0 55             VueMarkdown,
I 56             comment
56a4b8 57         },
I 58         data() {
59             return {
28d46d 60                 source: "",
5dfef8 61                 articleId: "",
28d46d 62                 showMsg: false,
I 63                 myLock: false,
64                 errorMsg: '',
7b98c8 65                 secret: '',
I 66                 search: {
67                     placeholder: "",
68                     autoFocus: true,
69                     backfill: true,
70                     value: '',
71                     disabled: false
72                 },
56a4b8 73             }
I 74         },
7b98c8 75         created() {
5dfef8 76             this.articleId = this.$route.query.id;
7b98c8 77         },
I 78         watch: {
79             '$route'(to, from) {
28d46d 80                 if ("mdDetail" === to.name) {
5dfef8 81                     this.articleId = this.$route.query.id;
7b98c8 82                 }
28d46d 83             },
5dfef8 84             articleId: function(newValue, oldValue) {
28d46d 85                 if (newValue == undefined || newValue == null || newValue == "") {
I 86                     this.showMsg = true;
87                     this.errorMsg = "日志id参数缺失";
88                 } else {
89                     this.queryDetail();
5dfef8 90                     this.$refs.myComment.updateCommentList(this.articleId);
28d46d 91                 }
7b98c8 92             }
28d46d 93
7b98c8 94         },
56a4b8 95         methods: {
28d46d 96             queryDetail() {
4b854c 97                 this.showMsg = true;
I 98                 this.errorMsg = "加载中..";
28d46d 99                 queryBlogArticleDetail({
5dfef8 100                     id: this.articleId,
28d46d 101                     authWord: this.secret == "" ? null : md5(this.secret)
I 102                 }).then((res) => {
103                     this.showMsg = true;
104                     this.myLock = false;
105                     this.errorMsg = res.message;
106                     this.source = "";
107                     if (res.code != 200) {
108
109                         if (res.code == 1019001) {
110                             //日志需要授权
111                             this.errorMsg = "";
112                             this.myLock = true;
113                         } else if (res.code == 1019002) {
114                             //授权码错误
115                             this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
116                             this.myLock = true;
117                         } else {
118                             this.$notification.error({
119                                 message: '好像哪里不对劲..',
120                                 description: res.message,
121                                 placement: 'bottomRight'
122                             });
123                         }
124
125                         return
126                     }
127
128                     this.$axios
129                         .get(res.data.articleFileURL)
130                         .then((res) => {
131                             this.source = res.data;
132                         })
c23efb 133
I 134                     //获取日志资源文件
135                     this.showMsg = false;
136                     this.errorMsg = "";
28d46d 137                 })
I 138             },
139             pressEnter() {
7b98c8 140                 if (this.secret == "") {
I 141                     return
142                 }
143                 this.search.disabled = true
28d46d 144                 this.source = "";
7b98c8 145                 this.$message
28d46d 146                     .loading('卍解..', 1)
7b98c8 147                     .then(() => {
28d46d 148                         this.queryDetail();
7b98c8 149                         this.search.disabled = false;
I 150                     })
151
152             },
56a4b8 153             back: function() {
I 154                 this.$router.go(-1);
155             }
156         },
c23efb 157
56a4b8 158     }
I 159 </script>
160
b505f3 161 <style lang="less">
I 162     @import '../../assets/md.less';
56a4b8 163
7b98c8 164     .mySecret {
I 165         height: 715px;
166         display: flex;
167         flex-direction: column;
168         justify-content: center;
169         padding-left: auto;
170         align-items: center;
171     }
172
846bd0 173     .articleComment {
I 174         margin-top: 20px;
175     }
176
177     .markdown-body,
178     .articleComment {
81c155 179         min-height: 750px;
I 180         padding: 35px 20px 10px 20px;
b505f3 181         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
I 182             -8px -8px 18px #ffffff;
183     }
56a4b8 184
I 185     /* #test{
186         padding-left: 25%;
187         padding-right: 25%;
188     } */
189     /* h3 {
190         margin: 40px 0 0;
191     }
192
193     ul {
194         list-style-type: none;
195         padding: 0;
196     }
197
198     li {
199         display: inline-block;
200         margin: 0 10px;
201     }
202
203     a {
204         color: #42b983;
205     }
206     
207      */
208
209
210     /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */
211     /* .markdown-body {
212         padding: 20px;
213         min-width: 200px;
214         max-width: 900px;
215         font-size: 12px;
216
217         h2 {
218             font-size: 18px;
219             margin: 1em 0 15px;
220             padding-top: 0.8em;
221             padding-bottom: 0.8em;
222         }
223
224         h3 {
225             font-size: 14px;
226             margin: 22px 0 16px;
227         }
228
229         h4 {
230             font-size: 13px;
231             margin: 20px 0 16px;
232         }
233
234         h5 {
235             font-size: 12px;
236             margin: 16px 0 16px;
237             font-weight: 700;
238         }
239
240         p {
241             font-size: 12px;
242             line-height: 24px;
243             color: #666666;
244             margin-top: 0px;
245             margin: 8px 0;
246             margin: 14px 0 14px;
247         }
248
249         pre {
250             background-color: #eee;
251             margin-bottom: 8px;
252             margin-top: 8px;
253             margin: 12px 0 12px;
254         }
255
256         blockquote {
257             margin-bottom: 8px;
258             margin-top: 8px;
259             margin: 14px 0 14px;
260             background-color: #eee;
261             padding: 16px 16px;
262         }
263
264         tr {
265             background-color: #f5f5f5;
266         }
267
268         code {
269             background-color: #eee;
270         }
271
272         ul,
273         ol,
274         li {
275             list-style: unset;
276             font-size: 12px;
277             line-height: 20px;
278             color: #666666;
279             margin-top: 0px;
280             margin: 8px 0;
281         }
282
283         blockquote {
284             border-color: #48b6e2;
285         }
286
287         table {
288             display: table;
289             width: 100%;
290             max-width: 100%;
291             margin-bottom: 20px;
292         }
293     } */
294 </style>