test(inspection/index.vue): 测试：勤策移动端_售点稽查_安卓单独判断需要如何拍照

src/utils/file.js

@@ -13,8 +13,8 @@ function isImage(url) {
 // 判断 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())
+  console.log(['mp4', 'avi', 'mov', 'wmv', 'flv', '3gp', 'mkv', 'webm'].includes(fileType.toLowerCase()), 2)
+  return ['mp4', 'avi', 'mov', 'wmv', 'flv', '3gp', 'mkv', 'webm'].includes(fileType.toLowerCase())
 }
 // 来个统一出口
 export function getMediaType(url) {

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

@@ -50,7 +50,9 @@
         <van-field label="门头照(1张)"
           label-align="top">
           <template #input>
-            <van-uploader :max-count="1"
+            <!-- 苹果设备上传组件 -->
+            <van-uploader v-if="deviceType === 'ios'"
+              :max-count="1"
               accept="image/*,video/*"
               :model-value="form.commitStorePicture"
               :after-read="commitStorePhotosRead"
@@ -109,9 +111,79 @@
                 </div>
               </template>
             </van-uploader>
+            <!-- 安卓设备上传组件 -->
+            <div v-else-if="deviceType === 'android'">
+              <!-- 上传按钮 -->
+              <div class="upload-btn"
+                @click="show = true">
+                <van-icon name="photograph" />
+              </div>
+
+              <!-- 安卓设备根据选择显示的上传组件 -->
+              <div style="display: none;"
+                class="android-uploader-wrapper">
+                <van-uploader :max-count="1"
+                  :accept="selectedMediaType === 'image' ? 'image/*' : 'video/*'"
+                  ref="uploaderRef"
+                  capture="camera"
+                  :model-value="form.commitStorePicture"
+                  :after-read="commitStorePhotosRead"
+                  preview-size="2.13333rem"
+                  @delete="deleteCommitStorePhotos"
+                  :max-size="5 * 1024 * 1024"
+                  @oversize="onOversize">
+                  <template #preview-cover="{ url, index }">
+                    <div class="preview-container"
+                      @click.stop>
+                      <!-- 图片预览 -->
+                      <van-image v-if="getMediaType(url) === 'image'"
+                        :src="url"
+                        alt=""
+                        class="preview-media"
+                        fit="cover"
+                        @click="previewImage(url)" />
+
+                      <!-- 视频预览 -->
+                      <div class="video-wrap"
+                        v-else-if="getMediaType(url) === 'video'">
+                        <video :src="url"
+                          alt=""
+                          ref="videoRef"
+                          muted
+                          autoplay
+                          playsinline
+                          preload="auto"
+                          class="preview-media"
+                          @loadeddata="handleVideoLoaded" />
+
+                        <div class="play-hint"
+                          @click.stop="showVideoFullscreen(url)">
+                        </div>
+                      </div>
+
+
+                      <!-- 删除按钮 -->
+                      <van-icon name="clear"
+                        class="delete-icon"
+                        @click.stop="deleteCommitStorePhotos" />
+
+                      <!-- 类型标识 -->
+                      <span v-if="getMediaType(url) === 'video'"
+                        class="video-tag">
+                        视频
+                      </span>
+                    </div>
+                  </template>
+                </van-uploader>
+              </div>
+            </div>
           </template>
         </van-field>
       </div>
+      <!-- 拍照方式选择 -->
+      <van-action-sheet v-model:show="show"
+        :actions="actions"
+        @select="onSelect" />
       <!-- 渠道类型选择 -->
       <van-field label-width="150px"
         label-position="top"
@@ -240,8 +312,6 @@ import { getFileTypeExt, getMediaType } from '@/utils'
 // 引入必要的组件
 import { showImagePreview } from 'vant';
 
-
-
 const router = useRouter()
 const route = useRoute()
 
@@ -410,6 +480,60 @@ const handleClickLocation = () => {
 }
 
 /*************** 门头照上传 ***************/
+// 检测设备类型
+const deviceType = computed(() => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
+    return 'ios';
+  } else if (userAgent.includes('android')) {
+    return 'android';
+  }
+  return 'android';
+})
+const onSelect = (item) => {
+  selectedMediaType.value = item.type
+  nextTick(() => {
+    if (uploaderRef.value) {
+      // 获取uploader组件实例
+      const uploaderInstance = uploaderRef.value
+
+      // 方法1: 如果组件暴露了open或click方法
+      if (uploaderInstance.open) {
+        uploaderInstance.open()
+      } else if (uploaderInstance.click) {
+        uploaderInstance.click()
+      } else {
+        // 方法2: 直接查找内部的input元素并触发点击
+        // 查找uploader组件内的input[type="file"]元素
+        const inputElement = uploaderInstance.$el.querySelector('input[type="file"]')
+        if (inputElement) {
+          // 触发点击事件
+          inputElement.click()
+        } else {
+          console.error('未找到文件上传input元素')
+        }
+      }
+    } else {
+      console.error('uploader组件未加载完成')
+    }
+
+    show.value = false
+  })
+
+}
+const show = ref(false)
+const actions = ref([
+  {
+    name: '拍照片',
+    type: 'image'
+  },
+  {
+    name: '拍视频',
+    type: 'video'
+  }
+])
+const uploaderRef = ref(null)
+const selectedMediaType = ref('')
 // 上传照片
 const commitStorePhotosRead = async (file) => {
   form.commitStorePicture = [{
@@ -466,41 +590,7 @@ const handleVideoLoaded = () => {
   videoRef.value.pause()
 }
 
-
-const videoPosters = ref({});
-const videoLoadingStatus = ref({}); // 跟踪每个视频的加载状态
-const isWebView = ref(false);
-// 组件挂载时检测环境
-// onMounted(() => {
-//   detectEnvironment();
-// });
-
-// // 检测是否在webView中
-// const detectEnvironment = () => {
-//   // 检测是否在iOS设备上
-//   const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
-//   // 检测是否在webView中 - 可以根据实际项目中的webView特征调整
-//   // 这里使用了一些常见的webView特征检测方法
-//   const isInWebView = () => {
-//     // iOS webView检测
-//     if (isiOS) {
-//       // 检查是否存在UIWebView特有的属性
-//       const hasUIWebViewProperty = typeof navigator.standalone !== 'undefined' && !navigator.standalone;
-//       // 检查userAgent中是否包含特定App的标识
-//       const hasCustomUserAgent = /AppName|CustomWebView/i.test(navigator.userAgent);
-
-//       return hasUIWebViewProperty || hasCustomUserAgent;
-//     }
-//     return false;
-//   };
-
-//   isWebView.value = isInWebView();
-// };
-
-
-
-// 修改showVideoFullscreen函数，添加环境检测逻辑
+// 全屏播放
 const showVideoFullscreen = async (url) => {
   const video = videoRef.value;
   if (!video) return;
@@ -522,7 +612,7 @@ const showVideoFullscreen = async (url) => {
 
 // 跨浏览器请求全屏（保留之前的实现）
 const requestFullscreen = (element) => {
-  if (!element) return Promise.reject(new Error('Element not found'));
+  if (!element) return Promise.reject(new Error('video 标签不存在'));
 
   const methods = [
     // 标准API
@@ -535,7 +625,7 @@ const requestFullscreen = (element) => {
         element.webkitEnterFullscreen();
         return Promise.resolve();
       }
-      return Promise.reject(new Error('webkitEnterFullscreen not supported'));
+      return Promise.reject(new Error('不支持全屏播放'));
     }
   ];
 
@@ -555,7 +645,7 @@ const requestFullscreen = (element) => {
         continue;
       }
     }
-    reject(new Error('All fullscreen methods failed'));
+    reject(new Error('所有全屏播放方法失败'));
   });
 };
 
@@ -758,6 +848,19 @@ const deleteLongTimePictureArr = async (file, { name, index }) => {
       .header-photo-section {
         margin-top: 10px;
 
+        .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__upload) {
           width: 80px !important;
           height: 80px !important;
@@ -771,18 +874,7 @@ const deleteLongTimePictureArr = async (file, { name, index }) => {
 
         .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 {