Merge branch 'master' of https://gitlab.ezijing.com/ezijing/x-learn

src/components/exam/examCard.vue

@@ -8,10 +8,11 @@
           <div class="count">12:00</div>
         </div>
       </div>
-      <div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
+      <div class="exam-main">
         <div class="left">
-          <question-list :data="currentExam"></question-list>
-          {{ (index + 1) + '/' +data.questions.total_question_count }}
+          <question-list :data="currentExam">
+            <template #index>1/100</template>
+          </question-list>
         </div>
         <div class="right">
           <answer-card></answer-card>
@@ -56,22 +57,10 @@ export default {
   data() {
     return {
       index: 0,
-      list: [], // 所有题
-      contentHeight: 0 // 页面高度
+      questionList: [] // 所有试题
     }
   },
   computed: {
-    questionList() {
-      if (!this.data.questions) {
-        return []
-      }
-      return this.data.questions.question_items.reduce((result, question) => {
-        question.question_list.forEach(item => {
-          result.push(Object.assign(question, { question_list: item }))
-        })
-        return result
-      }, [])
-    },
     // 当前页面的大题数据
     currentExam() {
       return this.questionList[this.index]
@@ -81,17 +70,19 @@ export default {
       return this.currentExam.question_list[0]
     }
   },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        this.genQuestions(value)
+      }
+    }
+  },
   mounted() {
-    // 赋值页面高度
-    this.contentHeight = parseInt(
-      document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
-    )
+    console.log(this.questionList)
   },
   methods: {
-    // 获取dom高
-    getDom(id) {
-      return document.getElementById(id)
-    },
     // 下一题
     nextQuestion() {
       console.log(this.currentExam.question_list[0])
@@ -139,6 +130,21 @@ export default {
       //     })
       //   }
       // })
+    },
+    // 组装试题数据
+    genQuestions(data) {
+      const { questions = [], answers } = data
+      console.log(answers)
+      if (!questions) return []
+      this.questionList = questions.question_items.reduce((result, question) => {
+        question.question_list.forEach(list => {
+          list = list.map(item => {
+            return { ...item, user_answer: [] }
+          })
+          result.push(Object.assign({}, question, { question_list: list }))
+        })
+        return result
+      }, [])
     }
   }
 }
@@ -146,8 +152,10 @@ export default {
 
 <style lang="scss" scoped>
 .answer-box {
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   // background: #f9f9f9;
   .head {
     border-bottom: 1px solid #ccc;
@@ -193,6 +201,7 @@ export default {
     }
   }
   .exam-main {
+    flex: 1;
     display: flex;
     .left {
       background: #fff;

src/components/exam/questionList.vue

 <template>
   <div class="question-list">
-    <div class="question-list-hd">{{ data.title }}</div>
+    <div class="question-list-hd">
+      <h4 class="question-list-hd__title">{{ questionTypeText }}</h4>
+      <aside class="question-list-hd__aside"><slot name="index"></slot></aside>
+    </div>
     <div class="question-list-bd">
+      <h2 class="question-list-title" v-if="conmonTitle">{{ conmonTitle }}</h2>
       <question-list-item
         v-for="(item, index) in data.question_list"
         :data="item"
@@ -18,6 +22,40 @@
 import QuestionListItem from './questionListItem.vue'
 export default {
   props: { data: { type: Object, default: () => ({}) } },
-  components: { QuestionListItem }
+  components: { QuestionListItem },
+  computed: {
+    // 试题类型
+    questionTypeText() {
+      const map = { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
+      return map[this.data.question_type] || this.data.question_type
+    },
+    // 公共题干
+    conmonTitle() {
+      const [first = {}] = this.data.question_list
+      return first.common_content
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.question-list-hd {
+  display: flex;
+  align-items: center;
+  height: 45px;
+}
+.question-list-hd__title {
+  flex: 1;
+  font-size: 18px;
+  color: #222;
+}
+.question-list-hd__aside {
+  font-size: 18px;
+  color: #222;
+}
+.question-list-title {
+  margin: 20px 0 30px;
+  font-size: 18px;
+  color: #222;
+}
+</style>

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 class="question-list-item-hd__num">{{ index + 1 }}.</div>
+      <div class="question-list-item-hd__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-group v-model="data.user_answer[0]">
+          <div class="question-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>
+              <div class="question-option-item__text" 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-group v-model="data.user_answer">
+          <div class="question-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>
+              <div class="question-option-item__text" 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>
+        <el-input type="textarea" v-model="data.user_answer[0]"></el-input>
       </template>
     </div>
     <div class="question-list-item-ft">
@@ -47,11 +47,7 @@ export default {
     question: { type: Object, default: () => ({}) } // 大题
   },
   data() {
-    return {
-      checkedList: [],
-      checked: '',
-      text: ''
-    }
+    return {}
   },
   computed: {
     questionType() {
@@ -104,4 +100,40 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.question-list-item-hd {
+  display: flex;
+}
+.question-list-item-hd__num {
+  font-size: 32px;
+  font-weight: bold;
+  color: #222;
+  line-height: 45px;
+  margin-top: 5px;
+}
+.question-list-item-hd__title {
+  margin-left: 5px;
+  padding-top: 18px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  line-height: 25px;
+}
+.question-option-item {
+  margin-top: 20px;
+}
+.question-option-item__text {
+  display: inline-block;
+  font-size: 18px;
+  color: #222;
+}
+
+::v-deep .el-radio__inner {
+  width: 18px;
+  height: 18px;
+}
+
+.question-list-item-ft {
+  margin-top: 20px;
+}
+</style>