更新 ShortVideo.vue 页面和接口

src/api/vod.js

@@ -1,6 +1,7 @@
 import { get, post } from '@/utils/request'
 
 const videoApi = {
+  shortVideo: '/api/content/video/short',
   videoPostApi: '/api/content/post/video',
   videoFileApi: '/api/content/post/video/publish/file',
   updateVideoScopeApi: '/api/content/post/video/update/scope',
@@ -9,7 +10,6 @@ const videoApi = {
   updateVideoFileApi: '/api/content/post/video/update/file',
   videoCategoryApi: '/api/content/video/categories',
   categoryVideoApi: '/api/content/video/category',
-  categoryShortVideoApi: '/api/content/video/short',
   userVideoPostApi: '/api/content/video/user',
   tagVideoPostApi: '/api/content/video/tag',
   videoInfoApi: '/api/content/video/detail',
@@ -25,6 +25,14 @@ const videoApi = {
   vodAdminApi: '/api/admin/content/vod'
 }
 
+export function getShortVideo() {
+  return get(videoApi.shortVideo)
+}
+
+export function getRecentShortVideos(queryParams) {
+  return get(videoApi.shortVideo + '/recent', queryParams)
+}
+
 // *********************************************************************************************************************
 // 添加视频文件
 export function addVideoFile(payload) {
@@ -85,10 +93,6 @@ export function categoryVideos(categoryId, page) {
   return get(videoApi.categoryVideoApi + '?categoryId=' + categoryId + '&page=' + page)
 }
 
-export function getShortVideo() {
-  return get(videoApi.categoryShortVideoApi)
-}
-
 // 获取用户视频
 export function getUserVideos(userId, page) {
   return get(videoApi.userVideoPostApi + '?userId=' + userId + '&page=' + page)

src/views/home/ShortVideo.vue

@@ -17,8 +17,8 @@
         ref="videoPlayer"
         class="native-video"
         :src="currentVideoUrl"
-        :poster="video.coverUrl"
         loop
+        autoplay
         preload="auto"
         playsinline
         webkit-playsinline
@@ -74,7 +74,15 @@
             <div class="recent-works">
               <p class="label">近期作品</p>
               <div class="thumb-list">
-                <div v-for="{item, index} in userWorks" :key="index" class="work-thumb">
+                <!-- 正确的 Vue 2 循环语法是 (item, index)，而不是 {item, index} -->
+                <div
+                  v-for="(item, index) in userWorks"
+                  :key="item.videoId || index"
+                  class="work-thumb"
+                  :style="{ backgroundImage: `url(${item.coverUrl})` }"
+                  @click="playThisWork(item)"
+                >
+                  <!-- 播放小图标，通过样式居中 -->
                   <i class="el-icon-video-play" />
                 </div>
               </div>
@@ -117,8 +125,9 @@
 </template>
 
 <script>
-import { videoUrl, getShortVideo } from '@/api/vod'
+import { videoUrl, getShortVideo, getRecentShortVideos } from '@/api/vod'
 import { getUserInfo } from '@/api/user'
+import { collectItem } from '@/api/collect'
 
 export default {
   name: 'ShortVideo',
@@ -180,30 +189,23 @@ export default {
       this.showUserCard = true
       // 2. 如果已经加载过该用户的作品，且 ID 没变，可以不重复加载
       // 这里假设 user 对象里有 userId
-      if (this.userWorks.length > 0 && this.userWorks[0].authorId === this.user.userId) {
+      if (this.userWorks.length > 0 && this.userWorks[0].user.userId === this.user.userId) {
         return
       }
-
-      try {
-        // 这里的 getWorksByUserId 是你定义的 API 方法
-        // const res = await getWorksByUserId(this.user.userId);
-        // --- 模拟 API 请求延迟 ---
-        await new Promise(resolve => setTimeout(resolve, 800))
-        this.userWorks = [
-          { id: 1, coverUrl: 'https://via.placeholder.com/150x200', playNum: 12500, authorId: this.user.userId },
-          { id: 2, coverUrl: 'https://via.placeholder.com/150x200', playNum: 8800, authorId: this.user.userId },
-          { id: 3, coverUrl: 'https://via.placeholder.com/150x200', playNum: 21000, authorId: this.user.userId }
-        ]
-        console.log('获取作品')
-      } catch (error) {
-        this.$message.error('作品加载失败')
-      }
+      const queryParams = {}
+      queryParams.userIdStr = this.video.userId
+      getRecentShortVideos(queryParams).then(resp => {
+        if (resp.code === 0) {
+          this.userWorks = resp.data
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      })
     },
     // 点击作品小图的处理
     playThisWork(work) {
       this.showUserCard = false
-      this.$message.info(`正在切换至视频: ${work.id}`)
-      // 这里可以触发你之前定义的切换视频 API
+      this.prepareNewVideo(work.videoId)
     },
     // 模拟跳转完整主页
     goToFullProfile() {
@@ -220,7 +222,20 @@ export default {
         if (err.name !== 'NavigationDuplicated') console.error(err)
       })
     },
-    handleLike() { this.isLiked = !this.isLiked },
+    handleLike() {
+      const jsonData = {}
+      jsonData.albumId = 1
+      jsonData.postId = this.video.videoId
+      jsonData.action = !this.isLiked ? 1 : 2
+      collectItem(jsonData).then(resp => {
+        if (resp.code === 0) {
+          this.isLiked = !this.isLiked
+          this.$message.success(resp.msg)
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      })
+    },
     handleShare() { this.$message.success('链接已复制') },
     toggleComments() { this.$message.info('评论暂未开启') },
     handleFollowerUser() {
@@ -564,4 +579,43 @@ export default {
   text-decoration: underline;
   opacity: 0.8;
 }
+
+.recent-works .thumb-list {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  overflow-x: auto; /* 如果作品多的话，支持横向滚动 */
+  padding-bottom: 4px;
+}
+
+/* 隐藏滚动条（可选，保持界面整洁） */
+.recent-works .thumb-list::-webkit-scrollbar {
+  display: none;
+}
+
+.work-thumb {
+  flex: 0 0 30%; /* 固定每个缩略图占宽度的 30%，防止被挤压 */
+  aspect-ratio: 3/4;
+  background-color: rgba(255, 255, 255, 0.1);
+  background-size: cover;       /* 核心：让封面图撑满容器并居中裁剪 */
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: transform 0.2s, filter 0.2s;
+}
+
+.work-thumb:hover {
+  transform: scale(1.02);
+  filter: brightness(1.1); /* 悬停时稍微变亮 */
+}
+
+.work-thumb .el-icon-video-play {
+  font-size: 20px;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); /* 给白色图标加阴影，防止遇到亮色封面时看不清 */
+}
 </style>