资源类型，显示文本类型

src/components/CommonPreview.vue

@@ -210,7 +210,11 @@
 
                 <!-- 加载完成显示数据 -->
                 <div v-else-if="chapter.data">
-                  <ul class="scroll-container" infinite-scroll-disabled="disabled" :infinite-scroll-immediate="false">
+                  <ul
+                    :class="parseInt(drawerType) == 5 ? 'scroll-container file-list' : 'scroll-container'"
+                    infinite-scroll-disabled="disabled"
+                    :infinite-scroll-immediate="false"
+                  >
                     <li v-for="(item, index) in chapter.data" :key="`${chapter.id}-${index}`" class="list-item">
                       <template v-if="parseInt(drawerType) === 0">
                         <el-image v-if="shouldMediaShowItem(chapter, item)" :src="item.file_url" fit="contain" />
@@ -233,13 +237,36 @@
                           :video-index="index"
                         />
                       </template>
-                      <template v-else-if="parseInt(drawerType) === 3">
-                        <el-image v-if="shouldMediaShowItem(chapter, item)" :src="item.file_url" fit="contain" />
+                      <template v-else-if="parseInt(drawerType) === 3"> </template>
+                      <template v-else-if="parseInt(drawerType) === 4"> </template>
+                      <template v-else-if="parseInt(drawerType) === 5">
+                        <div class="file-name">
+                          <span>
+                            <SvgIcon icon-class="file" size="24" />
+                            <p>
+                              <span>{{ item.file_name }}</span>
+                            </p>
+                          </span>
+                          <div>
+                            <SvgIcon
+                              v-show="item.file_id"
+                              icon-class="uploadPreview"
+                              size="24"
+                              @click="viewDialog(item)"
+                            />
+
+                            <img
+                              style="width: 24px; height: 24px; cursor: pointer"
+                              src="@/assets/download.png"
+                              alt="download"
+                              @click="downLoad(item)"
+                            />
+                          </div>
+                        </div>
                       </template>
-
                       <!-- 资源底部的操作 -->
                       <div class="file-handle-info">
-                        <span v-if="parseInt(drawerType) !== 1" class="word">{{ item.file_name }}</span>
+                        <span v-if="![1, 5].includes(parseInt(drawerType))" class="word">{{ item.file_name }}</span>
                         <div class="mark">
                           <el-checkbox
                             :disabled="!item.is_can_edit"
@@ -361,6 +388,20 @@
     />
     <SimAnswerPermissionControl :visible.sync="visiblePermissionControl" :permission-control.sync="permissionControl" />
     <PreviewURL :url="preview_url" :visible.sync="visiblePreviewURL" />
+
+    <el-dialog
+      v-if="fileViewVisible"
+      :visible.sync="fileViewVisible"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :lock-scroll="true"
+      :width="isMobile ? '100%' : '80%'"
+      top="0"
+    >
+      <iframe v-if="fileViewVisible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -405,6 +446,7 @@ import {
 import { toggleFullScreen } from '@/utils/common';
 import * as OpenCC from 'opencc-js';
 import { isTrue } from '@/utils/validate';
+import { getConfig, getToken } from '@/utils/auth';
 import { CreateCoursewarePreviewURL } from '@/api/app';
 
 export default {
@@ -473,7 +515,7 @@ export default {
           { icon: 'audio', title: '音频', handle: 'openDrawer', param: { type: '1' } },
           { icon: 'image', title: '图片', handle: 'openDrawer', param: { type: '0' } },
           { icon: 'video', title: '视频', handle: 'openDrawer', param: { type: '2' } },
-          { icon: 'text', title: '文本', handle: 'openDrawer', param: { type: '3' } },
+          { icon: 'text', title: '文本', handle: 'openDrawer', param: { type: '5' } },
         ],
       },
       { icon: 'collect', title: '收藏', handle: 'getCollect', param: { type: '11' } },
@@ -488,6 +530,10 @@ export default {
 
     return {
       select_node: this.id,
+      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
+      newpath: '',
+      fileViewVisible: false,
+      iframeHeight: `${window.innerHeight - 100}px`,
       courseware_info: {
         book_name: '',
         is_can_start_edit: 'false',
@@ -595,7 +641,7 @@ export default {
         0: '图片资源',
         1: '音频资源',
         2: '视频资源',
-        3: '文本资源',
+        5: '文本资源',
         11: '收藏列表',
         12: '笔记列表',
         13: '搜索结果',
@@ -694,7 +740,7 @@ export default {
         ({ courseware_info }) => {
           this.courseware_info = { ...this.courseware_info, ...courseware_info };
           this.getLangList();
-        }
+        },
       );
     },
     /**
@@ -758,14 +804,14 @@ export default {
           });
 
           if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
-        }
+        },
       );
     },
     getLangList() {
       GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
         ({ language_type_list }) => {
           this.langList = language_type_list;
-        }
+        },
       );
     },
 
@@ -870,7 +916,7 @@ export default {
       this.$refs.courserware.handleResult(
         this.$refs.previewMain.scrollTop,
         this.$refs.previewMain.scrollLeft,
-        this.select_node
+        this.select_node,
       );
     },
     /**
@@ -933,7 +979,7 @@ export default {
     /**
      * 打开抽屉并初始化加载
      * @param {Object} param - 抽屉参数
-     * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频, 3:文本）
+     * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频, 3:H5 游戏,4:3D 模型,5:文本）
      */
     openDrawer({ type }) {
       if (this.drawerType === type) {
@@ -1217,6 +1263,26 @@ export default {
         this.$refs.courserware.handleLocation(item);
       }
     },
+
+    downLoad(file) {
+      let userInfor = getToken();
+      let AccessToken = '';
+      if (userInfor) {
+        AccessToken = userInfor.access_token;
+      }
+      let FileID = file.file_id;
+      let data = {
+        AccessToken,
+        FileID,
+      };
+      location.href = `${process.env.VUE_APP_EEP}/FileServer/WebFileDownload?AccessToken=${data.AccessToken}&FileID=${data.FileID}`;
+    },
+    // 预览
+    viewDialog(file) {
+      this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(file.file_url)}`;
+      this.fileViewVisible = true;
+    },
+
     /**
      * 获取笔记列表
      * @param {Object} params - 参数对象
@@ -1254,7 +1320,7 @@ export default {
           x.coursewareId === note.coursewareId &&
           x.blockId === note.blockId &&
           x.startIndex === note.startIndex &&
-          x.endIndex === note.endIndex
+          x.endIndex === note.endIndex,
       );
       if (old) {
         this.oldRichData = old;
@@ -1348,7 +1414,7 @@ export default {
           x.coursewareId === collect.coursewareId &&
           x.blockId === collect.blockId &&
           x.startIndex === collect.startIndex &&
-          x.endIndex === collect.endIndex
+          x.endIndex === collect.endIndex,
       );
       if (old) {
         this.$message({
@@ -1995,6 +2061,43 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
   margin: 10px 0 0 !important;
   background-color: #eee;
 }
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+
+  li {
+    align-items: center;
+
+    .file-name {
+      display: flex;
+      column-gap: 14px;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 500px;
+      padding: 8px 12px;
+      font-size: 14px;
+      color: #1d2129;
+      background-color: #f7f8fa;
+      border-radius: 8px;
+
+      p {
+        margin: 0;
+      }
+
+      span,
+      div {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .svg-icon {
+      cursor: pointer;
+    }
+  }
+}
 </style>
 
 <style lang="scss">