| 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> |
| 28d46d | 35 | |
| I | 36 | |
| 56a4b8 | 37 | </div> |
| 28d46d | 38 | |
| 56a4b8 | 39 | </template> |
| I | 40 | |
| 41 | <script> | |
| 28d46d | 42 | // import esPath from '../../assets/es.md' |
| 56a4b8 | 43 | import VueMarkdown from 'vue-markdown' |
| 28d46d | 44 | import md5 from 'js-md5'; |
| I | 45 | |
| 46 | import { | |
| 47 | queryBlogArticleDetail | |
| 48 | } from '../../api/blogArticle.js' | |
| 49 | ||
| 50 | ||
| 51 | import axios from 'axios' | |
| 56a4b8 | 52 | |
| I | 53 | export default { |
| 54 | components: { | |
| 55 | VueMarkdown | |
| 56 | }, | |
| 57 | data() { | |
| 58 | return { | |
| 28d46d | 59 | source: "", |
| I | 60 | acticleId: "", |
| 61 | showMsg: false, | |
| 62 | myLock: false, | |
| 63 | errorMsg: '', | |
| 7b98c8 | 64 | secret: '', |
| I | 65 | search: { |
| 66 | placeholder: "", | |
| 67 | autoFocus: true, | |
| 68 | backfill: true, | |
| 69 | value: '', | |
| 70 | disabled: false | |
| 71 | }, | |
| 56a4b8 | 72 | } |
| I | 73 | }, |
| 7b98c8 | 74 | created() { |
| 28d46d | 75 | this.acticleId = this.$route.query.id; |
| 7b98c8 | 76 | }, |
| I | 77 | watch: { |
| 78 | '$route'(to, from) { | |
| 28d46d | 79 | if ("mdDetail" === to.name) { |
| I | 80 | this.acticleId = this.$route.query.id; |
| 7b98c8 | 81 | } |
| 28d46d | 82 | }, |
| I | 83 | acticleId: function(newValue, oldValue) { |
| 84 | if (newValue == undefined || newValue == null || newValue == "") { | |
| 85 | this.showMsg = true; | |
| 86 | this.errorMsg = "日志id参数缺失"; | |
| 87 | } else { | |
| 88 | this.queryDetail(); | |
| 89 | } | |
| 7b98c8 | 90 | } |
| 28d46d | 91 | |
| 7b98c8 | 92 | }, |
| 56a4b8 | 93 | methods: { |
| 28d46d | 94 | queryDetail() { |
| I | 95 | queryBlogArticleDetail({ |
| 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 | ||
| 125 | //获取日志资源文件 | |
| 126 | this.showMsg = false; | |
| 127 | this.errorMsg = ""; | |
| 128 | this.$axios | |
| 129 | .get(res.data.articleFileURL) | |
| 130 | .then((res) => { | |
| 131 | this.source = res.data; | |
| 132 | }) | |
| 133 | }) | |
| 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 | }, | |
| 28d46d | 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 { |
| I | 170 | padding: 10px 20px 10px 20px; |
| 171 | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), | |
| 172 | -8px -8px 18px #ffffff; | |
| 173 | } | |
| 56a4b8 | 174 | |
| I | 175 | /* #test{ |
| 176 | padding-left: 25%; | |
| 177 | padding-right: 25%; | |
| 178 | } */ | |
| 179 | /* h3 { | |
| 180 | margin: 40px 0 0; | |
| 181 | } | |
| 182 | ||
| 183 | ul { | |
| 184 | list-style-type: none; | |
| 185 | padding: 0; | |
| 186 | } | |
| 187 | ||
| 188 | li { | |
| 189 | display: inline-block; | |
| 190 | margin: 0 10px; | |
| 191 | } | |
| 192 | ||
| 193 | a { | |
| 194 | color: #42b983; | |
| 195 | } | |
| 196 | ||
| 197 | */ | |
| 198 | ||
| 199 | ||
| 200 | /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */ | |
| 201 | /* .markdown-body { | |
| 202 | padding: 20px; | |
| 203 | min-width: 200px; | |
| 204 | max-width: 900px; | |
| 205 | font-size: 12px; | |
| 206 | ||
| 207 | h2 { | |
| 208 | font-size: 18px; | |
| 209 | margin: 1em 0 15px; | |
| 210 | padding-top: 0.8em; | |
| 211 | padding-bottom: 0.8em; | |
| 212 | } | |
| 213 | ||
| 214 | h3 { | |
| 215 | font-size: 14px; | |
| 216 | margin: 22px 0 16px; | |
| 217 | } | |
| 218 | ||
| 219 | h4 { | |
| 220 | font-size: 13px; | |
| 221 | margin: 20px 0 16px; | |
| 222 | } | |
| 223 | ||
| 224 | h5 { | |
| 225 | font-size: 12px; | |
| 226 | margin: 16px 0 16px; | |
| 227 | font-weight: 700; | |
| 228 | } | |
| 229 | ||
| 230 | p { | |
| 231 | font-size: 12px; | |
| 232 | line-height: 24px; | |
| 233 | color: #666666; | |
| 234 | margin-top: 0px; | |
| 235 | margin: 8px 0; | |
| 236 | margin: 14px 0 14px; | |
| 237 | } | |
| 238 | ||
| 239 | pre { | |
| 240 | background-color: #eee; | |
| 241 | margin-bottom: 8px; | |
| 242 | margin-top: 8px; | |
| 243 | margin: 12px 0 12px; | |
| 244 | } | |
| 245 | ||
| 246 | blockquote { | |
| 247 | margin-bottom: 8px; | |
| 248 | margin-top: 8px; | |
| 249 | margin: 14px 0 14px; | |
| 250 | background-color: #eee; | |
| 251 | padding: 16px 16px; | |
| 252 | } | |
| 253 | ||
| 254 | tr { | |
| 255 | background-color: #f5f5f5; | |
| 256 | } | |
| 257 | ||
| 258 | code { | |
| 259 | background-color: #eee; | |
| 260 | } | |
| 261 | ||
| 262 | ul, | |
| 263 | ol, | |
| 264 | li { | |
| 265 | list-style: unset; | |
| 266 | font-size: 12px; | |
| 267 | line-height: 20px; | |
| 268 | color: #666666; | |
| 269 | margin-top: 0px; | |
| 270 | margin: 8px 0; | |
| 271 | } | |
| 272 | ||
| 273 | blockquote { | |
| 274 | border-color: #48b6e2; | |
| 275 | } | |
| 276 | ||
| 277 | table { | |
| 278 | display: table; | |
| 279 | width: 100%; | |
| 280 | max-width: 100%; | |
| 281 | margin-bottom: 20px; | |
| 282 | } | |
| 283 | } */ | |
| 284 | </style> | |
