1

src/components/viewImg/index.vue

@@ -23,13 +23,16 @@
           <el-image :src="urlFilter(item.filesUrl)" class="originalImg" fit="cover">
             <template #error>
               <div class="image-slot el-image__error">
-                <el-icon :size="30"><PictureFilled /></el-icon>
+                <el-icon :size="30"><VideoCameraFilled /></el-icon>
               </div>
             </template>
           </el-image>
         </div>
         <div class="mask">
-          <div class="zoomInImg" @click="showImgView(item.filesUrl)">
+          <div  class="zoomInImg" v-if="TypeFilter(item.filesUrl) == '.mp4'" @click="showVideoView(item.filesUrl)">
+            <el-icon color="#fff"><VideoPlay /></el-icon>
+          </div>
+          <div v-else class="zoomInImg" @click="showImgView(item.filesUrl)">
             <el-icon color="#fff"><zoom-in /></el-icon>
           </div>
           <div
@@ -52,6 +55,11 @@
         </div>
       </div>
     </div>
+    <el-dialog v-model="visible.show"  title="查看视频" width="500">
+      <video ref="videoPlayer" style="width: 100%; height: 300px;" class="video-js">
+        <source :src="visible.src"  type="video/mp4">
+      </video>
+  </el-dialog>
   </div>
 </template>
 
@@ -106,6 +114,10 @@ const props = defineProps({
    }
   }
 });
+const visible = ref({
+  show: false,
+  src: "",
+});
 const currSize = ref({ width: 0, height: 0 });
 const fileList = ref([".doc", ".docx", ".pdf", ".xls", ".xlsx"]);
 const initFileList = ref([
@@ -123,6 +135,12 @@ const urlFilter = (url) => {
   console.log(url, fileType, "urlFilter");
   return fileList.value.includes(fileType) ? fileImg : url ;
  }
+ 
+const TypeFilter = (url) => {
+  if (!url) return "";
+  const fileType = url.substring(url.lastIndexOf(".")).toLowerCase();
+  return fileType;
+ }
 watchEffect(() => {
   if (props.list.length) {
     console.log(props.list, "watchEffect");
@@ -134,7 +152,12 @@ watchEffect(() => {
 const url = ref("");
 const showViewer = ref(false);
 const previewList = ref([]);
-const showImgView = (src) => {
+
+const showVideoView = (src) => {
+  visible.value.show = true;
+  visible.value.src = src;
+}
+  const showImgView = (src) => {
   console.log(src, "showImgView", initFileList.value);
   const fileType = src.substring(src.lastIndexOf(".")).toLowerCase();
   console.log(fileType, fileList.value.includes(fileType), "urlFilter");

src/view/originalPhoto/addCaseFile.vue

@@ -130,7 +130,7 @@ const caseFile = ref({
 });
 console.log('caseFile', props.fileInfo);
 const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
-  maxSize: props.fileInfo?.fileSize || 10 * 1024 * 1024,
+  maxSize: props.fileInfo?.fileSize || 50 * 1024 * 1024,
   formats: props.fileInfo?.formats || [".jpg", ".jpeg", ".png", '.mp4'],
 });
 

src/view/originalPhoto/index.vue

@@ -14,6 +14,7 @@
           :key="index"
         >
           <div class="title1 pb-2">{{item.filesTypeName}}</div>
+          <viewImg :list="item.caseFilesList || []" width="calc(50% - 18px)" height="100px" @handleItem="handleItem" />
           <div class="list2" v-for="item2,index2 in item.childrenList" :key="index2" v-show="item2.caseFilesList?.length">
           <div class="title2">{{item2.filesTypeName}}</div>
           <viewImg :list="item2.caseFilesList || []" width="calc(50% - 18px)" height="100px" @handleItem="handleItem" />