inleft
2022-08-14 a3ab3afe580daa80e9689f6e513e75a385f75bac
commit | author | age
56a4b8 1 <template>
0b0125 2     <div class="article-meta">
7b98c8 3         <div>
a3ab3a 4             <a-button @click="()=>this.$router.back(-1)" style="position: absolute;">
7b98c8 5                 <a-icon type="left" />
I 6             </a-button>
7         </div>
8
00e46d 9         <div v-if="showMsg && !myLock">
105729 10             <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
af029b 11                 <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
944ca6 12             </div>
a3ab3a 13
944ca6 14             <div class="mySecret" v-else>
I 15                 <h1>怎样才能让你看到我呢</h1>
16                 <h1>只要你要,只要我有...</h1>
00e46d 17                 <span class="myTip">{{errorMsg}}</span>
944ca6 18             </div>
7b98c8 19         </div>
28d46d 20
7b98c8 21         <div v-else>
I 22             <div class="mySecret" v-if="myLock">
23                 <h1>越不正经的人越深情..</h1>
24                 <h3>受庇护的文字..输入神秘代码以解除封印</h3>
28d46d 25
I 26                 <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
27                     <a-input-password @pressEnter="pressEnter">
7b98c8 28                         <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
I 29                     </a-input-password>
30                 </a-auto-complete>
28d46d 31                 <span class="myTip">{{errorMsg}}</span>
7b98c8 32             </div>
I 33
a3ab3a 34             <div class="mySecret"
I 35                 v-else-if="articleFileType==myConstant.fileTypeVideo|| articleFileType==myConstant.fileTypeMp3">
36                 <pre style="white-space: pre-line;">
37                 {{introduce}}
38                 </pre>
39             </div>
40
7b98c8 41             <div class="markdown-body article-detail" v-else>
I 42                 <vue-markdown :source="source"></vue-markdown>
43             </div>
56a4b8 44         </div>
a3ab3a 45
af029b 46         <div class="articleInfoMiniData">
ec6f20 47             <div class="smallOption" @click="articleOptionHandle('dislike')">
I 48                 <a-icon type="dislike" style="margin-top: 2px;" />
0b0125 49             </div>
I 50             <div>
51                 <a-icon type="read" class="samllPadding" />
52                 <span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
53             </div>
ec6f20 54             <div class="smallOption" @click="articleOptionHandle('like')">
I 55                 <a-icon type="like" class="samllPadding" />
56                 <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
0b0125 57             </div>
I 58             <div>
59                 <!-- <a-icon type="folder-open" class="samllPadding" /> -->
60                 <a-icon type="book" class="samllPadding" />
61                 <span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
62             </div>
63             <div>
64                 <a-icon type="calendar" class="samllPadding" />
65                 <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
66             </div>
846bd0 67         </div>
0b0125 68         <div class="articleComment">
I 69             <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
70         </div>
71
56a4b8 72     </div>
28d46d 73
56a4b8 74 </template>
I 75
76 <script>
77     import VueMarkdown from 'vue-markdown'
28d46d 78     import md5 from 'js-md5';
I 79
80     import {
81         queryBlogArticleDetail
82     } from '../../api/blogArticle.js'
846bd0 83     import comment from "../mini/box12-comment.vue"
28d46d 84
I 85     import axios from 'axios'
105729 86     import myConstant from "../../config/myConstant.js"
af029b 87
56a4b8 88     export default {
I 89         components: {
846bd0 90             VueMarkdown,
I 91             comment
56a4b8 92         },
I 93         data() {
94             return {
af029b 95                 myConstant: myConstant,
0b0125 96                 articelMeta: "",
I 97                 isAllowedComment: 1,
a3ab3a 98                 introduce: "",
5dfef8 99                 articleId: "",
105729 100                 articleFileType: myConstant.fileTypeMarkDown,
0b0125 101                 source: "",
28d46d 102                 showMsg: false,
I 103                 myLock: false,
104                 errorMsg: '',
7b98c8 105                 secret: '',
I 106                 search: {
107                     placeholder: "",
0b0125 108                     autoFocus: false,
7b98c8 109                     backfill: true,
I 110                     value: '',
111                     disabled: false
112                 },
56a4b8 113             }
I 114         },
7b98c8 115         created() {
5dfef8 116             this.articleId = this.$route.query.id;
944ca6 117             this.articleFileType = this.$route.query.articleFileType;
7b98c8 118         },
I 119         watch: {
120             '$route'(to, from) {
28d46d 121                 if ("mdDetail" === to.name) {
5dfef8 122                     this.articleId = this.$route.query.id;
944ca6 123                     this.articleFileType = this.$route.query.articleFileType;
7b98c8 124                 }
28d46d 125             },
5dfef8 126             articleId: function(newValue, oldValue) {
28d46d 127                 if (newValue == undefined || newValue == null || newValue == "") {
I 128                     this.showMsg = true;
129                     this.errorMsg = "日志id参数缺失";
130                 } else {
131                     this.queryDetail();
5dfef8 132                     this.$refs.myComment.updateCommentList(this.articleId);
28d46d 133                 }
0b0125 134             },
7b98c8 135         },
56a4b8 136         methods: {
0b0125 137             articleOptionHandle(type) {
I 138                 this.$message.info(type)
139             },
28d46d 140             queryDetail() {
4b854c 141                 this.showMsg = true;
I 142                 this.errorMsg = "加载中..";
944ca6 143
a3ab3a 144                 if (this.articleFileType == myConstant.fileTypeShort) {
af029b 145                     this.errorMsg = "该类型日志在这里没有更多啦..";
944ca6 146                     return
I 147                 }
148
28d46d 149                 queryBlogArticleDetail({
5dfef8 150                     id: this.articleId,
28d46d 151                     authWord: this.secret == "" ? null : md5(this.secret)
I 152                 }).then((res) => {
153                     this.showMsg = true;
154                     this.myLock = false;
155                     this.errorMsg = res.message;
156                     this.source = "";
157                     if (res.code != 200) {
158
159                         if (res.code == 1019001) {
160                             //日志需要授权
161                             this.errorMsg = "";
162                             this.myLock = true;
163                         } else if (res.code == 1019002) {
164                             //授权码错误
165                             this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
166                             this.myLock = true;
167                         } else {
168                             this.$notification.error({
169                                 message: '好像哪里不对劲..',
170                                 description: res.message,
171                                 placement: 'bottomRight'
172                             });
173                         }
174                         return
175                     }
0b0125 176                     // this.test = res.data.isAllowedComment == 1 ? true : false;
28d46d 177
0b0125 178                     this.isAllowedComment = res.data.isAllowedComment;
a3ab3a 179                     this.introduce = res.data.introduce;
I 180
0b0125 181                     this.articelMeta = res.data;
a3ab3a 182
I 183                     if (res.data.articleFileType == myConstant.fileTypeMarkDown ||
184                         res.data.articleFileType == myConstant.fileTypeHtml) {
185
186                         this.$axios
187                             .get(res.data.articleFileURL)
188                             .then((res) => {
189                                 this.source = res.data;
190                             })
191                     }
c23efb 192
I 193                     //获取日志资源文件
194                     this.showMsg = false;
195                     this.errorMsg = "";
28d46d 196                 })
I 197             },
198             pressEnter() {
7b98c8 199                 if (this.secret == "") {
I 200                     return
201                 }
202                 this.search.disabled = true
28d46d 203                 this.source = "";
7b98c8 204                 this.$message
28d46d 205                     .loading('卍解..', 1)
7b98c8 206                     .then(() => {
28d46d 207                         this.queryDetail();
7b98c8 208                         this.search.disabled = false;
I 209                     })
210
56a4b8 211             }
I 212         },
c23efb 213
56a4b8 214     }
I 215 </script>
216
b505f3 217 <style lang="less">
I 218     @import '../../assets/md.less';
56a4b8 219
0b0125 220
I 221     .smallOption {
222         transition-function: ease-out;
223         transition-duration: 200ms;
224         -webkit-transition-function: ease-out;
225         -webkit-transition-duration: 200ms;
226         -moztransition-function: ease-out;
227         -moztransition-duration: 200ms;
228         -o-transition-function: ease-out;
229         -o-transition-duration: 200ms;
230     }
231
232     .smallOption:hover {
233         transform: scale(1.55, 1.55);
234         -webkit-transform: scale(1.55, 1.55);
235         -moz-transform: scale(1.55, 1.55);
236         -o-transform: scale(1.55, 1.55);
237     }
238
239     .articleInfoMiniData {
240         user-select: none;
241         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
242         padding: 10px 50px;
243         display: flex;
244         justify-content: space-between;
245         flex-wrap: wrap;
246     }
247
7b98c8 248     .mySecret {
I 249         height: 715px;
250         display: flex;
251         flex-direction: column;
252         justify-content: center;
253         padding-left: auto;
254         align-items: center;
255     }
00e46d 256
944ca6 257     .mySecretSamll {
a3ab3a 258         padding: 30px 10px 10px;
944ca6 259         height: 115px;
I 260         display: flex;
261         flex-direction: column;
262         justify-content: center;
263         padding-left: auto;
264         align-items: center;
265     }
7b98c8 266
846bd0 267
I 268     .markdown-body,
269     .articleComment {
859ec7 270         min-height: 70%;
a3ab3a 271         padding: 30px 20px 20px 20px;
b505f3 272         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
I 273             -8px -8px 18px #ffffff;
274     }
56a4b8 275
I 276     /* #test{
277         padding-left: 25%;
278         padding-right: 25%;
279     } */
280     /* h3 {
281         margin: 40px 0 0;
282     }
283
284     ul {
285         list-style-type: none;
286         padding: 0;
287     }
288
289     li {
290         display: inline-block;
291         margin: 0 10px;
292     }
293
294     a {
295         color: #42b983;
296     }
297     
298      */
299
300
301     /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */
302     /* .markdown-body {
303         padding: 20px;
304         min-width: 200px;
305         max-width: 900px;
306         font-size: 12px;
307
308         h2 {
309             font-size: 18px;
310             margin: 1em 0 15px;
311             padding-top: 0.8em;
312             padding-bottom: 0.8em;
313         }
314
315         h3 {
316             font-size: 14px;
317             margin: 22px 0 16px;
318         }
319
320         h4 {
321             font-size: 13px;
322             margin: 20px 0 16px;
323         }
324
325         h5 {
326             font-size: 12px;
327             margin: 16px 0 16px;
328             font-weight: 700;
329         }
330
331         p {
332             font-size: 12px;
333             line-height: 24px;
334             color: #666666;
335             margin-top: 0px;
336             margin: 8px 0;
337             margin: 14px 0 14px;
338         }
339
340         pre {
341             background-color: #eee;
342             margin-bottom: 8px;
343             margin-top: 8px;
344             margin: 12px 0 12px;
345         }
346
347         blockquote {
348             margin-bottom: 8px;
349             margin-top: 8px;
350             margin: 14px 0 14px;
351             background-color: #eee;
352             padding: 16px 16px;
353         }
354
355         tr {
356             background-color: #f5f5f5;
357         }
358
359         code {
360             background-color: #eee;
361         }
362
363         ul,
364         ol,
365         li {
366             list-style: unset;
367             font-size: 12px;
368             line-height: 20px;
369             color: #666666;
370             margin-top: 0px;
371             margin: 8px 0;
372         }
373
374         blockquote {
375             border-color: #48b6e2;
376         }
377
378         table {
379             display: table;
380             width: 100%;
381             max-width: 100%;
382             margin-bottom: 20px;
383         }
384     } */
385 </style>