|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="ut-album-card" :style="albumStyle">
|
|
|
<template v-for="(item, index) in displayItems" :key="index">
|
|
|
- <view class="card-item" :style="{ width: itemSize, height: itemSize }" @click="onPreview(index)">
|
|
|
+ <view class="card-item" :style="{ width: itemSize, height: itemSize }" @click="onItemClick(item, index)">
|
|
|
<!-- 图片缩略图 -->
|
|
|
<template v-if="item.type === 'image'">
|
|
|
<image class="thumb" :src="getThumb(item)" mode="aspectFill" />
|
|
|
@@ -11,8 +11,17 @@
|
|
|
<template v-else-if="item.type === 'video'">
|
|
|
<view class="video-box">
|
|
|
<image v-if="item.coverUrl" class="thumb" :src="item.coverUrl" mode="aspectFill" />
|
|
|
- <view v-else class="video-placeholder">VIDEO</view>
|
|
|
- <view class="play-mask">
|
|
|
+ <video
|
|
|
+ v-else
|
|
|
+ class="thumb native-video"
|
|
|
+ :src="item.url"
|
|
|
+ object-fit="cover"
|
|
|
+ :controls="false"
|
|
|
+ :show-center-play-btn="true"
|
|
|
+ :show-play-btn="false"
|
|
|
+ :enable-play-gesture="true"
|
|
|
+ />
|
|
|
+ <view v-if="item.coverUrl" class="play-mask">
|
|
|
<up-icon name="play-circle" color="#fff" size="48rpx"></up-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -141,9 +150,9 @@ const formatSize = (bytes) => {
|
|
|
};
|
|
|
|
|
|
// 预览逻辑:图片/视频/文件
|
|
|
-const onPreview = (displayIndex) => {
|
|
|
- const item = displayItems.value[displayIndex];
|
|
|
+const onItemClick = (item, displayIndex) => {
|
|
|
if (!item) return;
|
|
|
+ if (item.type === 'video' && !item.coverUrl) return;
|
|
|
if (item.type === 'image') return previewImages(item);
|
|
|
if (item.type === 'video') return previewVideo(item, displayIndex);
|
|
|
return previewFile(item);
|
|
|
@@ -222,15 +231,8 @@ const previewFile = (item) => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
- .video-placeholder {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: #fff;
|
|
|
+ .native-video {
|
|
|
background: #000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 28rpx;
|
|
|
}
|
|
|
.play-mask {
|
|
|
position: absolute;
|