From ba987283dcd716639fc71ef88d9502626235a625 Mon Sep 17 00:00:00 2001
From: wushumin <a316702372@qq.com>
Date: Sun, 17 May 2026 00:39:56 +0800
Subject: [PATCH] fix: make work app video attachments playable

---
 work-app/src/pages/order/detail.vue          | 38 +++++++------
 work-app/src/pages/return-shipping/index.vue | 38 +++++++------
 work-app/src/pages/scan/index.vue            | 38 +++++++------
 work-app/src/pages/task/detail.vue           | 58 ++++++++++----------
 4 files changed, 95 insertions(+), 77 deletions(-)

diff --git a/work-app/src/pages/order/detail.vue b/work-app/src/pages/order/detail.vue
index 3cbcd7b..6f66afc 100644
--- a/work-app/src/pages/order/detail.vue
+++ b/work-app/src/pages/order/detail.vue
@@ -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;
diff --git a/work-app/src/pages/return-shipping/index.vue b/work-app/src/pages/return-shipping/index.vue
index 3c84a5d..c0b6c07 100644
--- a/work-app/src/pages/return-shipping/index.vue
+++ b/work-app/src/pages/return-shipping/index.vue
@@ -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;
diff --git a/work-app/src/pages/scan/index.vue b/work-app/src/pages/scan/index.vue
index c11bfaf..70cb07c 100644
--- a/work-app/src/pages/scan/index.vue
+++ b/work-app/src/pages/scan/index.vue
@@ -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;
diff --git a/work-app/src/pages/task/detail.vue b/work-app/src/pages/task/detail.vue
index 15f3313..bf75c41 100644
--- a/work-app/src/pages/task/detail.vue
+++ b/work-app/src/pages/task/detail.vue
@@ -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;