From 9f8395fab13ca4b230a0f7d62636e209745c91d4 Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期日, 28 九月 2025 14:16:18 +0800
Subject: [PATCH] feat: 完善注册流程的文件上传功能
---
web/src/views/carousel/index.vue | 94 ++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 89 insertions(+), 5 deletions(-)
diff --git a/web/src/views/carousel/index.vue b/web/src/views/carousel/index.vue
index ded5219..89c5deb 100644
--- a/web/src/views/carousel/index.vue
+++ b/web/src/views/carousel/index.vue
@@ -156,7 +156,7 @@
<!-- 宸蹭笂浼犵殑濯掍綋鍒楄〃 -->
<div v-if="mediaList.length > 0">
<h5>宸蹭笂浼犲獟浣擄細</h5>
- <el-table :data="mediaList" size="small" style="width: 100%;">
+ <el-table :data="mediaList" size="small" style="width: 100%;" v-loading="uploadingMedia">
<el-table-column prop="name" label="鏂囦欢鍚�" min-width="200" />
<el-table-column prop="mediaType" label="绫诲瀷" width="100">
<template #default="{ row }">
@@ -168,8 +168,19 @@
<div v-if="row.mediaType === 1" class="media-preview" @click="openMediaInNewTab(row.fullUrl)">
<img :src="row.fullUrl" class="preview-image clickable" />
</div>
- <div v-else-if="row.mediaType === 2" class="media-preview" @click="openMediaInNewTab(row.fullUrl)">
- <video :src="row.fullUrl" class="preview-video clickable" muted></video>
+ <div v-else-if="row.mediaType === 2" class="video-thumbnail-container" @click="openMediaInNewTab(row.fullUrl)">
+ <img v-if="row.thumbUrl || row.fullThumbUrl"
+ :src="row.thumbUrl || row.fullThumbUrl"
+ class="video-thumbnail" />
+ <div v-else class="video-placeholder">
+ <i class="el-icon-video-camera"></i>
+ <span>瑙嗛缂╃暐鍥�</span>
+ </div>
+ <div class="video-play-overlay">
+ <div class="video-play-button">
+ <i class="el-icon-video-play"></i>
+ </div>
+ </div>
</div>
</template>
</el-table-column>
@@ -419,8 +430,8 @@
ElMessage.error('鍙兘涓婁紶鍥剧墖鎴栬棰戞枃浠�!')
continue
}
- if (file.size / 1024 / 1024 > 50) {
- ElMessage.error('鏂囦欢澶у皬涓嶈兘瓒呰繃 50MB!')
+ if (file.size / 1024 / 1024 > 300) {
+ ElMessage.error('鏂囦欢澶у皬涓嶈兘瓒呰繃 300MB!')
continue
}
@@ -692,6 +703,79 @@
border-radius: 4px;
}
+.video-thumbnail-container {
+ position: relative;
+ width: 80px;
+ height: 60px;
+ cursor: pointer;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.video-thumbnail {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.video-placeholder {
+ width: 100%;
+ height: 100%;
+ background: #f0f0f0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ color: #999;
+ font-size: 10px;
+}
+
+.video-placeholder i {
+ font-size: 16px;
+ margin-bottom: 2px;
+}
+
+.video-play-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.3);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.video-thumbnail-container:hover .video-play-overlay {
+ opacity: 1;
+}
+
+.video-play-button {
+ width: 24px;
+ height: 24px;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #333;
+ transition: all 0.3s ease;
+}
+
+.video-play-button:hover {
+ background: rgba(255, 255, 255, 1);
+ transform: scale(1.1);
+}
+
+.video-play-button i {
+ font-size: 12px;
+}
+
.clickable {
cursor: pointer;
transition: opacity 0.3s;
--
Gitblit v1.8.0