feat: 考试接口对接

src/components/DbAnswerCard/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div>
-    <div class="sub-title">一、单选题</div>
+    <div v-for="(item, index) in data.question" :key="index">
+      <div class="sub-title">{{$getCapitalizeNumber(index)}}、{{$getQuestionTypeText(item.questionType)}}</div>
       <div class="options">
         <a-row :gutter="[16, 16]">
           <a-anchor :affix="false">
-          <a-col v-for="(item, index) in 12" :key="index" :span="4">
+            <a-col v-for="(j, k) in item.questionList" :key="`${index}-${k}`" :span="4">
-            <div class="option-item flex-center" :class="{ 'option-item-active': index === 0 }">
+              <div class="option-item flex-center" :class="{ 'option-item-active': j.myAnswers }">
-              <a-anchor-link :href="`#type1-${index}`" :title="index + 1"></a-anchor-link>
+                <a-anchor-link :href="`#type${item.questionType}-${k}`" :title="k + 1"></a-anchor-link>
               </div>
             </a-col>
           </a-anchor>
         </a-row>
       </div>
-    <div class="sub-title">二、多选题</div>
+    </div>
+
+    <!-- <div class="sub-title">二、多选题</div>
     <div class="options">
       <a-row :gutter="[16, 16]">
         <a-anchor :affix="false">
@@ -37,7 +40,7 @@
       </a-row>
     </div>
     <div class="sub-title">四、填空题</div>
-    <div class="options"></div>
+    <div class="options"></div> -->
   </div>
 </template>
 
@@ -45,7 +48,10 @@
 import { Anchor } from 'ant-design-vue'
 export default {
   props: {
-    pref: Object
+    data: {
+      type: Object,
+      default: () => ({})
+    }
   },
   components: {
     'a-anchor': Anchor,

src/components/DbExam/index.vue

@@ -7,28 +7,29 @@
           倒计时:
           <b style="margin-left: 5px;"><a-statistic-countdown :value="deadline" :valueStyle="{ fontSize: '16px' }" @finish="onFinish"/></b>
         </div>
-        <DbAnswerCard :pref="$refs"></DbAnswerCard>
+        <DbAnswerCard :data="data"></DbAnswerCard>
         <div class="answer-cart-footer flex-center">
-          <a-button type="primary" size="large">交卷</a-button>
+          <a-button @click="handlerSubmit" type="primary" size="large">交卷</a-button>
         </div>
       </a-card>
     </div>
     <div class="exam-line"></div>
     <div class="exam-box">
       <a-card :bordered="false" ref="question">
-        <div class="exam-title">建筑施工安全培训第一期课程学习(模拟考试)</div>
+        <div class="exam-title">{{ data.courseName }}</div>
         <div class="exam-main">
-          <template>
+          <div v-for="(item, index) in data.question" :key="index">
-            <div class="sub-title">一、单选题（共30题，每题1.5分，共45分）</div>
+            <div class="sub-title">{{ $getCapitalizeNumber(index) }}、{{ $getQuestionTypeText(item.questionType) }}（共30题，每题1.5分，共45分）</div>
             <DbQuestionItem
-              :id="`type1-${index}`"
+              :id="`type${item.questionType}-${k}`"
-              :index="index + 1"
+              :index="j.orderNumber"
-              :type="1"
+              :type="item.questionType"
-              v-for="(item, index) in 5"
+              :data="j"
-              :key="`type1-${index}`"
+              v-for="(j, k) in item.questionList"
+              :key="`type${item.questionType}-${k}`"
             ></DbQuestionItem>
-          </template>
+          </div>
-          <template>
+          <!-- <template>
             <div class="sub-title">二、多选题（共10题，每题1.5分，共15分）</div>
             <DbQuestionItem
               :id="`type2-${index}`"
@@ -55,7 +56,7 @@
           <template>
             <div class="sub-title">五、简答题（共10题，每题1.5分，共15分）</div>
             <DbQuestionItem :index="index + 1" :type="5" v-for="(item, index) in 5" :key="`type5-${index}`"></DbQuestionItem>
-          </template>
+          </template> -->
         </div>
       </a-card>
     </div>
@@ -66,12 +67,19 @@
 import DbQuestionItem from '@/components/DbQuestionItem/index'
 import DbAnswerCard from '@/components/DbAnswerCard/index'
 export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   components: {
     DbQuestionItem,
     DbAnswerCard
   },
   data () {
     return {
+      capitalizeNumber: ['一', '二', '三', '四', '五', '六'],
       deadline: Date.now() + 1000 * 60 * 60 * 1.5
     }
   },
@@ -80,6 +88,9 @@ export default {
     onFinish () {},
     handlerBack () {
       this.$router.go(-1)
+    },
+    handlerSubmit () {
+      this.$emit('submit', this.data)
     }
   }
 }

src/components/DbQuestionItem/index.vue

@@ -2,49 +2,69 @@
   <div class="question-item">
     <div class="question-title">
       <span>{{ index || 1 }}、</span>
-      <span>({{ type | QuestionTypeFormat }})</span>
+      <span>({{ $getQuestionTypeText(type) }})</span>
       <span v-html="title"></span>
     </div>
     <div class="options-box">
       <!-- 单选题选项 -->
       <template v-if="type == 1">
-        <a-radio-group v-model="answer">
+        <a-radio-group v-model="data.myAnswers">
-          <a-radio v-for="(item, index) in options" :key="index" :style="radioStyle" :value="item.value">
+          <a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
-            <span>{{ optionKeys[index] }}、</span>{{ item.label }}
+          <a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
-          </a-radio>
+          <a-radio v-if="data.answerC" :style="radioStyle" value="C"><span>C、</span>{{ data.answerC }}</a-radio>
+          <a-radio v-if="data.answerD" :style="radioStyle" value="D"><span>D、</span>{{ data.answerD }}</a-radio>
+          <a-radio v-if="data.answerE" :style="radioStyle" value="E"><span>E、</span>{{ data.answerE }}</a-radio>
+          <a-radio v-if="data.answerF" :style="radioStyle" value="F"><span>F、</span>{{ data.answerF }}</a-radio>
         </a-radio-group>
       </template>
       <!-- 多选题选项 -->
       <template v-if="type == 2">
-        <a-checkbox-group v-model="answer">
+        <a-checkbox-group v-model="data.myAnswers">
-          <a-col :span="24" v-for="(item, index) in options" :key="index">
+          <a-col :span="24">
-            <a-checkbox :value="item.value" :style="radioStyle">
+            <a-checkbox v-if="data.answerA" value="A" :style="radioStyle"><span>A、</span>{{ data.answerA }}</a-checkbox>
-              <span>{{ optionKeys[index] }}、</span>{{ item.label }}
+            <a-checkbox v-if="data.answerB" value="B" :style="radioStyle"><span>B、</span>{{ data.answerB }}</a-checkbox>
-            </a-checkbox>
+            <a-checkbox v-if="data.answerC" value="C" :style="radioStyle"><span>C、</span>{{ data.answerC }}</a-checkbox>
+            <a-checkbox v-if="data.answerD" value="D" :style="radioStyle"><span>D、</span>{{ data.answerD }}</a-checkbox>
+            <a-checkbox v-if="data.answerE" value="E" :style="radioStyle"><span>E、</span>{{ data.answerE }}</a-checkbox>
+            <a-checkbox v-if="data.answerF" value="F" :style="radioStyle"><span>F、</span>{{ data.answerF }}</a-checkbox>
           </a-col>
         </a-checkbox-group>
       </template>
       <!-- 判断题选项 -->
       <template v-if="type == 3">
-        <a-radio-group v-model="answer">
+        <a-radio-group v-model="data.myAnswers">
-          <a-radio :style="radioStyle" :value="1"> <span>A、</span>正确</a-radio>
+          <a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
-          <a-radio :style="radioStyle" :value="2"> <span>B、</span>错误</a-radio>
+          <a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
         </a-radio-group>
       </template>
       <!-- 填空题 -->
       <template v-if="type == 4">
         <a-row :gutter="50" style="font-size: 14px;">
-          <a-col :span="12" class="flex-center" style="margin-bottom: 10px;"
+          <a-col
-            ><span class="flex-center nowrap">填空1:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+            :span="12"
+            class="flex-center"
+            style="margin-bottom: 10px;"
+          ><span class="flex-center nowrap">填空1:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
           /></a-col>
-          <a-col :span="12" class="flex-center" style="margin-bottom: 10px;"
+          <a-col
-            ><span class="flex-center nowrap">填空2:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+            :span="12"
+            class="flex-center"
+            style="margin-bottom: 10px;"
+          ><span class="flex-center nowrap">填空2:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
           /></a-col>
-          <a-col :span="12" class="flex-center"
+          <a-col
-            ><span class="flex-center nowrap">填空3:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+            :span="12"
+            class="flex-center"
+          ><span class="flex-center nowrap">填空3:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
           /></a-col>
-          <a-col :span="12" class="flex-center"
+          <a-col
-            ><span class="flex-center nowrap">填空4:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+            :span="12"
+            class="flex-center"
+          ><span class="flex-center nowrap">填空4:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
           /></a-col>
         </a-row>
       </template>
@@ -62,10 +82,16 @@
 <script>
 export default {
   props: {
-    index: Number, // 题目序号
+    index: {
+      type: Number
+    }, // 题目序号
     type: {
       type: [String, Number], // 1: 单选, 2: 多选, 3: 判断题, 4: 填空题, 5: 简答题
       default: 1
+    },
+    data: {
+      type: Object,
+      default: () => ({})
     }
   },
   data () {
@@ -101,4 +127,8 @@ export default {
 .options-box {
   padding-left: 30px;
 }
+
+::v-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper{
+  margin-left: 0;
+}
 </style>

src/utils/prototype.js

@@ -4,3 +4,27 @@ import store from '@/store/index'
 Vue.prototype.$getDictByCode = function (code) {
   console.log('dictList', store)
 }
+
+Vue.prototype.$getQuestionTypeText = function (value) {
+  switch (Number(value)) {
+    case 1:
+      return '单选题'
+    case 2:
+      return '多选题'
+    case 3:
+      return '判断题'
+    case 4:
+      return '填空题'
+    case 5:
+      return '简答题'
+    default:
+      return '其他'
+  }
+}
+
+Vue.prototype.$getCapitalizeNumber = function (value) {
+  const capitalizeNumber = ['一', '二', '三', '四', '五', '六']
+  if (value || value === 0) {
+    return capitalizeNumber[Number(value)]
+  }
+}

src/views/myexamDetail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DbExam :type="$route.query.type"></DbExam>
+    <DbExam :type="$route.query.type" :data="examData" @submit="handlerSubmit"></DbExam>
   </div>
 </template>
 
@@ -11,6 +11,7 @@ export default {
     components: { DbExam },
     data () {
       return {
+        examData: {},
         query: {}
       }
     },
@@ -33,7 +34,12 @@ export default {
         const query = this.query
         practiceStartAnswer({ projectId: Number(query.projectId), courseId: Number(query.courseId), type: Number(query.practiceType || 1) }).then(res => {
           console.log('res', res)
+          this.examData = res.data
         })
+      },
+      // 提交
+      handlerSubmit (data) {
+        console.log('this.data', data)
       }
     }
 }