tnbapp/src/views/user/index.vue

<template>
  <div>
    <!--<v-container fill-height fluid style="padding: 0px;">
      <v-row>
        <v-col style="padding: 0px;">
          <v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
        </v-col>
      </v-row>
    </v-container>-->
    <v-container fill-height>
      <v-row align="center">
        <v-col
          cols="12"
          md="8"
        >
          <v-avatar size="80" style="float: left;">
            <v-img :src="userInfo.avatarUrl" />
          </v-avatar>
          <h2 style="margin-top: 20px;margin-left: 100px;">
            {{ userInfo.username }}
            <v-chip color="yellow" @click="goToVip()">
              <!--<v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">-->
              小会员
            </v-chip>
          </h2>
        </v-col>
        <v-col
          v-if="userInfo && userInfo.userId !== userId"
          cols="6"
          md="4"
          class="hidden-sm-and-down ml-0 pl-4"
        >
          <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
          <v-btn color="primary">关注他</v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          {{ userInfo.intro }}
        </v-col>
      </v-row>
      <v-row>
        <v-col
          v-if="userInfo || userInfo.userId !== userId"
          cols="6"
          md="4"
        >
          关注数: {{ userInfo.followerCount }}
          粉丝数: {{ userInfo.followerCount }}
        </v-col>
      </v-row>
      <v-tabs>
        <v-tab @click="setType(0)">视频</v-tab>
        <v-tab @click="setType(1)">状态</v-tab>
        <v-tab @click="setType(2)">评论</v-tab>
      </v-tabs>
    </v-container>
    <v-divider />
    <v-container fill-height>
      <div id="top" />
      <div v-if="type === 4">
        <v-row>
          <v-col>
            用户名: {{ userInfo.username }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            简介： {{ userInfo.intro }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            视频总数： {{ userInfo.submitCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            粉丝数： {{ userInfo.followerCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            关注数： {{ userInfo.followingCount }}
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            加入时间： {{ TimeUtil.renderTime(userInfo.createTime) }}
          </v-col>
        </v-row>
      </div>
      <v-row v-if="type === 0">
        <v-col
          v-for="item in videoList"
          :key="item.id"
          cols="12"
        >
          <VideoList :video="item" />
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-pagination
          v-model="page"
          :length="length"
          @input="pageChange"
        />
      </v-row>
    </v-container>
  </div>
</template>

<script>
import { userVideoList } from '@/api/media/video'
import Power from '@/utils/check-power.vue'
import VideoList from '@/components/player/video-list.vue'
import TimeUtil from '@/utils/time-util.vue'

export default {
  name: 'UserHome',
  components: {
    VideoList
  },
  data() {
    return {
      TimeUtil,
      Power,
      userId: 0,
      userInfo: {},
      videoList: [],
      page: 1,
      size: 20,
      length: 1,
      totalCount: 0,
      type: 0
    }
  },
  created() {
    this.userId = parseInt(this.$route.params.userId)
    this.getUserInfo()
    this.getVideoList()
  },
  methods: {
    getUserInfo() {
      if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.userId === this.userId) {
        this.userInfo = this.$store.state.user.userInfo
        document.title = this.userInfo.username
      } else {
        fetch(`/api/user/info/${this.userId}`, {
          headers: {
            'Content-Type': 'application/json; charset=UTF-8',
            'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
          },
          method: 'GET',
          credentials: 'include'
        }).then(response => response.json())
          .then(json => {
            this.userInfo = json.data
            document.title = json.data.username
            if (json.data.id === -1) {
              this.$router.push('/404')
            }
          })
          .catch(e => {
            return null
          })
      }
    },
    getStatusList() {
      console.log('获取状态列表')
    },
    getVideoList() {
      console.log('获取视频列表')
      userVideoList(this.userId).then(res => {
        if (res.code === 0) {
          for (const item of res.data.list) {
            this.videoList.push(item)
          }
          this.page += 1
          this.busy = false
        } else {
          this.$notify({
            title: res.code,
            message: res.msg,
            type: 'warning',
            duration: 500
          })
        }
      })
        .catch(error => {
          console.error(error.message)
        })

      /* fetch(`/api/article/user/list/${this.userId}?page=${this.page}&limit=${this.size}&type=${this.type}`, {
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
        },
        method: 'GET',
        credentials: 'include'
      }).then(response => response.json())
        .then(json => {
          this.videoList = json.data.list
          this.page = json.data.currPage
          this.length = json.data.totalPage
          this.totalCount = json.data.totalCount
        })
        .catch(e => {
          return null
        })*/
    },
    getCommentList() {
      console.log('获取评论列表')
    },
    pageChange(page) {
      this.page = page
      this.getVideoList(this.type)
      this.$vuetify.goTo(0)
    },
    setType(type) {
      if (type === this.type) {
        return
      }

      this.type = type
      this.page = 1
      if (type === 0) {
        this.getVideoList()
        this.$vuetify.goTo(type)
      } else if (type === 1) {
        this.getStatusList()
        this.$vuetify.goTo(type)
      } else if (type === 2) {
        this.getCommentList()
        this.$vuetify.goTo(type)
      }
    },
    goToVip() {
      this.$router.push('/vip')
    },
    goToStudio() {
      this.$router.push('/studio')
    },
    goToSetting() {
      this.$router.push('/user/setting')
    }
  }
}
</script>

<style>
</style>