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

src/components/exam/examCard.vue

@@ -11,11 +11,16 @@
       <div class="exam-main">
         <div class="left">
           <question-list :data="currentExam" :index="index" :disabled="disabled" :hasResult="hasResult">
-            <template #index>{{ index + 1 }}/{{ data.questions.total_question_count }}</template>
+            <template #index>{{ index + 1 }}/{{ questionList.length }}</template>
           </question-list>
         </div>
         <div class="right">
-          <answer-card></answer-card>
+          <question-numbers
+            :index="index"
+            :list="questionList"
+            :data="currentExam"
+            @change="handlePageChange"
+          ></question-numbers>
         </div>
       </div>
       <div class="foot" id="foot-h">
@@ -44,9 +49,9 @@
 <script>
 import * as api from '@/api/exam.js'
 import questionList from '@/components/exam/questionList'
-import answerCard from '@/components/exam/examNumbers'
+import questionNumbers from '@/components/exam/questionNumbers'
 export default {
-  components: { questionList, answerCard },
+  components: { questionList, questionNumbers },
   props: {
     title: { type: String },
     hasMark: { type: Boolean, default: true },
@@ -130,13 +135,16 @@ export default {
     },
     // 下一题
     nextQuestion() {
-      const totalNumber = this.data.questions.total_question_count
+      const totalNumber = this.questionList.length
       if (this.index + 1 < totalNumber) this.index++
     },
     // 上一题
     prevQuestion() {
       if (this.index !== 0) this.index--
     },
+    handlePageChange(index) {
+      this.index = index
+    },
     // 收藏试题
     collectQuestion() {
       const item = this.currentItem

src/components/exam/examNumbers.vue → src/components/exam/questionNumbers.vue

 <template>
   <div>
     <div class="order-num">
-      <div>
-        <div class="tit">判断题</div>
+      <div v-for="item in dataList" :key="item.question_item_id">
+        <div class="tit">{{ item.title }}</div>
         <ul>
           <!-- stu1已答  stu2当前  stu3标记 -->
-          <li class="stu1">1</li>
-          <li class="stu2">2</li>
-          <li class="stu3">3</li>
+          <li
+            v-for="(item, index) in item.question_list"
+            :class="genClass(item)"
+            :key="index"
+            @click="handleClick(item)"
+          >
+            {{ index + 1 }}
+          </li>
         </ul>
       </div>
     </div>
@@ -47,37 +52,71 @@
 </template>
 <script>
 export default {
-  props: {},
-  mounted() {},
-  computed: {},
-  methods: {},
-  watch: {}
+  props: {
+    index: { type: Number, default: 0 },
+    data: { type: Object, default: () => ({}) },
+    list: { type: Array, default: () => [] }
+  },
+  computed: {
+    dataList() {
+      const results = []
+      this.list.forEach((item, index) => {
+        const findIndex = results.findIndex(data => data.question_item_id === item.question_item_id)
+        const quesitonlist = item.question_list.map(item => {
+          return { ...item, index }
+        })
+        if (findIndex === -1) {
+          results.push({
+            title: item.title,
+            question_type: item.question_type,
+            question_item_id: item.question_item_id,
+            question_list: quesitonlist
+          })
+        } else {
+          results[findIndex].question_list = results[findIndex].question_list.concat(quesitonlist)
+        }
+      })
+      return results
+    }
+  },
+  methods: {
+    genClass(data) {
+      return {
+        stu1: data.user_answer.length,
+        stu2: data.index === this.index,
+        stu3: data.sign
+      }
+    },
+    handleClick(data) {
+      this.$emit('change', data.index, data)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-.info{
+.info {
   display: flex;
   align-items: center;
   height: 100px;
-  .shape{
+  .shape {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     overflow: hidden;
   }
-  img{
+  img {
     width: 75px;
     // transform: scale(1);
     display: block;
   }
-  .right{
+  .right {
     margin-left: 22px;
-    .name{
+    .name {
       font-size: 18px;
       color: #222222;
       line-height: 25px;
     }
-    .code{
+    .code {
       font-size: 14px;
       color: #222222;
       line-height: 20px;
@@ -85,54 +124,54 @@ export default {
     }
   }
 }
-.order-num{
+.order-num {
   padding-top: 20px;
   padding-bottom: 90px;
-  .tit{
+  .tit {
     font-size: 12px;
     color: #999999;
     line-height: 17px;
     margin-bottom: 10px;
   }
-  ul{
+  ul {
     display: flex;
     list-style: none;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
-    li{
+    li {
       cursor: pointer;
       position: relative;
       border-radius: 50px;
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       font-size: 14px;
       color: #666666;
       line-height: 24px;
       margin-right: 20px;
       margin-bottom: 10px;
       text-align: center;
-      &:nth-child(5n+5){
+      &:nth-child(5n + 5) {
         margin-right: 0;
       }
-      &.analy{
-        &.stu1{
-          border: 2px solid #0FC118;
+      &.analy {
+        &.stu1 {
+          border: 2px solid #0fc118;
           line-height: 22px;
           background: #fff;
           color: #999;
         }
-        &.stu2{
-          border: 2px solid #C01540;
+        &.stu2 {
+          border: 2px solid #c01540;
           line-height: 22px;
           background: #fff;
           color: #999;
         }
-        &.stu3{
+        &.stu3 {
           color: #fff;
           background: #999999;
-          &::after{
+          &::after {
             content: '';
             position: absolute;
             top: -1px;
@@ -144,208 +183,208 @@ export default {
           }
         }
       }
-      &.stu1{
+      &.stu1 {
         background: #999;
         border: 1px solid #999;
         color: #fff;
       }
-      &.stu2{
+      &.stu2 {
         width: 22px;
         height: 22px;
         line-height: 22px;
-        border: 2px solid #0FC118;
+        border: 2px solid #0fc118;
       }
-      &.stu3{
-        &::after{
+      &.stu3 {
+        &::after {
           content: '';
           position: absolute;
           top: -1px;
           right: -1px;
           width: 4px;
           height: 4px;
-          background: #C01540;
+          background: #c01540;
           border-radius: 50%;
         }
       }
     }
   }
 }
-.flag-tips{
+.flag-tips {
   width: 260px;
   position: fixed;
   bottom: 60px;
-  right:0;
+  right: 0;
   display: flex;
   justify-content: space-around;
   padding: 15px 0 10px;
   background: #fff;
   margin: 0;
   list-style: none;
-  li{
-    .circle1{
+  li {
+    .circle1 {
       width: 24px;
       height: 24px;
-      background: #EEEEEE;
-      border: 1px solid #CCCCCC;
+      background: #eeeeee;
+      border: 1px solid #cccccc;
       border-radius: 50%;
     }
-    .circle1{
+    .circle1 {
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
     }
-    .circle2{
+    .circle2 {
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
     }
-    .circle3{
+    .circle3 {
       width: 24px;
       height: 24px;
-      border: 2px solid #0FC118;
+      border: 2px solid #0fc118;
       border-radius: 50%;
     }
-    .circle4{
+    .circle4 {
       position: relative;
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
-      &::after{
+      &::after {
         content: '';
         position: absolute;
         top: -1px;
         right: -1px;
         width: 4px;
         height: 4px;
-        background: #C01540;
+        background: #c01540;
         border-radius: 50%;
       }
     }
-    .txt{
+    .txt {
       margin-top: 5px;
       font-size: 12px;
-      color: #CCCCCC;
+      color: #cccccc;
       line-height: 17px;
     }
   }
 }
-.flag-tips{
+.flag-tips {
   width: 260px;
   position: fixed;
   bottom: 60px;
-  right:0;
+  right: 0;
   display: flex;
   justify-content: space-around;
   padding: 15px 0 10px;
   background: #fff;
   margin: 0;
   list-style: none;
-  li{
-    .circle1{
+  li {
+    .circle1 {
       width: 24px;
       height: 24px;
       background: #999;
       border: 1px solid #999;
       border-radius: 50%;
     }
-    .circle2{
+    .circle2 {
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
     }
-    .circle3{
+    .circle3 {
       width: 24px;
       height: 24px;
-      border: 2px solid #0FC118;
+      border: 2px solid #0fc118;
       background: rgba(15, 193, 24, 0.1);
       border-radius: 50%;
     }
-    .circle4{
+    .circle4 {
       position: relative;
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
-      &::after{
+      &::after {
         content: '';
         position: absolute;
         top: -1px;
         right: -1px;
         width: 4px;
         height: 4px;
-        background: #C01540;
+        background: #c01540;
         border-radius: 50%;
       }
     }
-    .txt{
+    .txt {
       margin-top: 5px;
       font-size: 12px;
-      color: #CCCCCC;
+      color: #cccccc;
       line-height: 17px;
     }
   }
 }
-.tips-box{
+.tips-box {
   width: 260px;
   position: fixed;
   bottom: 60px;
-  right:0;
+  right: 0;
   display: flex;
   justify-content: space-around;
   padding: 15px 0 10px;
   background: #fff;
   margin: 0;
   list-style: none;
-  li{
-    &:nth-child(2){
+  li {
+    &:nth-child(2) {
       // margin: 0 50px;
     }
-    .circle1{
+    .circle1 {
       width: 24px;
       height: 24px;
       background: #fff;
-      border: 2px solid #0FC118;
+      border: 2px solid #0fc118;
       border-radius: 50%;
       box-sizing: border-box;
     }
-    .circle2{
+    .circle2 {
       width: 24px;
       height: 24px;
-      border: 2px solid #C01540;
+      border: 2px solid #c01540;
       border-radius: 50%;
       box-sizing: border-box;
     }
-    .circle3{
+    .circle3 {
       width: 24px;
       height: 24px;
       background: #999999;
       border-radius: 50%;
     }
-    .circle4{
+    .circle4 {
       position: relative;
       width: 24px;
       height: 24px;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       border-radius: 50%;
-      &::after{
+      &::after {
         content: '';
         position: absolute;
         top: -1px;
         right: -1px;
         width: 4px;
         height: 4px;
-        background: #C01540;
+        background: #c01540;
         border-radius: 50%;
       }
     }
-    .txt{
+    .txt {
       margin-top: 5px;
       font-size: 12px;
-      color: #CCCCCC;
+      color: #cccccc;
       line-height: 17px;
     }
   }