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