💩 公告组件

components/announcement/list.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-row class="wrapper">
+    <el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;">
+      <el-carousel :interval="5000" type="card" height="256px">
+        <el-carousel-item v-for="article in announcements.articles" :key="article.idArticle" style="padding-bottom: 1rem;">
+          <el-card>
+            <div class="card-body d-flex flex-column">
+              <el-link rel="nofollow" @click="onRouter('article',article.articleLink)" :underline="false"
+                       style="margin-bottom: .5rem;">
+                <h4>
+                  {{ article.articleTitle }}
+                </h4>
+              </el-link>
+              <div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
+            </div>
+          </el-card>
+        </el-carousel-item>
+      </el-carousel>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "announcementList",
+  props: {
+    announcements: {
+      type: Object
+    }
+  },
+  methods: {
+    onRouter(name, data) {
+      this.$router.push({
+        path: data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -1,17 +1,20 @@
 <template>
   <div>
+    <announcement-list :announcements="announcements"></announcement-list>
     <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
   </div>
 </template>
 <script>
 import ArticleList from '~/components/archive/list'
+import AnnouncementList from '~/components/announcement/list'
 import {mapState} from 'vuex';
 
 export default {
   name: 'Index',
   fetch({store, query}) {
     return Promise.all([
-      store.dispatch('article/fetchList', {page: query.page || 1})
+      store.dispatch('article/fetchList', {page: query.page || 1}),
+      store.dispatch('article/fetchAnnouncementList', {page: query.page || 1})
     ])
   },
   watch: {
@@ -20,11 +23,13 @@ export default {
     }
   },
   components: {
+    AnnouncementList,
     ArticleList
   },
   computed: {
     ...mapState({
-      articles: state => state.article.list.data
+      articles: state => state.article.list.data,
+      announcements: state => state.article.announcements.data
     })
   },
   methods: {

store/article.js

@@ -16,6 +16,10 @@ export const state = () => {
       fetching: false,
       data: getDefaultListData()
     },
+    announcements: {
+      fetching: false,
+      data: getDefaultListData()
+    },
     detail: {
       fetching: false,
       data: {}
@@ -32,6 +36,12 @@ export const mutations = {
   updateListData(state, action) {
     state.list.data = action
   },
+  updateAnnouncementListFetching(state, action) {
+    state.announcements.fetching = action
+  },
+  updateAnnouncementListData(state, action) {
+    state.announcements.data = action
+  },
   updateExistingListData(state, action) {
     state.list.data.data.push(...action.data)
     state.list.data.pagination = action.pagination
@@ -66,6 +76,27 @@ export const mutations = {
 }
 
 export const actions = {
+  // 获取公告列表
+  fetchAnnouncementList({commit, state}, params = {}) {
+    commit('updateAnnouncementListFetching', true)
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    let data = {
+      page: params.page || 1
+    }
+    return this.$axios
+      .$get(`${BASE_API_PATH}/announcements`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateAnnouncementListFetching', false);
+        commit('updateAnnouncementListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateAnnouncementListFetching', false);
+      });
+  },
   // 获取文章列表
   fetchList({commit, state}, params = {}) {
     commit('updateListFetching', true)

store/index.js

@@ -77,6 +77,7 @@ export const actions = {
       // 内容数据
       store.dispatch('topic/fetchNavList'),
       store.dispatch('article/fetchList'),
+      store.dispatch('article/fetchAnnouncementList'),
       store.dispatch('search/fetchList'),
     ]