inleft
2022-08-14 a3ab3afe580daa80e9689f6e513e75a385f75bac
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>
a3ab3a 12             <div 
I 13                 v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
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 {
a3ab3a 89                 showBackButton: false,
859ec7 90                 articleId: "",
af029b 91                 lastArticleId: "",
I 92                 isAllowedComment: false,
93                 introduce: "",
94                 secret: "",
95                 myLock: false,
1cf6d9 96                 showFade: true,
af029b 97                 videoData: {
I 98                     img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
99                     url: "",
0dd41b 100                     type: "normal",
I 101                     title: "",
e4f086 102                     introduce: "",
0dd41b 103                     id: ""
af029b 104                 }
859ec7 105             }
I 106         },
107         methods: {
e4f086 108             swichPlay(videoData) {
I 109                 this.introduce = videoData.introduce;
1cf6d9 110                 this.articleId = videoData.id
e4f086 111                 this.$refs.myComment.updateCommentList(videoData.id);
I 112             },
af029b 113             showVideo(item) {
a3ab3a 114                 this.showBackButton = false;
I 115
0dd41b 116                 //防止重复加载
af029b 117                 this.lastArticleId = this.articleId;
I 118                 this.articleId = item.id
0dd41b 119
I 120                 if (this.articleId == this.lastArticleId) {
121                     return
122                 }
123
124                 this.isAllowedComment = item.isAllowedComment;
125                 this.introduce = item.introduce;
126                 this.loadData();
a3ab3a 127
859ec7 128             },
af029b 129             loadData() {
e4f086 130
a3ab3a 131                 if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
1cf6d9 132                     this.$message.info("视频源已切换..", 6)
e4f086 133                 }
af029b 134
I 135                 if (this.myLock) {
136                     this.$message.info("正在努力加载中..", 3)
137                     return
138                 }
139
140                 let _this = this;
141                 queryBlogArticleDetail({
a3ab3a 142                     id: _this.articleId,
I 143                     authWord: _this.secret == "" ? null : md5(_this.secret)
af029b 144                 }).then((res) => {
0dd41b 145                     this.myLock = !this.myLock;
af029b 146
I 147                     if (res.code != 200) {
148
149                         if (res.code == 1019001) {
150                             //日志需要授权
151                             this.$message.error(res.message)
152                         } else if (res.code == 1019002) {
153
154                             this.$message.error(res.message)
155                         } else {
156                             this.$notification.error({
157                                 message: '好像哪里不对劲..',
158                                 description: res.message,
159                                 placement: 'bottomRight'
160                             });
161                         }
a3ab3a 162                         this.myLock = !this.myLock;
af029b 163                         return
I 164                     }
165
166                     this.isAllowedComment = res.data.isAllowedComment;
a3ab3a 167                     this.introduce = res.data.introduce;
I 168
af029b 169                     this.videoData.url = res.data.articleFileURL;
I 170                     this.videoData.img = res.data.coverFileURL;
0dd41b 171                     this.videoData.title = res.data.title;
e4f086 172                     this.videoData.introduce = res.data.introduce;
0dd41b 173                     this.videoData.id = res.data.id;
I 174
175
af029b 176                     if (res.data.articleFileURL != null &&
I 177                         res.data.articleFileURL != "" &&
178                         res.data.articleFileURL.endsWith("m3u8")) {
179                         this.videoData.type = "customHls";
180                     } else {
181                         this.videoData.type = "normal";
182                     }
183
0dd41b 184                     this.myLock = !this.myLock;
af029b 185                     if (this.lastArticleId != this.articleId) {
e4f086 186                         let tempParam = JSON.parse(JSON.stringify(this.videoData))
I 187                         _this.$refs.videoPlayBox.startPlay(tempParam)
af029b 188                     }
I 189                 })
190
191             }
859ec7 192         },
I 193     }
194 </script>
195 <style scoped>
196     a {
197         color: black;
198     }
199
af029b 200     pre {
I 201         font-family: 'HYTangMeiRen';
202         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");
203     }
204
859ec7 205     .boxMain {
e4f086 206         user-select: none;
1cf6d9 207         grid-template-columns: repeat(2, 1fr);
I 208         display: grid;
209         clear: both;
a3ab3a 210         grid-row-gap: 2rem;
1cf6d9 211         max-height: 100%;
I 212     }
213
214     .playBox {
859ec7 215         display: flex;
I 216         justify-content: center;
a3ab3a 217         padding: 35px 0px;
I 218     }
219
220     .showButtonMargin {
221         margin: 75px 0px 0px 0px;
af029b 222     }
I 223
224     .myShadow {
225
226         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
227             -8px -8px 18px #ffffff;
859ec7 228     }
1cf6d9 229
I 230     .introduce {
231         padding: 20px 20px 5px;
232         margin-bottom: 20px;
233     }
234
235     @media screen and (max-width: 1023px) {
236         .boxMain {
237             grid-template-columns: repeat(1, 1fr);
238             gap: 0rem;
239         }
240
a3ab3a 241         .showButtonMargin {
I 242             margin: 0px;
243         }
1cf6d9 244     }
859ec7 245 </style>