blog-list.vue

<template>
  <div class="blog-list">
    <section class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="item"
      >
        <span class="time">{{ item.createdAt | formatDate('yyyy-MM-dd') }}</span>
        <nuxt-link :to="`/posts/${item.id}`"><span
          v-if="item.status === 3"
          class="top"
        >[置顶] </span>{{ item.title }}</nuxt-link>
      </div>
    </section>

    <section class="page">
      <button
        :disabled="currentPage == 1"
        class="prev small"
        @click="handlePrev"
      >上一页</button>
      <span> {{ currentPage }} / {{ totalPage }}</span>
      <button
        :disabled="currentPage == totalPage"
        class="next small"
        @click="handleNext"
      >下一页</button>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'BlogList',
  props: {
    isDraft: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState([
      'articles',
      'articlesTop',
      'limit',
      'total',
    ]),
    list() {
      return this.articlesTop.concat(this.articles)
    },
    currentPage() {
      return Number(this.$route.query.page) || 1
    },
    totalPage() {
      return Math.ceil(this.total / this.limit) || 1
    },
  },
  watch: {
    '$route': function (newValue, oldValue) {
      this.checkQuery(newValue.query)
    }
  },
  mounted() {
    // const { page = 1, keywords = '', category = '' } = this.$route.query
    // this.checkQuery(page)
  },
  methods: {
    ...mapActions([
      'getArticles',
    ]),

    handlePrev() {
      const page = this.currentPage - 1 > 0
        ? this.currentPage - 1
        : 1

      this.$router.push(`/?page=${page}`)
    },

    handleNext() {
      const page = this.currentPage + 1 > this.totalPage
        ? this.currentPage
        : this.currentPage + 1

      this.$router.push(`/?page=${page}`)
    },
    checkQuery(query) {
      // 判断合法值
      const { page = 1, keywords = '', category = '' } = query
      if (+page <= this.totalPage && +page >= 1) {
        if (this.isDraft) {
          this.getDrafts({
            page,
          })
        } else {
          this.getArticles({
            page,
            keywords,
            category,
          })
        }
        return
      }
      this.$router.replace('/404')
    },
  },
}
</script>

<style lang="scss" scoped>
.blog-list {
  .list {
    .item {
      font-size: 16px;
      margin-bottom: 20px;
      .time {
        color: #999;
        margin-right: 10px;
      }
      .top {
        color: $main-color;
      }
    }
  }
  .page {
    margin-bottom: 30px;
    button {
      padding: 15px 30px;
    }
  }
}
</style>