|
|
@@ -1,85 +1,101 @@
|
|
|
<template>
|
|
|
- <el-row v-if="!permissionDenied" class="movie-list">
|
|
|
- <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-col :md="1">
|
|
|
- <el-avatar>
|
|
|
- <el-image :src="user.avatarUrl" />
|
|
|
- </el-avatar>
|
|
|
- </el-col>
|
|
|
- <el-col :md="23">
|
|
|
- <router-link style="text-decoration-line: none" target="_blank" :to="`/user/${user.userId}/image`">
|
|
|
- <span>{{ user.screenName }}的相册</span>
|
|
|
- </router-link>
|
|
|
- <span v-html="' '" />
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- :icon="followButton.icon"
|
|
|
- @click="followUser(user.userId)"
|
|
|
- >
|
|
|
- <span>{{ followButton.text }}</span>
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-message"
|
|
|
- @click="sendMessage(user.userId)"
|
|
|
- >
|
|
|
- <span>发消息</span>
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <br>
|
|
|
- <span>{{ data.albumName }}</span>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :md="24" class="movie-list">
|
|
|
- <div>
|
|
|
- <el-col v-for="(image, index) in dataList" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-card :body-style="{ padding: '0px' }" class="card">
|
|
|
- <div class="imgs">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="image.thumbnailUrl"
|
|
|
- @click="showImages(index)"
|
|
|
- />
|
|
|
+ <div class="image-page-wrapper">
|
|
|
+ <el-row v-if="!permissionDenied" class="content-container">
|
|
|
+ <el-row class="header-section">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card v-if="user" class="info-card-glass" :body-style="{ padding: '20px' }">
|
|
|
+ <div class="user-meta-wrapper">
|
|
|
+ <div class="user-avatar-box">
|
|
|
+ <el-avatar :size="64" :src="user.avatarUrl" class="custom-avatar shadow-soft" />
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="movie-list">
|
|
|
- <el-pagination
|
|
|
- :small="screenWidth <= 768"
|
|
|
- hide-on-single-page
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="pageSize"
|
|
|
- :current-page="currentPage"
|
|
|
- :total="totalSize"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @prev-click="handleCurrentChange"
|
|
|
- @next-click="handleCurrentChange"
|
|
|
- />
|
|
|
+ <div class="user-info-main">
|
|
|
+ <div class="top-line">
|
|
|
+ <router-link class="user-name-link" :to="`/user/${user.userId}/image`">
|
|
|
+ {{ user.screenName }}的相册
|
|
|
+ </router-link>
|
|
|
+ <div class="action-btns">
|
|
|
+ <el-button
|
|
|
+ :type="followButton.text === '关注' ? 'danger' : 'info'"
|
|
|
+ size="mini"
|
|
|
+ round
|
|
|
+ :icon="followButton.icon"
|
|
|
+ class="action-btn"
|
|
|
+ @click="followUser(user.userId)"
|
|
|
+ >
|
|
|
+ {{ followButton.text }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="default"
|
|
|
+ size="mini"
|
|
|
+ round
|
|
|
+ icon="el-icon-message"
|
|
|
+ class="action-btn message-btn"
|
|
|
+ @click="sendMessage(user.userId)"
|
|
|
+ >
|
|
|
+ 发消息
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="album-title-line">
|
|
|
+ <h1 class="album-display-name">{{ data.albumName }}</h1>
|
|
|
+ <span class="image-count-tag"><i class="el-icon-picture-outline"></i> {{ totalSize }} P</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="12" class="image-grid">
|
|
|
+ <el-col
|
|
|
+ v-for="(image, index) in dataList"
|
|
|
+ :key="image.thumbnailUrl"
|
|
|
+ :md="6" :sm="8" :xs="12"
|
|
|
+ class="grid-item"
|
|
|
+ >
|
|
|
+ <div class="image-card-item" @click="showImages(index)">
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ class="gallery-img"
|
|
|
+ :src="image.thumbnailUrl"
|
|
|
+ >
|
|
|
+ <div slot="placeholder" class="image-slot">
|
|
|
+ <i class="el-icon-loading"></i>
|
|
|
+ </div>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <div class="img-hover-mask">
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row class="pagination-section">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ hide-on-single-page
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
</el-row>
|
|
|
- </el-row>
|
|
|
- <div v-else>
|
|
|
- <permission-denied-card :text-object="textObject" />
|
|
|
+
|
|
|
+ <div v-else class="denied-wrapper">
|
|
|
+ <permission-denied-card :text-object="textObject" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+// 逻辑部分保持不变
|
|
|
import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
|
|
|
import { followUser, getUserInfo, unfollowUser } from '@/api/user'
|
|
|
import { getImageItems } from '@/api/image'
|
|
|
@@ -94,7 +110,6 @@ export default {
|
|
|
components: { PermissionDeniedCard },
|
|
|
data() {
|
|
|
return {
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
currentPage: 1,
|
|
|
pageSize: 12,
|
|
|
@@ -110,7 +125,8 @@ export default {
|
|
|
textObject: {
|
|
|
content: '相册',
|
|
|
route: '/image'
|
|
|
- }
|
|
|
+ },
|
|
|
+ data: {}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -118,12 +134,8 @@ export default {
|
|
|
this.getAlbumItemsWrapper()
|
|
|
},
|
|
|
mounted() {
|
|
|
- // 当窗口宽度改变时获取屏幕宽度
|
|
|
window.onresize = () => {
|
|
|
- return () => {
|
|
|
- window.screenWidth = document.body.clientWidth
|
|
|
- this.screenWidth = window.screenWidth
|
|
|
- }
|
|
|
+ this.screenWidth = document.body.clientWidth
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -131,15 +143,13 @@ export default {
|
|
|
this.currentPage = pageNumber
|
|
|
this.dataList = []
|
|
|
this.getAlbumItemsWrapper()
|
|
|
- // 回到顶部
|
|
|
- scrollTo(0, 0)
|
|
|
+ scrollTo({ top: 0, behavior: 'smooth' })
|
|
|
},
|
|
|
getAlbumItemsWrapper() {
|
|
|
getImageItems(this.albumId, this.currentPage).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
this.data = resp.data
|
|
|
document.title = '相册 - ' + this.data.albumName
|
|
|
-
|
|
|
const images = this.data.images
|
|
|
this.dataList = images.list
|
|
|
this.totalSize = images.totalSize
|
|
|
@@ -148,11 +158,7 @@ export default {
|
|
|
if (resp.code === 0) {
|
|
|
this.user = resp.data
|
|
|
} else {
|
|
|
- this.$notify.error({
|
|
|
- message: resp.msg,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ this.$notify.error({ message: resp.msg, type: 'warning', duration: 3000 })
|
|
|
}
|
|
|
})
|
|
|
} else if (resp.code === 2) {
|
|
|
@@ -161,11 +167,7 @@ export default {
|
|
|
this.permissionDenied = true
|
|
|
}
|
|
|
}).catch(error => {
|
|
|
- this.$notify.error({
|
|
|
- message: error.message,
|
|
|
- type: 'error',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ this.$notify.error({ message: error.message, type: 'error', duration: 3000 })
|
|
|
})
|
|
|
},
|
|
|
followUser(userId) {
|
|
|
@@ -185,15 +187,9 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- sendMessage(userId) {
|
|
|
- console.log('发送消息')
|
|
|
- },
|
|
|
+ sendMessage(userId) { console.log('发送消息') },
|
|
|
showImages(index) {
|
|
|
- const imageUrls = []
|
|
|
- for (const i of this.dataList) {
|
|
|
- imageUrls.push(i.originalUrl)
|
|
|
- }
|
|
|
-
|
|
|
+ const imageUrls = this.dataList.map(i => i.originalUrl)
|
|
|
this.$viewerApi({
|
|
|
images: imageUrls,
|
|
|
options: {
|
|
|
@@ -209,37 +205,192 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/*处于手机屏幕时*/
|
|
|
-@media screen and (max-width: 768px){
|
|
|
- .movie-list {
|
|
|
- padding-top: 8px;
|
|
|
- padding-left: 0.5%;
|
|
|
- padding-right: 0.5%;
|
|
|
- }
|
|
|
+.image-page-wrapper {
|
|
|
+ background-color: #f6f8fa;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-bottom: 40px;
|
|
|
+}
|
|
|
|
|
|
- .coverImg {
|
|
|
- height: 120px !important;
|
|
|
- }
|
|
|
+.content-container {
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px 6%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 头部卡片样式 */
|
|
|
+.header-section {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card-glass {
|
|
|
+ border: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.user-meta-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-name-link {
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #409EFF;
|
|
|
+ transition: color 0.3s;
|
|
|
}
|
|
|
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
+.user-name-link:hover {
|
|
|
+ color: #66b1ff;
|
|
|
}
|
|
|
|
|
|
-.coverImg {
|
|
|
+.top-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
width: 100%;
|
|
|
- height: 320px;
|
|
|
- display: block;
|
|
|
}
|
|
|
|
|
|
-.card {
|
|
|
- margin-bottom: 20px;
|
|
|
- transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
|
|
|
+.user-info-main {
|
|
|
+ flex-grow: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.album-title-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.album-display-name {
|
|
|
+ font-size: 22px;
|
|
|
+ margin: 0;
|
|
|
+ color: #303133;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.image-count-tag {
|
|
|
+ background: #f0f2f5;
|
|
|
+ color: #909399;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btns {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
|
|
|
-.imgs {
|
|
|
+/* 图片网格样式 */
|
|
|
+.image-grid {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card-item {
|
|
|
position: relative;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
|
+ aspect-ratio: 3 / 4; /* 强制比例统一，像相册集一样整齐 */
|
|
|
+}
|
|
|
+
|
|
|
+.image-card-item:hover {
|
|
|
+ transform: translateY(-6px);
|
|
|
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.gallery-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ transition: transform 0.6s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card-item:hover .gallery-img {
|
|
|
+ transform: scale(1.08);
|
|
|
+}
|
|
|
+
|
|
|
+.img-hover-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ color: white;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card-item:hover .img-hover-mask {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.image-slot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f7fa;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分页样式 */
|
|
|
+.pagination-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端适配 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .content-container {
|
|
|
+ padding: 10px 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-meta-wrapper {
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-line {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .album-title-line {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .album-display-name {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-card-item {
|
|
|
+ aspect-ratio: 1 / 1; /* 手机端使用正方形更紧凑 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-avatar {
|
|
|
+ width: 50px !important;
|
|
|
+ height: 50px !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
