update

src/common/show_file/index.vue

@@ -21,7 +21,6 @@
 
 <script>
 import { GetFileStoreInfo } from '@/api/app';
-import { getFileType } from '@/utils/filter';
 import { encode } from 'js-base64';
 
 export default {
@@ -40,17 +39,9 @@ export default {
     return {
       loading: false,
       dialogVisibleShowFile: false,
-      pdfSrc: '',
-      numPages: 1,
-      fileUrl: '',
-      text: ''
+      fileUrl: ''
     };
   },
-  computed: {
-    fileType() {
-      return getFileType(this.fileName);
-    }
-  },
   watch: {
     fileId(newVal) {
       if (newVal.length > 0) {
@@ -59,10 +50,7 @@ export default {
     },
     dialogVisibleShowFile(newVal) {
       if (!newVal) {
-        this.pdfSrc = '';
-        this.numPages = 0;
         this.fileUrl = '';
-        this.text = '';
       }
     }
   },

src/components/live/CurMaterial.vue

@@ -144,9 +144,6 @@ export default {
       category: '',
       fileUrl: '',
       file_url_https: '',
-      pdfNum: 0,
-      pdfSrc: '',
-      numPages: 1,
       curStudentID: '',
       bookAnswerContent: '',
       isAlignCenter: true,
@@ -182,8 +179,6 @@ export default {
         this.exam_answer = '';
         this.fileUrl = '';
         this.file_url_https = '';
-        this.pdfSrc = '';
-        this.numPages = 1;
         this.curStudentID = '';
         this.material_id = '';
         this.material_name = '';

src/components/preview/PreviewCourse.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-dialog class="preview-course" :visible="visible" :title="$t('Key144')" width="1100px" @close="dialogClose">
+    <template v-if="fileType === 'courseware'">
+      <template v-if="category === 'OC' || category.length === 0">
+        <bookquestion ref="courseware" :context="context" />
+      </template>
+      <template v-else-if="category === 'AILP'">
+        <bookailp :context="context" :ui-type="ui_type" :preview-width="800" :preview-height="450" />
+      </template>
+      <template v-else-if="category === 'NPC'">
+        <booknpc
+          v-if="context"
+          ref="booknpc"
+          task-model=""
+          :is-show-save="false"
+          :context="context"
+          :theme-color="themeColor"
+        />
+      </template>
+      <template v-if="category == 'NNPE'">
+        <booknnpe
+          v-if="context"
+          :context="context"
+          :theme-color="themeColor"
+          task-model=""
+          :is-show-save="false"
+          :is-show-title="true"
+        />
+      </template>
+    </template>
+
+    <template v-else-if="fileType === 'file'">
+      <div v-loading="loading">
+        <iframe
+          v-if="fileUrl.length > 0"
+          id="iframe"
+          :src="`${$store.state.app.config.doc_preview_service_address}/onlinePreview?url=${fileUrl}`"
+          width="100%"
+          height="540px"
+        />
+      </div>
+    </template>
+
+    <div slot="footer">
+      <el-button @click="dialogClose">
+        {{ $t('Key246') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { GetFileStoreInfo } from '@/api/app';
+import { GetCoursewareContent_View } from '@/api/course';
+import { encode } from 'js-base64';
+
+export default {
+  props: {
+    visible: {
+      type: Boolean
+    },
+    fileType: {
+      type: String,
+      default: ''
+    },
+    fileId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      category: '',
+      context: null,
+      themeColor: '',
+      fileUrl: '',
+      loading: false
+    };
+  },
+  watch: {
+    fileType(newVal) {
+      if (newVal.length === 0) return;
+      if (newVal === 'courseware') {
+        this.getCoursewareContent_View();
+      } else {
+        this.getFileStoreInfo();
+      }
+    },
+    visible(newVal) {
+      if (!newVal) {
+        this.category = '';
+        this.context = null;
+        this.themeColor = '';
+        this.fileUrl = '';
+        this.loading = false;
+      }
+    }
+  },
+  methods: {
+    getCoursewareContent_View() {
+      GetCoursewareContent_View({ id: this.fileId }).then(({ content, category, book_theme_color }) => {
+        if (!content) {
+          this.context = null;
+          return;
+        }
+        this.category = category;
+        if (category === 'OC' || category.length === 0) {
+          this.context = {
+            id: this.material_id,
+            ui_type: JSON.parse(content).question.ui_type,
+            content: JSON.parse(content)
+          };
+          return;
+        }
+
+        if (category === 'AILP') {
+          const contents = JSON.parse(content);
+          if (contents.question && contents.question.length > 0) {
+            this.context = JSON.parse(contents.question);
+            this.ui_type = contents.ui_type ? contents.ui_type : '';
+          }
+          return;
+        }
+
+        if (category === 'NPC') {
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
+          return;
+        }
+
+        if (category === 'NNPE') {
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
+        }
+      });
+    },
+
+    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;
+          };
+        });
+      });
+    },
+
+    dialogClose() {
+      this.$emit('dialogClose');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin';
+
+.preview-course {
+  @include dialog;
+
+  ::v-deep .el-dialog__header {
+    font-weight: bold;
+  }
+
+  ::v-deep .el-dialog__body {
+    min-height: 300px;
+  }
+}
+</style>

src/views/course_details/index.vue

@@ -104,7 +104,12 @@
           <div class="moreList">
             <div v-for="(item, i) in CourseData.book_list" :key="i" class="moreOne">
               <div>
-                <img :src="item.book_picture_url" alt="" />
+                <img
+                  :style="{ cursor: 'pointer' }"
+                  :src="item.book_picture_url"
+                  alt="picture"
+                  @click="goBook(item.book_id)"
+                />
               </div>
               <div class="text">
                 <p class="p1">
@@ -206,6 +211,7 @@
                                     v-for="(courseware, courseware_i) in it.courseware_list"
                                     :key="courseware_i"
                                     class="btn"
+                                    @click="preview(courseware.courseware_id, 'courseware')"
                                   >
                                     <img src="../../assets/course_details/file.png" alt="" />
                                     <span> {{ courseware.courseware_name }} </span>
@@ -219,6 +225,7 @@
                                     v-for="(accessory, accessory_i) in it.accessory_list"
                                     :key="accessory_i"
                                     class="btn"
+                                    @click="preview(accessory.file_id, 'file')"
                                   >
                                     <img src="../../assets/course_details/fileType1.png" alt="" />
                                     <span> {{ accessory.file_name }} </span>
@@ -269,11 +276,14 @@
     >
       <Payment ref="Confirmorder" :order-id="orderId" @judgePayResult="judgePayResult"></Payment>
     </el-dialog>
+
+    <preview-course :file-id="fileId" :file-type="fileType" :visible="visible" @dialogClose="dialogClose" />
   </div>
 </template>
 
 <script>
 import Audit from '@/components/payment/Audit.vue';
+import PreviewCourse from '@/components/preview/PreviewCourse.vue';
 import Payment from '@/components/payment/Payment.vue';
 import {
   GetCourseInfoBox,
@@ -288,7 +298,8 @@ export default {
   name: 'CourseDetails',
   components: {
     Audit,
-    Payment
+    Payment,
+    PreviewCourse
   },
   data() {
     const query = this.$route.query;
@@ -314,7 +325,10 @@ export default {
         { id: 'after_task_list', name: 'Key355' }
       ],
       visiblePay: false,
-      orderId: ''
+      orderId: '',
+      visible: false,
+      fileId: '',
+      fileType: ''
     };
   },
   created() {
@@ -349,7 +363,7 @@ export default {
     handleChange(val) {
       this.openList.includes(val) ? this.openList.splice(this.openList.indexOf(val), 1) : this.openList.push(val);
     },
-    goBook(book_id, is_buy = true) {
+    goBook(book_id, is_buy = false) {
       if (!is_buy) {
         window.location.href = `/GCLS-Book/#/GoodsDetail?goods_id=${book_id}&goods_type=101&invok_module=${
           this.invok_module ? this.invok_module : 'GCLS-Learn'
@@ -449,6 +463,23 @@ export default {
     closeaudit() {
       this.auditShow = false;
     },
+
+    preview(fileId, fileType) {
+      if (!this.is_buy) {
+        this.$message.warning('请先购买该课程');
+        return;
+      }
+      this.visible = true;
+      this.fileId = fileId;
+      this.fileType = fileType;
+    },
+
+    dialogClose() {
+      this.visible = false;
+      this.fileId = '';
+      this.fileType = '';
+    },
+
     // 获取当前时间到指定时间的倒计时
     getBackTime() {
       const date = new Date(this.CourseData.end_date);

src/views/live/teacher/CompleteList.vue

@@ -147,10 +147,7 @@ export default {
       count_error: 0,
       file_loading: false,
       fileUrl: '',
-      file_relative_path: '',
       file_url_https: '',
-      pdfSrc: '',
-      numPages: 1,
       student_list: [],
       curStudentID: '',
       curStudentName: '',
@@ -286,8 +283,7 @@ export default {
     },
 
     getFileStoreInfo() {
-      GetFileStoreInfo({ file_id: this.material_id }).then(({ file_relative_path, file_url_https }) => {
-        this.file_relative_path = file_relative_path;
+      GetFileStoreInfo({ file_id: this.material_id }).then(({ file_url_https }) => {
         this.file_url_https = file_url_https;
         this.fileUrl = encodeURIComponent(encode(file_url_https));
         this.file_loading = true;

src/views/teacher/create_course/step_table/NewTask.vue

@@ -304,7 +304,7 @@ export default {
         coursewareInfo: [],
         file_info_list: [],
         courseware_visible_mode: 21,
-        zhibo_record_mode: 31
+        zhibo_record_mode: 32
       },
       courseForm: {
         coursewareInfo: [],