inleft
2022-02-21 4b854c29227ef08ea178a3bba527a40ca2f84674
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>