tnbapp/src/views/user/user-home.vue

<template>
  <div>
    <v-card>
      <!--<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 }}-->
              {{ userInfo.screenName }}
              <!--<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 !== loginUserId"
            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" @click="followUserWrapper">
              <span v-if="isFollowed">已关注</span>
              <span v-if="!isFollowed">关注TA</span>
            </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.followingCount }}
            粉丝数: {{ userInfo.followerCount }}
          </v-col>
        </v-row>
        <v-tabs>
          <v-tab @click="selectTab(1)">主页</v-tab>
          <v-tab @click="selectTab(2)">状态</v-tab>
          <v-tab @click="selectTab(3)">投稿</v-tab>
        </v-tabs>
      </v-container>
    </v-card>
    <v-divider />
    <v-divider />
    <v-divider />
    <v-divider />
    <v-divider />
    <v-divider />
    <div v-if="type === 1">
      <v-card
        light
      >
        <v-card-title class="text-h5">
          最近投稿
        </v-card-title>
        <v-row>
          <v-col
            v-for="item in cardList"
            :key="item.videoId"
          >
            <video-card :video="item" />
          </v-col>
        </v-row>
      </v-card>
    </div>
    <v-dialog
      v-model="showDialog"
      persistent
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">已关注, 确定要取消关注?</span>
        </v-card-title>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="showDialog = false"
          >
            取消
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="unfollowUserWrapper"
          >
            确定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-snackbar
        v-model="showMessage"
        :top="true"
        :timeout="1000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn
            color="pink"
            text
            v-bind="attrs"
            @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import Power from '@/utils/check-power.vue'
import TimeUtil from '@/utils/time-util.vue'
import { getUserInfo, followUser, unfollowUser, checkRelation } from '@/api/user/user'
import { userRecentlyVideoList } from '@/api/media/video'
import VideoCard from '@/components/card/video-card.vue'

export default {
  name: 'UserHome',
  components: {
    VideoCard
  },
  data() {
    return {
      TimeUtil,
      Power,
      loginUserId: 0,
      userId: 0,
      userInfo: {},
      cardList: [],
      page: 1,
      type: 1,
      isFollowed: false,
      showDialog: false,
      showMessage: false,
      message: ''
    }
  },
  created() {
    const userIdStr = this.$route.params.userId
    if (userIdStr === undefined) {
      // 从"个人中心"加载
      this.loginUserId = this.$store.state.user.userInfo.userId
      this.userId = this.$store.state.user.userInfo.userId
      this.userInfo = this.$store.state.user.userInfo
      document.title = '我的主页'
    } else {
      this.userId = parseInt(userIdStr)
      this.getUserInfo1(this.userId)
    }
    this.checkRelationWrapper()
    this.getVideoList(this.page)
  },
  methods: {
    selectTab(type) {
      if (type === this.type) {
        return
      }

      this.type = type
      if (type === 1) {
        this.getVideoList(1)
      } else if (type === 2) {
        this.$router.push('/u/' + this.userId + '/status')
      } else if (type === 3) {
        this.$router.push('/u/' + this.userId + '/video')
      }
    },
    getUserInfo1(userId) {
      getUserInfo(userId).then(res => {
        if (res.code === 0) {
          this.userInfo = res.data
          document.title = this.userInfo.screenName + ' 的主页'
        } else {
          this.message = res.msg
          this.showMessage = true
        }
      }).catch(error => {
        console.error(error.message)
      })
    },
    getVideoList() {
      userRecentlyVideoList(this.userId).then(res => {
        if (res.code === 0) {
          this.$vuetify.goTo(0)

          const list = res.data
          this.cardList.splice(0, this.cardList.length)
          for (const item of list) {
            this.cardList.push(item)
          }
        } else {
          this.message = res.msg
          this.showMessage = true
        }
      }).catch(error => {
        console.error(error.message)
      })
    },
    goToVip() {
      this.$router.push('/vip')
    },
    goToStudio() {
      this.$router.push('/studio')
    },
    goToSetting() {
      this.$router.push('/user/account')
    },
    checkRelationWrapper() {
      checkRelation(this.userId).then(res => {
        if (res.code === 0) {
          this.isFollowed = res.data
        } else {
          this.message = res.msg
          this.showMessage = true
        }
      })
    },
    followUserWrapper() {
      if (this.isFollowed) {
        this.showDialog = true
        return
      }

      followUser(this.userId).then(res => {
        if (res.code === 0) {
          this.isFollowed = true
          this.message = '已关注'
          this.showMessage = true
        }
      })
    },
    unfollowUserWrapper() {
      if (!this.isFollowed) {
        return
      }

      this.showDialog = false
      unfollowUser(this.userId).then(res => {
        if (res.code === 0) {
          this.isFollowed = false
          this.message = '已取消关注'
          this.showMessage = true
        }
      })
    }
  }
}
</script>

<style>
</style>