新增填空样式及功能

src/components/liveProjectDetail.vue

@@ -65,6 +65,12 @@
           >
             课堂评价
           </div>
+          <div
+            style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
+            v-if="isBlock == 8"
+          >
+            根据题目选择对应的答案
+          </div>
           <div
             style="
               margin-left: 25px;
@@ -147,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"
               >
@@ -157,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"
               >
@@ -177,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"
               >
@@ -187,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>
@@ -209,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
@@ -222,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
@@ -235,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
@@ -247,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
@@ -359,13 +402,63 @@
             <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>
             </span>
           </div>
-          <div class="answerBox" v-if="isBlock == 5" style="padding: 10px 0 0 25px">
+          <div
+            class="answerBox"
+            v-if="
+              isBlock == 8 &&
+              tools[ppage - 1].tools &&
+              tools[ppage - 1].tools.indexOf(27) != -1
+            "
+            style="padding: 0 0 0 25px"
+          >
+            <div>
+              <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
+                <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"
+                    :key="tkAIndex"
+                    :label="tkA"
+                    :value="tkA"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <span
+              slot="footer"
+              class="dialog-footer sztFooter"
+              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 style="color: #d1d1d1; font-size: 24px">课堂实践</div>
             <div
               style="
@@ -392,13 +485,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>
@@ -410,7 +511,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%">
@@ -453,7 +558,9 @@
     <div class="blackBottomB"></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"
@@ -551,8 +658,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",
             },
           ],
         },
@@ -563,13 +669,12 @@ export default {
         { tools: [9] },
         { tools: [9] },
         { tools: [12] },
-        { tools: [9] },
+        { tools: [27] },
         {
           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",
             },
           ],
         },
@@ -592,6 +697,17 @@ export default {
         qia: 0,
         content: "",
       },
+      tkAnswerBox: [
+        "Feelings",
+        "Weather",
+        "Activities before the festival",
+        "Origin",
+        "Food",
+        "Time",
+        "ctivities during the festival",
+        "Reason",
+      ],
+      tkAnswer: [],
       imgUrl: "",
       imgFile: "",
       imgFileUp: [],
@@ -659,11 +775,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) {
@@ -870,6 +989,11 @@ export default {
           this.$message.error("请上传图片");
           return;
         }
+      }else if(type == 5){
+        if(this.tkAnswer.length == 0){
+          this.$message.error("请选择对应的答案");
+          return;
+        }
       }
       //  else if (this.upload[0].upVedio.length == 0) {
       //   this.$message.error("请上传视频");
@@ -905,6 +1029,8 @@ export default {
         a = JSON.stringify(this.rateList);
       } else if (type == 1) {
         a = JSON.stringify(this.typeC);
+      }else if(type == 5){
+        a = JSON.stringify(this.tkAnswer);
       }
       let params = {
         uid: this.userid,
@@ -924,7 +1050,7 @@ export default {
             message: "提交成功",
             type: "success",
           });
-          this.selectSWork(6);
+          this.selectSWork(type);
         })
         .catch((err) => {
           this.$message.error("提交成功");
@@ -1046,7 +1172,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]);
@@ -1084,7 +1212,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) {
@@ -1095,7 +1226,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;
         }
@@ -1107,7 +1239,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) {
@@ -1133,6 +1268,11 @@ export default {
           this.tools[this.ppage - 1].file.length
         ) {
           this.selectFile();
+        } else if (
+          this.tools[this.ppage - 1].tools &&
+          this.tools[this.ppage - 1].tools.indexOf(27) != -1
+        ) {
+          this.isBlock = 8;
         }
       }
     },
@@ -1145,8 +1285,8 @@ export default {
             if (this.ppage == res.data[0][0].page) {
               return;
             } else {
-              this.ppage = res.data[0][0].page;
-              // this.ppage = 3;
+              // this.ppage = res.data[0][0].page;
+              this.ppage = 11;
               this.typeC = [];
               this.isAnswer = false;
               this.howPage(this.ppage);
@@ -1180,17 +1320,25 @@ export default {
             "https://pbl.cocorobo.cn/pbl-student-table/dist/aws-sdk-2.235.1.min.js";
           const script3 = document.createElement("script");
           script3.type = "text/javascript";
-          script3.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
+          script3.src =
+            "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
           const script4 = document.createElement("script");
           script4.type = "text/javascript";
-          script4.src = "https://pbl.cocorobo.cn/pbl-student-table/dist/jietu.js";
+          script4.src =
+            "https://pbl.cocorobo.cn/pbl-student-table/dist/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 = () => {
@@ -1711,4 +1859,11 @@ img {
 .video-player >>> .video-js {
   height: 100%;
 }
+.tkCss {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-bottom: 15px;
+}
 </style>