tnbapp/src/views/user/Home.vue

<template>
  <div>
    <el-row class="movie-list">
      <el-col :md="24">
        <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :md="1">
                <el-avatar>
                  <el-image :src="user.avatarUrl" />
                </el-avatar>
              </el-col>
              <el-col :md="23">
                <span>{{ user.screenName }}</span>
                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
                <el-button
                  type="danger"
                  size="mini"
                  :icon="followButton.icon"
                  @click="followUser(user.userId)"
                >
                  <span>{{followButton.text}}</span>
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-message"
                  @click="sendMessage(user.userId)"
                >
                  <span>发消息</span>
                </el-button>
              </el-col>
            </el-row>
            <el-row>
              <span v-if="user.signature !== null">{{user.signature}}</span>
              <span v-if="user.signature === undefined || user.signature === null">此用户没有签名</span>
            </el-row>
            <el-row>
              <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
              <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="24" class="movie-list">
        <el-tabs v-model="activeName" @tab-click='tabClick'>
          <el-tab-pane name="video">
            <span slot="label">
              视频<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
            </span>
            <div v-if="activeName === 'video'">
              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
                <video-card :video="video" />
              </el-col>
            </div>
          </el-tab-pane>
          <el-tab-pane name="status">
            <span slot="label">
              状态<el-badge :value="statusCount" :max="9999" class="item" type="warning"/>
            </span>
            <div v-if="activeName === 'status'">
              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
                <status-card :status="status" />
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane name="following">
            <span slot="label">
              Ta 的关注<el-badge :value="followingCount" :max="9999" class="item" type="warning"/>
            </span>
            <div v-if="activeName === 'following'">
              <el-col v-for="(user, index) in followingList" :key="index" :md="6" :sm="12" :xs="12">
                <user-card :user="user"></user-card>
              </el-col>
            </div>
          </el-tab-pane>
          <el-tab-pane name="follower">
            <span slot="label">
              Ta 的粉丝<el-badge :value="followerCount" :max="9999" class="item" type="warning"/>
            </span>
            <div v-if="activeName === 'follower'">
              <el-col v-for="(user, index) in followerList" :key="index" :md="6" :sm="12" :xs="12">
                <user-card :user="user"></user-card>
              </el-col>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="24" class="pagination">
        <el-pagination
          background
          :small="screenWidth <= 768"
          hide-on-single-page
          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-row v-if="showEmpty" class="not-result">
      <el-col :span="12" :offset="6">
        <img src="@/assets/img/icon/not-collection.png">
        <div>暂无内容</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserCard from '@/components/card/UserCard'
import StatusCard from '@/components/card/StatusCard'
import VideoCard from '@/components/card/VideoCard'
import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
import { userVideoList, getUserContentData } from "@/api/video";
import { userStatus } from "@/api/status";

export default {
  name: 'Home',
  components: { UserCard, StatusCard, VideoCard },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      user: null,
      userId: null,
      followButton: {
        icon: 'el-icon-plus',
        text: '关注'
      },
      activeName: 'video',
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      videoList: [],
      statusList: [],
      followerList: [],
      followingList: [],
      showEmpty: false,
      videoCount: 0,
      statusCount: 0,
      followingCount: 0,
      followerCount: 0
    }
  },
  created() {
    this.userId = this.$route.params.id
    getUserInfo(this.userId).then(res => {
      if (res.code === 0) {
        this.user = res.data
        document.title = this.user.screenName + '的个人主页'
      }
    })

    checkRelation(this.userId).then(res => {
      if (res.code === 0) {
        if (res.data) {
          this.followButton.text = '已关注'
          this.followButton.icon = 'el-icon-check'
        }
      }
    })

    getUserContentData(this.userId).then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.videoCount = resData.videoCount
        this.statusCount = resData.statusCount
        this.followingCount = resData.userFollowCount.followingCount
        this.followerCount = resData.userFollowCount.followerCount
      }
    })
    this.userVideoListWrapper(1, this.userId, 0)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    initPagination() {
      this.pageSize = 12
      this.currentPage = 1
      this.totalSize = 0
    },
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      if (this.activeName === 'video') {
        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
      } else if (this.activeName === 'status') {
        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
      } else if (this.activeName === 'following') {
        getUserFollowing(this.userId).then(res => {
          if (res.code === 0) {
            this.followingList = res.data
          }
        })
      } else if (this.activeName === 'follower') {
        getUserFollower(this.userId).then(res => {
          if (res.code === 0) {
            this.followerList = res.data
          }
        })
      }

      // 回到顶部
      scrollTo(0, 0)
    },
    tabClick(tab) {
      this.activeName = tab.name
      if (this.activeName === 'video') {
        this.currentPage = 1
        this.lastId = 0
        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
      } else if (this.activeName === 'status') {
        this.currentPage = 1
        this.lastId = 0
        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
      } else if (this.activeName === 'following') {
        getUserFollowing(this.userId).then(res => {
          if (res.code === 0) {
            this.followingList = res.data
          }
        })
      } else if (this.activeName === 'follower') {
        getUserFollower(this.userId).then(res => {
          if (res.code === 0) {
            this.followerList = res.data
          }
        })
      }
    },
    followUser(userId) {
      if (this.followButton.text === '关注') {
        followUser(userId).then(res => {
          if (res.code === 0) {
            this.followButton.text = '已关注'
            this.followButton.icon = 'el-icon-check'
          }
        })
      } else {
        unfollowUser(userId).then(res => {
          if (res.code === 0) {
            this.followButton.text = '关注'
            this.followButton.icon = 'el-icon-plus'
          }
        })
      }
    },
    sendMessage(userId) {
      console.log('发送消息')
    },
    userVideoListWrapper(pageNumber, userId, lastId) {
      userVideoList(pageNumber, userId, lastId).then(res => {
        if (res.code === 0) {
          const resData = res.data
          this.videoList = resData.list
          this.totalSize = resData.totalSize
          this.lastId = resData.lastId

          if (this.videoList.length !== 0) {
            this.showEmpty = false
          } else {
            this.showEmpty = true
          }
        }
      })
    },
    userStatusListWrapper(pageNumber, userId, lastId) {
      userStatus(userId, pageNumber).then(res => {
        if (res.code === 0) {
          this.statusList = res.data.list
          if (this.statusList.length === 0) {
            this.showEmpty = true
          } else {
            this.showEmpty = false
          }
        }
      })
    }
  }
}
</script>

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

.pagination {
  text-align: center;
  padding: 10px;
}

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

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

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>