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