inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
56a4b8 1 <template>
0b0125 2     <div class="article-meta">
916b6b 3
8ec9c5 4         <div class="headertop filter-dot headertop-bar " v-if="coverURL.length>0">
916b6b 5             <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}">
I 6             </figure>
87317f 7             <div class="countMeta"
I 8                 v-if="articleFileType==fileType.fileTypeMarkDown_1|| articleFileType==fileType.fileTypeHtml_2">
9                 <div style="display: flex;justify-content: space-between;padding: 0px 10px;">
10                     <div style="display: flex;align-items: center;"> <span>发布时间:{{articelMeta.publishDate}}</span></div>
11                     <div style="display: inline-grid;">
12                         <span style="text-align: end;">字数:{{wordCount}}</span>
13                         <span>预计耗时:{{Math.floor(wordCount/500)}}~{{Math.ceil(wordCount/300)}}分钟</span>
14                     </div>
15                 </div>
16             </div>
7b98c8 17         </div>
I 18
c6793e 19         <div class="mySecret" v-if="myLock">
I 20             <h1>越不正经的人越深情..</h1>
21             <h3>受庇护的文字..输入神秘代码以解除封印</h3>
a3ab3a 22
c6793e 23             <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
I 24                 <a-input-password @pressEnter="pressEnter">
25                     <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
26                 </a-input-password>
27             </a-auto-complete>
28             <span class="myTip">{{errorMsg}}</span>
29         </div>
30
31         <div v-else-if="showMsg">
32             <div class="mySecret">
944ca6 33                 <h1>怎样才能让你看到我呢</h1>
I 34                 <h1>只要你要,只要我有...</h1>
00e46d 35                 <span class="myTip">{{errorMsg}}</span>
944ca6 36             </div>
7b98c8 37         </div>
28d46d 38
7b98c8 39         <div v-else>
87317f 40
c6793e 41             <div v-if="articleFileType==fileType.fileTypeTalking_9">
I 42                 <div class="markdown-body  articleTitle">
43                     <h4>{{articelMeta.title}}</h4>
28d46d 44
fa1bd9 45                     <div class="introduceSamll" v-if="introduce==null||introduce.length==0">
c6793e 46                         <p>空荡荡的..我好像忘记写点什么了OωO</p>
I 47                     </div>
48                     <div class="introduce" v-else>
49                         <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
50                         {{introduce}}
51                         </pre>
52                     </div>
bc9518 53                 </div>
a3ab3a 54             </div>
c6793e 55
I 56             <div class="introduce"
57                 v-else-if="articleFileType==fileType.fileTypeVideo_3 || articleFileType==fileType.fileTypeMp3_4">
58                 <div class="markdown-body  articleTitle">
59                     <h4>{{articelMeta.title}}</h4>
60                 </div>
a23166 61                 <div class="playBox"
I 62                     v-bind:class="{disabledPointer:articelMeta.videoUrlList==null||articelMeta.videoUrlList==0}">
c6793e 63                     <videoPlayBox ref="videoPlayBox" :showTar="true"></videoPlayBox>
a23166 64                 </div>
I 65                 <div class="introduceSamll" v-if="articelMeta.videoUrlList==null||articelMeta.videoUrlList==0">
66                     <p>该视频资源仍未上传</p>
c6793e 67                 </div>
I 68                 <div class="introduce">
69                     <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
70                     {{introduce}}
71                     </pre>
72                 </div>
a23166 73
c6793e 74             </div>
I 75
76             <div class="introduce" v-else-if="articleFileType==fileType.fileTypePictures_5">
77                 <div class="markdown-body  articleTitle">
78                     <h4>{{articelMeta.title}}</h4>
79                 </div>
a23166 80
I 81                 <div>
82                     <div class="introduceSamll"
83                         v-if="articelMeta.pictureUrlList==null ||articelMeta.pictureUrlList.length==0">
84                         <p>空荡荡的..好像忘记传图了</p>
c6793e 85                     </div>
a23166 86                     <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)" v-else>
I 87                         <div>
88                             <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy"
89                                 :onerror="img404">
90                         </div>
91                         <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div>
92                     </div>
c6793e 93                 </div>
fa1bd9 94                 <div class="introduce" v-if="introduce!=null && introduce.length>0">
c6793e 95                     <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
I 96                     {{introduce}}
97                     </pre>
98                 </div>
99             </div>
100
101             <div v-viewer.static="options" class="markdown-body " v-else>
38a800 102                 <div class="articleTitle">
I 103                     <h4>{{articelMeta.title}}</h4>
104                 </div>
87317f 105                 <vue-markdown :source="source" v-if="source== null || source.length>0"></vue-markdown>
a23166 106
87317f 107                 <div class="introduceSamll" v-else-if="introduce==null || introduce.length==0">
a23166 108                     <p>空荡荡的..我好像忘记写点什么了OωO</p>
I 109                 </div>
110
111                 <div class="introduce" v-else>
112                     <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
113                     {{introduce}}
114                     </pre>
115                 </div>
7b98c8 116             </div>
56a4b8 117         </div>
c6793e 118
916b6b 119         <!-- <div class="articleInfoMiniData">
I 120             <div>
121                 <a-icon type="calendar" class="samllPadding" />
122                 <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
123             </div>
ec6f20 124             <div class="smallOption" @click="articleOptionHandle('dislike')">
I 125                 <a-icon type="dislike" style="margin-top: 2px;" />
0b0125 126             </div>
I 127             <div>
128                 <a-icon type="read" class="samllPadding" />
129                 <span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
130             </div>
ec6f20 131             <div class="smallOption" @click="articleOptionHandle('like')">
I 132                 <a-icon type="like" class="samllPadding" />
133                 <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
0b0125 134             </div>
I 135             <div>
136                 <a-icon type="book" class="samllPadding" />
137                 <span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
138             </div>
916b6b 139                 <a-icon type="folder-open" class="samllPadding" />
I 140         </div> -->
141
c6793e 142         <div class="jumpURL" v-if="articelMeta.jumpURL">
I 143             外链:<a target="_blank" :href="articelMeta.jumpURL" :title="articelMeta.jumpURL">{{articelMeta.jumpURL}}</a>
144         </div>
a23166 145
937681 146         <div class="articleInfoMiniData">
c6793e 147
937681 148             <div class="myTitleDeal">
I 149                 <a-icon type="left" />
150                 <a-tooltip placement="bottomLeft" :title="'上一篇: '+articelMeta.previousRecord.title"
151                     v-if="articelMeta.previousRecord !=null">
152                     <router-link
153                         :to="{path:'/mdDetail',query:{id:articelMeta.previousRecord.id,articleFileType:articleFileType,typeId:typeId}}"
154                         class="article-title">
155                         {{articelMeta.previousRecord.title}}
156                     </router-link>
157                 </a-tooltip>
158                 <span v-else class="myTip">到顶啦..</span>
159             </div>
c6793e 160
937681 161             <div style="display: -webkit-box;">
I 162                 <div class="myTitleDeal">
163                     <a-tooltip placement="bottomLeft" :title="'下一篇: '+articelMeta.nextRecord.title"
164                         v-if="articelMeta.nextRecord !=null">
165                         <router-link
166                             :to="{path:'/mdDetail',query:{id:articelMeta.nextRecord.id,articleFileType:articleFileType,typeId:typeId}}"
167                             class="article-title">
168                             {{articelMeta.nextRecord.title}}
169                         </router-link>
170                     </a-tooltip>
171                     <span v-else class="myTip">到底啦..</span>
172                 </div>
173                 <a-icon type="right" />
174             </div>
175         </div>
176
0b0125 177         <div class="articleComment">
I 178             <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
179         </div>
180
56a4b8 181     </div>
I 182 </template>
183
184 <script>
185     import VueMarkdown from 'vue-markdown'
28d46d 186     import md5 from 'js-md5';
I 187
188     import {
189         queryBlogArticleDetail
190     } from '../../api/blogArticle.js'
c6793e 191
846bd0 192     import comment from "../mini/box12-comment.vue"
28d46d 193
I 194     import axios from 'axios'
105729 195     import myConstant from "../../config/myConstant.js"
c6793e 196     import optionsConfig from "../../config/v-viewer-Config.js"
I 197     import videoPlayBox from "../mini/box15-videoPlayBox.vue"
198     import {
199         api as viewerApi
200     } from "v-viewer"
201
af029b 202
56a4b8 203     export default {
I 204         components: {
846bd0 205             VueMarkdown,
c6793e 206             comment,
I 207             videoPlayBox
56a4b8 208         },
I 209         data() {
210             return {
5dfef8 211                 articleId: "",
80476f 212                 articleFileType: myConstant.fileType.fileTypeMarkDown_1,
937681 213                 typeId: null,
c6793e 214
I 215                 fileType: myConstant.fileType,
216                 articelMeta: '',
217                 isAllowedComment: 1,
218                 coverURL: "",
219                 introduce: "",
0b0125 220                 source: "",
c6793e 221
28d46d 222                 showMsg: false,
I 223                 myLock: false,
224                 errorMsg: '',
7b98c8 225                 secret: '',
I 226                 search: {
227                     placeholder: "",
0b0125 228                     autoFocus: false,
7b98c8 229                     backfill: true,
I 230                     value: '',
231                     disabled: false
232                 },
c6793e 233                 videoData: {
a23166 234                     pic: "",
c6793e 235                     url: "",
I 236                     type: "normal",
237                     title: "",
238                     introduce: "",
239                     id: ""
240                 },
241                 options: optionsConfig,
242                 img404: myConstant.img404,
87317f 243
I 244                 wordCount: 0
56a4b8 245             }
I 246         },
7b98c8 247         created() {
5dfef8 248             this.articleId = this.$route.query.id;
944ca6 249             this.articleFileType = this.$route.query.articleFileType;
937681 250             this.typeId = this.$route.query.typeId;
7b98c8 251         },
I 252         watch: {
253             '$route'(to, from) {
28d46d 254                 if ("mdDetail" === to.name) {
c6793e 255                     if (this.articleId != this.$route.query.id) {
I 256                         this.articleId = this.$route.query.id;
257                         this.articleFileType = this.$route.query.articleFileType;
258                         this.typeId = this.$route.query.typeId;
259                     }
7b98c8 260                 }
28d46d 261             },
5dfef8 262             articleId: function(newValue, oldValue) {
28d46d 263                 if (newValue == undefined || newValue == null || newValue == "") {
I 264                     this.showMsg = true;
265                     this.errorMsg = "日志id参数缺失";
266                 } else {
267                     this.queryDetail();
5dfef8 268                     this.$refs.myComment.updateCommentList(this.articleId);
28d46d 269                 }
0b0125 270             },
7b98c8 271         },
56a4b8 272         methods: {
87317f 273             getWordCount() {
I 274                 var iTotal = 0;
275                 var c;
276                 for (var i = 0; i < this.source.length; i++) {
277                     c = this.source.charAt(i);
278                     //基本汉字
279                     if (c.match(/[\u4e00-\u9fa5]/)) {
280                         iTotal++;
281                     }
282                     //基本汉字补充
283                     else if (c.match(/[\u9FA6-\u9fcb]/)) {
284                         iTotal++;
285                     }
286                 }
287                 this.wordCount = iTotal;
288             },
0b0125 289             articleOptionHandle(type) {
I 290                 this.$message.info(type)
291             },
c6793e 292             showPicture(param) {
I 293                 viewerApi({
294                     options: this.options,
295                     images: param
296                 })
297             },
28d46d 298             queryDetail() {
4b854c 299                 this.showMsg = true;
I 300                 this.errorMsg = "加载中..";
c6793e 301                 let _this = this;
944ca6 302
28d46d 303                 queryBlogArticleDetail({
5dfef8 304                     id: this.articleId,
937681 305                     authWord: this.secret == "" ? null : md5(this.secret),
I 306                     typeId: this.typeId,
307                     fileType: this.articleFileType
28d46d 308                 }).then((res) => {
I 309                     this.myLock = false;
310                     this.errorMsg = res.message;
311                     this.source = "";
312                     if (res.code != 200) {
313
314                         if (res.code == 1019001) {
315                             //日志需要授权
316                             this.errorMsg = "";
317                             this.myLock = true;
318                         } else if (res.code == 1019002) {
319                             //授权码错误
320                             this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
321                             this.myLock = true;
322                         } else {
323                             this.$notification.error({
324                                 message: '好像哪里不对劲..',
325                                 description: res.message,
326                                 placement: 'bottomRight'
327                             });
328                         }
329                         return
330                     }
0b0125 331                     // this.test = res.data.isAllowedComment == 1 ? true : false;
28d46d 332
0b0125 333                     this.isAllowedComment = res.data.isAllowedComment;
a3ab3a 334                     this.introduce = res.data.introduce;
bc9518 335                     this.articleFileType = res.data.articleFileType;
916b6b 336                     if (res.data.coverFileURL != null && res.data.coverFileURL != '') {
I 337                         this.coverURL = res.data.coverFileURL;
338                     } else {
a23166 339                         this.coverURL = myConstant.defaultBG;
916b6b 340                     }
a3ab3a 341
0b0125 342                     this.articelMeta = res.data;
a3ab3a 343
80476f 344                     if (res.data.articleFileType == this.fileType.fileTypeMarkDown_1 ||
I 345                         res.data.articleFileType == this.fileType.fileTypeHtml_2) {
937681 346                         if (res.data.articleFileURL != null && res.data.articleFileURL != '') {
I 347                             this.$axios
348                                 .get(res.data.articleFileURL)
349                                 .then((res) => {
350                                     this.source = res.data;
351                                 }).catch(() => [
352                                     this.$message.error("获取文件好像失败了..", 3)
87317f 353                                 ]).finally(() => {
I 354                                     setTimeout(() => {
355                                         _this.getWordCount();
356                                     }, 500);
357                                 })
937681 358                         }
c6793e 359                     } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) {
I 360                         if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
361                             this.$notification.error({
362                                 message: '该日志还没有上传视频资源..',
363                                 placement: 'bottomRight'
364                             });
365                         } else {
366                             this.videoData.url = res.data.videoUrlList[0];
367
a23166 368                             this.videoData.pic = res.data.coverFileURL;
c6793e 369                             this.videoData.title = res.data.title;
I 370                             this.videoData.introduce = res.data.introduce;
371                             this.videoData.id = res.data.id;
372                             if (this.lastArticleId != this.articleId) {
373                                 let tempParam = JSON.parse(JSON.stringify(this.videoData))
374
375                                 _this.$nextTick(function() {
376                                     _this.$refs.videoPlayBox.startPlay(tempParam)
377                                 })
378                             }
379                         }
380
381
a3ab3a 382                     }
c23efb 383
I 384                     //获取日志资源文件
385                     this.showMsg = false;
386                     this.errorMsg = "";
28d46d 387                 })
I 388             },
389             pressEnter() {
7b98c8 390                 if (this.secret == "") {
I 391                     return
392                 }
393                 this.search.disabled = true
28d46d 394                 this.source = "";
7b98c8 395                 this.$message
28d46d 396                     .loading('卍解..', 1)
7b98c8 397                     .then(() => {
28d46d 398                         this.queryDetail();
7b98c8 399                         this.search.disabled = false;
I 400                     })
401
56a4b8 402             }
I 403         },
c23efb 404
56a4b8 405     }
I 406 </script>
407
b505f3 408 <style lang="less">
I 409     @import '../../assets/md.less';
937681 410
a23166 411     .disabledPointer {
I 412         position: relative;
413         pointer-events: none;
414         filter: blur(0.9px) brightness(.8);
415     }
416
417     .disabledPointer:before {
418         content: "\ec2a";
419         z-index: 2;
420         font-size: 4rem;
421         font-family: 'iconfont';
422         position: absolute;
423         top: 50%;
424         left: 50%;
425         transform: translate(-50%, -50%);
426     }
427
38a800 428     .articleTitle {
80476f 429         h4 {
a23166 430             margin: 0px 0px 10px 0px;
38a800 431             -webkit-line-clamp: 1;
I 432         }
80476f 433
38a800 434         text-align: center;
I 435         width: 100%;
c6793e 436     }
I 437
438     .myPicture {
a23166 439         max-width: 70%;
I 440         margin: 0px auto;
c6793e 441         padding: 20px 0px 0px 0px;
I 442
443         img {
444             display: block;
445             width: 100%;
446             transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
447             border-radius: 16px;
448         }
87317f 449     }
I 450
451     .countMeta {
452         position: absolute;
453         bottom: 0px;
454         width: 100%;
455         background: #f0f2f5;
456         opacity: 0.6;
38a800 457     }
56a4b8 458
916b6b 459     .headertop {
I 460         position: relative;
461         overflow: hidden;
462         border-radius: 14px;
463     }
464
465     .centerbg {
466         width: 100%;
467         margin: 0;
468         padding: 0;
469         background-repeat: no-repeat;
470         // background-attachment: fixed;
471         background-size: cover;
472         z-index: -1;
473         // background-image: url("http://t.inleft.com/blog//cover/这世界那么多人.jpg");
474         height: 222px;
475         background-size: 100% auto;
476         background-position: center;
477     }
478
479
480     .headertop::before {
481         content: '';
482         position: absolute;
483         top: 0;
484         bottom: 0;
485         left: 0;
486         right: 0;
487         z-index: 3;
488         background-attachment: fixed;
489     }
490
491     .headertop.filter-dot::before {
492         // background-image: url("https://blog-img-1258635493.cos.ap-chengdu.myqcloud.com/cdn/img/other/dot.gif");
493         // background-image: url("http://blog.inleft.com/photo/dot.gif");
494     }
495
496     // .headertop-bar::after {
497     //     content: '';
498     //     width: 150%;
499     //     height: 4.375rem;
500     //     background: linear-gradient(0deg, #fff, 84%, #ffffff4f);
501     //     left: -25%;
502     //     bottom: -2.875rem;
503     //     border-radius: 100%;
504     //     position: absolute;
505     //     z-index: 4;
506     // }
0b0125 507
I 508     .smallOption {
509         transition-function: ease-out;
510         transition-duration: 200ms;
511         -webkit-transition-function: ease-out;
512         -webkit-transition-duration: 200ms;
513         -moztransition-function: ease-out;
514         -moztransition-duration: 200ms;
515         -o-transition-function: ease-out;
516         -o-transition-duration: 200ms;
517     }
518
519     .smallOption:hover {
520         transform: scale(1.55, 1.55);
521         -webkit-transform: scale(1.55, 1.55);
522         -moz-transform: scale(1.55, 1.55);
523         -o-transform: scale(1.55, 1.55);
524     }
525
c6793e 526     .jumpURL {
I 527         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
528         padding: 10px 23px;
529         margin: 20px 0px;
530
531         a {
532             color: black;
533         }
534     }
535
0b0125 536     .articleInfoMiniData {
I 537         user-select: none;
538         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
916b6b 539         padding: 10px 23px;
937681 540         margin: 20px 0px;
0b0125 541         display: flex;
I 542         justify-content: space-between;
543         flex-wrap: wrap;
937681 544
I 545
546         a {
547             color: black;
548         }
549
550         .myTitleDeal {
551             max-width: 300px;
552             -webkit-line-clamp: 1;
553             text-overflow: ellipsis;
554             overflow: hidden;
555             word-wrap: break-word;
556             white-space: nowrap;
557             word-break: break-all;
558         }
0b0125 559     }
I 560
7b98c8 561     .mySecret {
c6793e 562         height: 315px;
I 563     }
564
565     .mySecret,
566     .introduce {
7b98c8 567         display: flex;
I 568         flex-direction: column;
569         justify-content: center;
570         padding-left: auto;
571         align-items: center;
572     }
00e46d 573
c6793e 574     .mySecretSamll,
I 575     .introduceSamll {
a3ab3a 576         padding: 30px 10px 10px;
944ca6 577         height: 115px;
I 578         display: flex;
579         flex-direction: column;
580         justify-content: center;
581         padding-left: auto;
582         align-items: center;
583     }
7b98c8 584
846bd0 585
I 586     .markdown-body,
587     .articleComment {
859ec7 588         min-height: 70%;
a3ab3a 589         padding: 30px 20px 20px 20px;
b505f3 590         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
I 591             -8px -8px 18px #ffffff;
592     }
56a4b8 593
937681 594
I 595     @media screen and (max-width:768px) {
596         .articleInfoMiniData {
597             .myTitleDeal {
598                 max-width: 120px;
599             }
600         }
fa1bd9 601
I 602         .countMeta {
87317f 603             bottom: 10px;
I 604         }
56a4b8 605     }
I 606 </style>