tnbapp/src/views/home/Status.vue

<template>
  <div>
    <el-row>
      <el-col :md="3">
        <hot-list />
      </el-col>
      <el-col :md="18">
        <el-row class="movie-list">
          <text-card />
        </el-row>
        <el-row class="movie-list">
          <el-tabs v-model="activeName" @tab-click='tabClick'>
            <el-tab-pane label="视频" name="video">
              <div v-if="activeName === 'video'">
                <el-col :md="8">
                  <el-row v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
                    <video-card :video="video" />
                  </el-row>
                </el-col>
              </div>
            </el-tab-pane>
            <el-tab-pane label="状态" name="status">
              <div v-if="activeName === 'status'">
                <el-col :md="15">
                  <el-row v-for="(status, index) in statusList" :key="index" :md="15" :sm="12" :xs="12">
                    <status-card :status="status" />
                  </el-row>
                </el-col>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-col>
      <el-col :md="3">
        <hot-list />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TextCard from '@/components/card/TextCard'
import StatusCard from '@/components/card/StatusCard'
import VideoCard from '@/components/card/VideoCard'
import HotList from '@/components/hotlist/HotList'
import { getUserInfo } from '@/utils/auth'
import { statusTimeline, videoTimeline } from '@/api/timeline'

export default {
  name: 'Status',
  components: { TextCard, StatusCard, VideoCard, HotList },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      videoInfo: null,
      statusList: [],
      videoList: [],
      activeName: 'video'
    }
  },
  created() {
    const userInfo = getUserInfo()
    if (userInfo != null) {
      document.title = userInfo.username + '的时间线'
    }

    this.currentPage = 1
    this.videoTimelineWrapper(this.currentPage)
    /*statusTimeline(0, this.currentPage).then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.statusList = resData.list
      }
    })*/
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.$store.commit('updatePage', currentPage)
      this.$store.dispatch('getPageBean')
      // 回到顶部
      scrollTo(0, 0)
    },
    statusTimelineWrapper(pageNumber) {
      statusTimeline(0, this.currentPage).then(res => {
        if (res.code === 0) {
          const resData = res.data
          this.statusList = resData.list
        }
      })
    },
    videoTimelineWrapper(pageNumber) {
      videoTimeline(0, this.currentPage).then(res => {
        if (res.code === 0) {
          const resData = res.data
          this.videoList = resData.list
        }
      })
    },
    tabClick(tab) {
      const  tabName = tab.name
      if (tabName === 'video') {
        this.videoTimelineWrapper(this.currentPage)
      } else if (tabName === 'status') {
        this.statusTimelineWrapper(this.currentPage)
      }
    }
  }
}
</script>

<style scoped>
.movie-list {
  padding-top: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}
</style>