tnbapp/src/views/blog/Article.vue

<template>
  <div>
    <el-row class="movie-list">
      <el-col :md="12">
        <el-row v-for="(item, index) in dataList" :key="index" class="movie-list">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.publishAt }}</span>
            </div>
            <div class="text item">
              <el-row>
                <el-col :md="4">
                  <router-link target="_blank" :to="`/news/${item.contentId}`">
                    <el-image
                      lazy
                      fit="cover"
                      :src="item.coverUrl"
                      class="coverImg"
                    />
                  </router-link>
                </el-col>
                <el-col :md="20">
                  <router-link style="text-decoration-line: none" target="_blank" :to="`/news/${item.contentId}`">
                    <el-row>
                      <div style="padding: 14px">
                        <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
                      </div>
                    </el-row>
                  </router-link>
                  <el-row>
                    <div style="padding: 14px">
                      <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
                    </div>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <el-row>
          <div v-if="hasMore" style="display: flex; justify-content: center;">
            <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
              加载更多
            </el-button>
          </div>
        </el-row>
      </el-col>
      <el-col :md="6">
        <el-row class="movie-list">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-row>
                <span>热门</span>
              </el-row>
            </div>
            <div class="text item">
              <el-row />
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getNewsList } from '@/api/blog'

export default {
  name: 'ArticleIndex',
  metaInfo: {
    meta: [
      { name: 'referrer', content: 'no-referrer' }
    ]
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 50
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  components: {},
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      hasMore: true
    }
  },
  created() {
    document.title = 'News'
    this.getArticlesWrapper(this.currentPage)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getArticlesWrapper(this.currentPage)
      // 回到顶部
      scrollTo(0, 0)
    },
    getArticlesWrapper(page) {
      getNewsList(page).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.hasMore = respData.hasNext
          for (const item of respData.list) {
            this.dataList.push(item)
          }
        }
      })
    },
    loadMore() {
      this.currentPage = this.currentPage + 1
      this.getArticlesWrapper(this.currentPage)
    },
    refresh() {
      this.$message.info('暂未实现')
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding: 5px;
  }
  .coverImg {
    height: 120px !important;
  }
}

.movie-list {
  padding: 5px;
}

.coverImg {
  width: 100%;
  height: 120px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.not-result {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

</style>