1030bug修改

src/views/caseFiling/components/archiveDetailsDialog.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <el-dialog
-      title="归档详情"
-      :visible="showarchiveDetails"
-      @close="cancel"
-      :destroy-on-close="true"
-      center
-    >
+    <el-dialog title="归档详情" :visible="showarchiveDetails" @close="cancel" :destroy-on-close="true" center>
       <div class="loading" v-if="flagLoading">
         <i class="el-icon-loading"></i>
       </div>
@@ -20,13 +14,12 @@
             <caselogInfo :caselogDataArr="caselogDataArr"></caselogInfo>
           </el-tab-pane>
           <el-tab-pane label="快递信息" name="third">
-            <expressDeliveryInfo
-              :deliveryDataArr="deliveryDataArr"
-            ></expressDeliveryInfo>
+            <expressDeliveryInfo :deliveryDataArr="deliveryDataArr"></expressDeliveryInfo>
           </el-tab-pane>
-          <el-tab-pane label="案件视频" name="four">
+          <el-tab-pane style="display: flex;justify-content: space-between;flex-wrap: wrap;" label="案件视频" name="four">
             <!-- <div @click="getVideo">chakanshipin</div> -->
-            <video style="background-color: #181717;" :src="videoUrl" controls="controls"></video>
+            <el-empty description="暂无视频" v-if="!videoFlag"></el-empty>
+            <video style="background-color: #181717;width: 400px;height: 200px;margin: 30px;" v-if="videoFlag" :src="headPath + item.annexPath" controls="controls" v-for="(item,index) in videoUrl" :key="index"></video>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -42,7 +35,7 @@ import caseInfo from "./caseInfo.vue";
 import caselogInfo from "./caselogInfo.vue";
 import expressDeliveryInfo from "./expressDeliveryInfo.vue";
 export default {
-  props: ["showarchiveDetails", "detailform", "flagLoading","videoList"],
+  props: ["showarchiveDetails", "detailform", "flagLoading", "videoList"],
   components: {
     caseInfo,
     caselogInfo,
@@ -55,11 +48,14 @@ export default {
       caselogDataArr: [], //案件日志
       deliveryDataArr: [], //快递信息
       noData: false,
-      videoUrl:''
+      videoUrl:[],
+      headPath:"",
+      videoFlag:false
     };
   },
   watch: {
     detailform(newValue) {
+      this.headPath = window.location.origin + "/API";
       if (newValue) {
         this.caseApplicationObj = this.detailform.caseApplication;
         this.caselogDataArr = this.detailform.caseLogRecordList;
@@ -70,18 +66,18 @@ export default {
   methods: {
     handleClick(tab, event) {
       // console.log(tab, event);
-      let headPath = window.location.origin + "/API";
-      this.videoUrl = headPath + this.videoList[0].annexPath;
+      if (this.videoList) {
+        this.videoFlag = true;
+        // this.videoUrl = headPath + this.videoList[0].annexPath;
+        this.videoUrl = this.videoList;
+      }else{
+        this.videoFlag = false;
+      }
+
     },
     cancel() {
       this.$emit("cancelpaymentdetails");
     },
-    getVideo(){
-      // console.log(this.videoList[0].annexPath,"PPPPPPPPPPPPPPPP");
-      let headPath = window.location.origin + "/API";
-      this.videoUrl = headPath + this.videoList[0].annexPath;
-      // window.open(headPath + this.videoList[0].annexPath)
-    }
   },
 };
 </script>
@@ -92,20 +88,29 @@ export default {
   background: #ffffff;
   border-radius: 20px;
 }
+
 ::v-deep .el-dialog__body {
   height: 700px !important;
-  overflow: auto !important;
+  overflow: hidden;
 }
+
+::v-deep .el-tabs__content {
+  height: 700px;
+  overflow-y: scroll;
+}
+
 .loading {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+
   .el-icon-loading {
     font-size: 50px;
   }
 }
+
 .noData {
   width: 100%;
   height: 400px;