文件预览增加 loading

src/common/show_file/index.vue

@@ -1,13 +1,15 @@
 <template>
   <el-dialog class="show-file" :visible="dialogVisibleShowFile" width="1100px" @close="dialogShowFileClose">
     <div slot="title">{{ $t('Key322') }}【{{ fileName }}】</div>
-
-    <iframe
-      v-if="fileUrl.length > 0"
-      :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
-      width="100%"
-      height="540px"
-    />
+    <div v-loading="loading">
+      <iframe
+        v-if="fileUrl.length > 0"
+        id="iframe"
+        :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
+        width="100%"
+        height="540px"
+      />
+    </div>
 
     <div slot="footer">
       <el-button @click="dialogShowFileClose">
@@ -36,6 +38,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       dialogVisibleShowFile: false,
       pdfSrc: '',
       numPages: 1,
@@ -66,7 +69,13 @@ export default {
   methods: {
     getFileStoreInfo() {
       GetFileStoreInfo({ file_id: this.fileId }).then(({ file_url_https }) => {
+        this.loading = true;
         this.fileUrl = encodeURIComponent(encode(file_url_https));
+        this.$nextTick(() => {
+          document.getElementById('iframe').onload = () => {
+            this.loading = false;
+          };
+        });
       });
     },
 

src/components/live/CurMaterial.vue

@@ -76,12 +76,15 @@
     </template>
 
     <template v-else>
-      <iframe
-        v-if="fileUrl.length > 0"
-        :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
-        width="100%"
-        height="540px"
-      />
+      <div v-loading="file_loading">
+        <iframe
+          v-if="fileUrl.length > 0"
+          id="iframe"
+          :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
+          width="100%"
+          height="540px"
+        />
+      </div>
     </template>
 
     <div slot="footer">
@@ -129,6 +132,7 @@ export default {
   },
   data() {
     return {
+      file_loading: false,
       visible: false,
       material_id: '',
       material_name: '',
@@ -303,6 +307,12 @@ export default {
         this.category = 'file';
         this.file_url_https = file_url_https;
         this.fileUrl = encodeURIComponent(encode(file_url_https));
+        this.file_loading = true;
+        this.$nextTick(() => {
+          document.getElementById('iframe').onload = () => {
+            this.file_loading = false;
+          };
+        });
       });
     },
 

src/views/live/teacher/CompleteList.vue

@@ -88,12 +88,15 @@
         </template>
       </template>
       <template v-else>
-        <iframe
-          v-if="fileUrl.length > 0"
-          :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
-          width="100%"
-          height="540px"
-        />
+        <div v-loading="file_loading">
+          <iframe
+            v-if="fileUrl.length > 0"
+            id="iframe"
+            :src="`https://docpreview.utschool.cn/onlinePreview?url=${fileUrl}`"
+            width="100%"
+            height="540px"
+          />
+        </div>
       </template>
     </div>
 
@@ -142,6 +145,7 @@ export default {
       count_not_done: 0,
       count_right: 0,
       count_error: 0,
+      file_loading: false,
       fileUrl: '',
       file_relative_path: '',
       file_url_https: '',
@@ -286,6 +290,12 @@ export default {
         this.file_relative_path = file_relative_path;
         this.file_url_https = file_url_https;
         this.fileUrl = encodeURIComponent(encode(file_url_https));
+        this.file_loading = true;
+        this.$nextTick(() => {
+          document.getElementById('iframe').onload = () => {
+            this.file_loading = false;
+          };
+        });
       });
     },