zengyicheng 2 лет назад
Родитель
Сommit
187e7850fe
2 измененных файлов с 270 добавлено и 116 удалено
  1. 4 4
      src/components/courseDetail.vue
  2. 266 112
      src/components/study.vue

+ 4 - 4
src/components/courseDetail.vue

@@ -90,13 +90,13 @@
               >
                 项目详情
               </div>
-              <div
+              <!-- <div
                 class="who_choose"
                 :class="choose == 1 ? 'choose' : ''"
                 @click="choose = 1"
               >
                 项目学员
-              </div>
+              </div> -->
             </div>
             <div class="right" v-if="choose == 0">
               <div class="nav">
@@ -107,14 +107,14 @@
                 }}
               </div>
             </div>
-            <div class="right_one" v-else>
+            <!-- <div class="right_one" v-else>
               <div class="student" v-if="aStudentName.length > 0">
                 <div v-for="(item, index) in aStudentName" :key="index">
                   {{ item.name }}
                 </div>
               </div>
               <div class="student" v-else>暂无课程学员</div>
-            </div>
+            </div> -->
           </div>
         </div>
 

+ 266 - 112
src/components/study.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="pb_content" style="overflow: unset">
     <div class="pb_content_body" style="display: flex; min-height: 800px">
-      <div style="width: 20%; margin-right: 10px; background: #fff; padding-right: 10px">
+      <div
+        style="
+          width: 20%;
+          margin-right: 10px;
+          background: #fff;
+          padding-right: 10px;
+        "
+      >
         <div class="courseTitle">{{ courseDetail.title }}</div>
         <div class="ml">目录</div>
         <div v-for="(item, stageIndex) in navList" :key="stageIndex">
@@ -10,7 +17,11 @@
             <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="navChild"
+              v-for="(nav, navIndex) in item.task"
+              :key="navIndex"
+            >
               <div
                 class="navTask"
                 @click="openTask(stageIndex, navIndex, nav.id)"
@@ -39,7 +50,14 @@
             style="position: absolute; right: 0"
             class="returnBtn"
             @click.stop="
-              goTo('/courseDetail?userid=' + userid + '&oid=' + oid + '&courseId=' + id)
+              goTo(
+                '/courseDetail?userid=' +
+                  userid +
+                  '&oid=' +
+                  oid +
+                  '&courseId=' +
+                  id
+              )
             "
           >
             返回
@@ -48,7 +66,8 @@
 
         <div
           class="study_top"
-          v-for="(task, index) in chapInfoList[courseType].chapterInfo[0].taskJson"
+          v-for="(task, index) in chapInfoList[courseType].chapterInfo[0]
+            .taskJson"
           :key="index"
         >
           <div class="checkbox">
@@ -56,7 +75,10 @@
               {{ index + 1 }} {{ task.task }}
             </div>
           </div>
-          <div class="project_box" style="margin-top: 15px; margin-bottom: 20px">
+          <div
+            class="project_box"
+            style="margin-top: 15px; margin-bottom: 20px"
+          >
             <div
               style="
                 display: flex;
@@ -70,7 +92,9 @@
                 <img src="../assets/icon/homeWork.png" alt="" />
                 </div>-->
                 <div class="queTitle">
-                  <div style="color: #000">{{ task.task ? task.task : "暂无名称" }}</div>
+                  <div style="color: #000">
+                    {{ task.task ? task.task : "暂无名称" }}
+                  </div>
                 </div>
               </div>
               <div style="padding: 20px" v-if="task.taskDetail != ''">
@@ -86,8 +110,13 @@
               </div>
             </div>
           </div>
-          <div class="student_head" v-if="vedio[0].length > 0">
-            <div class="box_course" :class="vedio.length == 0 ? 'noVedio' : ''">
+
+          <!-- 有视频 -->
+          <div class="student_head" v-if="vedio[index].length > 0">
+            <div
+              class="box_course"
+              :class="vedio[index].length == 0 ? 'noVedio' : ''"
+            >
               <div
                 class="wheel"
                 v-if="vedio.length && vedio[index] && vedio[index].length > 0"
@@ -107,17 +136,25 @@
               </div>-->
               <div
                 class="vedioList"
-                :class="vedio.length == 0 ? 'listNoVedio' : ''"
+                :class="vedio[index].length == 0 ? 'listNoVedio' : ''"
                 v-if="
                   (vedio.length && vedio[index] && vedio[index].length > 0) ||
-                  (textList.length && textList[index] && textList[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)
+                  (lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0)
                 "
               >
-                <div v-show="vedio.length && vedio[index] && vedio[index].length > 0">
+                <div
+                  v-show="
+                    vedio.length && vedio[index] && vedio[index].length > 0
+                  "
+                >
                   <div class="vedioNav">视频</div>
                   <div
                     class="media"
@@ -142,7 +179,9 @@
                 </div>
                 <div
                   v-show="
-                    textList.length && textList[index] && textList[index].length > 0
+                    textList.length &&
+                    textList[index] &&
+                    textList[index].length > 0
                   "
                   class="newNav"
                   v-for="(text, textIndex) in textList[index]"
@@ -174,7 +213,9 @@
                 </div>
                 <div
                   v-show="
-                    lineList.length && lineList[index] && lineList[index].length > 0
+                    lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0
                   "
                   class="newNav"
                   v-for="(lines, lineIndex) in lineList[index]"
@@ -198,20 +239,29 @@
               </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) ||
+                  (textList.length &&
+                    textList[index] &&
+                    textList[index].length > 0) ||
                   (chapToolList.length &&
                     chapToolList[index] &&
                     chapToolList[index].length > 0) ||
-                  (lineList.length && lineList[index] && lineList[index].length > 0)
+                  (lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0)
                 "
               >
-                <div v-show="vedio.length && vedio[index] && vedio[index].length > 0">
+                <div
+                  v-show="
+                    vedio.length && vedio[index] && vedio[index].length > 0
+                  "
+                >
                   <div class="vedioNav">视频</div>
                   <div
                     class="media"
@@ -236,7 +286,9 @@
                 </div>
                 <div
                   v-show="
-                    textList.length && textList[index] && textList[index].length > 0
+                    textList.length &&
+                    textList[index] &&
+                    textList[index].length > 0
                   "
                   class="newNav"
                   v-for="(text, textIndex) in textList[index]"
@@ -261,14 +313,19 @@
                 >
                   <div class="vedioNav">工具</div>
                   <div>
-                    <div class="noNavText" @click="lookTools(index, toolsIndex)">
+                    <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
+                    lineList.length &&
+                    lineList[index] &&
+                    lineList[index].length > 0
                   "
                   class="newNav"
                   v-for="(lines, lineIndex) in lineList[index]"
@@ -330,13 +387,77 @@
               <div class="toolHeng2">
                 <div
                   class="filebox"
-                  style="flex-wrap: nowrap; margin: 20px 20px 10px 20px"
+                  style="
+                    flex-wrap: nowrap;
+                    margin: 20px 20px 10px 20px;
+                    position: relative;
+                  "
                   v-for="(tool, toolIndex) in task.toolChoose"
                   :key="toolIndex"
                 >
                   <div>
                     <!-- v-for="(itemTool, indexTool) in toolTypeList"
                     :key="indexTool"-->
+
+                    <div class="iframeBox">
+                      <div
+                        class="addPoint isBorder"
+                        v-for="(tooC, toolCIndex) in tool.tool"
+                        :key="toolCIndex"
+                      >
+                        <div v-if="tooC == 1" style="border: 1px soild #ccc">
+                          <div style="margin: 5px 0">电子白板</div>
+                          <iframe
+                            src="https://iwb.cocorobo.cn/"
+                            ref="whiteBoard"
+                          ></iframe>
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/whiteBoard.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">电子白板</div>-->
+                        </div>
+                        <div v-if="tooC == 3">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/mindMapping.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">思维导图</div>-->
+                          <div style="margin: 5px 0">思维导图</div>
+                          <iframe
+                            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
+                            ref="mind"
+                          ></iframe>
+                        </div>
+                        <div v-if="tooC == 6">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/doc.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">协同文档</div>-->
+                          <div style="margin: 5px 0">协同文档</div>
+                          <iframe
+                            src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
+                          ></iframe>
+                        </div>
+                        <div v-if="tooC == 7">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/mindNetwork.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">思维网格</div>-->
+                          <div style="margin: 5px 0">思维网格</div>
+                          <iframe
+                            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+                            ref="grid"
+                          ></iframe>
+                        </div>
+                      </div>
+                    </div>
                     <div class="noiframeBox">
                       <div
                         class="addPoint"
@@ -409,64 +530,15 @@
                         </div>-->
                       </div>
                     </div>
-                    <div class="iframeBox">
-                      <div
-                        class="addPoint"
-                        v-for="(tooC, toolCIndex) in tool.tool"
-                        :key="toolCIndex"
-                      >
-                        <div v-if="tooC == 1">
-                          <iframe
-                            src="https://iwb.cocorobo.cn/"
-                            ref="whiteBoard"
-                          ></iframe>
-                          <!-- <img
-                            @click="addTools(tooC, toolIndex)"
-                            src="../assets/icon/secondToolList/whiteBoard.png"
-                            alt
-                          />
-                          <div style="margin: 5px 0">电子白板</div>-->
-                        </div>
-                        <div v-if="tooC == 3">
-                          <!-- <img
-                            @click="addTools(tooC, toolIndex)"
-                            src="../assets/icon/secondToolList/mindMapping.png"
-                            alt
-                          />
-                          <div style="margin: 5px 0">思维导图</div>-->
-                          <iframe
-                            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
-                            ref="mind"
-                          ></iframe>
-                        </div>
-                        <div v-if="tooC == 6">
-                          <!-- <img
-                            @click="addTools(tooC, toolIndex)"
-                            src="../assets/icon/secondToolList/doc.png"
-                            alt
-                          />
-                          <div style="margin: 5px 0">协同文档</div>-->
-                          <iframe
-                            src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
-                          ></iframe>
-                        </div>
-                        <div v-if="tooC == 7">
-                          <!-- <img
-                            @click="addTools(tooC, toolIndex)"
-                            src="../assets/icon/secondToolList/mindNetwork.png"
-                            alt
-                          />
-                          <div style="margin: 5px 0">思维网格</div>-->
-                          <iframe
-                            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
-                            ref="grid"
-                          ></iframe>
-                        </div>
-                      </div>
-                    </div>
                   </div>
-                  <div class="upload_toolBtn">
-                    <el-button type="primary">上传文件</el-button>
+                  <div class="upload_toolBtn" @click="addImg($event)">
+                    上传文件
+                    <input
+                      type="file"
+                      accept="image/png, image/gif, image/jpeg"
+                      style="display: none"
+                      @change="beforeUpload1($event, 2, index)"
+                    />
                   </div>
                   <div class="tooldetail" v-if="tool.toolDetail != ''">
                     <div style="margin: 0 0 20px 0">工具描述</div>
@@ -633,7 +705,9 @@
     </div>
     <div v-if="proVisible" class="mask">
       <div class="progressBox">
-        <div class="lbox"><img src="../assets/loading.gif" />上传中,请稍后</div>
+        <div class="lbox">
+          <img src="../assets/loading.gif" />上传中,请稍后
+        </div>
         <el-progress
           :text-inside="true"
           :stroke-width="20"
@@ -727,11 +801,16 @@
         </el-form-item>
         <div>富文本内容</div>
         <!-- <editor-bar v-model="AttText.text" @change="change"></editor-bar> -->
-        <div v-html="text.url" style="font-size: 18px; padding: 40px 0 0 0"></div>
+        <div
+          v-html="text.url"
+          style="font-size: 18px; padding: 40px 0 0 0"
+        ></div>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="clearAttText">取 消</el-button> -->
-        <el-button type="primary" @click="dialogVisible1 = false">确定</el-button>
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <!-- <el-dialog
@@ -829,7 +908,12 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <iframe :src="pptImgUrl" frameborder="0" width="100%" height="600"></iframe>
+      <iframe
+        :src="pptImgUrl"
+        frameborder="0"
+        width="100%"
+        height="600"
+      ></iframe>
     </el-dialog>
     <el-dialog
       title="提示"
@@ -924,6 +1008,7 @@ export default {
       chapTools: [],
       chapToolList: [],
       file: [],
+      upToolImg: "",
       rateList: {
         ca: 0,
       },
@@ -1053,7 +1138,33 @@ export default {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
     },
-    beforeUpload1(event, type) {
+    addCourseWorks(i) {
+      let params = [
+        {
+          uid: this.userid,
+          cid: this.id,
+          stage: this.courseType,
+          task: i,
+          // chid: this.chapInfoList[this.courseType - 0].chapterInfo[0].chapterid,
+          content: this.upToolImg,
+          type: 1,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addCourseWorks", params)
+        .then((res) => {
+          this.$message({
+            message: "提交成功",
+            type: "success",
+          });
+          this.upToolImg = "";
+        })
+        .catch((err) => {
+          this.$message.error("提交失败");
+          console.error(err);
+        });
+    },
+    beforeUpload1(event, type, i) {
       var file = event.target.files[0];
       var credentials = {
         accessKeyId: "AKIATLPEDU37QV5CHLMH",
@@ -1101,11 +1212,18 @@ export default {
               a.splice(a.length - 1, a.length);
               _this.$message.error("上传失败");
             } else {
-              _this.studyJuri[0].cover.push({
-                name: file.name,
-                url: data.Location,
-                uid: file.uid,
-              });
+              if (type == 1) {
+                _this.studyJuri[0].cover.push({
+                  name: file.name,
+                  url: data.Location,
+                  uid: file.uid,
+                });
+                _this.imgChange(null, null, type);
+              } else if (type == 2) {
+                _this.upToolImg = data.Location;
+                _this.imgChange(null, null, type);
+                _this.addCourseWorks(i);
+              }
               _this.imgChange(null, null, type);
               console.log(data.Location);
             }
@@ -1206,6 +1324,7 @@ export default {
       this.getStudentAsk();
       this.getCourseDetail();
     },
+
     get(i) {
       this.navList[i].isOpen = !this.navList[i].isOpen;
       // this.courseType = i;
@@ -1349,7 +1468,8 @@ export default {
         .then((res) => {
           loading.close();
           // element.imgUrl = JSON.parse(element.chapters).poster;
-          var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0].taskJson;
+          var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
+            .taskJson;
           // // var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
           // // .chapterData;
           var b = [
@@ -1413,7 +1533,8 @@ export default {
               }
             }
             var d = JSON.parse(JSON.stringify(this.playerOptions));
-            d.sources[0].src = this.vedio[i].length > 0 ? this.vedio[i][0].url : this.mr;
+            d.sources[0].src =
+              this.vedio[i].length > 0 ? this.vedio[i][0].url : this.mr;
             this.playerO[i] = d;
           }
           this.courseDetail = res.data[0][0];
@@ -1446,8 +1567,10 @@ export default {
 
           this.$nextTick(function () {
             setTimeout(() => {
-              var a = document.getElementsByClassName("video-player")[0].offsetHeight;
-              document.getElementsByClassName("vedioList")[0].style.height = a + "px";
+              var a =
+                document.getElementsByClassName("video-player")[0].offsetHeight;
+              document.getElementsByClassName("vedioList")[0].style.height =
+                a + "px";
             }, 500);
           });
           // this.addToolsType(0);
@@ -1480,9 +1603,17 @@ export default {
     },
     isAssetTypeAnImage(ext) {
       return (
-        ["png", "jpg", "jpeg", "bmp", "gif", "webp", "psd", "svg", "tiff"].indexOf(
-          ext
-        ) !== -1
+        [
+          "png",
+          "jpg",
+          "jpeg",
+          "bmp",
+          "gif",
+          "webp",
+          "psd",
+          "svg",
+          "tiff",
+        ].indexOf(ext) !== -1
       );
     },
     switchVideo(media) {
@@ -1507,9 +1638,12 @@ export default {
     downFile(f, i) {
       var a = ["PPT", "PPTX", "PDF", "XLSX", "XLS", "DOC", "DOCX"];
       if (
-        a.indexOf(f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase()) != -1
+        a.indexOf(
+          f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
       ) {
-        this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + f.url;
+        this.pptImgUrl =
+          "https://view.officeapps.live.com/op/view.aspx?src=" + f.url;
         this.dialogVisible3 = true;
       } else {
         window.open(this.file[i].url);
@@ -1773,15 +1907,18 @@ export default {
           this.toolsCount(a, t);
         }
         if (!this.dialogVisible2) {
-          this.askJson.askJson = this.chapInfo.chapterInfo[0].taskJson[
-            this.taskCount
-          ].toolChoose[i].askJson[0];
-          this.askJson.askTitle = this.chapInfo.chapterInfo[0].taskJson[
-            this.taskCount
-          ].toolChoose[i].askTitle;
-          this.askJson.askCount = this.chapInfo.chapterInfo[0].taskJson[
-            this.taskCount
-          ].toolChoose[i].askCount;
+          this.askJson.askJson =
+            this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[
+              i
+            ].askJson[0];
+          this.askJson.askTitle =
+            this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[
+              i
+            ].askTitle;
+          this.askJson.askCount =
+            this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[
+              i
+            ].askCount;
         } else {
           this.askJson.askJson = this.chapTools.askJson.askJson[0];
           this.askJson.askTitle = this.chapTools.askJson.askTitle;
@@ -1861,9 +1998,10 @@ export default {
           a = this.answerCount;
           this.toolsCount(a, t);
         }
-        this.answerQ = this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[i]
-          .answerQ
-          ? this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[i].answerQ
+        this.answerQ = this.chapInfo.chapterInfo[0].taskJson[this.taskCount]
+          .toolChoose[i].answerQ
+          ? this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose[i]
+              .answerQ
           : "";
         this.answerDialogVisible = true;
       }
@@ -2557,7 +2695,12 @@ export default {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
-  /* margin: 0 15px 0 0; */
+  /* border: 1px solid #ccc;
+  margin: 0 0 20px 0; */
+}
+.isBorder > div {
+  margin: 0 0 10px 0;
+  align-items: flex-start !important;
 }
 .noiframeBox {
   display: flex;
@@ -2570,10 +2713,21 @@ export default {
   height: 800px;
   border: none;
   margin-bottom: 20px;
+  border: 1px solid #ccc;
 }
 .upload_toolBtn {
-  display: flex;
-  justify-content: flex-end;
+  background: #6b92c9;
+  color: #fff;
+  width: 110px;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  bottom: 0;
 }
 .ediBottom {
   /* margin-left: 20px; */