test(inspectiontast/index.vue): 测试：勤策移动端_售点稽查_拍摄视频

index.html

@@ -207,8 +207,6 @@
   <!-- 飞书SDK -->
   <script src="https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.34.js"
     type="text/javascript"></script>
-  <!-- 腾讯地图 SDK -->
-  <script src="https://map.qq.com/api/gljs?v=1.exp&key=UTEBZ-UJ3KG-OORQO-QT3PT-JDWU7-YRBZA"></script>
   <% if
     (systemConfig.env
     !=='development'

package.json

@@ -55,6 +55,7 @@
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^28.4.1",
     "unplugin-vue-setup-extend-plus": "1.0.1",
+    "vconsole": "^3.15.1",
     "vite": "5.3.2",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-html": "^3.2.2",

src/main.js

@@ -64,6 +64,13 @@ import OpenDialog from '@/components/OpenDialog'
 // 版本通知组件
 import VersionNotice from '@/components/VersionNotice'
 
+// 引入vConsole
+import VConsole from 'vconsole'
+
+// 创建vConsole实例
+new VConsole()
+
+
 const app = createApp(App)
 
 // 注册移动端内容

src/utils/file.js

+export function getFileTypeExt(url) {
+  const fileName = url.split('/').pop()
+  const fileType = fileName.split('.').pop()
+  return fileType
+}
+
+// 判断 URL 是一个图片还是视频
+function isImage(url) {
+  console.log(url, '1')
+  const fileType = getFileTypeExt(url)
+  return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(fileType.toLowerCase())
+}
+// 判断 URL 是一个视频
+function isVideo(url) {
+  const fileType = getFileTypeExt(url)
+  console.log(['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(fileType.toLowerCase()), 2)
+  return ['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(fileType.toLowerCase())
+}
+// 来个统一出口
+export function getMediaType(url) {
+  if (isImage(url)) {
+    return 'image'
+  } else if (isVideo(url)) {
+    return 'video'
+  } else {
+    return 'unknown'
+  }
+}

src/utils/index.js

@@ -6,6 +6,7 @@ export * from './device'
 export * from './dict'
 export * from './dynamicTitle'
 export * from './errorCode'
+export * from './file'
 export * from './jsencrypt'
 export * from './math'
 export * from './permission'

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/index.vue

@@ -44,18 +44,62 @@
           class="refresh-icon"
           @click="handleClickLocation" />
       </div>
+
       <!-- 门头照上传 -->
       <div class="header-photo-section">
-        <van-field label="门头照"
+        <van-field label="门头照(1张)"
           label-align="top">
           <template #input>
             <van-uploader :max-count="1"
-              accept="image/*"
-              capture="camera"
+              accept="image/*,video/*"
               :model-value="form.commitStorePicture"
               :after-read="commitStorePhotosRead"
               preview-size="2.13333rem"
-              @delete="deleteCommitStorePhotos">
+              @delete="deleteCommitStorePhotos"
+              :max-size="5 * 1024 * 1024"
+              @oversize="onOversize">
+              <!-- 自定义上传按钮 -->
+              <template #default>
+                <div class="upload-btn">
+                  <van-icon name="photograph" />
+                </div>
+              </template>
+
+              <!-- 自定义预览内容 -->
+              <template #preview-cover="{ url, index }">
+
+                <div class="preview-container"
+                  @click.stop>
+                  <!-- 图片预览 -->
+                  <van-image v-if="getFileType(url) === 'image'"
+                    :src="url"
+                    alt=""
+                    class="preview-media"
+                    fit="cover"
+                    @click="previewImage(url)" />
+
+                  <!-- 视频预览 -->
+                  <video v-else-if="getFileType(url) === 'video'"
+                    :src="url"
+                    ref="videoRef"
+                    alt=""
+                    class="preview-media" />
+                  <div class="play-hint"
+                    @click.stop="showVideoFullscreen(url)">
+                  </div>
+
+                  <!-- 删除按钮 -->
+                  <van-icon name="clear"
+                    class="delete-icon"
+                    @click.stop="deleteCommitStorePhotos" />
+
+                  <!-- 类型标识 -->
+                  <span v-if="getFileType(url) === 'video'"
+                    class="video-tag">
+                    视频
+                  </span>
+                </div>
+              </template>
             </van-uploader>
           </template>
         </van-field>
@@ -172,6 +216,29 @@
         size="40"
         text-color="#f12528">加载中...</van-loading>
     </van-overlay>
+
+
+    <!-- 视频全屏预览 Dialog -->
+    <!-- <van-dialog v-model:show="videoDialogVisible"
+      title="视频预览"
+      :show-cancel-button="false"
+      :show-confirm-button="false"
+      :before-close="closeVideoFullscreen"
+      class="fullscreen-video-dialog"
+      @closed="closeVideoFullscreen">
+      <div class="video-container">
+        <div class="close-button"
+          @click.stop="videoDialogVisible = false">×</div>
+        <video id="fullscreen-video"
+          v-if="currentVideo"
+          :src="currentVideo"
+          alt=""
+          controls
+          autoplay
+          class="fullscreen-video"
+          @click="handleVideoClick" />
+      </div>
+    </van-dialog> -->
   </div>
 </template>
 
@@ -182,9 +249,15 @@ import convention from './tabs/conventionalDisplay.vue'
 import scheduleDisplay from './tabs/scheduleDisplay.vue'
 import scheduleAdjustment from './tabs/scheduleAdjustment.vue'
 import categoryInformation from './tabs/categoryInformation.vue'
-import { showImagePreview } from 'vant';
 import useUserStore from '@/store/modules/user'
 import { v4 as uuidv4 } from 'uuid';
+import { getFileTypeExt, getMediaType } from '@/utils'
+// 引入必要的组件
+import { showImagePreview } from 'vant';
+
+const previewImage = (url) => {
+  showImagePreview([url]);
+}
 
 const router = useRouter()
 const route = useRoute()
@@ -363,7 +436,7 @@ const commitStorePhotosRead = async (file) => {
   }]
   const date = new Date()
   const month = date.getMonth() + 1
-  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/storeFrontPhoto/${useUserStore().empInfo.empNo}/${uuidv4()}.png`, file.file)
+  const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/storeFrontPhoto/${useUserStore().empInfo.empNo}/${uuidv4()}.${getFileTypeExt(file.file.name)}`, file.file)
   form.commitStorePicture = [{
     url: pictureUrl,
     status: 'done'
@@ -389,6 +462,70 @@ const deleteCommitStorePhotos = async () => {
   if (!route.query.storePicture) form.storePicture = ""
   showNotify({ type: 'success', message: '门头照，删除成功' })
 }
+const onOversize = (file) => {
+  showNotify({ type: 'danger', message: '文件大小不能超过 5 MB' })
+}
+const getFileType = (url) => {
+  return getMediaType(url)
+}
+
+// // 判断是否为视频文件
+// isVideo(file) {
+//   return file.type && file.type.startsWith('video/');
+// },
+// 视频拍照
+// 视频全屏预览相关状态
+const videoDialogVisible = ref(false);
+const currentVideo = ref(null);
+
+// 显示视频全屏预览
+const videoRef = ref(null);
+const isPlaying = ref(false);
+const showVideoFullscreen = async (url) => {
+  console.log('播放视频')
+  const video = videoRef.value;
+  if (!video) return;
+
+  try {
+    // 如果未全屏，则请求全屏
+    if (!document.fullscreenElement) {
+      await video.requestFullscreen().catch(err => {
+        console.error('全屏请求失败:', err);
+      });
+    }
+
+    // 控制播放/暂停
+    if (video.paused) {
+      await video.play();
+      isPlaying.value = true;
+    } else {
+      video.pause();
+      isPlaying.value = false;
+    }
+  } catch (err) {
+    console.error('视频操作失败:', err);
+  }
+};
+
+// 关闭视频全屏预览
+const closeVideoFullscreen = () => {
+  videoDialogVisible.value = false;
+  // 确保视频停止播放
+  const videoElement = document.getElementById('fullscreen-video');
+  if (videoElement) {
+    videoElement.pause();
+  }
+};
+
+// 处理视频点击事件
+const handleVideoClick = (event) => {
+  // 判断点击的是否是视频控件区域
+  // 当点击视频控件时，event.target 会指向具体的控件元素而不是 video 标签本身
+  if (event.target === event.currentTarget) {
+    // 只有点击视频播放区域（非控件）才切换播放/暂停状态
+    toggleVideoPlayback();
+  }
+};
 
 /*************** 渠道类型 ***************/
 const typeOptions = ref(typeOption) // 渠道类型
@@ -599,6 +736,90 @@ const deleteLongTimePictureArr = async (file, { name, index }) => {
           justify-content: center;
           background-color: #f8f8f8;
         }
+
+        .van-uploader {
+
+          .upload-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f8f8f8;
+            width: 80px;
+            height: 80px;
+            border: 1px dashed #ccc;
+            border-radius: 4px;
+            color: #dcdee0;
+            font-size: 24px;
+          }
+
+          ::v-deep(.van-uploader__file) {
+            .van-badge__wrapper {
+              display: none;
+            }
+
+            .van-ellipsis {
+              display: none;
+            }
+          }
+
+          .upload-text {
+            margin-top: 8px;
+            font-size: 14px;
+          }
+
+
+
+          .van-uploader__preview-cover {
+            z-index: 999;
+
+            .preview-container {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              border-radius: 8px;
+              overflow: hidden;
+
+              .play-hint {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+
+
+          .preview-media {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .delete-icon {
+            position: absolute;
+            top: -6px;
+            right: -6px;
+            background-color: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+          }
+
+          .video-tag {
+            position: absolute;
+            bottom: 4px;
+            right: 4px;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            font-size: 12px;
+            padding: 2px 6px;
+            border-radius: 4px;
+          }
+        }
+
       }
 
       /* 信息填写组 */
@@ -638,5 +859,69 @@ const deleteLongTimePictureArr = async (file, { name, index }) => {
       align-items: center;
       justify-content: center;
     }
+
+    /* 全屏预览 */
+    ::v-deep(.fullscreen-video-dialog) {
+      width: 100%;
+      max-width: 100%;
+      height: 100% !important;
+      top: 0;
+      padding: 0;
+      margin: 0;
+      transform: translateY(0);
+      border-radius: 0;
+
+      .van-dialog__header {
+        display: none;
+      }
+    }
+
+    .fullscreen-video-dialog .van-dialog__content {
+      padding: 0 !important;
+      height: calc(100% - 50px);
+      /* 减去标题栏高度 */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .video-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #000;
+
+      /* 添加关闭按钮 */
+      .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 30px;
+        height: 30px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      }
+    }
+
+    .fullscreen-video {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+
+    /* 预览中的视频样式 */
+    .preview-media {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      cursor: pointer;
+    }
   }
 </style>
\ No newline at end of file