inleft
2022-08-25 c6793e5475b607e83cbb55b7d0ddfb9b81bd7774
src/components/mini/mdDetail.vue
@@ -6,20 +6,6 @@
         </figure>
      </div>
      <div v-if="showMsg && !myLock">
         <div class="mySecretSamll" v-if="articleFileType==fileType.fileTypeTalking_9">
            <p>碎碎念只有那么一点了</p>
            <p>但是下面依旧可以碎碎念</p>
         </div>
         <div class="mySecret" v-else>
            <h1>怎样才能让你看到我呢</h1>
            <h1>只要你要,只要我有...</h1>
            <span class="myTip">{{errorMsg}}</span>
         </div>
      </div>
      <div v-else>
         <div class="mySecret" v-if="myLock">
            <h1>越不正经的人越深情..</h1>
            <h3>受庇护的文字..输入神秘代码以解除封印</h3>
@@ -32,25 +18,71 @@
            <span class="myTip">{{errorMsg}}</span>
         </div>
         <div class="mySecret" v-else-if="articleFileType==fileType.fileTypeVideo_3
            || articleFileType==fileType.fileTypeVideo_3
            || articleFileType==fileType.fileTypeTalking_9">
            <div class="mySecretSamll" v-if="introduce.length==0">
               <p>碎碎念只有那么一点了22</p>
               <p>但是下面依旧可以碎碎念</p>
      <div v-else-if="showMsg">
         <div class="mySecret">
            <h1>怎样才能让你看到我呢</h1>
            <h1>只要你要,只要我有...</h1>
            <span class="myTip">{{errorMsg}}</span>
            </div>
      </div>
      <div v-else>
         <div v-if="articleFileType==fileType.fileTypeTalking_9">
            <div class="markdown-body  articleTitle">
               <h4>{{articelMeta.title}}</h4>
               <div class="introduceSamll" v-if="introduce.length==0">
                  <p>空荡荡的..我好像忘记写点什么了OωO</p>
               </div>
               <div class="introduce" v-else>
            <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
               {{introduce}}
            </pre>
         </div>
         <div v-viewer.static class="markdown-body article-detail" v-else>
            </div>
         </div>
         <div class="introduce"
            v-else-if="articleFileType==fileType.fileTypeVideo_3 || articleFileType==fileType.fileTypeMp3_4">
            <div class="markdown-body  articleTitle">
               <h4>{{articelMeta.title}}</h4>
            </div>
            <div class="playBox">
               <videoPlayBox ref="videoPlayBox" :showTar="true"></videoPlayBox>
            </div>
            <div class="introduce">
               <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
               {{introduce}}
               </pre>
            </div>
         </div>
         <div class="introduce" v-else-if="articleFileType==fileType.fileTypePictures_5">
            <div class="markdown-body  articleTitle">
               <h4>{{articelMeta.title}}</h4>
            </div>
            <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)">
               <div>
                  <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy"
                     :onerror="img404">
               </div>
               <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div>
            </div>
            <div class="introduce">
               <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
               {{introduce}}
               </pre>
            </div>
         </div>
         <div v-viewer.static="options" class="markdown-body " v-else>
            <div class="articleTitle">
               <h4>{{articelMeta.title}}</h4>
            </div>
            <vue-markdown :source="source"></vue-markdown>
         </div>
      </div>
      <!-- <div class="articleInfoMiniData">
         <div>
            <a-icon type="calendar" class="samllPadding" />
@@ -74,7 +106,12 @@
            <a-icon type="folder-open" class="samllPadding" />
      </div> -->
      <div class="jumpURL" v-if="articelMeta.jumpURL">
         外链:<a target="_blank" :href="articelMeta.jumpURL" :title="articelMeta.jumpURL">{{articelMeta.jumpURL}}</a>
      </div>
      <div class="articleInfoMiniData">
         <div class="myTitleDeal">
            <a-icon type="left" />
            <a-tooltip placement="bottomLeft" :title="'上一篇: '+articelMeta.previousRecord.title"
@@ -87,6 +124,7 @@
            </a-tooltip>
            <span v-else class="myTip">到顶啦..</span>
         </div>
         <div style="display: -webkit-box;">
            <div class="myTitleDeal">
               <a-tooltip placement="bottomLeft" :title="'下一篇: '+articelMeta.nextRecord.title"
@@ -122,22 +160,32 @@
   import axios from 'axios'
   import myConstant from "../../config/myConstant.js"
   import optionsConfig from "../../config/v-viewer-Config.js"
   import videoPlayBox from "../mini/box15-videoPlayBox.vue"
   import {
      api as viewerApi
   } from "v-viewer"
   export default {
      components: {
         VueMarkdown,
         comment
         comment,
         videoPlayBox
      },
      data() {
         return {
            fileType: myConstant.fileType,
            articelMeta: '',
            isAllowedComment: 1,
            introduce: "",
            articleId: "",
            articleFileType: myConstant.fileType.fileTypeMarkDown_1,
            typeId: null,
            fileType: myConstant.fileType,
            articelMeta: '',
            isAllowedComment: 1,
            coverURL: "",
            introduce: "",
            source: "",
            showMsg: false,
            myLock: false,
            errorMsg: '',
@@ -149,22 +197,33 @@
               value: '',
               disabled: false
            },
            coverURL: ""
            videoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               url: "",
               type: "normal",
               title: "",
               introduce: "",
               id: ""
            },
            options: optionsConfig,
            img404: myConstant.img404,
         }
      },
      created() {
         console.log(111);
         console.log(this.$route.params);
         this.articleId = this.$route.query.id;
         this.articleFileType = this.$route.query.articleFileType;
         this.typeId = this.$route.query.typeId;
      },
      watch: {
         '$route'(to, from) {
            if ("mdDetail" === to.name) {
               if (this.articleId != this.$route.query.id) {
               this.articleId = this.$route.query.id;
               this.articleFileType = this.$route.query.articleFileType;
               this.typeId = this.$route.query.typeId;
               }
            }
         },
         articleId: function(newValue, oldValue) {
@@ -181,9 +240,16 @@
         articleOptionHandle(type) {
            this.$message.info(type)
         },
         showPicture(param) {
            viewerApi({
               options: this.options,
               images: param
            })
         },
         queryDetail() {
            this.showMsg = true;
            this.errorMsg = "加载中..";
            let _this = this;
            queryBlogArticleDetail({
               id: this.articleId,
@@ -191,7 +257,6 @@
               typeId: this.typeId,
               fileType: this.articleFileType
            }).then((res) => {
               this.showMsg = true;
               this.myLock = false;
               this.errorMsg = res.message;
               this.source = "";
@@ -238,6 +303,30 @@
                           this.$message.error("获取文件好像失败了..", 3)
                        ])
                  }
               } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) {
                  if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
                     this.$notification.error({
                        message: '该日志还没有上传视频资源..',
                        placement: 'bottomRight'
                     });
                  } else {
                     this.videoData.url = res.data.videoUrlList[0];
                     this.videoData.img = res.data.coverFileURL;
                     this.videoData.title = res.data.title;
                     this.videoData.introduce = res.data.introduce;
                     this.videoData.id = res.data.id;
                     if (this.lastArticleId != this.articleId) {
                        console.log(111);
                        let tempParam = JSON.parse(JSON.stringify(this.videoData))
                        _this.$nextTick(function() {
                           _this.$refs.videoPlayBox.startPlay(tempParam)
                        })
                     }
                  }
               }
               //获取日志资源文件
@@ -276,6 +365,19 @@
      text-align: center;
      width: 100%;
   }
   .myPicture {
      display: grid;
      width: 50%;
      padding: 20px 0px 0px 0px;
      img {
         display: block;
         width: 100%;
         transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
         border-radius: 16px;
      }
   }
   .headertop {
@@ -345,6 +447,16 @@
      -o-transform: scale(1.55, 1.55);
   }
   .jumpURL {
      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
      padding: 10px 23px;
      margin: 20px 0px;
      a {
         color: black;
      }
   }
   .articleInfoMiniData {
      user-select: none;
      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
@@ -371,7 +483,11 @@
   }
   .mySecret {
      height: 515px;
      height: 315px;
   }
   .mySecret,
   .introduce {
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -379,7 +495,8 @@
      align-items: center;
   }
   .mySecretSamll {
   .mySecretSamll,
   .introduceSamll {
      padding: 30px 10px 10px;
      height: 115px;
      display: flex;