316702372/anxinyan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make work app video attachments playable

Browse Source
This commit is contained in:
wushumin
2026-05-17 00:39:56 +08:00
parent fbbc3bd8b9
commit ba987283dc
4 changed files with 95 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
work-app/src/pages/order/detail.vue
View File

@@ -193,18 +193,14 @@ onShow(() => {
<view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile"> <view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile">
<view class="attachment-preview" @click="previewInboundAttachment(item)"> <view class="attachment-preview" @click="previewInboundAttachment(item)">
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" /> <image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
<video <template v-else-if="isVideoAsset(item)">
v-else-if="isVideoAsset(item)" <image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
class="attachment-thumb attachment-video-thumb" <view v-else class="attachment-video-thumb">
:src="item.file_url" <text class="attachment-video-label">视频</text>
:controls="false" </view>
:muted="true" </template>
:show-center-play-btn="false"
:enable-progress-gesture="false"
object-fit="cover"
/>
<view v-else class="attachment-file-thumb">附件</view> <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>
<view class="attachment-meta"> <view class="attachment-meta">
<text class="attachment-name">{{ item.name || item.file_id }}</text> <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-title">{{ activeInboundVideo.name || "入库视频" }}</text>
<text class="video-preview-close" @click="closeInboundVideo">关闭</text> <text class="video-preview-close" @click="closeInboundVideo">关闭</text>
</view> </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> </view>
</template> </template>
@@ -347,16 +343,26 @@ onShow(() => {
height: 100%; height: 100%;
} }
.attachment-video-thumb { .attachment-video-thumb,
background: #202124;
}
.attachment-file-thumb { .attachment-file-thumb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 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); color: var(--work-text-soft);
font-size: 24rpx; font-size: 24rpx;
font-weight: 800; font-weight: 800;

38
work-app/src/pages/return-shipping/index.vue
View File

@@ -248,18 +248,14 @@ onLoad((options) => {
<view v-for="item in packingAttachments" :key="item.file_url" class="attachment-tile"> <view v-for="item in packingAttachments" :key="item.file_url" class="attachment-tile">
<view class="attachment-preview" @click="previewAttachment(item)"> <view class="attachment-preview" @click="previewAttachment(item)">
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" /> <image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
<video <template v-else-if="isVideoAsset(item)">
v-else-if="isVideoAsset(item)" <image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
class="attachment-thumb attachment-video-thumb" <view v-else class="attachment-video-thumb">
:src="item.file_url" <text class="attachment-video-label">视频</text>
:controls="false" </view>
:muted="true" </template>
:show-center-play-btn="false"
:enable-progress-gesture="false"
object-fit="cover"
/>
<view v-else class="attachment-file-thumb">文件</view> <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>
<view class="attachment-meta"> <view class="attachment-meta">
<text class="attachment-name">{{ item.name || item.file_id }}</text> <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-title">{{ activeVideo.name || "装箱视频" }}</text>
<text class="video-preview-close" @click="closeVideo">关闭</text> <text class="video-preview-close" @click="closeVideo">关闭</text>
</view> </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> </view>
</view> </view>
@@ -348,16 +344,26 @@ onLoad((options) => {
display: block; display: block;
} }
.attachment-video-thumb { .attachment-video-thumb,
background: #202124;
}
.attachment-file-thumb { .attachment-file-thumb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 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); color: var(--work-text-soft);
font-size: 24rpx; font-size: 24rpx;
font-weight: 800; font-weight: 800;

38
work-app/src/pages/scan/index.vue
View File

@@ -476,18 +476,14 @@ onUnload(() => {
<view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile"> <view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile">
<view class="attachment-preview" @click="previewInboundAttachment(item)"> <view class="attachment-preview" @click="previewInboundAttachment(item)">
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" /> <image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
<video <template v-else-if="isVideoAsset(item)">
v-else-if="isVideoAsset(item)" <image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
class="attachment-thumb attachment-video-thumb" <view v-else class="attachment-video-thumb">
:src="item.file_url" <text class="attachment-video-label">视频</text>
:controls="false" </view>
:muted="true" </template>
:show-center-play-btn="false"
:enable-progress-gesture="false"
object-fit="cover"
/>
<view v-else class="attachment-file-thumb">文件</view> <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>
<view class="attachment-meta"> <view class="attachment-meta">
<text class="attachment-name">{{ item.name || item.file_id }}</text> <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-title">{{ activeInboundVideo.name || "拆包视频" }}</text>
<text class="video-preview-close" @click="closeInboundVideo">关闭</text> <text class="video-preview-close" @click="closeInboundVideo">关闭</text>
</view> </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> </view>
</view> </view>
@@ -621,16 +617,26 @@ onUnload(() => {
display: block; display: block;
} }
.attachment-video-thumb { .attachment-video-thumb,
background: #202124;
}
.attachment-file-thumb { .attachment-file-thumb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 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); color: var(--work-text-soft);
font-size: 24rpx; font-size: 24rpx;
font-weight: 800; font-weight: 800;

58
work-app/src/pages/task/detail.vue
View File

@@ -704,19 +704,14 @@ onShow(() => {
<view v-for="item in evidenceFiles" :key="item.file_url" class="attachment-tile"> <view v-for="item in evidenceFiles" :key="item.file_url" class="attachment-tile">
<view class="attachment-preview" @click="previewAttachment(evidenceFiles, item)"> <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" /> <image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
<video <template v-else-if="isVideoAsset(item)">
v-else-if="isVideoAsset(item)" <image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
class="attachment-thumb attachment-video-thumb" <view v-else class="attachment-video-thumb">
:src="item.file_url" <text class="attachment-video-label">视频</text>
:controls="false" </view>
:muted="true" </template>
:show-center-play-btn="false"
:enable-progress-gesture="false"
object-fit="cover"
@click.stop="previewAttachment(evidenceFiles, item)"
/>
<view v-else class="attachment-file-thumb">附件</view> <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>
<view class="attachment-meta"> <view class="attachment-meta">
<view class="attachment-name">{{ item.name || item.file_id }}</view> <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 v-for="item in zhongjianFiles" :key="item.file_url" class="attachment-tile">
<view class="attachment-preview" @click="previewAttachment(zhongjianFiles, item)"> <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" /> <image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
<video <template v-else-if="isVideoAsset(item)">
v-else-if="isVideoAsset(item)" <image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
class="attachment-thumb attachment-video-thumb" <view v-else class="attachment-video-thumb">
:src="item.file_url" <text class="attachment-video-label">视频</text>
:controls="false" </view>
:muted="true" </template>
:show-center-play-btn="false"
:enable-progress-gesture="false"
object-fit="cover"
@click.stop="previewAttachment(zhongjianFiles, item)"
/>
<view v-else class="attachment-file-thumb">附件</view> <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>
<view class="attachment-meta"> <view class="attachment-meta">
<view class="attachment-name">{{ item.name || item.file_id }}</view> <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-title">{{ activePreviewVideo.name || "附件视频" }}</text>
<text class="video-preview-close" @click="closePreviewVideo">关闭</text> <text class="video-preview-close" @click="closePreviewVideo">关闭</text>
</view> </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>
</view> </view>
@@ -914,16 +904,26 @@ onShow(() => {
height: 100%; height: 100%;
} }
.attachment-video-thumb { .attachment-video-thumb,
background: #202124;
}
.attachment-file-thumb { .attachment-file-thumb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 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); color: var(--work-text-soft);
font-size: 24rpx; font-size: 24rpx;
font-weight: 800; font-weight: 800;