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