| commit | author | age | ||
| 56a4b8 | 1 | <template> |
| b505f3 | 2 | <div class="article-meta "> |
| 7b98c8 | 3 | <div> |
| I | 4 | <a-button @click="back" style="position: absolute;"> |
| 5 | <a-icon type="left" /> | |
| 6 | </a-button> | |
| 7 | </div> | |
| 8 | ||
| 9 | ||
| 28d46d | 10 | <div class="mySecret" v-if="showMsg && !myLock"> |
| I | 11 | <h1>怎样才能让你看到我呢</h1> |
| 12 | <h1>只要你要,只要我有...</h1> | |
| 13 | <span class="myTip">{{errorMsg}}</span> | |
| 7b98c8 | 14 | </div> |
| 28d46d | 15 | |
| 7b98c8 | 16 | <div v-else> |
| I | 17 | <div class="mySecret" v-if="myLock"> |
| 18 | <h1>越不正经的人越深情..</h1> | |
| 19 | <h3>受庇护的文字..输入神秘代码以解除封印</h3> | |
| 28d46d | 20 | |
| I | 21 | <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter"> |
| 22 | <a-input-password @pressEnter="pressEnter"> | |
| 7b98c8 | 23 | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> |
| I | 24 | </a-input-password> |
| 25 | </a-auto-complete> | |
| 28d46d | 26 | <span class="myTip">{{errorMsg}}</span> |
| I | 27 | |
| 28 | ||
| 7b98c8 | 29 | </div> |
| I | 30 | |
| 31 | <div class="markdown-body article-detail" v-else> | |
| 32 | <vue-markdown :source="source"></vue-markdown> | |
| 33 | </div> | |
| 56a4b8 | 34 | </div> |
| 846bd0 | 35 | <div class="articleComment"> |
| 5dfef8 | 36 | <comment ref="myComment" :articleId="articleId"> </comment> |
| 846bd0 | 37 | </div> |
| 56a4b8 | 38 | </div> |
| 28d46d | 39 | |
| 56a4b8 | 40 | </template> |
| I | 41 | |
| 42 | <script> | |
| 43 | import VueMarkdown from 'vue-markdown' | |
| 28d46d | 44 | import md5 from 'js-md5'; |
| I | 45 | |
| 46 | import { | |
| 47 | queryBlogArticleDetail | |
| 48 | } from '../../api/blogArticle.js' | |
| 846bd0 | 49 | import comment from "../mini/box12-comment.vue" |
| 28d46d | 50 | |
| I | 51 | import axios from 'axios' |
| 56a4b8 | 52 | |
| I | 53 | export default { |
| 54 | components: { | |
| 846bd0 | 55 | VueMarkdown, |
| I | 56 | comment |
| 56a4b8 | 57 | }, |
| I | 58 | data() { |
| 59 | return { | |
| 28d46d | 60 | source: "", |
| 5dfef8 | 61 | articleId: "", |
| 28d46d | 62 | showMsg: false, |
| I | 63 | myLock: false, |
| 64 | errorMsg: '', | |
| 7b98c8 | 65 | secret: '', |
| I | 66 | search: { |
| 67 | placeholder: "", | |
| 68 | autoFocus: true, | |
| 69 | backfill: true, | |
| 70 | value: '', | |
| 71 | disabled: false | |
| 72 | }, | |
| 56a4b8 | 73 | } |
| I | 74 | }, |
| 7b98c8 | 75 | created() { |
| 5dfef8 | 76 | this.articleId = this.$route.query.id; |
| 7b98c8 | 77 | }, |
| I | 78 | watch: { |
| 79 | '$route'(to, from) { | |
| 28d46d | 80 | if ("mdDetail" === to.name) { |
| 5dfef8 | 81 | this.articleId = this.$route.query.id; |
| 7b98c8 | 82 | } |
| 28d46d | 83 | }, |
| 5dfef8 | 84 | articleId: function(newValue, oldValue) { |
| 28d46d | 85 | if (newValue == undefined || newValue == null || newValue == "") { |
| I | 86 | this.showMsg = true; |
| 87 | this.errorMsg = "日志id参数缺失"; | |
| 88 | } else { | |
| 89 | this.queryDetail(); | |
| 5dfef8 | 90 | this.$refs.myComment.updateCommentList(this.articleId); |
| 28d46d | 91 | } |
| 7b98c8 | 92 | } |
| 28d46d | 93 | |
| 7b98c8 | 94 | }, |
| 56a4b8 | 95 | methods: { |
| 28d46d | 96 | queryDetail() { |
| 4b854c | 97 | this.showMsg = true; |
| I | 98 | this.errorMsg = "加载中.."; |
| 28d46d | 99 | queryBlogArticleDetail({ |
| 5dfef8 | 100 | id: this.articleId, |
| 28d46d | 101 | authWord: this.secret == "" ? null : md5(this.secret) |
| I | 102 | }).then((res) => { |
| 103 | this.showMsg = true; | |
| 104 | this.myLock = false; | |
| 105 | this.errorMsg = res.message; | |
| 106 | this.source = ""; | |
| 107 | if (res.code != 200) { | |
| 108 | ||
| 109 | if (res.code == 1019001) { | |
| 110 | //日志需要授权 | |
| 111 | this.errorMsg = ""; | |
| 112 | this.myLock = true; | |
| 113 | } else if (res.code == 1019002) { | |
| 114 | //授权码错误 | |
| 115 | this.errorMsg = "口令错误..神秘力量依然阻止了你的前进"; | |
| 116 | this.myLock = true; | |
| 117 | } else { | |
| 118 | this.$notification.error({ | |
| 119 | message: '好像哪里不对劲..', | |
| 120 | description: res.message, | |
| 121 | placement: 'bottomRight' | |
| 122 | }); | |
| 123 | } | |
| 124 | ||
| 125 | return | |
| 126 | } | |
| 127 | ||
| 128 | this.$axios | |
| 129 | .get(res.data.articleFileURL) | |
| 130 | .then((res) => { | |
| 131 | this.source = res.data; | |
| 132 | }) | |
| c23efb | 133 | |
| I | 134 | //获取日志资源文件 |
| 135 | this.showMsg = false; | |
| 136 | this.errorMsg = ""; | |
| 28d46d | 137 | }) |
| I | 138 | }, |
| 139 | pressEnter() { | |
| 7b98c8 | 140 | if (this.secret == "") { |
| I | 141 | return |
| 142 | } | |
| 143 | this.search.disabled = true | |
| 28d46d | 144 | this.source = ""; |
| 7b98c8 | 145 | this.$message |
| 28d46d | 146 | .loading('卍解..', 1) |
| 7b98c8 | 147 | .then(() => { |
| 28d46d | 148 | this.queryDetail(); |
| 7b98c8 | 149 | this.search.disabled = false; |
| I | 150 | }) |
| 151 | ||
| 152 | }, | |
| 56a4b8 | 153 | back: function() { |
| I | 154 | this.$router.go(-1); |
| 155 | } | |
| 156 | }, | |
| c23efb | 157 | |
| 56a4b8 | 158 | } |
| I | 159 | </script> |
| 160 | ||
| b505f3 | 161 | <style lang="less"> |
| I | 162 | @import '../../assets/md.less'; |
| 56a4b8 | 163 | |
| 7b98c8 | 164 | .mySecret { |
| I | 165 | height: 715px; |
| 166 | display: flex; | |
| 167 | flex-direction: column; | |
| 168 | justify-content: center; | |
| 169 | padding-left: auto; | |
| 170 | align-items: center; | |
| 171 | } | |
| 172 | ||
| 846bd0 | 173 | .articleComment { |
| I | 174 | margin-top: 20px; |
| 175 | } | |
| 176 | ||
| 177 | .markdown-body, | |
| 178 | .articleComment { | |
| 81c155 | 179 | min-height: 750px; |
| I | 180 | padding: 35px 20px 10px 20px; |
| b505f3 | 181 | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), |
| I | 182 | -8px -8px 18px #ffffff; |
| 183 | } | |
| 56a4b8 | 184 | |
| I | 185 | /* #test{ |
| 186 | padding-left: 25%; | |
| 187 | padding-right: 25%; | |
| 188 | } */ | |
| 189 | /* h3 { | |
| 190 | margin: 40px 0 0; | |
| 191 | } | |
| 192 | ||
| 193 | ul { | |
| 194 | list-style-type: none; | |
| 195 | padding: 0; | |
| 196 | } | |
| 197 | ||
| 198 | li { | |
| 199 | display: inline-block; | |
| 200 | margin: 0 10px; | |
| 201 | } | |
| 202 | ||
| 203 | a { | |
| 204 | color: #42b983; | |
| 205 | } | |
| 206 | ||
| 207 | */ | |
| 208 | ||
| 209 | ||
| 210 | /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */ | |
| 211 | /* .markdown-body { | |
| 212 | padding: 20px; | |
| 213 | min-width: 200px; | |
| 214 | max-width: 900px; | |
| 215 | font-size: 12px; | |
| 216 | ||
| 217 | h2 { | |
| 218 | font-size: 18px; | |
| 219 | margin: 1em 0 15px; | |
| 220 | padding-top: 0.8em; | |
| 221 | padding-bottom: 0.8em; | |
| 222 | } | |
| 223 | ||
| 224 | h3 { | |
| 225 | font-size: 14px; | |
| 226 | margin: 22px 0 16px; | |
| 227 | } | |
| 228 | ||
| 229 | h4 { | |
| 230 | font-size: 13px; | |
| 231 | margin: 20px 0 16px; | |
| 232 | } | |
| 233 | ||
| 234 | h5 { | |
| 235 | font-size: 12px; | |
| 236 | margin: 16px 0 16px; | |
| 237 | font-weight: 700; | |
| 238 | } | |
| 239 | ||
| 240 | p { | |
| 241 | font-size: 12px; | |
| 242 | line-height: 24px; | |
| 243 | color: #666666; | |
| 244 | margin-top: 0px; | |
| 245 | margin: 8px 0; | |
| 246 | margin: 14px 0 14px; | |
| 247 | } | |
| 248 | ||
| 249 | pre { | |
| 250 | background-color: #eee; | |
| 251 | margin-bottom: 8px; | |
| 252 | margin-top: 8px; | |
| 253 | margin: 12px 0 12px; | |
| 254 | } | |
| 255 | ||
| 256 | blockquote { | |
| 257 | margin-bottom: 8px; | |
| 258 | margin-top: 8px; | |
| 259 | margin: 14px 0 14px; | |
| 260 | background-color: #eee; | |
| 261 | padding: 16px 16px; | |
| 262 | } | |
| 263 | ||
| 264 | tr { | |
| 265 | background-color: #f5f5f5; | |
| 266 | } | |
| 267 | ||
| 268 | code { | |
| 269 | background-color: #eee; | |
| 270 | } | |
| 271 | ||
| 272 | ul, | |
| 273 | ol, | |
| 274 | li { | |
| 275 | list-style: unset; | |
| 276 | font-size: 12px; | |
| 277 | line-height: 20px; | |
| 278 | color: #666666; | |
| 279 | margin-top: 0px; | |
| 280 | margin: 8px 0; | |
| 281 | } | |
| 282 | ||
| 283 | blockquote { | |
| 284 | border-color: #48b6e2; | |
| 285 | } | |
| 286 | ||
| 287 | table { | |
| 288 | display: table; | |
| 289 | width: 100%; | |
| 290 | max-width: 100%; | |
| 291 | margin-bottom: 20px; | |
| 292 | } | |
| 293 | } */ | |
| 294 | </style> | |
