|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <v-container fill-height fluid style="padding: 0px;">
|
|
|
|
|
|
|
+ <!--<v-container fill-height fluid style="padding: 0px;">
|
|
|
<v-row>
|
|
<v-row>
|
|
|
<v-col style="padding: 0px;">
|
|
<v-col style="padding: 0px;">
|
|
|
<v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
|
|
<v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
|
|
|
</v-col>
|
|
</v-col>
|
|
|
</v-row>
|
|
</v-row>
|
|
|
- </v-container>
|
|
|
|
|
|
|
+ </v-container>-->
|
|
|
<v-container fill-height>
|
|
<v-container fill-height>
|
|
|
<v-row align="center">
|
|
<v-row align="center">
|
|
|
<v-col
|
|
<v-col
|
|
@@ -18,39 +18,47 @@
|
|
|
</v-avatar>
|
|
</v-avatar>
|
|
|
<h2 style="margin-top: 20px;margin-left: 100px;">
|
|
<h2 style="margin-top: 20px;margin-left: 100px;">
|
|
|
{{ userInfo.username }}
|
|
{{ userInfo.username }}
|
|
|
- <v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">
|
|
|
|
|
- VIP
|
|
|
|
|
|
|
+ <v-chip color="yellow" @click="goToVip()">
|
|
|
|
|
+ <!--<v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">-->
|
|
|
|
|
+ 小会员
|
|
|
</v-chip>
|
|
</v-chip>
|
|
|
</h2>
|
|
</h2>
|
|
|
</v-col>
|
|
</v-col>
|
|
|
- <!--<v-col
|
|
|
|
|
- v-if="this.$store.state.user.userInfo && this.$store.state.user.userInfo.userId === id"
|
|
|
|
|
|
|
+ <v-col
|
|
|
|
|
+ v-if="userInfo && userInfo.userId !== userId"
|
|
|
cols="6"
|
|
cols="6"
|
|
|
md="4"
|
|
md="4"
|
|
|
class="hidden-sm-and-down ml-0 pl-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-col>-->
|
|
|
|
|
|
|
+ <!--<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-col
|
|
|
- v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.userId !== id"
|
|
|
|
|
|
|
+ v-if="userInfo || userInfo.userId !== userId"
|
|
|
cols="6"
|
|
cols="6"
|
|
|
md="4"
|
|
md="4"
|
|
|
>
|
|
>
|
|
|
- 粉丝数: {{ userInfo.followerCount }} <v-btn color="primary">关注他</v-btn>
|
|
|
|
|
|
|
+ 关注数: {{ userInfo.followerCount }}
|
|
|
|
|
+ 粉丝数: {{ userInfo.followerCount }}
|
|
|
</v-col>
|
|
</v-col>
|
|
|
</v-row>
|
|
</v-row>
|
|
|
-
|
|
|
|
|
<v-tabs>
|
|
<v-tabs>
|
|
|
- <v-tab @click="setType(0)">首页</v-tab>
|
|
|
|
|
<v-tab @click="setType(0)">视频</v-tab>
|
|
<v-tab @click="setType(0)">视频</v-tab>
|
|
|
- <v-tab @click="setType(2)">讨论</v-tab>
|
|
|
|
|
- <v-tab @click="setType(4)">简介</v-tab>
|
|
|
|
|
|
|
+ <v-tab @click="setType(1)">状态</v-tab>
|
|
|
|
|
+ <v-tab @click="setType(2)">评论</v-tab>
|
|
|
</v-tabs>
|
|
</v-tabs>
|
|
|
</v-container>
|
|
</v-container>
|
|
|
<v-divider />
|
|
<v-divider />
|
|
|
<v-container fill-height>
|
|
<v-container fill-height>
|
|
|
<div id="top" />
|
|
<div id="top" />
|
|
|
- <div v-if="type == 4">
|
|
|
|
|
|
|
+ <div v-if="type === 4">
|
|
|
<v-row>
|
|
<v-row>
|
|
|
<v-col>
|
|
<v-col>
|
|
|
用户名: {{ userInfo.username }}
|
|
用户名: {{ userInfo.username }}
|
|
@@ -82,7 +90,7 @@
|
|
|
</v-col>
|
|
</v-col>
|
|
|
</v-row>
|
|
</v-row>
|
|
|
</div>
|
|
</div>
|
|
|
- <v-row v-if="type !== 4">
|
|
|
|
|
|
|
+ <v-row v-if="type === 0">
|
|
|
<v-col
|
|
<v-col
|
|
|
v-for="item in videoList"
|
|
v-for="item in videoList"
|
|
|
:key="item.id"
|
|
:key="item.id"
|
|
@@ -93,7 +101,6 @@
|
|
|
</v-row>
|
|
</v-row>
|
|
|
<v-row justify="center">
|
|
<v-row justify="center">
|
|
|
<v-pagination
|
|
<v-pagination
|
|
|
-
|
|
|
|
|
v-model="page"
|
|
v-model="page"
|
|
|
:length="length"
|
|
:length="length"
|
|
|
@input="pageChange"
|
|
@input="pageChange"
|
|
@@ -104,9 +111,11 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { userVideoList } from '@/api/media/video'
|
|
|
import Power from '@/utils/check-power.vue'
|
|
import Power from '@/utils/check-power.vue'
|
|
|
import VideoList from '@/components/player/video-list.vue'
|
|
import VideoList from '@/components/player/video-list.vue'
|
|
|
import TimeUtil from '@/utils/time-util.vue'
|
|
import TimeUtil from '@/utils/time-util.vue'
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
name: 'UserHome',
|
|
name: 'UserHome',
|
|
|
components: {
|
|
components: {
|
|
@@ -116,7 +125,7 @@ export default {
|
|
|
return {
|
|
return {
|
|
|
TimeUtil,
|
|
TimeUtil,
|
|
|
Power,
|
|
Power,
|
|
|
- id: 0,
|
|
|
|
|
|
|
+ userId: 0,
|
|
|
userInfo: {},
|
|
userInfo: {},
|
|
|
videoList: [],
|
|
videoList: [],
|
|
|
page: 1,
|
|
page: 1,
|
|
@@ -127,40 +136,62 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
- this.id = this.$route.params.id
|
|
|
|
|
- this.id = parseInt(this.$route.params.id)
|
|
|
|
|
|
|
+ this.userId = parseInt(this.$route.params.userId)
|
|
|
this.getUserInfo()
|
|
this.getUserInfo()
|
|
|
- this.geVideoList()
|
|
|
|
|
|
|
+ this.getVideoList()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
getUserInfo() {
|
|
getUserInfo() {
|
|
|
- // console.log(this.$store.state.user.userInfo)
|
|
|
|
|
- // if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.userId === this.id) {
|
|
|
|
|
- // this.userInfo = this.$store.state.user.userInfo
|
|
|
|
|
- // document.title = this.userInfo.username
|
|
|
|
|
- // return
|
|
|
|
|
- // }
|
|
|
|
|
- fetch(`/api/user/info/${this.id}`, {
|
|
|
|
|
- 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')
|
|
|
|
|
|
|
+ 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)
|
|
|
})
|
|
})
|
|
|
- .catch(e => {
|
|
|
|
|
- return null
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- geVideoList() {
|
|
|
|
|
- fetch(`/api/article/user/list/${this.id}?page=${this.page}&limit=${this.size}&type=${this.type}`, {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /* fetch(`/api/article/user/list/${this.userId}?page=${this.page}&limit=${this.size}&type=${this.type}`, {
|
|
|
headers: {
|
|
headers: {
|
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
|
'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
|
|
'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
|
|
@@ -176,23 +207,35 @@ export default {
|
|
|
})
|
|
})
|
|
|
.catch(e => {
|
|
.catch(e => {
|
|
|
return null
|
|
return null
|
|
|
- })
|
|
|
|
|
|
|
+ })*/
|
|
|
|
|
+ },
|
|
|
|
|
+ getCommentList() {
|
|
|
|
|
+ console.log('获取评论列表')
|
|
|
},
|
|
},
|
|
|
pageChange(page) {
|
|
pageChange(page) {
|
|
|
this.page = page
|
|
this.page = page
|
|
|
- this.geVideoList(this.type)
|
|
|
|
|
|
|
+ this.getVideoList(this.type)
|
|
|
this.$vuetify.goTo(0)
|
|
this.$vuetify.goTo(0)
|
|
|
},
|
|
},
|
|
|
setType(type) {
|
|
setType(type) {
|
|
|
|
|
+ if (type === this.type) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
this.type = type
|
|
this.type = type
|
|
|
this.page = 1
|
|
this.page = 1
|
|
|
- if (type === 4) {
|
|
|
|
|
- return
|
|
|
|
|
|
|
+ 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)
|
|
|
}
|
|
}
|
|
|
- this.geVideoList()
|
|
|
|
|
- this.$vuetify.goTo(0)
|
|
|
|
|
},
|
|
},
|
|
|
- goTOVIP() {
|
|
|
|
|
|
|
+ goToVip() {
|
|
|
this.$router.push('/vip')
|
|
this.$router.push('/vip')
|
|
|
},
|
|
},
|
|
|
goToStudio() {
|
|
goToStudio() {
|