From bec58fa7fe4fae2deac88200d8d939e12ec8a08f Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期五, 03 十月 2025 22:26:39 +0800
Subject: [PATCH] 修复小程序WXS日期显示问题并重新设计【我的】页面
---
web/src/views/carousel/index.vue | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 150 insertions(+), 29 deletions(-)
diff --git a/web/src/views/carousel/index.vue b/web/src/views/carousel/index.vue
index ded5219..648baf0 100644
--- a/web/src/views/carousel/index.vue
+++ b/web/src/views/carousel/index.vue
@@ -7,26 +7,26 @@
<!-- 鎼滅储鍖哄煙 -->
<div class="search-section">
- <el-form :model="searchForm" inline>
- <el-form-item label="鏍囬">
- <el-input
- v-model="searchForm.title"
- placeholder="璇疯緭鍏ユ爣棰樺叧閿瘝"
- clearable
- @keyup.enter="handleSearch"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleSearch">鎼滅储</el-button>
- </el-form-item>
- <el-form-item>
- <el-button type="success" @click="handleAdd">
- <el-icon><Plus /></el-icon>
- 鏂板杞挱鍥�
- </el-button>
- <el-button @click="updateSortOrders">璁剧疆椤哄簭</el-button>
- </el-form-item>
- </el-form>
+ <div class="search-toolbar">
+ <el-input
+ v-model="searchForm.title"
+ placeholder="璇疯緭鍏ユ爣棰樺叧閿瘝"
+ style="width: 200px"
+ clearable
+ />
+ <el-button type="primary" @click="handleSearch">
+ <el-icon><Search /></el-icon>
+ 鏌ヨ
+ </el-button>
+ <el-button type="primary" @click="handleSetOrder">
+ <el-icon><Sort /></el-icon>
+ 璁剧疆椤哄簭
+ </el-button>
+ <el-button type="primary" @click="handleAdd">
+ <el-icon><Plus /></el-icon>
+ 鏂板杞挱鍥�
+ </el-button>
+ </div>
</div>
<!-- 鏁版嵁琛ㄦ牸 -->
@@ -58,10 +58,10 @@
</template>
</el-table-column>
<el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
- <el-table-column label="鎿嶄綔" width="200" fixed="right">
+ <el-table-column label="鎿嶄綔" width="120" fixed="right">
<template #default="{ row }">
- <el-button type="primary" size="small" @click="handleEdit(row)">缂栬緫</el-button>
- <el-button type="danger" size="small" @click="handleDelete(row)">鍒犻櫎</el-button>
+ <el-button text size="small" @click="handleEdit(row)" :icon="Edit" class="action-btn edit-btn" title="缂栬緫"></el-button>
+ <el-button text size="small" @click="handleDelete(row)" :icon="Delete" class="action-btn delete-btn" title="鍒犻櫎"></el-button>
</template>
</el-table-column>
</el-table>
@@ -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>
@@ -193,7 +204,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Sort, Edit, Delete } from '@element-plus/icons-vue'
import { CarouselApi } from '@/api/carousel'
import { uploadFile, getMediasByTarget, saveMedia, deleteMedia } from '@/api/media'
import { MediaTargetType } from '@/constants/mediaTargetType'
@@ -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
}
@@ -650,6 +661,13 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
+ .search-toolbar {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
.table-section {
background: #fff;
padding: 20px;
@@ -661,6 +679,36 @@
margin-top: 20px;
text-align: right;
}
+}
+
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-btn {
+ padding: 8px !important;
+ margin: 0 6px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ background: transparent !important;
+ border: none !important;
+}
+
+.edit-btn {
+ color: #409eff !important;
+}
+
+.edit-btn:hover {
+ color: #337ecc !important;
+ background: rgba(64, 158, 255, 0.1) !important;
+ transform: scale(1.2);
+}
+
+.delete-btn {
+ color: #f56c6c !important;
+}
+
+.delete-btn:hover {
+ color: #dd6161 !important;
+ background: rgba(245, 108, 108, 0.1) !important;
+ transform: scale(1.2);
}
.header-actions {
@@ -692,6 +740,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