同上

src/views/QuestionJudge.vue

@@ -15,22 +15,17 @@
     <div class="title-wrapper">
       <h1>知识问答</h1>
     </div>
-    <div class="question-wrapper">
-      <div class="type">
-        {{ questionInfo.questionType }}
-      </div>
-      <p class="question">
-        {{ questionInfo.question }}
-      </p>
-      <button
-        v-for="(option, index) in questionInfo.answerOptions"
-        :key="index"
-        class="option"
-      >
-        {{ option }}
-      </button>
-    </div>
-    <button class="submit">
+    <QuestionPending
+      v-if="!isShowDesc"
+      ref="question-pending"
+      :is-submitted="isSubmitted"
+      @submit="onSubmit"
+    />
+    <button
+      v-if="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
+      class="submit"
+      @click="onSubmit"
+    >
       提交答案
     </button>
   </div>
@@ -38,10 +33,16 @@
 
 <script>
 // import browser from "@/utils/browser";
+import QuestionPending from "@/views/QuestionPending.vue"
 
 export default {
+  components: {
+    QuestionPending
+  },
   data() {
     return {
+      isSubmitted: false,
+      isShowDesc: false,
     }
   },
   computed: {
@@ -57,6 +58,16 @@ export default {
     onClickClose() {
       window.parent.document.getElementById('closepop').click()
     },
+    onSubmit() {
+      const selectedIdxList = this.$refs['question-pending'].selectedIdxList
+      const selectedCount = selectedIdxList.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue
+      })
+      if (selectedCount > 0) {
+        this.isSubmitted = true
+        console.log('submit!')
+      }
+    }
   }
 }
 </script>
@@ -108,44 +119,6 @@ export default {
       -webkit-text-fill-color: transparent;
     }
   }
-  > .question-wrapper {
-    flex: 1 0 1px;
-    width: calc(100% - 160px * 2);
-    margin-top: 10px;
-    counter-reset: count;
-
-    > .type {
-      font-size: 24px;
-      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-      font-weight: bold;
-      color: #693D2F;
-    }
-    > p.question {
-      margin-top: 10px;
-      font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #693D2F;
-    }
-    > button.option {
-      margin-top: 20px;
-      width: 100%;
-      text-align: left;
-      display: block;
-      font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #693D2F;
-      counter-increment: count;
-      &:hover {
-        color: #728f43;
-      }
-      &::before {
-        content: counter(count, upper-alpha);
-        margin-right: 0.5em;
-      }
-    }
-  }
   > button.submit {
     margin-top: 10px;
     margin-bottom: 70px;

src/views/QuestionPending.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="question-pending">
+    <div class="type">
+      {{ questionInfo.questionType }}
+    </div>
+    <p class="question">
+      {{ questionInfo.question }}
+    </p>
+    <button
+      v-for="(option, index) in questionInfo.answerOptions"
+      :key="index"
+      :disabled="isSubmitted"
+      class="option"
+      :class="{
+        selected: selectedIdxList[index],
+        rightOption: questionInfo.rightOptionIdx.includes(index),
+        wrongOption: !questionInfo.rightOptionIdx.includes(index),
+        submitted: isSubmitted,
+        notSubmitted: !isSubmitted,
+      }"
+      @click="onClickOption(index)"
+    >
+      <div class="option-text">
+        {{ option }}
+      </div>
+      <div
+        v-if="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
+        class="result-tip"
+      >
+        <img
+          class="correct-icon"
+          src="@/assets/images/correct.png"
+          alt=""
+          draggable="false"
+        >
+        <span class="right-tip-text">恭喜你，回答正确</span>
+      </div>
+      <div
+        v-if="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
+        class="result-tip"
+      >
+        <img
+          class="wrong-icon"
+          src="@/assets/images/wrong.png"
+          alt=""
+          draggable="false"
+        >
+        <span class="wrong-tip-text">很遗憾，回答错误</span>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script>
+// import browser from "@/utils/browser";
+
+export default {
+  props: [
+    'isSubmitted'
+  ],
+  data() {
+    return {
+      selectedIdxList: [],
+    }
+  },
+  computed: {
+    ...globalMapState([
+      'questionInfo',
+    ])
+  },
+  watch: {
+  },
+  async mounted() {
+    this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+  },
+  methods: {
+    onClickOption(idx) {
+      if (this.questionInfo.questionType === '单选题') {
+        this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+        this.$set(this.selectedIdxList, idx, true)
+        this.$emit('submit')
+      } else if (this.questionInfo.questionType === '多选题') {
+        this.$set(this.selectedIdxList, idx, !this.selectedIdxList[idx])
+      } else if (this.questionInfo.questionType === '判断题') {
+        this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+        this.$set(this.selectedIdxList, idx, true)
+        this.$emit('submit')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.question-pending {
+  flex: 1 0 1px;
+  width: calc(100% - 150px * 2);
+  margin-top: 10px;
+  counter-reset: count;
+
+  > .type {
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 24px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #693D2F;
+  }
+  > p.question {
+    margin-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+  }
+  > button.option {
+    margin-top: 6px;
+    height: 45px;
+    padding-left: 10px;
+    padding-right: 50px;
+    padding-top: 5px;
+    width: 100%;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+    counter-increment: count;
+    &.notSubmitted:hover {
+      color: #5f9533;
+    }
+    &.notSubmitted.selected {
+      background-image: url(@/assets/images/option-correct-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: #5f9533;
+    }
+    &.submitted.selected.rightOption {
+      background-image: url(@/assets/images/option-correct-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: #5f9533;
+    }
+    &.submitted.selected.wrongOption {
+      background-image: url(@/assets/images/option-wrong-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    > .option-text {
+      &::before {
+        content: counter(count, upper-alpha);
+        margin-right: 0.5em;
+      }
+    }
+    > .result-tip {
+      display: inline-flex;
+      align-items: center;
+      > img.correct-icon {
+        width: 16px;
+        height: 12px;
+        margin-right: 9px;
+      }
+      > img.wrong-icon {
+        width: 13px;
+        height: 13px;
+        margin-right: 9px;
+      }
+      > .right-tip-text {
+        font-size: 16px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #3E7016;
+      }
+      > .wrong-tip-text {
+        font-size: 16px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #693D2F;
+      }
+    }
+  }
+}
+</style>