tnbapp/src/views/post/PostList.vue

<template>
  <el-row>
    <el-col :md="2">
      <el-menu
        :default-active="this.$route.path"
        router
        class="el-menu-vertical-demo"
      >
        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
          <i :class="item.icon" />
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :md="22">
      <el-row>
        <el-tabs v-model="activeName" @tab-click='tabClick'>
          <el-tab-pane label="视频" name="video">
            <video-post :data-list="dataList"/>
          </el-tab-pane>
          <el-tab-pane label="音频" name="audio">
            <audio-post :data-list="dataList"/>
          </el-tab-pane>
          <el-tab-pane label="相册" name="image">
            <image-post :data-list="dataList"/>
          </el-tab-pane>
          <el-tab-pane label="文章" name="article">
            <article-post :data-list="dataList"/>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-col :span="22" class="pagination">
          <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-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import VideoPost from "@/views/post/VideoPost";
import AudioPost from "@/views/post/AudioPost";
import ImagePost from "@/views/post/ImagePost";
import ArticlePost from "@/views/post/ArticlePost";

import { userVideoPost } from "@/api/video";
import { getUserAudio } from "@/api/audio";
import { getUserAlbums } from "@/api/image";
import { getArticles } from "@/api/article";

export default {
  name: 'PostList',
  components: { VideoPost, ImagePost, AudioPost, ArticlePost },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      /*************************************************************************/
      navList: [
        { path: '/post/publish', name: '发布', icon: 'el-icon-upload' },
        { path: '/post/list', name: '稿件', icon: 'el-icon-files' },
        { path: '/post/analysis', name: '数据', icon: 'el-icon-data-analysis' }
      ],
      activeName: 'video',
      userId: 10001,
      showPreviewDialog: false,
      videoProp: null,
      showEditScopeDialog: false,
    }
  },
  created() {
    document.title = "稿件列表"

    const path = this.$route.path
    if (path.endsWith("video")) {
      this.activeName = 'video'
      document.title = '视频稿件'
    } else if (path.endsWith("image")) {
      this.activeName = 'image'
      document.title = '图片稿件'
    } else if (path.endsWith("audio")) {
      this.activeName = 'audio'
      document.title = '音频稿件'
    } else if (path.endsWith("article")) {
      this.activeName = 'article'
      document.title = '文章稿件'
    }

    this.getData()
  },
  watch: {
    $route(){
      this.$router.go()
    }
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    tabClick(tab) {
      this.activeName = tab.name
      this.goToTab(this.activeName)
    },
    goToTab(activeName) {
      const path = '/post/' + activeName
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    getData() {
      this.dataList = []
      if (this.activeName === 'video') {
        userVideoPost(this.currentPage).then(res => {
          if (res.code === 0) {
            const resData = res.data
            this.dataList = resData.list
            this.totalSize = resData.totalSize

            if (this.totalSize !== 0) {
              this.showEmpty = false
            } else {
              this.showEmpty = true
            }
          } else {
            this.$notify({
              title: '提示',
              message: res.msg,
              type: 'warning',
              duration: 3000
            })
          }
        }).catch(error => {
          this.$notify({
            title: '提示',
            message: error.message,
            type: 'error',
            duration: 3000
          })
        })
      } else if (this.activeName === 'image') {
        getUserAlbums(this.userId).then(res => {
          if (res.code === 0) {
            const resData = res.data
            if (resData.length !== 0) {
              this.showEmpty = false
              for (const item of resData) {
                this.dataList.push(item)
              }
            } else {
              this.showEmpty = true
            }
          }
        })
      } else if (this.activeName === 'audio') {
        this.currentPage = 1
        this.lastId = 0
        getUserAudio(this.userId).then(res => {
          if (res.code === 0) {
            const resData = res.data.list
            if (resData.length !== 0) {
              this.showEmpty = false
              for (const item of resData) {
                this.dataList.push(item)
              }
            } else {
              this.showEmpty = true
            }
          }
        })
      } else if (this.activeName === 'article') {
        this.currentPage = 1
        this.lastId = 0
        getArticles(1).then(res => {
          if (res.code === 0) {
            const resData = res.data.list
            if (resData.length !== 0) {
              this.showEmpty = false
              for (const item of resData) {
                this.dataList.push(item)
              }
            } else {
              this.showEmpty = true
            }
          }
        })
      }
    },
  }
}
</script>

<style>
.uploader-example {
  width: 500px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 320px;
  height: 240px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 320px;
  height: 240px;
  display: block;
}
</style>