src/components/mini/box16-videoDetail.vue

@@ -1,13 +1,24 @@
<template>
   <div>
      <div v-if="showBackButton">
         <a-button @click="()=>this.$router.back(-1)" style="position: sticky;">
            <a-icon type="left" />
         </a-button>
      </div>
      <div class="boxMain">
         <videoPlayBox ref="videoPlayBox"></videoPlayBox>
      </div>
      <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow">
         <pre>{{introduce}}</pre>
      </div>
      <div class="articleComment">
         <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
         <div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
         </div>
         <div
            v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <div class="introduce myShadow" v-if="introduce!=''">
               <pre style="white-space: pre-line;">{{introduce}}</pre>
            </div>
            <div class="articleComment ">
               <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
                  :foldReply="true" />
            </div>
         </div>
      </div>
   </div>

@@ -29,42 +40,80 @@
         videoPlayBox,
         comment,
      },
      created() {
         if (this.$route.query.id != undefined && this.$route.query.id != null && this.$route.query.id != "") {
            let item = {
               id: this.$route.query.id,
               isAllowedComment: this.isAllowedComment,
               introduce: this.introduce,
            }
            this.showVideo(item);
            this.showBackButton = true;
         }
      },
      deactivated() {
         if (this.showBackButton) {
            this.$emit('detailBackAction', {
               id: this.articleId,
               isAllowedComment: this.isAllowedComment,
               introduce: this.introduce,
            })
         }
      },
      watch: {
         // '$route'(to, from) {
         //    if ("mdDetail" === to.name) {
         //       this.articleId = this.$route.query.id;
         //       this.articleFileType = this.$route.query.articleFileType;
         //    }
         // },
         '$route'(to, from) {
            if ("videoDetail" === to.name) {
               let item = {
                  id: this.$route.query.id,
                  isAllowedComment: this.isAllowedComment,
                  introduce: this.introduce,
               }
               this.showVideo(item);
               this.showBackButton = true;
            }
         },
         articleId: function(newValue, oldValue) {
            if (newValue == undefined || newValue == null || newValue == "") {
               this.errorMsg = "日志id参数缺失";
            } else {
               this.$nextTick(function() {
                  this.$refs.myComment.updateCommentList(this.articleId);
               })
               if (this.newValue != this.oldValue) {
                  this.$nextTick(function() {
                     this.$refs.myComment.updateCommentList(this.articleId);
                  })
               }
            }
         },
      },
      data() {
         return {
            loadFinish: false,
            showBackButton: false,
            articleId: "",
            lastArticleId: "",
            isAllowedComment: false,
            introduce: "",
            secret: "",
            myLock: false,
            showFade: true,
            videoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               pic: "",
               url: "",
               type: "normal",
               title: "",
               introduce: "",
               id: ""
            }
         }
      },
      methods: {
         swichPlay(videoData) {
            this.introduce = videoData.introduce;
            this.articleId = videoData.id
            this.$refs.myComment.updateCommentList(videoData.id);
         },
         showVideo(item) {
            this.showBackButton = false;

            //防止重复加载
            this.lastArticleId = this.articleId;
            this.articleId = item.id
@@ -76,8 +125,13 @@
            this.isAllowedComment = item.isAllowedComment;
            this.introduce = item.introduce;
            this.loadData();

         },
         loadData() {

            if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
               this.$message.info("视频源已切换..", 6)
            }

            if (this.myLock) {
               this.$message.info("正在努力加载中..", 3)
@@ -86,8 +140,8 @@

            let _this = this;
            queryBlogArticleDetail({
               id: this.articleId,
               authWord: this.secret == "" ? null : md5(this.secret)
               id: _this.articleId,
               authWord: _this.secret == "" ? null : md5(_this.secret)
            }).then((res) => {
               this.myLock = !this.myLock;

@@ -106,27 +160,33 @@
                        placement: 'bottomRight'
                     });
                  }
                  this.myLock = !this.myLock;
                  return
               }

               this.isAllowedComment = res.data.isAllowedComment;
               this.videoData.url = res.data.articleFileURL;
               this.videoData.img = res.data.coverFileURL;
               this.videoData.title = res.data.title;
               this.videoData.id = res.data.id;


               if (res.data.articleFileURL != null &&
                  res.data.articleFileURL != "" &&
                  res.data.articleFileURL.endsWith("m3u8")) {
                  this.videoData.type = "customHls";
               if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
                  this.$notification.error({
                     message: '此视频还没有上传资源..',
                     placement: 'bottomRight'
                  });
                  this.videoData.url = "";
               } else {
                  this.videoData.type = "normal";
                  this.videoData.url = res.data.videoUrlList[0];
               }

               this.isAllowedComment = res.data.isAllowedComment;
               this.introduce = res.data.introduce;


               this.videoData.pic = res.data.coverFileURL;
               this.videoData.title = res.data.title;
               this.videoData.introduce = res.data.introduce;
               this.videoData.id = res.data.id;

               this.myLock = !this.myLock;
               if (this.lastArticleId != this.articleId) {
                  _this.$refs.videoPlayBox.changePlay(this.videoData)
                  let tempParam = JSON.parse(JSON.stringify(this.videoData))
                  _this.$refs.videoPlayBox.startPlay(tempParam)
               }
            })

@@ -134,25 +194,51 @@
      },
   }
</script>
<style scoped>
   a {
      color: black;
   }

   pre {
      font-family: 'HYTangMeiRen';
      src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
   }

<style lang="less">
   .boxMain {
      display: flex;
      justify-content: center;
      padding: 5px 20px;
      user-select: none;
      grid-template-columns: repeat(2, 1fr);
      display: grid;
      clear: both;
      grid-row-gap: 2rem;
      max-height: 100%;

      a {
         color: black;
      }

      .playBox {
         display: flex;
         justify-content: center;
         padding: 35px 0px;
      }

      .showButtonMargin {
         margin: 75px 0px 0px 0px;
      }

      .myShadow {

         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
            -8px -8px 18px #ffffff;
      }

      .introduce {
         padding: 20px 20px 5px;
         margin-bottom: 20px;
      }
   }

   .myShadow {

      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
         -8px -8px 18px #ffffff;

   @media screen and (max-width: 1023px) {
      .boxMain {
         grid-template-columns: repeat(1, 1fr);
         gap: 0rem;
      }

      .showButtonMargin {
         margin: 0px;
      }
   }
</style>