| commit | author | age | ||
| 859ec7 | 1 | <template> |
| I | 2 | <div> |
| af029b | 3 | <div class="boxMain"> |
| I | 4 | <videoPlayBox ref="videoPlayBox"></videoPlayBox> |
| 5 | </div> | |
| 0dd41b | 6 | <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow"> |
| af029b | 7 | <pre>{{introduce}}</pre> |
| I | 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: "", | |
| 0dd41b | 60 | type: "normal", |
| I | 61 | title: "", |
| 62 | id: "" | |
| af029b | 63 | } |
| 859ec7 | 64 | } |
| I | 65 | }, |
| 66 | methods: { | |
| af029b | 67 | showVideo(item) { |
| 0dd41b | 68 | //防止重复加载 |
| af029b | 69 | this.lastArticleId = this.articleId; |
| I | 70 | this.articleId = item.id |
| 0dd41b | 71 | |
| I | 72 | if (this.articleId == this.lastArticleId) { |
| 73 | return | |
| 74 | } | |
| 75 | ||
| 76 | this.isAllowedComment = item.isAllowedComment; | |
| 77 | this.introduce = item.introduce; | |
| 78 | this.loadData(); | |
| 859ec7 | 79 | }, |
| af029b | 80 | loadData() { |
| I | 81 | |
| 82 | if (this.myLock) { | |
| 83 | this.$message.info("正在努力加载中..", 3) | |
| 84 | return | |
| 85 | } | |
| 86 | ||
| 87 | let _this = this; | |
| 88 | queryBlogArticleDetail({ | |
| 89 | id: this.articleId, | |
| 90 | authWord: this.secret == "" ? null : md5(this.secret) | |
| 91 | }).then((res) => { | |
| 0dd41b | 92 | this.myLock = !this.myLock; |
| af029b | 93 | |
| I | 94 | if (res.code != 200) { |
| 95 | ||
| 96 | if (res.code == 1019001) { | |
| 97 | //日志需要授权 | |
| 98 | this.$message.error(res.message) | |
| 99 | } else if (res.code == 1019002) { | |
| 100 | ||
| 101 | this.$message.error(res.message) | |
| 102 | } else { | |
| 103 | this.$notification.error({ | |
| 104 | message: '好像哪里不对劲..', | |
| 105 | description: res.message, | |
| 106 | placement: 'bottomRight' | |
| 107 | }); | |
| 108 | } | |
| 109 | return | |
| 110 | } | |
| 111 | ||
| 112 | this.isAllowedComment = res.data.isAllowedComment; | |
| 113 | this.videoData.url = res.data.articleFileURL; | |
| 114 | this.videoData.img = res.data.coverFileURL; | |
| 0dd41b | 115 | this.videoData.title = res.data.title; |
| I | 116 | this.videoData.id = res.data.id; |
| 117 | ||
| 118 | ||
| af029b | 119 | if (res.data.articleFileURL != null && |
| I | 120 | res.data.articleFileURL != "" && |
| 121 | res.data.articleFileURL.endsWith("m3u8")) { | |
| 122 | this.videoData.type = "customHls"; | |
| 123 | } else { | |
| 124 | this.videoData.type = "normal"; | |
| 125 | } | |
| 126 | ||
| 0dd41b | 127 | this.myLock = !this.myLock; |
| af029b | 128 | if (this.lastArticleId != this.articleId) { |
| I | 129 | _this.$refs.videoPlayBox.changePlay(this.videoData) |
| 130 | } | |
| 131 | }) | |
| 132 | ||
| 133 | } | |
| 859ec7 | 134 | }, |
| I | 135 | } |
| 136 | </script> | |
| 137 | <style scoped> | |
| 138 | a { | |
| 139 | color: black; | |
| 140 | } | |
| 141 | ||
| af029b | 142 | pre { |
| I | 143 | font-family: 'HYTangMeiRen'; |
| 144 | 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"); | |
| 145 | } | |
| 146 | ||
| 859ec7 | 147 | .boxMain { |
| I | 148 | display: flex; |
| 149 | justify-content: center; | |
| af029b | 150 | padding: 5px 20px; |
| I | 151 | } |
| 152 | ||
| 153 | .myShadow { | |
| 154 | ||
| 155 | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), | |
| 156 | -8px -8px 18px #ffffff; | |
| 859ec7 | 157 | } |
| I | 158 | </style> |
