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