inleft
2022-02-28 f60b31044a9a117244e7cd5d51f29b53d425a409
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>