视频起步

src/views/VideoView.vue

@@ -25,7 +25,8 @@
 
     <!-- 视频列表 -->
     <div class="video-list" v-loading="loading">
-      <el-row :gutter="20">
+      <el-empty v-if="!videoList.length" description="暂无视频" />
+      <el-row v-else :gutter="20">
         <el-col
           v-for="video in videoList"
           :key="video.id"
@@ -36,8 +37,11 @@
         >
           <div class="video-card">
             <div class="thumbnail" @click="playVideo(video)">
-              <img :src="video.coverUrl" :alt="video.title">
+              <img 
-              <span class="duration">{{ formatDuration(video.duration) }}</span>
+                :src="video.coverUrl || '/default-video-cover.png'" 
+                :alt="video.title"
+              >
+              <span class="duration">{{ formatDuration(video.duration || 0) }}</span>
             </div>
             <div class="video-info">
               <h3>{{ video.title }}</h3>
@@ -45,11 +49,11 @@
               <div class="meta">
                 <span>
                   <el-icon><View /></el-icon>
-                  {{ formatNumber(video.viewCount) }}
+                  {{ formatNumber(video.viewCount || 0) }}
                 </span>
                 <span>
                   <el-icon><Star /></el-icon>
-                  {{ formatNumber(video.likeCount) }}
+                  {{ formatNumber(video.likeCount || 0) }}
                 </span>
                 <span>{{ formatDate(video.createdTime) }}</span>
               </div>
@@ -80,8 +84,8 @@
         </el-col>
       </el-row>
 
-      <!-- 分页 -->
+      <!-- 分页器 -->
-      <div class="pagination">
+      <div class="pagination" v-if="total > 0">
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
@@ -220,10 +224,10 @@ const getVideoList = async () => {
       pageSize: pageSize.value,
       keyword: searchKeyword.value
     })
-    console.log(res)
+    // 更新视频列表和分页信息
-    //{records: Array(1), total: 0, size: 12, current: 1, pages: 0}
+    videoList.value = res.records
-    videoList.value = res
+    total.value = res.total
-    // total.value = res.total
+    currentPage.value = res.current
   } catch (error) {
     console.error('Failed to load videos:', error)
     ElMessage.error('加载视频列表失败')
@@ -409,6 +413,7 @@ onMounted(() => {
   transition: all 0.3s;
   margin-bottom: 20px;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  position: relative;
 }
 
 .video-card:hover {
@@ -428,7 +433,9 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
+  background-color: #f5f7fa;
+  padding: 10px;
 }
 
 .duration {
@@ -485,4 +492,20 @@ onMounted(() => {
 .meta .el-icon {
   font-size: 16px;
 }
+
+.el-empty {
+  padding: 40px 0;
+}
+
+.video-card .actions {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.video-card:hover .actions {
+  opacity: 1;
+}
 </style>