tnbapp/src/views/blog/TagPage.vue

<template>
  <el-row class="movie-list">
    <el-col :md="18">
      <el-scrollbar style="width: 100%; height: 80vh;">
        <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;">
                <router-link style="text-decoration-line: none" target="_blank" :to="`/blog/post/${item.articleId}`">
                  {{ item.title }}
                </router-link>
              </span>
            </div>
            <div class="text item">
              <el-row>
                <span v-html="item.summary" />
              </el-row>
              <el-row>
                <el-col style="padding: 1px" :md="2" :sm="6" :xs="6">
                  <span style="left: 0;margin-bottom: 0px;color: black;">
                    <router-link style="text-decoration-line: none" target="_blank" :to="`/blog/category/post?name=${item.category}`">
                      <el-tag type="warning">
                        {{ item.category }}
                      </el-tag>
                    </router-link>
                  </span>
                </el-col>
                <el-col style="padding: 1px" :md="6" :sm="16" :xs="16">
                  <span class="el-icon-watch" style="left: 0;margin-bottom: 0px;color: black;">
                    {{ item.publishAt }}
                  </span>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <el-pagination
          background
          :small="screenWidth <= 768"
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="totalSize"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </el-scrollbar>
    </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>
</template>

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

export default {
  name: 'TagPage',
  data() {
    return {
      queryInfo: {
        pn: 1,
        type: 'tag',
        name: ''
      },
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dataList: []
    }
  },
  created() {
    const pageNumber = this.$route.query.pn
    if (pageNumber !== undefined && pageNumber !== null) {
      this.currentPage = parseInt(pageNumber)
      this.queryInfo.pn = parseInt(pageNumber)
    }
    const name = this.$route.query.name
    if (name !== undefined && name !== null) {
      this.queryInfo.name = name
    }

    const path = this.$route.path
    const arr = path.split('/')
    console.log(arr)
    if (arr.length !== 4) {
      return
    }

    if (arr[2] === 'tag') {
      this.queryInfo.type = 'tag'
      document.title = '包含标签 ' + this.queryInfo.name + ' 的文章'
      this.getData()
    } else if (arr[2] === 'category') {
      this.queryInfo.type = 'category'
      document.title = '包含分类 ' + this.queryInfo.name + ' 的文章'
      this.getData()
    }
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.queryInfo.pn = currentPage
      this.$router.push({
        path: '/blog/tag',
        query: this.queryInfo
      })
      this.currentPage = currentPage
      this.getData(this.currentPage)
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      getTagPost(this.queryInfo).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

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

.movie-list {
  padding: 5px;
}
</style>