瀏覽代碼

新增上传文件功能

zengyicheng 2 年之前
父節點
當前提交
b44d200298
共有 2 個文件被更改,包括 154 次插入52 次删除
  1. 2 3
      src/components/courseDetail.vue
  2. 152 49
      src/components/liveProjectDetail.vue

+ 2 - 3
src/components/courseDetail.vue

@@ -354,13 +354,12 @@ export default {
   width: 16px;
   height: 16px;
 }
+.wheel > img,
 .man > img {
   width: 100%;
   height: 100%;
 }
-.wheel > img {
-  width: 100%;
-}
+
 .box_course {
   display: flex;
   padding: 25px 0 20px 60px;

+ 152 - 49
src/components/liveProjectDetail.vue

@@ -153,7 +153,10 @@
               "
             >
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(1) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(1) != -1
+                "
                 @click="checkTools(1)"
                 class="toolCss"
               >
@@ -163,17 +166,26 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(3) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(3) != -1
+                "
                 @click="checkTools(3)"
                 class="toolCss"
               >
                 <div class="toolImg">
-                  <img src="../assets/icon/secondToolList/mindMapping.png" alt />
+                  <img
+                    src="../assets/icon/secondToolList/mindMapping.png"
+                    alt
+                  />
                   <div>思维导图</div>
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(4) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(4) != -1
+                "
                 @click="checkTools(4)"
                 class="toolCss"
               >
@@ -183,7 +195,10 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(6) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(6) != -1
+                "
                 @click="checkTools(6)"
                 class="toolCss"
               >
@@ -193,12 +208,18 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(7) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(7) != -1
+                "
                 @click="checkTools(7)"
                 class="toolCss"
               >
                 <div class="toolImg">
-                  <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
+                  <img
+                    src="../assets/icon/secondToolList/mindNetwork.png"
+                    alt
+                  />
                   <div>思维网格</div>
                 </div>
               </div>
@@ -215,7 +236,11 @@
                 <div class="tools_title">
                   <span>电子白板</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -228,7 +253,11 @@
                 <div class="tools_title">
                   <span>思维导图</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -241,7 +270,11 @@
                 <div class="tools_title">
                   <span>协同文档</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -253,7 +286,11 @@
                 <div class="tools_title">
                   <span>思维网格</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -307,7 +344,7 @@
               >
                 截图
               </div>
-              <div
+              <!-- <div
                 class="nextStepOne"
                 style="float: right"
                 @click="addImg($event)"
@@ -320,7 +357,7 @@
                   style="display: none"
                   @change="beforeUpload1($event, 1)"
                 />
-              </div>
+              </div> -->
             </div>
           </div>
           <div
@@ -365,7 +402,12 @@
             <span
               slot="footer"
               class="dialog-footer sztFooter"
-              style="padding: 0 0 30px 0px; position: absolute; right: 20px; bottom: 0"
+              style="
+                padding: 0 0 30px 0px;
+                position: absolute;
+                right: 20px;
+                bottom: 0;
+              "
             >
               <el-button @click="isBlock = 0">取消</el-button>
               <el-button type="primary" @click="addWork(6)">确定</el-button>
@@ -382,7 +424,9 @@
           >
             <div>
               <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
-                <div style="margin-right: 10px; font-size: 18px">{{ tIndex + 1 }}、</div>
+                <div style="margin-right: 10px; font-size: 18px">
+                  {{ tIndex + 1 }}、
+                </div>
                 <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案">
                   <el-option
                     v-for="(tkA, tkAIndex) in tkAnswerBox"
@@ -396,13 +440,22 @@
             <span
               slot="footer"
               class="dialog-footer sztFooter"
-              style="padding: 0 0 30px 0px; position: absolute; right: 20px; bottom: 0"
+              style="
+                padding: 0 0 30px 0px;
+                position: absolute;
+                right: 20px;
+                bottom: 0;
+              "
             >
               <el-button @click="isBlock = 0">取消</el-button>
               <el-button type="primary" @click="addWork(5)">提交</el-button>
             </span>
           </div>
-          <div class="answerBox" v-if="isBlock == 5" style="padding: 10px 0 0 25px">
+          <div
+            class="answerBox"
+            v-if="isBlock == 5"
+            style="padding: 10px 0 0 25px"
+          >
             <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
             <div
               style="
@@ -429,13 +482,21 @@
                 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="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="fileListCss"
+                  v-for="(f, fIndex) in fileList"
+                  :key="fIndex"
+                >
                   <div class="fileCss" @click="openFile(f.src)">
                     <img src="../assets/file.png" alt />
                   </div>
@@ -447,7 +508,11 @@
               <div class="nextStepOne" @click="isBlock = 0">关闭</div>
             </div>
           </div>
-          <div class="answerBox" :class="{ fullStyle: full }" v-if="isBlock == 6">
+          <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%">
@@ -487,10 +552,29 @@
       </div>
     </div>
 
-    <div class="blackBottomB"></div>
+    <div class="blackBottomB">
+      <div
+        class="nextStepOne"
+        style="float: right"
+        @click="addImg($event)"
+        v-if="
+          tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(16) != -1
+        "
+      >
+        上传文件
+        <input
+          type="file"
+          accept="image/png, image/gif, image/jpeg"
+          style="display: none"
+          @change="beforeUpload1($event, 1)"
+        />
+      </div>
+    </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"
@@ -588,8 +672,7 @@ export default {
           file: [
             {
               name: "视频1.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
             },
           ],
         },
@@ -605,15 +688,14 @@ export default {
           file: [
             {
               name: "视频2.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
             },
           ],
         },
         { tools: [9] },
         "",
         { tools: [3] },
-        "",
+        { tools: [16] },
         { tools: [14] },
         "",
         "",
@@ -707,11 +789,14 @@ export default {
     },
     //uuid生成
     guid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
     },
     time() {
       if (!this.now) {
@@ -836,6 +921,7 @@ export default {
               a.splice(a.length - 1, a.length);
               _this.$message.error("上传失败");
             } else {
+              _this.upload[0].upImg = [];
               if (type == 1) {
                 _this.upload[0].upImg.push({
                   name: file.name,
@@ -843,7 +929,7 @@ export default {
                   uid: file.uid,
                 });
                 _this.imgChange(null, null, type);
-                _this.addSWork(4);
+                _this.addWork(4);
               } else if (type == 2) {
                 _this.upload[0].upVedio.push({
                   name: file.name,
@@ -953,7 +1039,7 @@ export default {
     addSWork(type) {
       var a;
       if (type == 4) {
-        a = JSON.stringify(this.upload);
+        a = JSON.stringify(this.upload[0].upImg[0].url);
       } else if (type == 6) {
         a = JSON.stringify(this.rateList);
       } else if (type == 1) {
@@ -979,19 +1065,18 @@ export default {
             message: "提交成功",
             type: "success",
           });
-          this.selectSWork(type);
+          this.selectSWork();
         })
         .catch((err) => {
           this.$message.error("提交成功");
           console.error(err);
         });
     },
-    selectSWork(type) {
+    selectSWork() {
       let params = {
         uid: this.userid,
         cid: this.cid,
         p: this.ppage - 1,
-        t: type,
       };
       this.ajax
         .get(this.$store.state.api + "selectSWork", params)
@@ -1005,7 +1090,7 @@ export default {
           }
         })
         .catch((err) => {
-          this.$message.error("暂无作业");
+          console.log("暂无作业");
           console.error(err);
         });
     },
@@ -1105,7 +1190,9 @@ export default {
       for (var i = 0; i < b.length; i++) {
         if (
           a.indexOf(
-            b[i].src.split(".")[b[i].src.split(".").length - 1].toLocaleUpperCase()
+            b[i].src
+              .split(".")
+              [b[i].src.split(".").length - 1].toLocaleUpperCase()
           ) != -1
         ) {
           this.fileList.push(b[i]);
@@ -1143,7 +1230,10 @@ export default {
         this.isBlock = 3;
       } else {
         this.isBlock = 0;
-        if (this.tools[page - 1].tools && this.tools[page - 1].tools.indexOf(9) != -1) {
+        if (
+          this.tools[page - 1].tools &&
+          this.tools[page - 1].tools.indexOf(9) != -1
+        ) {
           this.isBlock = 1;
         }
         // if (this.ppage > 3) {
@@ -1154,7 +1244,8 @@ export default {
         this.toolCount = 0;
         if (
           this.tools[page - 1].tools &&
-          (this.tools[page - 1].tools[0] == 14 || this.tools[page - 1].tools[0] == 12)
+          (this.tools[page - 1].tools[0] == 14 ||
+            this.tools[page - 1].tools[0] == 12)
         ) {
           this.isBlock = 0;
         }
@@ -1166,7 +1257,10 @@ export default {
         ) {
           this.isBlock = 4;
         }
-        if (this.tools[page - 1].tools && this.tools[page - 1].tools.length > 1) {
+        if (
+          this.tools[page - 1].tools &&
+          this.tools[page - 1].tools.length > 1
+        ) {
           this.isBlock = 4;
         }
         if (this.tools[page - 1].tools && !this.tools[page - 1].tools.length) {
@@ -1199,6 +1293,7 @@ export default {
           this.isBlock = 8;
         }
       }
+      this.selectSWork();
     },
 
     setPage() {
@@ -1209,8 +1304,8 @@ export default {
             if (this.ppage == res.data[0][0].page && this.isBlock !== 0) {
               return;
             } else {
-              // this.ppage = res.data[0][0].page;
-              this.ppage = 11;
+              this.ppage = res.data[0][0].page;
+              // this.ppage = 15;
               this.typeC = [];
               this.isAnswer = false;
               this.howPage(this.ppage);
@@ -1244,17 +1339,25 @@ export default {
             "https://pbl.cocorobo.cn/pbl-student-table/dist/js/aws-sdk-2.235.1.min.js";
           const script3 = document.createElement("script");
           script3.type = "text/javascript";
-          script3.src = "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
+          script3.src =
+            "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
           const script4 = document.createElement("script");
           script4.type = "text/javascript";
-          script4.src = "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";
+          script4.src =
+            "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";
 
           if (_this.toolCount == 1) {
             _this.$refs.whiteBoard.onload = () => {
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script1);
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script2);
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script1
+              );
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script2
+              );
               // _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script3);
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script4);
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script4
+              );
             };
           } else if (_this.toolCount == 3) {
             _this.$refs.mind.onload = () => {