inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
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;
81c155 48             archiveGroup({
I 49                 year: this.year,
50                 month: this.month
51             }).then((res) => {
52                 this.list = res.data;
53             })
63f511 54         },
aab811 55         watch: {
I 56             '$route'(to, from) {
63f511 57                 if ("tagTime" === to.name) {
I 58                     this.year = this.$route.query.year;
59                     this.month = this.$route.query.month;
81c155 60                     this.$message.info('loading', 0.3);
63f511 61                     archiveGroup({
I 62                         year: this.year,
63                         month: this.month
64                     }).then((res) => {
65                         this.list = res.data;
66                     })
41b36f 67                 }
63f511 68             },
aab811 69         },
41b36f 70     }
I 71 </script>
72
73
74 <style lang="less">
b1336e 75     
41b36f 76     .ant-timeline-item-content {
b1336e 77      
63f511 78         a {
I 79             color: #555;
80         }
b1336e 81         
41b36f 82         span {
I 83             line-height: 30px;
84         }
85     }
86 </style>