inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
859ec7 1 <template>
a3ab3a 2     <div>
I 3         <div v-if="showBackButton">
4             <a-button @click="()=>this.$router.back(-1)" style="position: sticky;">
5                 <a-icon type="left" />
6             </a-button>
af029b 7         </div>
a3ab3a 8         <div class="boxMain">
I 9             <div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
10                 <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
1cf6d9 11             </div>
054cde 12             <div
a3ab3a 13                 v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
I 14                 <div class="introduce myShadow" v-if="introduce!=''">
15                     <pre style="white-space: pre-line;">{{introduce}}</pre>
16                 </div>
17                 <div class="articleComment ">
18                     <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
19                         :foldReply="true" />
20                 </div>
1cf6d9 21             </div>
af029b 22         </div>
859ec7 23     </div>
I 24
25 </template>
26
27 <script>
28     import {
29         history
30     } from '../../api/blogArticleComment.js'
31     import videoPlayBox from "../mini/box15-videoPlayBox.vue"
32     import comment from "../mini/box12-comment.vue"
af029b 33
I 34     import {
35         queryBlogArticleDetail
36     } from '../../api/blogArticle.js'
859ec7 37
I 38     export default {
39         components: {
40             videoPlayBox,
41             comment,
42         },
a3ab3a 43         created() {
I 44             if (this.$route.query.id != undefined && this.$route.query.id != null && this.$route.query.id != "") {
45                 let item = {
46                     id: this.$route.query.id,
47                     isAllowedComment: this.isAllowedComment,
48                     introduce: this.introduce,
49                 }
50                 this.showVideo(item);
51                 this.showBackButton = true;
52             }
53         },
54         deactivated() {
55             if (this.showBackButton) {
56                 this.$emit('detailBackAction', {
57                     id: this.articleId,
58                     isAllowedComment: this.isAllowedComment,
59                     introduce: this.introduce,
60                 })
61             }
62         },
859ec7 63         watch: {
a3ab3a 64             '$route'(to, from) {
I 65                 if ("videoDetail" === to.name) {
66                     let item = {
67                         id: this.$route.query.id,
68                         isAllowedComment: this.isAllowedComment,
69                         introduce: this.introduce,
70                     }
71                     this.showVideo(item);
72                     this.showBackButton = true;
73                 }
74             },
859ec7 75             articleId: function(newValue, oldValue) {
I 76                 if (newValue == undefined || newValue == null || newValue == "") {
77                     this.errorMsg = "日志id参数缺失";
78                 } else {
1cf6d9 79                     if (this.newValue != this.oldValue) {
I 80                         this.$nextTick(function() {
81                             this.$refs.myComment.updateCommentList(this.articleId);
82                         })
83                     }
859ec7 84                 }
I 85             },
86         },
87         data() {
88             return {
80476f 89                 loadFinish: false,
a3ab3a 90                 showBackButton: false,
859ec7 91                 articleId: "",
af029b 92                 lastArticleId: "",
I 93                 isAllowedComment: false,
94                 introduce: "",
95                 secret: "",
96                 myLock: false,
1cf6d9 97                 showFade: true,
af029b 98                 videoData: {
1b6f1e 99                     pic: "",
af029b 100                     url: "",
0dd41b 101                     type: "normal",
I 102                     title: "",
e4f086 103                     introduce: "",
0dd41b 104                     id: ""
af029b 105                 }
859ec7 106             }
I 107         },
108         methods: {
e4f086 109             swichPlay(videoData) {
I 110                 this.introduce = videoData.introduce;
1cf6d9 111                 this.articleId = videoData.id
e4f086 112                 this.$refs.myComment.updateCommentList(videoData.id);
I 113             },
af029b 114             showVideo(item) {
a3ab3a 115                 this.showBackButton = false;
I 116
0dd41b 117                 //防止重复加载
af029b 118                 this.lastArticleId = this.articleId;
I 119                 this.articleId = item.id
0dd41b 120
I 121                 if (this.articleId == this.lastArticleId) {
122                     return
123                 }
124
125                 this.isAllowedComment = item.isAllowedComment;
126                 this.introduce = item.introduce;
127                 this.loadData();
a3ab3a 128
859ec7 129             },
af029b 130             loadData() {
e4f086 131
a3ab3a 132                 if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
1cf6d9 133                     this.$message.info("视频源已切换..", 6)
e4f086 134                 }
af029b 135
I 136                 if (this.myLock) {
137                     this.$message.info("正在努力加载中..", 3)
138                     return
139                 }
140
141                 let _this = this;
142                 queryBlogArticleDetail({
a3ab3a 143                     id: _this.articleId,
I 144                     authWord: _this.secret == "" ? null : md5(_this.secret)
af029b 145                 }).then((res) => {
0dd41b 146                     this.myLock = !this.myLock;
af029b 147
I 148                     if (res.code != 200) {
149
150                         if (res.code == 1019001) {
151                             //日志需要授权
152                             this.$message.error(res.message)
153                         } else if (res.code == 1019002) {
154
155                             this.$message.error(res.message)
156                         } else {
157                             this.$notification.error({
158                                 message: '好像哪里不对劲..',
159                                 description: res.message,
160                                 placement: 'bottomRight'
161                             });
162                         }
a3ab3a 163                         this.myLock = !this.myLock;
af029b 164                         return
I 165                     }
c6793e 166
80476f 167                     if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
I 168                         this.$notification.error({
a23166 169                             message: '此视频还没有上传资源..',
80476f 170                             placement: 'bottomRight'
I 171                         });
a23166 172                         this.videoData.url = "";
I 173                     } else {
174                         this.videoData.url = res.data.videoUrlList[0];
80476f 175                     }
af029b 176
I 177                     this.isAllowedComment = res.data.isAllowedComment;
a3ab3a 178                     this.introduce = res.data.introduce;
I 179
80476f 180
a23166 181                     this.videoData.pic = res.data.coverFileURL;
0dd41b 182                     this.videoData.title = res.data.title;
e4f086 183                     this.videoData.introduce = res.data.introduce;
0dd41b 184                     this.videoData.id = res.data.id;
af029b 185
0dd41b 186                     this.myLock = !this.myLock;
af029b 187                     if (this.lastArticleId != this.articleId) {
e4f086 188                         let tempParam = JSON.parse(JSON.stringify(this.videoData))
I 189                         _this.$refs.videoPlayBox.startPlay(tempParam)
af029b 190                     }
I 191                 })
192
193             }
859ec7 194         },
I 195     }
196 </script>
054cde 197 <style lang="less">
859ec7 198     .boxMain {
e4f086 199         user-select: none;
1cf6d9 200         grid-template-columns: repeat(2, 1fr);
I 201         display: grid;
202         clear: both;
a3ab3a 203         grid-row-gap: 2rem;
1cf6d9 204         max-height: 100%;
054cde 205
I 206         a {
207             color: black;
208         }
209
210         .playBox {
211             display: flex;
212             justify-content: center;
213             padding: 35px 0px;
214         }
215
216         .showButtonMargin {
217             margin: 75px 0px 0px 0px;
218         }
219
220         .myShadow {
221
222             box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
223                 -8px -8px 18px #ffffff;
224         }
225
226         .introduce {
227             padding: 20px 20px 5px;
228             margin-bottom: 20px;
229         }
1cf6d9 230     }
I 231
a3ab3a 232
1cf6d9 233
I 234     @media screen and (max-width: 1023px) {
235         .boxMain {
236             grid-template-columns: repeat(1, 1fr);
237             gap: 0rem;
238         }
239
a3ab3a 240         .showButtonMargin {
I 241             margin: 0px;
242         }
1cf6d9 243     }
859ec7 244 </style>