工具上传

src/components/liveProjectDetail.vue

@@ -159,6 +159,178 @@
               </div>
             </div>
           </div>
+          <div
+            class="answerBox tools_box"
+            v-if="isBlock == 4"
+            style="padding: 10px 0 0 25px; width: 100%; max-width: 100%"
+          >
+            <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="toolsList[0].tools.indexOf(1) != -1"
+                @click="(isBlock = 2), (toolCount = 1)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://iwb.cocorobo.cn/"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img
+                    src="../assets/icon/secondToolList/whiteBoard.png"
+                    alt=""
+                  />
+                  <div>电子白板</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(2) != -1"
+                @click="(isBlock = 2), (toolCount = 2)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://iwb.cocorobo.cn/"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img src="../assets/icon/secondToolList/note.png" alt="" />
+                  <div>便签</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(3) != -1"
+                @click="(isBlock = 2), (toolCount = 3)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img
+                    src="../assets/icon/secondToolList/mindMapping.png"
+                    alt=""
+                  />
+                  <div>思维导图</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(4) != -1"
+                @click="(isBlock = 2), (toolCount = 4)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img src="../assets/icon/thirdToolList/ask.png" alt="" />
+                  <div>问卷调查</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(6) != -1"
+                @click="(isBlock = 2), (toolCount = 6)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img src="../assets/icon/secondToolList/doc.png" alt="" />
+                  <div>协同文档</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(7) != -1"
+                @click="(isBlock = 2), (toolCount = 7)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img
+                    src="../assets/icon/secondToolList/mindNetwork.png"
+                    alt=""
+                  />
+                  <div>思维网格</div>
+                </div>
+              </div>
+              <div
+                v-if="toolsList[0].tools.indexOf(8) != -1"
+                @click="(isBlock = 2), (toolCount = 8)"
+                class="toolCss"
+              >
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <img src="../assets/icon/secondToolList/library.png" alt="" />
+                  <div>素材库</div>
+                </div>
+              </div>
+              <div v-if="toolsList[0].tools.indexOf(10) != -1" class="toolCss">
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <div>倒计时</div>
+                </div>
+              </div>
+              <div v-if="toolsList[0].tools.indexOf(11) != -1" class="toolCss">
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <div>问答题</div>
+                </div>
+              </div>
+              <div v-if="toolsList[0].tools.indexOf(13) != -1" class="toolCss">
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <div>分小组</div>
+                </div>
+              </div>
+              <div v-if="toolsList[0].tools.indexOf(14) != -1" class="toolCss">
+                <!-- <iframe
+            style="width: 100%; height: 100%; border: none"
+            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+          ></iframe> -->
+                <div class="toolImg">
+                  <div>作业评价</div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="answerBox"
             style="height: 100%"
@@ -166,10 +338,7 @@
             ref="qrcodePicture"
           >
             <div style="height: 100%; width: 100%">
-              <div
-                v-if="toolsList[0].tools[howTools] == 1"
-                class="tools_child_box"
-              >
+              <div v-if="toolCount == 1" class="tools_child_box">
                 <div class="tools_title">
                   <span>电子白板</span>
                   <div>
@@ -205,10 +374,7 @@
                   src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
                 ></iframe>
               </div>
-              <div
-                v-if="toolsList[0].tools[howTools] == 3"
-                class="tools_child_box"
-              >
+              <div v-if="toolCount == 3" class="tools_child_box">
                 <div class="tools_title">
                   <span>思维导图</span>
                   <div>
@@ -263,10 +429,7 @@
                   src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
                 ></iframe>
               </div>
-              <div
-                v-if="toolsList[0].tools[howTools] == 7"
-                class="tools_child_box"
-              >
+              <div v-if="toolCount == 7" class="tools_child_box">
                 <div class="tools_title">
                   <span>思维网格</span>
                   <div>
@@ -367,7 +530,7 @@
                 <div>分小组</div>
               </div>
               <div class="nextStepBox" v-if="toolsList[0].tools.length > 1">
-                <div
+                <!-- <div
                   class="nextStepOne"
                   @click="howTools--"
                   v-if="howTools != 0"
@@ -380,17 +543,14 @@
                   v-if="howTools != toolsList[0].tools.length - 1"
                 >
                   下一步
-                </div>
+                </div> -->
+                <div class="nextStepOne" @click="isBlock = 4">返回</div>
               </div>
               <div
                 class="nextStepOne"
                 style="float: right"
                 @click="getImg"
-                v-if="
-                  toolsList[0].tools[howTools] == 1 ||
-                  toolsList[0].tools[howTools] == 3 ||
-                  toolsList[0].tools[howTools] == 7
-                "
+                v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
               >
                 截图
               </div>
@@ -1076,7 +1236,7 @@ export default {
         let file = this.dataURLtoFile(url, "作业");
         this.imgFile = file;
         this.beforeUpload2(this.imgFile);
-        console.log(this.imgFile)
+        console.log(this.imgFile);
       });
     },
     dataURLtoFile(dataurl, filename) {
@@ -1117,6 +1277,13 @@ export default {
         ) {
           this.isBlock = 0;
         }
+        if (
+          this.toolsList[0].tools.indexOf(1) != -1 ||
+          this.toolsList[0].tools.indexOf(3) != -1 ||
+          this.toolsList[0].tools.indexOf(7) != -1
+        ) {
+          this.isBlock = 4;
+        }
       }
     },
 
@@ -1575,4 +1742,25 @@ img {
   width: 100% !important;
   max-width: 100% !important;
 }
+.toolCss {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: calc(100% / 6);
+  align-items: center;
+  text-align: center;
+}
+.toolImg {
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+}
+.toolImg > img {
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+}
+.toolImg > div {
+  font-size: 14px;
+}
 </style>