|
|
@@ -0,0 +1,369 @@
|
|
|
+<template>
|
|
|
+ <div class="user-home-container">
|
|
|
+ <div class="user-header-wrapper">
|
|
|
+ <el-card v-if="user" class="user-info-card" :body-style="{ padding: '20px' }">
|
|
|
+ <div class="info-content-top">
|
|
|
+ <div class="avatar-section">
|
|
|
+ <el-avatar :size="90" :src="user.avatarUrl" class="user-avatar-main" />
|
|
|
+ <el-tag
|
|
|
+ v-if="user.vip"
|
|
|
+ size="mini"
|
|
|
+ effect="dark"
|
|
|
+ type="warning"
|
|
|
+ class="vip-tag-overlay"
|
|
|
+ >
|
|
|
+ VIP
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="action-section">
|
|
|
+ <el-button
|
|
|
+ :type="followButton.text === '已关注' ? 'info' : 'danger'"
|
|
|
+ round
|
|
|
+ size="medium"
|
|
|
+ :icon="followButton.icon"
|
|
|
+ @click="followUser(user.userId)"
|
|
|
+ >
|
|
|
+ {{ followButton.text }}
|
|
|
+ </el-button>
|
|
|
+ <el-button icon="el-icon-message" round size="medium" @click="sendMessage(user.userId)">发消息</el-button>
|
|
|
+
|
|
|
+ <el-dropdown trigger="click" class="more-btn">
|
|
|
+ <el-button icon="el-icon-more" circle plain size="medium"></el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item v-if="user.biliUserId">
|
|
|
+ <a :href="'https://space.bilibili.com/' + user.biliUserId" target="_blank" class="no-link-style">访问B站空间</a>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item divider>举报用户</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-text-bottom">
|
|
|
+ <h2 class="user-name">
|
|
|
+ {{ user.screenName }}
|
|
|
+ <el-tag v-if="user.vip" size="mini" type="warning" effect="plain" class="name-vip-tag">会员</el-tag>
|
|
|
+ <el-tag v-if="user.biliUserId" size="mini" effect="plain" class="bili-tag">B站认证</el-tag>
|
|
|
+ </h2>
|
|
|
+ <p class="user-signature">{{ user.signature || '这个人很心大，居然没有写签名~' }}</p>
|
|
|
+
|
|
|
+ <div class="user-stats">
|
|
|
+ <router-link :to="`/user/${user.userId}/following`" class="stat-item">
|
|
|
+ <span class="stat-value">{{ user.following }}</span>
|
|
|
+ <span class="stat-label">关注</span>
|
|
|
+ </router-link>
|
|
|
+ <div class="stat-divider"></div>
|
|
|
+ <router-link :to="`/user/${user.userId}/follower`" class="stat-item">
|
|
|
+ <span class="stat-value">{{ user.follower }}</span>
|
|
|
+ <span class="stat-label">粉丝</span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="user-content-section">
|
|
|
+ <el-tabs v-if="userContentData" v-model="activeName" class="custom-tabs" @tab-click="tabClick">
|
|
|
+ <el-tab-pane name="video">
|
|
|
+ <span slot="label">视频 <span class="tab-count">{{ userContentData.videoCount }}</span></span>
|
|
|
+ <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-col v-for="(video, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
+ <video-card :video="video" class="content-card-hover" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane name="image">
|
|
|
+ <span slot="label">图片 <span class="tab-count">{{ userContentData.imageCount }}</span></span>
|
|
|
+ <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-col v-for="(album, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
+ <image-album-card :image-album="album" class="content-card-hover" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane name="album">
|
|
|
+ <span slot="label">收藏夹 <span class="tab-count">{{ userContentData.albumCount }}</span></span>
|
|
|
+ <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-col v-for="(item, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
+ <el-card :body-style="{ padding: '0px' }" class="playlist-card content-card-hover">
|
|
|
+ <router-link :to="`/playlist/${item.albumId}`" class="no-link-style">
|
|
|
+ <div class="playlist-cover-wrapper">
|
|
|
+ <el-image lazy fit="cover" :src="item.coverUrl" class="playlist-img" />
|
|
|
+ <div class="playlist-mask">
|
|
|
+ <i class="el-icon-collection"></i> <span>{{ item.total }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="playlist-info">
|
|
|
+ <span class="playlist-title">{{ item.albumName }}</span>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <el-empty v-if="showEmpty && !loading" :image-size="200" description="该分类下空空如也" />
|
|
|
+
|
|
|
+ <div class="pagination-wrapper" v-if="totalSize > pageSize">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VideoCard from '@/components/card/VideoCard'
|
|
|
+import ImageAlbumCard from '@/components/card/ImageAlbumCard'
|
|
|
+import { getUserInfo, checkRelation, followUser, unfollowUser } from '@/api/user'
|
|
|
+import { getUserContentData, getUserVideos } from '@/api/video'
|
|
|
+import { getAlbumImage1 } from '@/api/image'
|
|
|
+import { getUserPlaylist } from '@/api/collect'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'UserHome',
|
|
|
+ components: { VideoCard, ImageAlbumCard },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: null,
|
|
|
+ userId: null,
|
|
|
+ followButton: { icon: 'el-icon-plus', text: '关注' },
|
|
|
+ activeName: 'video',
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ userContentData: null,
|
|
|
+ loading: false,
|
|
|
+ showEmpty: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route.query': {
|
|
|
+ handler() {
|
|
|
+ this.loadDataFromRoute();
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.userId = this.$route.params.id;
|
|
|
+ this.initUserContext();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initUserContext() {
|
|
|
+ Promise.all([
|
|
|
+ getUserInfo(this.userId),
|
|
|
+ checkRelation(this.userId),
|
|
|
+ getUserContentData(this.userId)
|
|
|
+ ]).then(([info, relation, content]) => {
|
|
|
+ if (info.code === 0) {
|
|
|
+ this.user = info.data;
|
|
|
+ this.loadDataFromRoute();
|
|
|
+ }
|
|
|
+ if (relation.code === 0 && relation.data) {
|
|
|
+ this.followButton = { icon: 'el-icon-check', text: '已关注' };
|
|
|
+ }
|
|
|
+ if (content.code === 0) {
|
|
|
+ this.userContentData = content.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadDataFromRoute() {
|
|
|
+ const query = this.$route.query;
|
|
|
+ this.activeName = query.tab || 'video';
|
|
|
+ this.currentPage = query.page ? parseInt(query.page) : 1;
|
|
|
+ this.updatePageTitle();
|
|
|
+ this.fetchContentList();
|
|
|
+ },
|
|
|
+ syncStateToURL() {
|
|
|
+ this.$router.push({
|
|
|
+ path: this.$route.path,
|
|
|
+ query: { tab: this.activeName, page: this.currentPage }
|
|
|
+ }).catch(err => {
|
|
|
+ if (err.name !== 'NavigationDuplicated') throw err;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fetchContentList() {
|
|
|
+ this.loading = true;
|
|
|
+ this.dataList = [];
|
|
|
+ this.showEmpty = false;
|
|
|
+ let apiCall;
|
|
|
+ if (this.activeName === 'video') {
|
|
|
+ apiCall = getUserVideos(this.userId, this.currentPage);
|
|
|
+ } else if (this.activeName === 'image') {
|
|
|
+ apiCall = getAlbumImage1(this.currentPage, this.userId);
|
|
|
+ } else if (this.activeName === 'album') {
|
|
|
+ apiCall = getUserPlaylist({ userId: this.userId, pn: this.currentPage });
|
|
|
+ }
|
|
|
+ apiCall.then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.dataList = resp.data.list;
|
|
|
+ this.totalSize = resp.data.totalSize;
|
|
|
+ this.showEmpty = this.dataList.length === 0;
|
|
|
+ }
|
|
|
+ }).finally(() => { this.loading = false; });
|
|
|
+ },
|
|
|
+ tabClick(tab) {
|
|
|
+ this.activeName = tab.name;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.syncStateToURL();
|
|
|
+ },
|
|
|
+ handleCurrentChange(page) {
|
|
|
+ this.currentPage = page;
|
|
|
+ this.syncStateToURL();
|
|
|
+ window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
+ },
|
|
|
+ updatePageTitle() {
|
|
|
+ if (!this.user) return;
|
|
|
+ const suffix = { video: '的视频', image: '的图片', album: '的收藏夹' };
|
|
|
+ document.title = `${this.user.screenName}${suffix[this.activeName] || '的主页'}`;
|
|
|
+ },
|
|
|
+ followUser(userId) {
|
|
|
+ const isFollowing = this.followButton.text === '已关注';
|
|
|
+ const api = isFollowing ? unfollowUser : followUser;
|
|
|
+ api(userId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.followButton = isFollowing ? { icon: 'el-icon-plus', text: '关注' } : { icon: 'el-icon-check', text: '已关注' };
|
|
|
+ this.$message.success(isFollowing ? '已取消关注' : '关注成功');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sendMessage() { this.$message.info('私信功能暂未开放'); }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.user-home-container {
|
|
|
+ background-color: #f4f5f7;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px 0 50px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.user-header-wrapper {
|
|
|
+ max-width: 1100px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-info-card {
|
|
|
+ border-radius: 12px;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.info-content-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-section {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.user-avatar-main {
|
|
|
+ border: 2px solid #fff;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 会员 Tag 覆盖在头像上的样式 */
|
|
|
+.vip-tag-overlay {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ transform: scale(0.9);
|
|
|
+}
|
|
|
+
|
|
|
+.name-vip-tag {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-weight: normal;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.action-section {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-name {
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ font-size: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-signature {
|
|
|
+ color: #9499a0;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-stats {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ text-decoration: none;
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value { font-weight: bold; color: #18191c; }
|
|
|
+.stat-label { color: #9499a0; }
|
|
|
+.stat-divider { width: 1px; height: 14px; background: #e3e5e7; }
|
|
|
+
|
|
|
+.user-content-section {
|
|
|
+ max-width: 1100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tabs /deep/ .el-tabs__header {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-count { font-size: 12px; color: #9499a0; margin-left: 4px; }
|
|
|
+.content-card-hover { transition: all 0.3s ease; margin-bottom: 20px; }
|
|
|
+.content-card-hover:hover { transform: translateY(-5px); }
|
|
|
+.no-link-style { text-decoration: none; color: inherit; }
|
|
|
+
|
|
|
+.playlist-card { border-radius: 8px; overflow: hidden; }
|
|
|
+.playlist-cover-wrapper { position: relative; aspect-ratio: 16/9; }
|
|
|
+.playlist-img { width: 100%; height: 100%; }
|
|
|
+.playlist-mask { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; padding: 2px 8px; font-size: 12px; border-top-left-radius: 8px; }
|
|
|
+.playlist-info { padding: 10px; text-align: left; }
|
|
|
+.playlist-title { font-size: 14px; color: #18191c; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+.pagination-wrapper { margin-top: 30px; display: flex; justify-content: center; }
|
|
|
+
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .user-home-container { padding-top: 10px; }
|
|
|
+ .user-avatar-main { width: 70px !important; height: 70px !important; }
|
|
|
+ .user-name { font-size: 20px; }
|
|
|
+ .vip-tag-overlay { right: -5px; bottom: -2px; }
|
|
|
+ .action-section .el-button { padding: 8px 12px; font-size: 12px; }
|
|
|
+ .more-btn { display: none; }
|
|
|
+}
|
|
|
+</style>
|
