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