|
|
@@ -0,0 +1,185 @@
|
|
|
+<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-avatar>
|
|
|
+ <el-image :src="user.avatarUrl" />
|
|
|
+ </el-avatar>
|
|
|
+ <span>{{ user.screenName }}</span>
|
|
|
+ <span v-html="' '" />
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ >
|
|
|
+ <span>关注</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-message"
|
|
|
+ >
|
|
|
+ <span>发消息</span>
|
|
|
+ </el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <span v-if="user.intro !== null">{{user.intro}}</span>
|
|
|
+ <span v-if="user.intro === undefined || user.intro === null">此用户没有签名</span>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <router-link target="_blank" :to="`/user/` + user.userId + '/following'">
|
|
|
+ <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
|
|
|
+ </router-link>
|
|
|
+ <span v-html="' '" />
|
|
|
+ <router-link target="_blank" :to="`/user/` + user.userId + '/follower'">
|
|
|
+ <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
|
|
|
+ </router-link>
|
|
|
+ </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 label="主页" name="home">
|
|
|
+ <div v-if="activeName === 'home'">
|
|
|
+ <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 label="状态" name="status">
|
|
|
+ <div v-if="activeName === 'status'">
|
|
|
+ <status-card />
|
|
|
+ </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="totalPages"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import StatusCard from '@/components/card/StatusCard'
|
|
|
+import VideoCard from '@/components/card/VideoCard'
|
|
|
+import { getUserInfo } from "@/api/user";
|
|
|
+import { userVideoList } from "@/api/video";
|
|
|
+import { userStatus } from "@/api/status";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Home',
|
|
|
+ components: { StatusCard, VideoCard },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ user: null,
|
|
|
+ userId: null,
|
|
|
+ activeName: 'home',
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalPages: 0,
|
|
|
+ videoList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const path = this.$route.path
|
|
|
+ this.userId = this.$route.params.id
|
|
|
+ //this.activeName = path.split('/user/' + this.userId + '/')[1]
|
|
|
+ getUserInfo(this.userId).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.user = res.data
|
|
|
+ document.title = this.user.screenName + '的个人主页'
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.userVideoListWrapper(1, this.userId)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 当窗口宽度改变时获取屏幕宽度
|
|
|
+ window.onresize = () => {
|
|
|
+ return () => {
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
+ this.screenWidth = window.screenWidth
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(pageNumber) {
|
|
|
+ this.currentPage = pageNumber
|
|
|
+ this.$router.push({
|
|
|
+ path: '/user/' + this.userId + '?pageNumber=' + pageNumber + '&lastId=' + this.lastId,
|
|
|
+ query: {
|
|
|
+ pageNumber: this.currentPage,
|
|
|
+ lastId: this.lastId
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.videoPageWrapper(this.currentPage, this.lastId)
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ tabClick(tab) {
|
|
|
+ const tabName = tab.name
|
|
|
+ if (tabName === 'home') {
|
|
|
+ console.log('获取主页')
|
|
|
+ } else if (tabName === 'status') {
|
|
|
+ console.log('获取状态')
|
|
|
+ userStatus(this.userId, 1).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ } else if (tabName === 'video') {
|
|
|
+ console.log('获取视频')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ userVideoListWrapper(pageNumber, userId) {
|
|
|
+ userVideoList(pageNumber, userId).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const resData = res.data
|
|
|
+ this.videoList = resData.list
|
|
|
+ this.totalPages = resData.totalPages
|
|
|
+ this.lastId = resData.lastId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
