fix: make work app video attachments playable
This commit is contained in:
@@ -193,18 +193,14 @@ onShow(() => {
|
||||
<view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile">
|
||||
<view class="attachment-preview" @click="previewInboundAttachment(item)">
|
||||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||||
<video
|
||||
v-else-if="isVideoAsset(item)"
|
||||
class="attachment-thumb attachment-video-thumb"
|
||||
:src="item.file_url"
|
||||
:controls="false"
|
||||
:muted="true"
|
||||
:show-center-play-btn="false"
|
||||
:enable-progress-gesture="false"
|
||||
object-fit="cover"
|
||||
/>
|
||||
<template v-else-if="isVideoAsset(item)">
|
||||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||||
<view v-else class="attachment-video-thumb">
|
||||
<text class="attachment-video-label">视频</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="attachment-file-thumb">附件</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play">▶</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewInboundAttachment(item)">▶</view>
|
||||
</view>
|
||||
<view class="attachment-meta">
|
||||
<text class="attachment-name">{{ item.name || item.file_id }}</text>
|
||||
@@ -257,7 +253,7 @@ onShow(() => {
|
||||
<text class="video-preview-title">{{ activeInboundVideo.name || "入库视频" }}</text>
|
||||
<text class="video-preview-close" @click="closeInboundVideo">关闭</text>
|
||||
</view>
|
||||
<video class="video-preview-player" :src="activeInboundVideo.file_url" controls autoplay />
|
||||
<video class="video-preview-player" :src="activeInboundVideo.file_url" :poster="activeInboundVideo.thumbnail_url || ''" controls autoplay />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -347,16 +343,26 @@ onShow(() => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.attachment-video-thumb,
|
||||
.attachment-file-thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e8edf3 100%);
|
||||
color: var(--work-text);
|
||||
}
|
||||
|
||||
.attachment-video-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.attachment-file-thumb {
|
||||
color: var(--work-text-soft);
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
|
||||
@@ -248,18 +248,14 @@ onLoad((options) => {
|
||||
<view v-for="item in packingAttachments" :key="item.file_url" class="attachment-tile">
|
||||
<view class="attachment-preview" @click="previewAttachment(item)">
|
||||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||||
<video
|
||||
v-else-if="isVideoAsset(item)"
|
||||
class="attachment-thumb attachment-video-thumb"
|
||||
:src="item.file_url"
|
||||
:controls="false"
|
||||
:muted="true"
|
||||
:show-center-play-btn="false"
|
||||
:enable-progress-gesture="false"
|
||||
object-fit="cover"
|
||||
/>
|
||||
<template v-else-if="isVideoAsset(item)">
|
||||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||||
<view v-else class="attachment-video-thumb">
|
||||
<text class="attachment-video-label">视频</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="attachment-file-thumb">文件</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play">▶</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewAttachment(item)">▶</view>
|
||||
</view>
|
||||
<view class="attachment-meta">
|
||||
<text class="attachment-name">{{ item.name || item.file_id }}</text>
|
||||
@@ -290,7 +286,7 @@ onLoad((options) => {
|
||||
<text class="video-preview-title">{{ activeVideo.name || "装箱视频" }}</text>
|
||||
<text class="video-preview-close" @click="closeVideo">关闭</text>
|
||||
</view>
|
||||
<video class="video-preview-player" :src="activeVideo.file_url" controls autoplay />
|
||||
<video class="video-preview-player" :src="activeVideo.file_url" :poster="activeVideo.thumbnail_url || ''" controls autoplay />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -348,16 +344,26 @@ onLoad((options) => {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.attachment-video-thumb,
|
||||
.attachment-file-thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e8edf3 100%);
|
||||
color: var(--work-text);
|
||||
}
|
||||
|
||||
.attachment-video-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.attachment-file-thumb {
|
||||
color: var(--work-text-soft);
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
|
||||
@@ -476,18 +476,14 @@ onUnload(() => {
|
||||
<view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile">
|
||||
<view class="attachment-preview" @click="previewInboundAttachment(item)">
|
||||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||||
<video
|
||||
v-else-if="isVideoAsset(item)"
|
||||
class="attachment-thumb attachment-video-thumb"
|
||||
:src="item.file_url"
|
||||
:controls="false"
|
||||
:muted="true"
|
||||
:show-center-play-btn="false"
|
||||
:enable-progress-gesture="false"
|
||||
object-fit="cover"
|
||||
/>
|
||||
<template v-else-if="isVideoAsset(item)">
|
||||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||||
<view v-else class="attachment-video-thumb">
|
||||
<text class="attachment-video-label">视频</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="attachment-file-thumb">文件</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play">▶</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewInboundAttachment(item)">▶</view>
|
||||
</view>
|
||||
<view class="attachment-meta">
|
||||
<text class="attachment-name">{{ item.name || item.file_id }}</text>
|
||||
@@ -568,7 +564,7 @@ onUnload(() => {
|
||||
<text class="video-preview-title">{{ activeInboundVideo.name || "拆包视频" }}</text>
|
||||
<text class="video-preview-close" @click="closeInboundVideo">关闭</text>
|
||||
</view>
|
||||
<video class="video-preview-player" :src="activeInboundVideo.file_url" controls autoplay />
|
||||
<video class="video-preview-player" :src="activeInboundVideo.file_url" :poster="activeInboundVideo.thumbnail_url || ''" controls autoplay />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -621,16 +617,26 @@ onUnload(() => {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.attachment-video-thumb,
|
||||
.attachment-file-thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e8edf3 100%);
|
||||
color: var(--work-text);
|
||||
}
|
||||
|
||||
.attachment-video-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.attachment-file-thumb {
|
||||
color: var(--work-text-soft);
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
|
||||
@@ -704,19 +704,14 @@ onShow(() => {
|
||||
<view v-for="item in evidenceFiles" :key="item.file_url" class="attachment-tile">
|
||||
<view class="attachment-preview" @click="previewAttachment(evidenceFiles, item)">
|
||||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||||
<video
|
||||
v-else-if="isVideoAsset(item)"
|
||||
class="attachment-thumb attachment-video-thumb"
|
||||
:src="item.file_url"
|
||||
:controls="false"
|
||||
:muted="true"
|
||||
:show-center-play-btn="false"
|
||||
:enable-progress-gesture="false"
|
||||
object-fit="cover"
|
||||
@click.stop="previewAttachment(evidenceFiles, item)"
|
||||
/>
|
||||
<template v-else-if="isVideoAsset(item)">
|
||||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||||
<view v-else class="attachment-video-thumb">
|
||||
<text class="attachment-video-label">视频</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="attachment-file-thumb">附件</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play">▶</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewAttachment(evidenceFiles, item)">▶</view>
|
||||
</view>
|
||||
<view class="attachment-meta">
|
||||
<view class="attachment-name">{{ item.name || item.file_id }}</view>
|
||||
@@ -774,19 +769,14 @@ onShow(() => {
|
||||
<view v-for="item in zhongjianFiles" :key="item.file_url" class="attachment-tile">
|
||||
<view class="attachment-preview" @click="previewAttachment(zhongjianFiles, item)">
|
||||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||||
<video
|
||||
v-else-if="isVideoAsset(item)"
|
||||
class="attachment-thumb attachment-video-thumb"
|
||||
:src="item.file_url"
|
||||
:controls="false"
|
||||
:muted="true"
|
||||
:show-center-play-btn="false"
|
||||
:enable-progress-gesture="false"
|
||||
object-fit="cover"
|
||||
@click.stop="previewAttachment(zhongjianFiles, item)"
|
||||
/>
|
||||
<template v-else-if="isVideoAsset(item)">
|
||||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||||
<view v-else class="attachment-video-thumb">
|
||||
<text class="attachment-video-label">视频</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="attachment-file-thumb">附件</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play">▶</view>
|
||||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewAttachment(zhongjianFiles, item)">▶</view>
|
||||
</view>
|
||||
<view class="attachment-meta">
|
||||
<view class="attachment-name">{{ item.name || item.file_id }}</view>
|
||||
@@ -820,7 +810,7 @@ onShow(() => {
|
||||
<text class="video-preview-title">{{ activePreviewVideo.name || "附件视频" }}</text>
|
||||
<text class="video-preview-close" @click="closePreviewVideo">关闭</text>
|
||||
</view>
|
||||
<video class="video-preview-player" :src="activePreviewVideo.file_url" controls autoplay />
|
||||
<video class="video-preview-player" :src="activePreviewVideo.file_url" :poster="activePreviewVideo.thumbnail_url || ''" controls autoplay />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -914,16 +904,26 @@ onShow(() => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.attachment-video-thumb,
|
||||
.attachment-file-thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachment-video-thumb {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e8edf3 100%);
|
||||
color: var(--work-text);
|
||||
}
|
||||
|
||||
.attachment-video-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.attachment-file-thumb {
|
||||
color: var(--work-text-soft);
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
|
||||
Reference in New Issue
Block a user