| | |
| | | <template> |
| | | <div> |
| | | <div class="boxMain"> |
| | | <videoPlayBox ref="videoPlayBox"></videoPlayBox> |
| | | <div class="boxMain"> |
| | | <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }"> |
| | | <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox> |
| | | </div> |
| | | <div style="padding: 20px 20px 5px;" class="myShadow"> |
| | | <pre>{{introduce}}</pre> |
| | | </div> |
| | | <div class="articleComment"> |
| | | <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" /> |
| | | <div v-bind:class="{ 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> |
| | | |
| | |
| | | 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); |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | |
| | | introduce: "", |
| | | secret: "", |
| | | myLock: false, |
| | | showFade: true, |
| | | videoData: { |
| | | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | url: "", |
| | | type: "normal" |
| | | 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.lastArticleId = this.articleId; |
| | | this.articleId = item.id |
| | | this.isAllowedComment = item.isAllowedComment |
| | | this.introduce = item.introduce |
| | | this.loadData() |
| | | |
| | | 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("视频源已切换..", 6) |
| | | } |
| | | |
| | | if (this.myLock) { |
| | | this.$message.info("正在努力加载中..", 3) |
| | |
| | | id: this.articleId, |
| | | authWord: this.secret == "" ? null : md5(this.secret) |
| | | }).then((res) => { |
| | | this.myLock = true; |
| | | this.myLock = !this.myLock; |
| | | |
| | | if (res.code != 200) { |
| | | |
| | |
| | | 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 = "normal"; |
| | | } |
| | | |
| | | this.myLock = false; |
| | | 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) |
| | | } |
| | | }) |
| | | |
| | |
| | | } |
| | | |
| | | .boxMain { |
| | | user-select: none; |
| | | grid-template-columns: repeat(2, 1fr); |
| | | display: grid; |
| | | clear: both; |
| | | gap: 2rem; |
| | | max-height: 100%; |
| | | } |
| | | |
| | | .playBox { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding: 5px 20px; |
| | | padding: 20px 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; |
| | | } |
| | | |
| | | @media screen and (max-width: 1023px) { |
| | | .boxMain { |
| | | grid-template-columns: repeat(1, 1fr); |
| | | gap: 0rem; |
| | | } |
| | | |
| | | } |
| | | |
| | | </style> |