| commit | author | age | ||
| 41b36f | 1 | <template> |
| I | 2 | <div class="swichTag"> |
| 3 | ||
| 4 | <a-page-header title="归档时间线" style="padding: 0px;" @back="() => this.$router.go(-1)" /> | |
| 5 | ||
| 6 | <a-timeline pending="没有更多了..."> | |
| 7 | <a-icon slot="pendingDot" type="close-circle" style="font-size: 18px;" /> | |
| 8 | <div v-for="yearData in list"> | |
| 9 | <a-divider orientation="left"> | |
| 10 | {{yearData.year}}年 | |
| 11 | </a-divider> | |
| 12 | ||
| 63f511 | 13 | <a-timeline-item v-for="monthData in yearData.list" color="white"> |
| 41b36f | 14 | <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> |
| I | 15 | <h3>{{monthData.month}}</h3> |
| 16 | <div v-for="article in monthData.list"> | |
| 63f511 | 17 | <router-link :to="{path:'/mdDetail',query:{id:article.id}}" class="article-title"> |
| I | 18 | <span> |
| 19 | {{article.name}} | |
| 20 | </span> | |
| 21 | <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="article.authStatus==3" /> | |
| 22 | <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="article.authStatus==2" /> | |
| 23 | ||
| 24 | </router-link> | |
| 41b36f | 25 | </div> |
| I | 26 | </a-timeline-item> |
| 27 | </div> | |
| 28 | </a-timeline> | |
| 29 | </div> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script> | |
| 63f511 | 33 | import { |
| I | 34 | archiveGroup |
| 35 | } from '../../api/blogStatistics.js' | |
| 41b36f | 36 | |
| 63f511 | 37 | export default { |
| I | 38 | data() { |
| 39 | return { | |
| 40 | year: "", | |
| 41 | month: "", | |
| 42 | list: [] | |
| 43 | } | |
| 44 | }, | |
| 45 | created() { | |
| 46 | this.year = this.$route.query.year; | |
| 47 | this.month = this.$route.query.month; | |
| 48 | }, | |
| aab811 | 49 | watch: { |
| I | 50 | '$route'(to, from) { |
| 63f511 | 51 | if ("tagTime" === to.name) { |
| I | 52 | this.year = this.$route.query.year; |
| 53 | this.month = this.$route.query.month; | |
| 54 | this.$message.info('loading',0.3); | |
| 55 | archiveGroup({ | |
| 56 | year: this.year, | |
| 57 | month: this.month | |
| 58 | }).then((res) => { | |
| 59 | this.list = res.data; | |
| 60 | }) | |
| 41b36f | 61 | } |
| 63f511 | 62 | }, |
| aab811 | 63 | }, |
| 41b36f | 64 | } |
| I | 65 | </script> |
| 66 | ||
| 67 | ||
| 68 | <style lang="less"> | |
| 69 | .ant-timeline-item-content { | |
| 63f511 | 70 | a { |
| I | 71 | color: #555; |
| 72 | } | |
| 73 | ||
| 41b36f | 74 | span { |
| I | 75 | line-height: 30px; |
| 76 | } | |
| 77 | } | |
| 78 | </style> | |
