src/components/mini/box16-videoDetail.vue

@@ -1,11 +1,14 @@
<template>
   <div>
       <div class="boxMain">
          <videoPlayBox></videoPlayBox>
       </div>
       <div class="articleComment">
          <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/>
       </div>
      <div class="boxMain ">
         <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
      </div>
      <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
         <pre>{{introduce}}</pre>
      </div>
      <div class="articleComment fadeInRight">
         <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
      </div>
   </div>

</template>
@@ -16,6 +19,10 @@
   } from '../../api/blogArticleComment.js'
   import videoPlayBox from "../mini/box15-videoPlayBox.vue"
   import comment from "../mini/box12-comment.vue"

   import {
      queryBlogArticleDetail
   } from '../../api/blogArticle.js'

   export default {
      components: {
@@ -31,7 +38,6 @@
         // },
         articleId: function(newValue, oldValue) {
            if (newValue == undefined || newValue == null || newValue == "") {
               this.showMsg = true;
               this.errorMsg = "日志id参数缺失";
            } else {
               this.$nextTick(function() {
@@ -43,13 +49,99 @@
      data() {
         return {
            articleId: "",
            isAllowedComment: false
            lastArticleId: "",
            isAllowedComment: false,
            introduce: "",
            secret: "",
            myLock: false,
            videoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               url: "",
               type: "normal",
               title: "",
               introduce: "",
               id: ""
            }
         }
      },
      methods: {
         showVideo(param) {
            this.articleId = param.id
         swichPlay(videoData) {
            this.introduce = videoData.introduce;
            this.$refs.myComment.updateCommentList(videoData.id);
         },
         showVideo(item) {
            //防止重复加载
            this.lastArticleId = this.articleId;
            this.articleId = item.id

            if (this.articleId == this.lastArticleId) {
               return
            }

            this.isAllowedComment = item.isAllowedComment;
            this.introduce = item.introduce;
            this.loadData();
         },
         loadData() {

            if (this.$refs.videoPlayBox.isPlaying) {
               this.$message.info("上个视频正在播放中")
            }

            if (this.myLock) {
               this.$message.info("正在努力加载中..", 3)
               return
            }

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

               if (res.code != 200) {

                  if (res.code == 1019001) {
                     //日志需要授权
                     this.$message.error(res.message)
                  } else if (res.code == 1019002) {

                     this.$message.error(res.message)
                  } else {
                     this.$notification.error({
                        message: '好像哪里不对劲..',
                        description: res.message,
                        placement: 'bottomRight'
                     });
                  }
                  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.introduce = res.data.introduce;
               this.videoData.id = res.data.id;


               if (res.data.articleFileURL != null &&
                  res.data.articleFileURL != "" &&
                  res.data.articleFileURL.endsWith("m3u8")) {
                  this.videoData.type = "customHls";
               } else {
                  this.videoData.type = "normal";
               }

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

         }
      },
   }
</script>
@@ -58,9 +150,21 @@
      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");
   }

   .boxMain {
      user-select: none;
      display: flex;
      justify-content: center;
      padding: 20px;
      padding: 5px 20px;
   }

   .myShadow {

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