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