Skip to content

Commit 684a19b

Browse files
committed
feat: Add /account/projects
Add /account/Article
1 parent 9c77f04 commit 684a19b

File tree

2 files changed

+122
-11
lines changed

2 files changed

+122
-11
lines changed

src/views/account/center/page/Article.vue

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,71 @@
11
<template>
2-
<a-list>
3-
<a-list-item>
4-
2+
<a-list
3+
size="large"
4+
rowKey="id"
5+
:loading="loading"
6+
itemLayout="vertical"
7+
:dataSource="data"
8+
>
9+
<a-list-item :key="item.id" slot="renderItem" slot-scope="item">
10+
<template slot="actions">
11+
<icon-text type="star-o" :text="item.star" />
12+
<icon-text type="like-o" :text="item.like" />
13+
<icon-text type="message" :text="item.message" />
14+
</template>
15+
<a-list-item-meta>
16+
<a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
17+
<template slot="description">
18+
<span>
19+
<a-tag>Ant Design</a-tag>
20+
<a-tag>设计语言</a-tag>
21+
<a-tag>蚂蚁金服</a-tag>
22+
</span>
23+
</template>
24+
</a-list-item-meta>
25+
<article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
526
</a-list-item>
27+
<div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
28+
<a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
29+
</div>
630
</a-list>
731
</template>
832

933
<script>
10-
import AList from 'ant-design-vue/es/list'
11-
import AListItem from 'ant-design-vue/es/list/Item'
34+
import { ArticleListContent } from '@/components'
35+
import IconText from '@/views/list/search/components/IconText'
1236
1337
export default {
1438
name: 'Article',
1539
components: {
16-
AList,
17-
AListItem
40+
IconText,
41+
ArticleListContent
42+
},
43+
data () {
44+
return {
45+
loading: true,
46+
loadingMore: false,
47+
data: []
48+
}
49+
},
50+
mounted () {
51+
this.getList()
52+
},
53+
methods: {
54+
getList () {
55+
this.$http.get('/list/article').then(res => {
56+
console.log('res', res)
57+
this.data = res.result
58+
this.loading = false
59+
})
60+
},
61+
loadMore () {
62+
this.loadingMore = true
63+
this.$http.get('/list/article').then(res => {
64+
this.data = this.data.concat(res.result)
65+
}).finally(() => {
66+
this.loadingMore = false
67+
})
68+
}
1869
}
1970
}
2071
</script>

src/views/account/center/page/Project.vue

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,74 @@
11
<template>
2-
<a-list>
3-
<a-list-item>
4-
2+
<a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
3+
<a-list-item slot="renderItem" slot-scope="item">
4+
<a-card class="ant-pro-pages-list-projects-card" hoverable>
5+
<img slot="cover" :src="item.cover" :alt="item.title" />
6+
<a-card-meta :title="item.title">
7+
<template slot="description">
8+
<ellipsis :length="50">{{ item.description }}</ellipsis>
9+
</template>
10+
</a-card-meta>
11+
<div class="cardItemContent">
12+
<span>{{ item.updatedAt | fromNow }}</span>
13+
<div class="avatarList">
14+
<avatar-list size="mini">
15+
<avatar-list-item
16+
v-for="(member, i) in item.members"
17+
:key="`${item.id}-avatar-${i}`"
18+
:src="member.avatar"
19+
:tips="member.name"
20+
/>
21+
</avatar-list>
22+
</div>
23+
</div>
24+
</a-card>
525
</a-list-item>
626
</a-list>
727
</template>
828

929
<script>
30+
import moment from 'moment'
31+
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
32+
const TagSelectOption = TagSelect.Option
33+
const AvatarListItem = AvatarList.AvatarItem
34+
1035
export default {
11-
name: 'Project'
36+
name: 'Project',
37+
components: {
38+
AvatarList,
39+
AvatarListItem,
40+
Ellipsis,
41+
TagSelect,
42+
TagSelectOption,
43+
StandardFormRow
44+
},
45+
data () {
46+
return {
47+
data: [],
48+
form: this.$form.createForm(this),
49+
loading: true
50+
}
51+
},
52+
filters: {
53+
fromNow (date) {
54+
return moment(date).fromNow()
55+
}
56+
},
57+
mounted () {
58+
this.getList()
59+
},
60+
methods: {
61+
handleChange (value) {
62+
console.log(`selected ${value}`)
63+
},
64+
getList () {
65+
this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
66+
console.log('res', res)
67+
this.data = res.result
68+
this.loading = false
69+
})
70+
}
71+
}
1272
}
1373
</script>
1474

0 commit comments

Comments
 (0)