blog-client/pages/_terms/page/_page.vue

<template lang="pug">
.pageList
  .articleContent(ref='articleImgs', v-if='Articels')
    article.articleList(v-for='(post, index) in Articels', :key='index')
      .articleImgs(v-if='post.postImages.length')
        nuxt-link(:to='"/post/" + post.ID')
          Swiper(:style='"height: " + imageHeight + "px"')
            Slide(v-for='(imgUrl, inx) in post.postImages', :key='inx')
              img(:src='imgUrl')
      .articleAbstract
        nuxt-link(:to='"/post/" + post.ID')
          .articleTitle(v-html='post.post_title')
        .articalMeta
          ul
            li
              Icon(:icon='["far", "calendar-alt"]')
              | &nbsp; {{ post.post_date }}
            li
              Icon(:icon='["far", "bookmark"]')
              nuxt-link(
                v-for='(relationships, idx) in post.term_relationships',
                :key='idx',
                v-if='relationships.term_taxonomy',
                :to='"/" + relationships.term_taxonomy.term.slug'
              )
                span
                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
            li(v-if='post.postmetum.meta_value !== 0')
              Icon(:icon='["fas", "thermometer-" + post.hotValue]')
              | &nbsp; {{ post.postmetum.meta_value }}
        .articelAbstractContent(
          v-html='post.post_excerpt || post.post_content'
        )
        .readMore
          nuxt-link.readMoreBtn(:to='"/post/" + post.ID')
            | READ MORE
  .Info(v-if='Info')
    | {{ Info }}
  nuxt-link(
    :to='nowPage > 2 ? nowPath + "/page/" + (nowPage - 1) : nowPath + "/"',
    :class='nowPage > 1 ? "btn-footer btn-prev" : "btn-footer btn-prev btn-disable"'
  )
    Icon(:icon='["fas", "chevron-left"]')
    | &nbsp; 上一页
  nuxt-link(
    :to='nowPage + 1 <= Math.ceil(ArticelsCount / 8) ? nowPath + "/page/" + (nowPage + 1) : ""',
    :class='nowPage + 1 <= Math.ceil(ArticelsCount / 8) ? "btn-footer btn-next" : "btn-footer btn-next btn-disable"'
  )
    | 下一页 &nbsp;
    Icon(:icon='["fas", "chevron-right"]')
</template>

<script>
export default {
  async asyncData ({ app, params, $axios }) {
    let Info = null
    let Articels = []
    const nowPage = params.page ? parseInt(params.page) : 1

    const data = await $axios.$get('/public/article/list', {
      params: {
        page: nowPage,
        num: 8,
        category: params.terms || ''
      }
    })

    if (data.status === 1) {
      Articels = data.result.list
      for (const n in Articels) {
        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
        // 热度值计算
        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
        } else {
          Articels[n].hotValue = 0
          Articels[n].postmetum = {}
          Articels[n].postmetum.meta_value = 0
        }

        Articels[n].postImages = []
      }
    } else if (data.status === 404) {
      Info = '未找到文章。'
      // redirect('/404')
      // return
    }

    return {
      Articels,
      imageHeight: 0,
      Info,
      nowPage,
      ArticelsCount: data.result.count || 0,
      nowPath: params.terms ? '/' + params.terms : ''
    }
  },
  mounted () {
    this.$finishLoad()
    this.analyseImages()
  },
  methods: {
    async analyseImages () { // 图片大小分析及处理
      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
      this.imageHeight = articleImgsWidth * 0.5625
      for (const n in this.Articels) {
        if (this.Articels[n].postimages.length !== 0) {
          for (const i in this.Articels[n].postimages) {
            const data = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
            const widthValue = data.ImageWidth.value
            const heightValue = data.ImageHeight.value
            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
            }
          }
        }
      }
    }
  }
}
</script>