feat:试题组件分装

src/components/exam/examCard.vue

@@ -3,15 +3,17 @@
     <div class="answer-box">
       <div class="head" id="head-h">
         <el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
-        <div class="title">{{ params.title }}</div>
+        <div class="title">{{ title }}</div>
         <div class="right">
           <div class="count">12:00</div>
         </div>
       </div>
       <div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
-        <div class="left"></div>
+        <div class="left">
+          <question-list :data="currentExam"></question-list>
+        </div>
         <div class="right">
-          <answer-card> </answer-card>
+          <answer-card></answer-card>
         </div>
       </div>
       <div class="foot" id="foot-h">
@@ -20,16 +22,16 @@
           <div>下一题</div>
         </div>
         <div class="rigth-btn">
-          <div class="sign" v-if="params.collect">
+          <div class="sign" v-if="hasCollect">
             <div class="icon"></div>
             <div class="txt">收藏</div>
           </div>
-          <div class="sign2" v-if="params.sign">
+          <div class="sign2" v-if="hasMark">
             <div class="icon"></div>
             <div class="txt">标记</div>
           </div>
           <div class="end-exam-btn">
-            <div class="btn" v-if="params.submitBtn">交卷</div>
+            <div class="btn" v-if="hasSubmitBtn">交卷</div>
           </div>
         </div>
       </div>
@@ -38,9 +40,10 @@
 </template>
 
 <script>
+import questionList from '@/components/exam/questionList'
 import answerCard from '@/components/exam/examNumbers'
 export default {
-  components: { answerCard },
+  components: { questionList, answerCard },
   props: {
     title: { type: String },
     hasMark: { type: Boolean, default: true },
@@ -50,8 +53,8 @@ export default {
   },
   data() {
     return {
+      index: 0,
       list: [], // 所有题
-      currentExam: {}, // 当前页面的大题数据
       contentHeight: 0 // 页面高度
     }
   },
@@ -61,11 +64,15 @@ export default {
         return []
       }
       return this.data.questions.question_items.reduce((result, question) => {
-        question.question_list = question.question_list.forEach(item => {
-          result.push(Object.assign(question, { list: item }))
+        question.question_list.forEach(item => {
+          result.push(Object.assign(question, { question_list: item }))
         })
         return result
       }, [])
+    },
+    // 当前页面的大题数据
+    currentExam() {
+      return this.questionList[this.index]
     }
   },
   mounted() {

src/components/exam/examList.vue

-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-  props: { list: { type: Array, default: () => [] } }
-}
-</script>
-
-<style></style>

src/components/exam/examListItem.vue

-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-  item: { list: { type: Object, default: () => ({}) } }
-}
-</script>
-
-<style></style>

src/components/exam/questionList.vue

+<template>
+  <div class="question-list">
+    <div class="question-list-hd">{{ data.title }}</div>
+    <div class="question-list-bd">
+      <question-list-item
+        v-for="(item, index) in data.question_list"
+        :data="item"
+        :question="data"
+        :index="index"
+        :key="index"
+        v-on="$listeners"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import QuestionListItem from './questionListItem.vue'
+export default {
+  props: { data: { type: Object, default: () => ({}) } },
+  components: { QuestionListItem }
+}
+</script>

src/components/exam/questionListItem.vue

+<template>
+  <div class="question-list-item">
+    <div class="question-list-item-hd">
+      <div class="question-list-item-num">{{ index + 1 }}.</div>
+      <div class="question-list-item-title" v-html="data.question_content"></div>
+    </div>
+    <div class="question-list-item-bd">
+      <!-- 单选 -->
+      <template v-if="questionType === 1">
+        <el-radio-group v-model="checked">
+          <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
+            <el-radio :label="item.id">
+              <div class="q-option-item__answer" v-html="item.abc_option"></div>
+            </el-radio>
+          </div>
+        </el-radio-group>
+      </template>
+      <!-- 多选 -->
+      <template v-if="[2, 6].includes(questionType)">
+        <el-checkbox-group v-model="checkedList">
+          <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
+            <el-checkbox :label="item.id">
+              <div class="q-option-item__answer" v-html="item.abc_option"></div>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
+      </template>
+      <!-- 简答题 -->
+      <template v-if="questionType === 3">
+        <el-input type="textarea" v-model="text"></el-input>
+      </template>
+    </div>
+    <div class="question-list-item-ft">
+      <h3>答案解析</h3>
+      <!-- <p>正确答案：{{ correctAnswerText }}</p>
+      <p>您的答案：{{ submitAnswerText }}</p> -->
+      <p>解析：{{ data.question_analysis }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: { type: Number, default: 0 },
+    data: { type: Object, default: () => ({}) }, // 小题
+    question: { type: Object, default: () => ({}) } // 大题
+  },
+  data() {
+    return {
+      checkedList: [],
+      checked: '',
+      text: ''
+    }
+  },
+  computed: {
+    questionType() {
+      // (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
+      const questionType = parseInt(this.question.question_type)
+      const { answer_count: answerCount = [] } = this.data
+      if ([5, 7, 8].includes(questionType)) {
+        return answerCount || 3
+      } else {
+        return questionType
+      }
+    },
+    // 26个英文字母
+    A_Z() {
+      const result = []
+      for (let i = 0; i < 26; i++) {
+        result.push(String.fromCharCode(65 + i))
+      }
+      return result
+    },
+    // 处理后的options数据
+    currentOptions() {
+      if (!this.data.question_options) {
+        return []
+      }
+      return this.data.question_options.map((item, index) => {
+        // 英文字母 + 名称
+        item.abc = this.A_Z[index]
+        item.abc_option = `${this.A_Z[index]}. ${item.option}`
+        return item
+      })
+    }
+    // 正确答案显示的英文字母
+    // correctAnswerText() {
+    //   const result = this.currentOptions.reduce((result, item) => {
+    //     item.checked && result.push(item.abc)
+    //     return result
+    //   }, [])
+    //   return result.join('、')
+    // },
+    // // 提交答案显示的英文字母
+    // submitAnswerText() {
+    //   const result = this.currentOptions.reduce((result, item) => {
+    //     item.selected && result.push(item.abc)
+    //     return result
+    //   }, [])
+    //   return result.join('、')
+    // }
+  }
+}
+</script>
+
+<style></style>