|
|
@@ -24,21 +24,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="detail.achievementList">
|
|
|
- <div class="result-section" v-for="(item, index) in detail.achievementList" :key="index">
|
|
|
+ <div class="result-section" v-for="(items, resultIndex) in detail.achievementList" :key="resultIndex">
|
|
|
<div class="result-title">成果展示</div>
|
|
|
<div class="detail-list">
|
|
|
<div class="detail-item">
|
|
|
- <div class="detail-label">更新时间 : {{ formatTime(item.updatedTime) }}</div>
|
|
|
+ <div class="detail-label">更新时间 : {{ formatTime(items.updatedTime) }}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
- <div class="detail-label">成果描述 : {{ item.achievementDesc || "-" }}</div>
|
|
|
+ <div class="detail-label">成果描述 : {{ items.achievementDesc || "-" }}</div>
|
|
|
</div>
|
|
|
- <div class="detail-item" v-if="mediaList.length > 0">
|
|
|
+ <div class="detail-item" v-if="items.mediaUrlList && items.mediaUrlList.length > 0">
|
|
|
<div class="detail-label">图片与视频 :</div>
|
|
|
<div class="media-grid">
|
|
|
- <template v-for="(item, index) in mediaList" :key="index">
|
|
|
- <div v-if="item.type === 'video'" class="media-item video-item" @click="playVideo(item.url)">
|
|
|
- <el-image v-if="item.coverUrl" :src="item.coverUrl" fit="cover" class="media-image">
|
|
|
+ <template v-for="(item, mediaIndex) in items.mediaUrlList" :key="mediaIndex">
|
|
|
+ <!-- 视频:包含 | 分隔符 -->
|
|
|
+ <div v-if="isVideoUrl(item)" class="media-item video-item" @click="playVideo(getVideoUrl(item))">
|
|
|
+ <el-image v-if="getVideoCoverUrl(item)" :src="getVideoCoverUrl(item)" fit="cover" class="media-image">
|
|
|
<template #error>
|
|
|
<div class="media-placeholder">
|
|
|
<el-icon class="play-icon">
|
|
|
@@ -59,13 +60,14 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else class="media-item image-item" @click="previewImage(item.url, index)">
|
|
|
+ <!-- 图片:不包含 | 分隔符 -->
|
|
|
+ <div v-else class="media-item image-item" @click="previewImage(item, items.mediaUrlList, mediaIndex)">
|
|
|
<el-image
|
|
|
- :src="item.url"
|
|
|
+ :src="item"
|
|
|
fit="cover"
|
|
|
class="media-image"
|
|
|
- :preview-src-list="imageList"
|
|
|
- :initial-index="getImageIndex(item.url)"
|
|
|
+ :preview-src-list="getImageListForItem(items.mediaUrlList)"
|
|
|
+ :initial-index="getImageIndex(item, items.mediaUrlList)"
|
|
|
>
|
|
|
<template #error>
|
|
|
<div class="image-slot">
|
|
|
@@ -216,11 +218,60 @@ const mediaList = computed<MediaItem[]>(() => {
|
|
|
|
|
|
const imageList = computed(() => mediaList.value.filter(m => m.type === "image").map(m => m.url));
|
|
|
|
|
|
-const getImageIndex = (url: string) => {
|
|
|
- return imageList.value.indexOf(url);
|
|
|
+// 判断是否为视频URL(包含 | 分隔符)
|
|
|
+const isVideoUrl = (url: string) => {
|
|
|
+ if (typeof url !== "string") return false;
|
|
|
+ return url.includes("|");
|
|
|
};
|
|
|
|
|
|
-const previewImage = (url: string, index: any) => {
|
|
|
+// 获取视频URL(从 "视频链接|封面链接" 中提取视频链接)
|
|
|
+const getVideoUrl = (url: string) => {
|
|
|
+ if (typeof url !== "string") return "";
|
|
|
+ if (url.includes("|")) {
|
|
|
+ return url.split("|")[0].trim();
|
|
|
+ }
|
|
|
+ return url;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取视频封面URL(从 "视频链接|封面链接" 中提取封面链接)
|
|
|
+const getVideoCoverUrl = (url: string) => {
|
|
|
+ if (typeof url !== "string") return "";
|
|
|
+ if (url.includes("|")) {
|
|
|
+ const parts = url.split("|");
|
|
|
+ if (parts.length >= 2) {
|
|
|
+ return parts[1].trim();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+};
|
|
|
+
|
|
|
+// 获取指定 mediaUrlList 中的图片列表(用于预览)
|
|
|
+const getImageListForItem = (mediaUrlList: any[]) => {
|
|
|
+ if (!mediaUrlList || !Array.isArray(mediaUrlList)) return [];
|
|
|
+ return mediaUrlList
|
|
|
+ .filter(item => {
|
|
|
+ // 过滤出图片类型(不包含 | 分隔符的)
|
|
|
+ if (typeof item === "string") {
|
|
|
+ return !item.includes("|");
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ })
|
|
|
+ .map(item => {
|
|
|
+ if (typeof item === "string") {
|
|
|
+ return item.trim();
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+ })
|
|
|
+ .filter(url => url);
|
|
|
+};
|
|
|
+
|
|
|
+// 获取图片在指定 mediaUrlList 中的索引
|
|
|
+const getImageIndex = (url: string, mediaUrlList: any[]) => {
|
|
|
+ const imageList = getImageListForItem(mediaUrlList);
|
|
|
+ return imageList.indexOf(url);
|
|
|
+};
|
|
|
+
|
|
|
+const previewImage = (url: string, mediaUrlList: any[], index: any) => {
|
|
|
// el-image 的 preview-src-list 会自动处理预览
|
|
|
};
|
|
|
|