功能及样式

src/components/study.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content">
+  <div class="pb_content" style="overflow: unset">
     <div class="pb_content_body" style="display: flex; min-height: 800px">
       <div
         style="
@@ -13,17 +13,34 @@
           {{ courseDetail.title }}
         </div>
         <div class="ml">目录</div>
-        <div
-          class="blue_box_one"
-          v-for="(item, stageIndex) in chapInfoList"
-          :key="stageIndex"
-          @click="get(stageIndex)"
-        >
-          <div>第{{ stageIndex + 1 }}阶段</div>
-          <div>{{ item.dyName }}</div>
+        <div v-for="(item, stageIndex) in navList" :key="stageIndex">
+          <div class="blue_box_one" @click="get(stageIndex)">
+            <div>第{{ stageIndex + 1 }}阶段</div>
+            <div>{{ item.dyName }}</div>
+          </div>
+          <div class="twoChild" :class="{ navActive: item.isOpen }">
+            <div
+              class="navChild"
+              v-for="(nav, navIndex) in item.task"
+              :key="navIndex"
+            >
+              <div
+                class="navTask"
+                @click="openTask(stageIndex, navIndex, nav.id)"
+                :class="{ openTaskActive: nav.id == navId }"
+              >
+                <div class="vedioNav" style="margin: 0">
+                  任务{{ navIndex + 1 }}
+                </div>
+                <div class="navTaskname">
+                  {{ nav.taskName }}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="body_student">
+      <div class="body_student" style="width: 77%">
         <div class="new_top">
           <div class="before"></div>
           <div class="courseIndex">
@@ -50,11 +67,12 @@
 
         <div
           class="study_top"
-          v-for="(task, index) in chapInfo.chapterInfo[0].taskJson"
+          v-for="(task, index) in chapInfoList[courseType].chapterInfo[0]
+            .taskJson"
           :key="index"
         >
           <div class="checkbox">
-            <div class="check" style="font-size: 19px">
+            <div class="check" style="font-size: 19px" :id="task.id">
               {{ index + 1 }} {{ task.task }}
             </div>
           </div>
@@ -80,7 +98,7 @@
                   </div>
                 </div>
               </div>
-              <div style="padding: 20px">
+              <div style="padding: 20px" v-if="task.taskDetail != ''">
                 <span style="color: #cbcbcb">任务描述</span>
                 <!-- <textarea
                 rows="6"
@@ -93,11 +111,7 @@
               </div>
             </div>
           </div>
-          <div class="student_head">
-            <!-- <div class="course_text" v-if="chapInfo.dyText != ''">
-            {{ chapInfo.dyText }}
-          </div>
-          <div class="course_text" v-else>暂无课程简介</div> -->
+          <div class="student_head" v-if="vedio[0].length > 0">
             <div class="box_course" :class="vedio.length == 0 ? 'noVedio' : ''">
               <div
                 class="wheel"
@@ -113,9 +127,9 @@
                   ></video-player>
                 </div>
               </div>
-              <div v-else style="margin: 0px 25% 0px 35%;">
+              <!-- <div v-else style="margin: 0px 25% 0px 35%">
                 <img src="../assets/icon/noVedio.png" alt="" />
-              </div>
+              </div> -->
               <div
                 class="vedioList"
                 :class="vedio.length == 0 ? 'listNoVedio' : ''"
@@ -171,7 +185,7 @@
                 >
                   <div class="vedioNav" style="width: 70px">富文本</div>
                   <div>
-                    <div class="navText" @click="lookText(index,textIndex)">
+                    <div class="navText" @click="lookText(index, textIndex)">
                       {{ textList[index].length > 0 ? text.name : "" }}.doc
                     </div>
                   </div>
@@ -188,7 +202,7 @@
                 >
                   <div class="vedioNav">工具</div>
                   <div>
-                    <div class="navText" @click="lookTools(index,toolsIndex)">
+                    <div class="navText" @click="lookTools(index, toolsIndex)">
                       {{ chapToolList[index].length > 0 ? tools.name : "" }}
                     </div>
                   </div>
@@ -221,7 +235,115 @@
               </div>
             </div>
           </div>
-
+          <div class="student_head hangHand" v-else>
+            <div class="box_course hangVedio">
+              <div
+                class="vedioList hangVedioList"
+                v-if="
+                  (vedio.length && vedio[index] && vedio[index].length > 0) ||
+                  (textList.length &&
+                    textList[index] &&
+                    textList[index].length > 0) ||
+                  (chapToolList.length &&
+                    chapToolList[index] &&
+                    chapToolList[index].length > 0) ||
+                  (lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0)
+                "
+              >
+                <div
+                  v-show="
+                    vedio.length && vedio[index] && vedio[index].length > 0
+                  "
+                >
+                  <div class="vedioNav">视频</div>
+                  <div
+                    class="media"
+                    style="width: 160px; margin: 10px auto; position: relative"
+                    v-for="(media, vedioIndex) in vedio[index]"
+                    :key="vedioIndex + '1'"
+                  >
+                    <img
+                      style="height: 90px; width: 160px"
+                      :src="
+                        media.cover != null && media.cover != ''
+                          ? JSON.parse(media.cover).length > 0
+                            ? JSON.parse(media.cover)[0].url
+                            : mr
+                          : mr
+                      "
+                      alt=""
+                      @click="lookVedio(media.url)"
+                    />
+                    <div class="vedioName">{{ media.name }}</div>
+                  </div>
+                </div>
+                <div
+                  v-show="
+                    textList.length &&
+                    textList[index] &&
+                    textList[index].length > 0
+                  "
+                  class="newNav"
+                  v-for="(text, textIndex) in textList[index]"
+                  :key="textIndex + '2'"
+                >
+                  <div class="vedioNav" style="width: 70px">富文本</div>
+                  <div>
+                    <div class="noNavText" @click="lookText(index, textIndex)">
+                      {{ textList[index].length > 0 ? text.name : "" }}.doc
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-show="
+                    chapInfoList.length &&
+                    chapToolList[index] &&
+                    chapToolList[index].length > 0
+                  "
+                  class="newNav"
+                  v-for="(tools, toolsIndex) in chapToolList[index]"
+                  :key="toolsIndex + '3'"
+                >
+                  <div class="vedioNav">工具</div>
+                  <div>
+                    <div
+                      class="noNavText"
+                      @click="lookTools(index, toolsIndex)"
+                    >
+                      {{ chapToolList[index].length > 0 ? tools.name : "" }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-show="
+                    lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0
+                  "
+                  class="newNav"
+                  v-for="(lines, lineIndex) in lineList[index]"
+                  :key="lineIndex + '4'"
+                >
+                  <div class="vedioNav">链接</div>
+                  <div>
+                    <div class="noNavText">
+                      <a
+                        style="text-decoration: none; color: #000"
+                        target="_Blank"
+                        :href="'https://' + lines.url"
+                        >{{ lines.url }}</a
+                      >
+                      <!-- {{
+                      lineList.length > 0 ? lines.url : ""
+                    }} -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="student_body">
             <div
               class="project_box"
@@ -257,21 +379,12 @@
                   <div>工具</div>
                 </div>
               </div>
-              <div
-                class="toolHeng"
-                v-for="(tool, toolIndex) in task.toolChoose"
-                :key="toolIndex"
-              >
+              <div class="toolHeng">
                 <div
                   class="filebox"
-                  style="
-                    min-width: 480px;
-                    flex-wrap: nowrap;
-                    width: 90%;
-                    background: #f2f2f2;
-                    border-radius: 10px;
-                    margin: 20px 0 10px 20px;
-                  "
+                  style="flex-wrap: nowrap; margin: 20px 0 10px 20px"
+                  v-for="(tool, toolIndex) in task.toolChoose"
+                  :key="toolIndex"
                 >
                   <div
                     style="
@@ -354,9 +467,20 @@
                         />
                         <div style="margin: 5px 0">量规评分</div>
                       </div>
+                      <div v-if="tooC == 9">
+                        <img
+                          @click="addTools(tooC, toolIndex)"
+                          src="../assets/icon/thirdToolList/work.png"
+                          alt=""
+                        />
+                        <div style="margin: 5px 0">作业提交</div>
+                      </div>
                     </div>
                   </div>
-                  <div style="padding: 0 0 20px 30px; width: 30%">
+                  <div
+                    style="padding: 0 0 20px 30px; width: 30%"
+                    v-if="tool.toolDetail != ''"
+                  >
                     <div style="margin: 0 0 20px 0">工具描述</div>
                     <div>
                       {{ tool.toolDetail != "" ? tool.toolDetail : "暂无描述" }}
@@ -365,7 +489,7 @@
                 </div>
               </div>
             </div>
-            <div
+            <!-- <div
               class="project_box"
               style="margin-top: 15px; padding-bottom: 30px"
             >
@@ -405,7 +529,7 @@
                   </div>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
         <el-dialog
@@ -743,7 +867,10 @@
               </div>
             </div>
           </div>
-          <div style="padding: 0 0 20px 30px; width: 30%">
+          <div
+            style="padding: 0 0 20px 30px; width: 30%"
+            v-if="chapTools.name != ''"
+          >
             <div style="margin: 0 0 20px 0">工具描述</div>
             <div>
               {{ chapTools.name != "" ? chapTools.name : "暂无描述" }}
@@ -758,7 +885,7 @@
       </span>
     </el-dialog>
     <el-dialog
-      title="PPT查看"
+      title="文件预览"
       :visible.sync="dialogVisible3"
       width="50%"
       :before-close="handleClose"
@@ -795,8 +922,9 @@ export default {
       dialogVisible: false,
       id: this.$route.query.courseId,
       userid: this.$route.query.userid,
-      courseType: this.$route.query.type,
+      courseTypeLine: this.$route.query.type,
       oid: this.$route.query.oid,
+      courseType: 0,
       pptImgUrl: "",
       type: 1,
       vedio: [],
@@ -827,6 +955,7 @@ export default {
       taskCount: 0,
       imgList: [],
       noImgList: [],
+      navId: "",
       playerOptions: {
         playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
         autoplay: false, //如果true,浏览器准备好时开始回放。
@@ -865,6 +994,7 @@ export default {
       // scoreCount: 0,
       mindNetWorkCount: 0,
       libraryCount: 0,
+      workCount: 0,
       dialogImageUrl: "",
       pictureDialog: false,
       toolTypeList: [],
@@ -881,6 +1011,7 @@ export default {
         askTitle: "",
         askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
       },
+      navList: [],
     };
   },
   methods: {
@@ -1055,19 +1186,10 @@ export default {
           });
       }
     },
-    get(i) {
-      this.courseType = i;
+    openTask(s, n, i) {
+      this.courseType = s;
+      this.navId = i;
       this.isNoHomeWork = false;
-      this.goTo(
-        "/study?type=" +
-          i +
-          "&courseId=" +
-          this.id +
-          "&userid=" +
-          this.userid +
-          "&oid=" +
-          this.oid
-      );
       (this.studyJuri = [
         {
           content: "",
@@ -1077,9 +1199,47 @@ export default {
         },
       ]),
         (this.radio = []);
+      setTimeout(() => {
+        let a = document.getElementById(i);
+        if (a.offsetTop - 110 == 0) {
+          window.scrollTo(0, 0);
+        } else {
+          window.scrollTo(0, a.offsetTop);
+        }
+      }, 0);
+
       this.getHomeWork();
       this.getStudentAsk();
       this.getCourseDetail();
+    },
+    get(i) {
+      this.navList[i].isOpen = !this.navList[i].isOpen;
+      // this.courseType = i;
+      // this.isNoHomeWork = false;
+      // this.navList = [];
+      // this.goTo(
+      //   "/study?type=" +
+      //     i +
+      //     "&courseId=" +
+      //     this.id +
+      //     "&userid=" +
+      //     this.userid +
+      //     "&oid=" +
+      //     this.oid
+      // );
+      // (this.studyJuri = [
+      //   {
+      //     content: "",
+      //     cover: [],
+      //     upVedio: [],
+      //     upFile: [],
+      //   },
+      // ]),
+      //   (this.radio = []);
+      // this.getHomeWork();
+      // this.getStudentAsk();
+      // this.getCourseDetail();
+
       // setTimeout(() => {
       //   this.swichTask(0);
       // }, 0);
@@ -1267,6 +1427,31 @@ export default {
           this.courseDetail = res.data[0][0];
           this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
           this.chapInfoList = JSON.parse(this.courseDetail.chapters);
+          if (this.navList.length == 0) {
+            this.navList = [];
+            for (var l = 0; l < this.chapInfoList.length; l++) {
+              var q = this.chapInfoList[l].dyName;
+              var w = this.chapInfoList[l].chapterInfo[0].taskJson;
+              var e;
+              this.navList.push({
+                dyName: q,
+                isOpen: l === 0 ? true : false,
+                task: [],
+              });
+              for (var r = 0; r < w.length; r++) {
+                e = w[r].task;
+                this.navList[l].task.push({ taskName: e, id: l + "-" + r });
+                this.navId = this.navId ? this.navId : l + "-" + r;
+              }
+            }
+          }
+          for (var l = 0; l < this.chapInfoList.length; l++) {
+            var w = this.chapInfoList[l].chapterInfo[0].taskJson;
+            for (var m = 0; m < w.length; m++) {
+              w[m].id = l + "-" + m;
+            }
+          }
+
           this.$nextTick(function () {
             setTimeout(() => {
               var a =
@@ -1329,11 +1514,11 @@ export default {
       this.playerOptions.sources[0].src = u;
       this.playerO = this.playerOptions;
     },
-    lookText(i,t) {
+    lookText(i, t) {
       this.text = this.textList[i][t];
       this.dialogVisible1 = true;
     },
-    lookTools(i,t) {
+    lookTools(i, t) {
       this.chapTools = this.chapToolList[i][t];
       this.dialogVisible2 = true;
     },
@@ -1536,6 +1721,8 @@ export default {
               this.mindNetWorkCount = res.data[0][i].count;
             } else if (res.data[0][i].tools == 8) {
               this.libraryCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 9) {
+              this.workCount = res.data[0][i].count;
             }
           }
         })
@@ -1650,6 +1837,15 @@ export default {
           this.toolsCount(a, t);
         }
         window.parent.postMessage({ tools: "7" }, "*");
+      } else if (t == 9) {
+        if (this.workCount > 0) {
+          this.updateCount(this.workCount, t);
+        } else {
+          this.workCount++;
+          a = this.workCount;
+          this.toolsCount(a, t);
+        }
+        this.dialogVisible = true;
       } else {
         if (this.libraryCount > 0) {
           this.updateCount(this.libraryCount, t);
@@ -1878,8 +2074,6 @@ export default {
   justify-content: flex-start;
   align-items: center;
   padding: 15px 0;
-  width: calc(100% / 3.5);
-  min-width: 410px;
 }
 
 .file {
@@ -2499,10 +2693,70 @@ export default {
   justify-content: center;
   align-content: center;
 }
+.noNavText {
+  cursor: pointer;
+  margin: 0px 0px 10px 5px;
+  width: 112px;
+}
 .listNoVedio {
   margin-top: 10px;
 }
 .video-player >>> .video-js {
   height: 100%;
 }
+.hangVedioList {
+  width: 95% !important;
+  height: 150px !important;
+  margin: 0 0 0 20px;
+}
+.hangVedio {
+  align-items: flex-start !important;
+}
+.hangHand {
+  height: 150px !important;
+}
+.twoChild {
+  width: 95%;
+  margin: 10px;
+  border-radius: 11px;
+  background: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  transition: all 0.5s;
+  overflow: hidden;
+  max-height: 0;
+}
+.navChild {
+  width: 100%;
+  cursor: pointer;
+}
+
+.navActive {
+  max-height: 500px;
+}
+.navTask {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-content: flex-start;
+  height: 40px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  width: 100%;
+}
+.navTaskname {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 5px;
+}
+.openTaskActive {
+  color: #43a078;
+  background: #e8e8e8;
+}
 </style>