feat: Add /account/projects

Add /account/Article
FeiQinZDF · Apr 19, 2019 · 684a19b · 684a19b
1 parent 9c77f04
commit 684a19b
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 11 deletions.
diff --git a/src/views/account/center/page/Article.vue b/src/views/account/center/page/Article.vue
@@ -1,20 +1,71 @@
 <template>
-  <a-list>
-    <a-list-item>
-
+  <a-list
+    size="large"
+    rowKey="id"
+    :loading="loading"
+    itemLayout="vertical"
+    :dataSource="data"
+  >
+    <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
+      <template slot="actions">
+        <icon-text type="star-o" :text="item.star" />
+        <icon-text type="like-o" :text="item.like" />
+        <icon-text type="message" :text="item.message" />
+      </template>
+      <a-list-item-meta>
+        <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
+        <template slot="description">
+          <span>
+            <a-tag>Ant Design</a-tag>
+            <a-tag>设计语言</a-tag>
+            <a-tag>蚂蚁金服</a-tag>
+          </span>
+        </template>
+      </a-list-item-meta>
+      <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
     </a-list-item>
+    <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
+      <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
+    </div>
   </a-list>
 </template>
 
 <script>
-import AList from 'ant-design-vue/es/list'
-import AListItem from 'ant-design-vue/es/list/Item'
+import { ArticleListContent } from '@/components'
+import IconText from '@/views/list/search/components/IconText'
 
 export default {
   name: 'Article',
   components: {
-    AList,
-    AListItem
+    IconText,
+    ArticleListContent
+  },
+  data () {
+    return {
+      loading: true,
+      loadingMore: false,
+      data: []
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+      this.$http.get('/list/article').then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    },
+    loadMore () {
+      this.loadingMore = true
+      this.$http.get('/list/article').then(res => {
+        this.data = this.data.concat(res.result)
+      }).finally(() => {
+        this.loadingMore = false
+      })
+    }
   }
 }
 </script>

diff --git a/src/views/account/center/page/Project.vue b/src/views/account/center/page/Project.vue
@@ -1,14 +1,74 @@
 <template>
-  <a-list>
-    <a-list-item>
-
+  <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
+    <a-list-item slot="renderItem" slot-scope="item">
+      <a-card class="ant-pro-pages-list-projects-card" hoverable>
+        <img slot="cover" :src="item.cover" :alt="item.title" />
+        <a-card-meta :title="item.title">
+          <template slot="description">
+            <ellipsis :length="50">{{ item.description }}</ellipsis>
+          </template>
+        </a-card-meta>
+        <div class="cardItemContent">
+          <span>{{ item.updatedAt | fromNow }}</span>
+          <div class="avatarList">
+            <avatar-list size="mini">
+              <avatar-list-item
+                v-for="(member, i) in item.members"
+                :key="`${item.id}-avatar-${i}`"
+                :src="member.avatar"
+                :tips="member.name"
+              />
+            </avatar-list>
+          </div>
+        </div>
+      </a-card>
     </a-list-item>
   </a-list>
 </template>
 
 <script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
 export default {
-  name: 'Project'
+  name: 'Project',
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this),
+      loading: true
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    }
+  }
 }
 </script>