inleft
2022-08-11 af029bdfb645bd2b75fbab687c1a5f45b428d801
commit | author | age
859ec7 1 <template>
I 2     <div>
af029b 3         <div class="boxMain">
I 4             <videoPlayBox ref="videoPlayBox"></videoPlayBox>
5         </div>
6         <div style="padding: 20px 20px 5px;" class="myShadow">
7             <pre>{{introduce}}</pre>
8         </div>
9         <div class="articleComment">
10             <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
11         </div>
859ec7 12     </div>
I 13
14 </template>
15
16 <script>
17     import {
18         history
19     } from '../../api/blogArticleComment.js'
20     import videoPlayBox from "../mini/box15-videoPlayBox.vue"
21     import comment from "../mini/box12-comment.vue"
af029b 22
I 23     import {
24         queryBlogArticleDetail
25     } from '../../api/blogArticle.js'
859ec7 26
I 27     export default {
28         components: {
29             videoPlayBox,
30             comment,
31         },
32         watch: {
33             // '$route'(to, from) {
34             //     if ("mdDetail" === to.name) {
35             //         this.articleId = this.$route.query.id;
36             //         this.articleFileType = this.$route.query.articleFileType;
37             //     }
38             // },
39             articleId: function(newValue, oldValue) {
40                 if (newValue == undefined || newValue == null || newValue == "") {
41                     this.errorMsg = "日志id参数缺失";
42                 } else {
43                     this.$nextTick(function() {
44                         this.$refs.myComment.updateCommentList(this.articleId);
45                     })
46                 }
47             },
48         },
49         data() {
50             return {
51                 articleId: "",
af029b 52                 lastArticleId: "",
I 53                 isAllowedComment: false,
54                 introduce: "",
55                 secret: "",
56                 myLock: false,
57                 videoData: {
58                     img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
59                     url: "",
60                     type: "normal"
61                 }
859ec7 62             }
I 63         },
64         methods: {
af029b 65             showVideo(item) {
I 66                 this.lastArticleId = this.articleId;
67                 this.articleId = item.id
68                 this.isAllowedComment = item.isAllowedComment
69                 this.introduce = item.introduce
70                 this.loadData()
859ec7 71             },
af029b 72             loadData() {
I 73
74                 if (this.myLock) {
75                     this.$message.info("正在努力加载中..", 3)
76                     return
77                 }
78
79                 let _this = this;
80                 queryBlogArticleDetail({
81                     id: this.articleId,
82                     authWord: this.secret == "" ? null : md5(this.secret)
83                 }).then((res) => {
84                     this.myLock = true;
85
86                     if (res.code != 200) {
87
88                         if (res.code == 1019001) {
89                             //日志需要授权
90                             this.$message.error(res.message)
91                         } else if (res.code == 1019002) {
92
93                             this.$message.error(res.message)
94                         } else {
95                             this.$notification.error({
96                                 message: '好像哪里不对劲..',
97                                 description: res.message,
98                                 placement: 'bottomRight'
99                             });
100                         }
101                         return
102                     }
103
104                     this.isAllowedComment = res.data.isAllowedComment;
105                     this.videoData.url = res.data.articleFileURL;
106                     this.videoData.img = res.data.coverFileURL;
107                     if (res.data.articleFileURL != null &&
108                         res.data.articleFileURL != "" &&
109                         res.data.articleFileURL.endsWith("m3u8")) {
110                         this.videoData.type = "customHls";
111                     } else {
112                         this.videoData.type = "normal";
113                     }
114
115                     this.myLock = false;
116                     if (this.lastArticleId != this.articleId) {
117                         _this.$refs.videoPlayBox.changePlay(this.videoData)
118                     }
119                 })
120
121             }
859ec7 122         },
I 123     }
124 </script>
125 <style scoped>
126     a {
127         color: black;
128     }
129
af029b 130     pre {
I 131         font-family: 'HYTangMeiRen';
132         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");
133     }
134
859ec7 135     .boxMain {
I 136         display: flex;
137         justify-content: center;
af029b 138         padding: 5px 20px;
I 139     }
140
141     .myShadow {
142
143         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
144             -8px -8px 18px #ffffff;
859ec7 145     }
I 146 </style>