作业提交展示

src/components/pages/components/lookWork.vue

@@ -192,7 +192,45 @@
                       </div>
                     </div>
                     <div v-for="(i, codex) in l.content" :key="codex + 'co'">
-                      <div class="answerTxt" v-html="i"></div>
+                      <iframe
+                        v-if="getFileExtension(i) == 'PDF'"
+                        style="width: 90%; height: 500px; border: none"
+                        :src="
+                          'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' +
+                            encodeURIComponent(i)
+                        "
+                      ></iframe>
+
+                      <iframe
+                        v-if="words.indexOf(getFileExtension(i)) != -1"
+                        style="width: 90%; height: 500px; border: none"
+                        :src="
+                          'https://view.officeapps.live.com/op/view.aspx?src=' +
+                            encodeURIComponent(i)
+                        "
+                        frameborder="0"
+                      ></iframe>
+
+
+                      <img    
+                        @click.stop="previewImg(i)"
+                        style="max-width: 200px" 
+                        v-if="pictures.indexOf(getFileExtension(i)) != -1 " 
+                        :src="i" alt="">
+
+                      <div v-if="xianObj.indexOf(getFileExtension(i)) != -1 && TxtMd" >{{ TxtMd }}</div>
+                      
+                      <video-player
+                          v-if="getFileExtension(i) == 'MP4'"
+                          class="video-player vjs-custom-skin"
+                          :playsinline="true"
+                          :options="playerOptions"
+                          @play="onPlayerPlay($event)"
+                          style="width: 90%; height: 500px; margin: 0 0 0 30px"
+                        ></video-player>
+
+                        <div class="answerTxt" v-html="i"></div>
+
                     </div>
                   </div>
                   <div
@@ -748,6 +786,46 @@
 </template>
 
 <script>
+
+const getFile = url => {
+  return new Promise((resolve, reject) => {
+    var credentials = {
+      accessKeyId: "AKIATLPEDU37QV5CHLMH",
+      secretAccessKey: "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"
+    }; //秘钥形式的登录上传
+    window.AWS.config.update(credentials);
+    window.AWS.config.region = "cn-northwest-1"; //设置区域
+    let url2 = url;
+    let _url2 = "";
+    if (
+      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+    ) {
+      _url2 = url2.split(
+        "https://view.officeapps.live.com/op/view.aspx?src="
+      )[1];
+    } else {
+      _url2 = url2;
+    }
+    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+    let name = decodeURIComponent(
+      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+    );
+    var params = {
+      Bucket: "ccrb",
+      Key: name
+    };
+    s3.getObject(params, function(err, data) {
+      if (err) {
+        console.log(err, err.stack);
+        resolve({ data: 1 });
+      } else {
+        const fileContent = data.Body.toString("utf-8");
+        resolve({ data: fileContent });
+      } // sxuccessful response
+    });
+    // axios({
+  });
+};
 export default {
   props: {
     id: {
@@ -776,14 +854,42 @@ export default {
       workEvaList: [],
       // 上一个下一个学生位置
       positP: 0,
-
+      TxtMd:'',
       dyList: [],
       courseName: "",
       workList: [],
       CState: 0,
       tableData: [],
       loading: false,
-      resData: {}
+      resData: {},
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "" //url地址require("../../../assets/media/aaa.mp4")
+          }
+        ],
+        // poster: require("../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true //全屏按钮
+        }
+      },
+      xianObj: [ "MD", "TXT"],
+      words:["DOCX","XLSX", "PPT" ,"PPTX"],
+      pictures:["JPG", "PNG" ,"JPEG"]
     };
   },
 
@@ -895,6 +1001,27 @@ export default {
     }
   },
   methods: {
+    onPlayerPlay() {},
+
+    // 作业提交进行判断展示
+    getFileExtension(fileName) {
+      let der = fileName.slice(fileName.lastIndexOf(".") + 1).toUpperCase()
+      console.log('getFileExtension',der);
+
+      if (der == 'MP4') {
+        this.playerOptions.sources[0].src = fileName;
+        return der;
+      }
+
+      if (this.xianObj.indexOf(der) != -1) {
+        getFile(fileName).then(res => {
+          this.TxtMd = res.data;
+        });
+        return der;
+      }
+      
+      return der;
+    },
      // 时间戳转时间
      convertToTimestamp(val) {
       const date = new Date(val);