修改样式及新增功能

src/components/liveProjectDetail.vue

@@ -397,11 +397,146 @@
               >
             </span>
           </div>
+          <div
+            class="answerBox"
+            v-if="isBlock == 5"
+            style="padding: 10px 0 0 25px"
+          >
+            <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
+            <div
+              style="
+                margin: 20px 0 20px 0;
+                border-bottom: 4px solid #3e86f3;
+                width: 75px;
+                text-align: center;
+                padding-bottom: 3px;
+              "
+            >
+              选择附件
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                width: 100%;
+                justify-content: flex-start;
+                align-items: center;
+              "
+            >
+              <div
+                v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
+                class="fileBox"
+              >
+                <div
+                  class="fileListCss"
+                  v-for="(v, vIndex) in videoList"
+                  :key="vIndex"
+                >
+                  <div class="fileCss" @click="playVideo(v.src, vIndex)">
+                    <img src="../assets/uploadMp4.png" alt="" />
+                  </div>
+                  <div>{{ v.name }}</div>
+                </div>
+                <div
+                  class="fileListCss"
+                  v-for="(f, fIndex) in fileList"
+                  :key="fIndex"
+                >
+                  <div class="fileCss" @click="openFile(f.src)">
+                    <img src="../assets/file.png" alt="" />
+                  </div>
+                  <div>{{ f.name }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="nextStepBox">
+              <div class="nextStepOne" @click="isBlock = 0">关闭</div>
+            </div>
+          </div>
+          <div
+            class="answerBox"
+            :class="{ fullStyle: full }"
+            v-if="isBlock == 6"
+          >
+            <div style="height: 70%; width: 100%">
+              <div class="wheel">
+                <div class="workd_media" style="height: 100%">
+                  <video-player
+                    class="video-player vjs-custom-skin"
+                    :playsinline="true"
+                    :options="playerO[videoindex]"
+                    @play="onPlayerPlay($event)"
+                    style="width: 90%; height: 100%; margin: 0 0 0 30px"
+                  ></video-player>
+                </div>
+              </div>
+              <div class="nextStepBox" style="margin-top: 5%">
+                <div class="nextStepOne" @click="isBlock = 5">返回</div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="answerBox"
+            style="height: 100%"
+            :class="{ fullStyle: full }"
+            v-if="isBlock == 7"
+          >
+            <div style="height: 70%; width: 100%">
+              <div class="wheel" style="height: 520px; width: 100%">
+                <iframe
+                  style="width: 100%; height: 100%; border: none"
+                  :src="pptImgUrl"
+                ></iframe>
+              </div>
+              <div class="nextStepBox" style="margin-top: 5%">
+                <div class="nextStepOne" @click="isBlock = 5">返回</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="blackBottomB"></div>
+    <div class="blackBottomB">
+      <div style="display: flex">
+        <div
+          class="blackButton"
+          @click="isBlock = 1"
+          v-if="
+            tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(9) != -1
+          "
+        >
+          开始答题
+        </div>
+        <div
+          class="blackButton"
+          @click="isBlock = 4"
+          v-if="
+            (tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(3) != -1) ||
+            (tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(3) != -1) ||
+            (tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(6) != -1) ||
+            (tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(7) != -1) ||
+            (tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(10) != -1) ||
+            (tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(13) != -1)
+          "
+        >
+          查看工具
+        </div>
+        <div
+          class="blackButton"
+          @click="selectFile"
+          v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
+        >
+          查看附件
+        </div>
+      </div>
+    </div>
     <div v-if="proVisible" class="mask">
       <div class="progressBox">
         <div class="lbox">
@@ -457,7 +592,8 @@ export default {
     return {
       iframeInnerHtml: "",
       pdfUrl:
-        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29_202208231345451661233676307.pdf",
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29_202208251543361661413469082.pdf",
+      pptImgUrl: "",
       ppage: 2,
       full: false,
       pageTotal: 0,
@@ -499,16 +635,41 @@ export default {
       tools: [
         "",
         "",
+        {
+          file: [
+            {
+              name: "视频1.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
+            },
+          ],
+        },
+        { tools: [9] }, //问答题
+        { tools: [9] },
+        { tools: [9] }, //协同文档
+        { tools: [9] }, //思维导图
+        { tools: [9] },
+        { tools: [9] },
+        { tools: [12] },
+        { tools: [9] },
+        {
+          file: [
+            {
+              name: "视频2.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
+            },
+          ],
+        },
+        { tools: [9] },
+        "",
+        { tools: [3] },
+        "",
         "",
-        { tools: [12] }, //问答题
         "",
-        { tools: [6, 14] }, //协同文档
-        { tools: [3, 14] }, //思维导图
         "",
         "",
         "",
         "",
-        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
+        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
       ],
       rateList: {
         ca: 0,
@@ -518,6 +679,35 @@ export default {
       imgUrl: "",
       imgFile: "",
       imgFileUp: [],
+      videoList: [],
+      fileList: [],
+      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, //全屏按钮
+        },
+      },
+      playerO: {},
+      videoindex: 0,
     };
   },
   methods: {
@@ -656,7 +846,7 @@ export default {
             file.name.split(".")[0] +
             new Date().getTime() +
             "." +
-            file.name.split(".")[file.name.split(".").length-1],
+            file.name.split(".")[file.name.split(".").length - 1],
           ContentType: file.type,
           Body: file,
           "Access-Control-Allow-Credentials": "*",
@@ -913,6 +1103,44 @@ export default {
       return new File([u8arr], filename, { type: mime });
     },
     search() {},
+    selectFile() {
+      this.fileList = [];
+      this.videoList = [];
+      var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
+      var b = this.tools[this.ppage - 1].file;
+      for (var i = 0; i < b.length; i++) {
+        if (
+          a.indexOf(
+            b[i].src
+              .split(".")
+              [b[i].src.split(".").length - 1].toLocaleUpperCase()
+          ) != -1
+        ) {
+          this.fileList.push(b[i]);
+        } else {
+          this.videoList.push(b[i]);
+        }
+      }
+      this.isBlock = 5;
+    },
+    openFile(u) {
+      this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
+      this.isBlock = 7;
+    },
+    playVideo(u, i) {
+      var d = JSON.parse(JSON.stringify(this.playerOptions));
+      d.sources[0].src = u;
+      this.playerO[0] = d;
+      this.videoindex = i;
+      this.isBlock = 6;
+    },
+    switchVideo(media) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
+    },
+    onPlayerPlay() {},
     howPage(page) {
       if (!this.pageTotal) {
         return;
@@ -1115,14 +1343,14 @@ export default {
   cursor: pointer;
 }
 .blackBottomB {
-  position: absolute;
+  position: sticky;
   bottom: 0px;
   left: 0px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   background: rgb(0, 0, 0);
   height: 45px;
@@ -1506,4 +1734,38 @@ img {
   width: 100%;
   height: 100%;
 }
+.fileBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  align-content: center;
+  width: 100%;
+}
+.fileListCss {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 15px 15px 0;
+}
+.fileCss {
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+  margin: 0 0 10px 0;
+}
+.fileCss > img {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+.wheel {
+  width: 100%;
+  height: 100%;
+}
+.video-player >>> .video-js {
+  height: 100%;
+}
 </style>

src/components/study.vue

@@ -138,7 +138,8 @@
             v-if="
               vedio[taskCount].length > 0 ||
               chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                .taskDetail != ''
+                .taskDetail != '' || chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+              .chapterData.length > 0
             "
           >
             <div class="checkbox">