知识点作答

src/App.vue

@@ -18,8 +18,8 @@ export default {
     },
     methods: {
         SubmitLogin() {
-            const username = '37605017089498';
-            const password = '123456';
+            const username = '5000715133579';
+            const password = 'Hjy@123456';
             // const type = '1';
             const schoolType = sessionStorage.getItem('schoolType');
             if (getToken() && schoolType) {

src/views/targetImprove/practice/practiceAnswer.vue

@@ -4,14 +4,23 @@
       <el-aside width="260px" class="hide_scrollbar">
         <div class="side_list">
           <div class="side_title">待练习知识点</div>
-          <div :class="['side_item',{'active':item.exerciseId == exerciseId}]" v-for="item in waitList" :key="item.exerciseId" @click="ChangeKnowledge(item)">
+          <div
+            :class="['side_item', { active: item.exerciseId == exerciseId }]"
+            v-for="item in waitList"
+            :key="item.exerciseId"
+            @click="ChangeKnowledge(item)"
+          >
             <div class="item_name">
               {{ item.knowledgeName }}
             </div>
             <div class="item_content">
               <div class="content_left">
-                <div class="content_type">{{ item.exerciseType == 1?'自主练习':'指定练习' }}</div>
-                <div class="content_num">题量：{{ item?.questionNum || '0' }}</div>
+                <div class="content_type">
+                  {{ item.exerciseType == 1 ? "自主练习" : "指定练习" }}
+                </div>
+                <div class="content_num">
+                  题量：{{ item?.questionNum || "0" }}
+                </div>
               </div>
               <div class="ai_explain">
                 <img class="ai_icon" src="@/assets/icon_ai.png" />
@@ -38,43 +47,70 @@
               v-for="(item, index) in questionList"
               :key="item.questionId"
             >
-              <QuestionItem :question="item" :index="index+1"></QuestionItem>
-              <div :class="['question_footer', { img_list: index == 1 }]">
+              <QuestionItem :index="index + 1" :question="item"></QuestionItem>
+              <!-- 客观题->选择、判断。主观题->上传图片 -->
+              <!-- isObjective 是否客观题 1是 0否  isJudge 是否判断题 1是 0否 -->
+              <div
+                :class="[
+                  'question_footer',
+                  { img_list: Number(item.isObjective) === 0 },
+                ]"
+              >
                 <span class="footer_title">我的作答：</span>
-                <template v-if="index == 1">
-                  <div class="upload_answer">
-                    <el-upload
-                      class="img_uploader"
-                      list-type="picture-card"
-                      :auto-upload="false"
-                      :show-file-list="false"
-                      multiple
-                      :on-success="handleAvatarSuccess"
-                    >
-                      <el-button slot="default" class="upload_btn" plain
-                        >拍照/上传答案</el-button
-                      >
-                    </el-upload>
-                    <div
-                      class="upload_list_item"
-                      v-for="(item, index) in fileList"
-                      :key="index"
-                      @click="handlePictureCardPreview(item)"
+                <div
+                  v-if="Number(item.isObjective) === 1"
+                  class="upload_answer"
+                >
+                  <!-- 判断题 -->
+                  <el-radio-group
+                    class="radio_group"
+                    v-if="Number(item.isJudge) === 1"
+                    v-model="item.answer"
+                    @input="HandleJudgeChange(item)"
+                  >
+                    <el-radio label="√">√</el-radio>
+                    <el-radio label="×">×</el-radio>
+                  </el-radio-group>
+                  <!-- 选择题 -->
+                  <el-checkbox-group
+                    class="checkbox_group"
+                    v-else
+                    v-model="item.answer"
+                    @change="HandleCheckChange(item)"
+                  >
+                    <el-checkbox
+                      v-for="num in item.optionsNum"
+                      :key="num"
+                      :label="optionsData[num - 1]"
+                    ></el-checkbox>
+                  </el-checkbox-group>
+                </div>
+                <div v-else class="upload_answer">
+                  <el-upload
+                    class="img_uploader"
+                    list-type="picture-card"
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    action="https://jsonplaceholder.typicode.com/posts/"
+                    multiple
+                    :on-success="handleAvatarSuccess"
+                  >
+                    <el-button slot="default" class="upload_btn" plain
+                      >拍照/上传答案</el-button
                     >
-                      <img :src="item.url" />
-                      <i
-                        @click.stop="handleRemove(file)"
-                        class="el-icon-error upload_list_item_delete"
-                      ></i>
-                    </div>
+                  </el-upload>
+                  <div
+                    class="upload_list_item"
+                    v-for="(item, index) in fileList"
+                    :key="index"
+                    @click="handlePictureCardPreview(item)"
+                  >
+                    <img :src="item.url" />
+                    <i
+                      @click.stop="handleRemove(file)"
+                      class="el-icon-error upload_list_item_delete"
+                    ></i>
                   </div>
-                </template>
-                <div v-else class="upload_answer">
-                  <el-radio-group class="radio_group" v-model="radio">
-                    <el-radio :label="3">备选项</el-radio>
-                    <el-radio :label="6">备选项</el-radio>
-                    <el-radio :label="9">备选项</el-radio>
-                  </el-radio-group>
                 </div>
               </div>
             </div>
@@ -136,9 +172,38 @@ export default {
   data() {
     return {
       waitList: [], //待练习知识点
-      exerciseId: '', // 练习id
-      knowledgeName:'',//知识点名称
+      exerciseId: "", // 练习id
+      knowledgeName: "", //知识点名称
       questionList: [],
+      optionsData: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+      checkbox: [],
       fileList: [
         {
           name: "food.jpeg",
@@ -149,10 +214,10 @@ export default {
           url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
         },
       ],
-      dialogImageUrl: "",//图片预览
-      dialogVisible: false,//图片预览
-      dialogPaperVisible: false,//下载试卷
-      radio: 3,//下载试卷
+      dialogImageUrl: "", //图片预览
+      dialogVisible: false, //图片预览
+      dialogPaperVisible: false, //下载试卷
+      radio: 3, //下载试卷
     };
   },
   watch: {},
@@ -170,36 +235,65 @@ export default {
         .then((res) => {
           if (res.code == 200) {
             this.waitList = res?.data || [];
-            if(this.waitList.length > 0){
-                this.exerciseId = this.waitList?.[0]?.exerciseId || '';
-                this.knowledgeName = this.waitList?.[0]?.knowledgeName || '';
-                this.GetStudentTargeExerciseQuestion();
+            if (this.waitList.length > 0) {
+              this.exerciseId = this.waitList?.[0]?.exerciseId || "";
+              this.knowledgeName = this.waitList?.[0]?.knowledgeName || "";
+              this.GetStudentTargeExerciseQuestion();
             }
           }
         });
     },
     // 查询试题列表（type 1待练习的列表 2已练习的列表）
-    GetStudentTargeExerciseQuestion(){
-        this.$api.target
+    GetStudentTargeExerciseQuestion() {
+      this.$api.target
         .studentTargeExerciseQuestion({
-          exerciseId: this.exerciseId, // 练习id	
+          exerciseId: this.exerciseId, // 练习id
           type: 1, // 1待练习的列表 2已练习的列表
         })
         .then((res) => {
           if (res.code == 200) {
-            this.questionList = res?.data || [];
-          }else{
+            // 客观题->选择、判断。主观题->上传图片
+            // isObjective 是否客观题 1是 0否  isJudge 是否判断题 1是 0否
+            const questionList = res?.data || [];
+            questionList.forEach((item) => {
+              if (Number(item.isObjective) === 1) {
+                //客观题
+                let answer = "";
+                if (Number(item.isJudge) === 1) {
+                  //判断题
+                  answer = item.answer || "";
+                } else {
+                  //选择题
+                  answer = Array.isArray(item.answer) ? item.answer : [];
+                }
+                item.answer = answer;
+              } else {
+                item.answer = Array.isArray(item.answer) ? item.answer : [];
+              }
+            });
+            this.questionList = questionList;
+          } else {
             this.questionList = [];
           }
         });
     },
     //切换知识点
-    ChangeKnowledge(item) { 
-      console.log("打印切换知识点",item);
-      this.exerciseId = item.exerciseId || '';
-      this.knowledgeName = item.knowledgeName || '';
+    ChangeKnowledge(item) {
+      if (this.exerciseId == item.exerciseId) {
+        return;
+      }
+      this.exerciseId = item.exerciseId || "";
+      this.knowledgeName = item.knowledgeName || "";
       this.GetStudentTargeExerciseQuestion();
     },
+    //判断题改变
+    HandleJudgeChange(item) {
+      item.answer = item.answer || "";
+    },
+    //选择题改变
+    HandleCheckChange(item) {
+      item.answer = item.answer || [];
+    },
     //删除图片
     handleRemove(file) {
       console.log(file);
@@ -251,9 +345,10 @@ export default {
       padding: 10px;
       box-sizing: border-box;
       cursor: pointer;
-      &:active {
-        background: rgba(46,100,250,0.1);
-        border: 1px solid #2E64FA;
+
+      &.active {
+        background: rgba(46, 100, 250, 0.1);
+        border: 1px solid #2e64fa;
       }
 
       .item_name {
@@ -313,6 +408,7 @@ export default {
   .main_body {
     padding: 0 0 0 10px;
     overflow: hidden;
+
     .content_main {
       width: 100%;
       height: 100%;
@@ -322,6 +418,7 @@ export default {
       box-sizing: border-box;
       background-color: #ffffff;
       border-radius: 10px;
+
       .content_title {
         display: flex;
         width: 100%;
@@ -329,6 +426,7 @@ export default {
         box-sizing: border-box;
         justify-content: space-between;
         align-items: center;
+
         .title_name {
           font-weight: 500;
           font-size: 16px;
@@ -339,22 +437,28 @@ export default {
           text-overflow: ellipsis;
           margin-right: 10px;
         }
+
         .button {
           display: flex;
+
           :deep(.el-button) {
             padding: 10px 20px;
           }
+
           .download_btn {
             color: #666666;
+
             &:hover {
               border-color: #dcdfe6;
             }
+
             &:focus {
               border-color: #dcdfe6;
             }
           }
         }
       }
+
       .question_list {
         display: flex;
         flex-direction: column;
@@ -363,40 +467,50 @@ export default {
         overflow: auto;
         box-sizing: border-box;
         flex: 1;
+
         .question_item {
           background: #ffffff;
           border-radius: 10px 10px 10px 10px;
           border: 1px solid #dcdfe6;
+
           :deep(.question_preview) {
             padding: 16px;
             box-sizing: border-box;
           }
+
           &:first-child {
             margin-top: 0;
           }
+
           margin-top: 20px;
+
           .question_footer {
             padding: 20px 16px;
             background-color: #f8f8f9;
             border-top: 1px solid #dcdfe6;
             display: flex;
+
             // align-items: center;
             &.img_list {
               padding: 16px;
+
               .footer_title {
                 line-height: 48px;
               }
             }
+
             .footer_title {
               font-weight: 500;
               font-size: 14px;
               color: #333333;
               line-height: 24px;
             }
+
             .upload_answer {
               flex: 1;
               display: flex;
               flex-wrap: wrap;
+
               .img_uploader {
                 // display: flex;
                 // flex-direction: row-reverse;
@@ -412,6 +526,7 @@ export default {
                     border: 1px solid #ebeef5;
                   }
                 }
+
                 :deep(.el-upload--picture-card) {
                   background-color: transparent;
                   border: 0;
@@ -421,6 +536,7 @@ export default {
                   border-radius: 0;
                   margin-right: 22px;
                 }
+
                 .upload_btn {
                   border: 1px solid #2e64fa;
                   font-weight: 400;
@@ -429,6 +545,7 @@ export default {
                   padding: 9px 15px;
                 }
               }
+
               .upload_list_item {
                 width: 64px;
                 height: 48px;
@@ -440,11 +557,13 @@ export default {
                 overflow: hidden;
                 position: relative;
                 cursor: pointer;
+
                 img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                 }
+
                 .upload_list_item_delete {
                   position: absolute;
                   top: 3px;
@@ -455,6 +574,7 @@ export default {
                 }
               }
             }
+
             .radio_group {
               :deep(.el-radio) {
                 line-height: 24px;
@@ -462,18 +582,22 @@ export default {
                 font-size: 14px;
                 color: #333333;
                 margin-right: 20px;
+
                 .el-radio__input {
                   &.is-checked + .el-radio__label {
                     color: #333333;
                   }
+
                   &.is-checked .el-radio__inner {
                     border-color: #2e64fa;
                     background-color: #ffff;
                   }
+
                   .el-radio__inner {
                     width: 16px;
                     height: 16px;
                     border-color: rgba(0, 0, 0, 0.2);
+
                     &::after {
                       width: 10px;
                       height: 10px;
@@ -481,36 +605,78 @@ export default {
                     }
                   }
                 }
+
                 .el-radio__label {
                   padding-left: 4px;
                 }
               }
             }
+
+            .checkbox_group {
+              //多选
+              :deep(.el-checkbox) {
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #333333;
+                margin-right: 20px;
+
+                .is-checked + .el-checkbox__label {
+                  color: #333333;
+                }
+
+                .is-checked .el-checkbox__inner {
+                  border-color: #2e64fa;
+                }
+
+                .el-checkbox__input {
+                  .el-checkbox__inner {
+                    width: 16px;
+                    height: 16px;
+                    border-color: rgba(0, 0, 0, 0.2);
+
+                    &::after {
+                      left: 5px;
+                    }
+                  }
+                }
+
+                .el-checkbox__label {
+                  padding-left: 4px;
+                  line-height: 24px;
+                }
+              }
+            }
           }
         }
       }
     }
   }
 }
+
 .dialog_img {
   height: 70vh;
   overflow: auto;
 }
+
 .dialog_paper {
   padding: 8px 4px;
   display: flex;
   flex-direction: column;
   gap: 20px;
+
   .dialog_paper_item {
     height: 36px;
     display: flex;
     align-items: center;
+
     .dialog_paper_title {
       font-weight: 400;
       font-size: 14px;
       color: #303133;
       margin-right: 10px;
     }
+
     .radio_group {
       :deep(.el-radio) {
         line-height: 24px;
@@ -518,18 +684,22 @@ export default {
         font-size: 14px;
         color: #333333;
         margin-right: 40px;
+
         .el-radio__input {
           &.is-checked + .el-radio__label {
             color: #333333;
           }
+
           &.is-checked .el-radio__inner {
             border-color: #2e64fa;
             background-color: #ffff;
           }
+
           .el-radio__inner {
             width: 16px;
             height: 16px;
             border-color: rgba(0, 0, 0, 0.2);
+
             &::after {
               width: 10px;
               height: 10px;
@@ -537,6 +707,7 @@ export default {
             }
           }
         }
+
         .el-radio__label {
           padding-left: 4px;
         }