| | |
| | | <template> |
| | | <div> |
| | | <div class="boxMain"> |
| | | <videoPlayBox ref="videoPlayBox"></videoPlayBox> |
| | | <div class="boxMain "> |
| | | <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox> |
| | | </div> |
| | | <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow"> |
| | | <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft"> |
| | | <pre>{{introduce}}</pre> |
| | | </div> |
| | | <div class="articleComment"> |
| | | <div class="articleComment fadeInRight"> |
| | | <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" /> |
| | | </div> |
| | | </div> |
| | |
| | | url: "", |
| | | type: "normal", |
| | | title: "", |
| | | introduce: "", |
| | | id: "" |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | swichPlay(videoData) { |
| | | this.introduce = videoData.introduce; |
| | | this.$refs.myComment.updateCommentList(videoData.id); |
| | | }, |
| | | showVideo(item) { |
| | | //防止重复加载 |
| | | this.lastArticleId = this.articleId; |
| | |
| | | this.loadData(); |
| | | }, |
| | | loadData() { |
| | | |
| | | if (this.$refs.videoPlayBox.isPlaying) { |
| | | this.$message.info("上个视频正在播放中") |
| | | } |
| | | |
| | | if (this.myLock) { |
| | | this.$message.info("正在努力加载中..", 3) |
| | |
| | | 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; |
| | | |
| | | |
| | |
| | | |
| | | 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; |
| | | display: flex; |
| | | justify-content: center; |
| | | padding: 5px 20px; |