feat: 我的练习接口对接

src/api/practice/practice.js

@@ -6,16 +6,16 @@ const practiceApi = {
     del: 'practice/del',
     list: 'practice/list',
     collectionList: 'practice/collection/pageList', // 我的收藏列表
-    recordList: 'practice/record/pageList', // 错题集
-    wrongList: 'practice/wrong/pageList', // 答题记录
-    startAnswer: 'practice/startAnswer', // 开始答题
+    recordList: 'practice/record/pageList', // 答题记录
+    wrongList: 'practice/wrong/pageList', // 错题集
+    startAnswer: 'practice/startAnswer' // 开始答题
 }
 
 export function practiceStartAnswer(params) {
     return request({
         url: practiceApi.startAnswer,
         method: 'post',
-        data: params
+        params: params
     })
 }
 

src/components/DbQuestionInfoItem/index.vue

@@ -7,9 +7,15 @@
     </div>
     <div class="options-box">
       <ul class="answer-list">
-        <li :class="{'success-li' : index == 2}" v-for="(item, index) in options" :key="index">
+        <!-- <li :class="{'success-li' : index == 2}" v-for="(item, index) in options" :key="index">
           <span>{{ optionKeys[index] }}、</span>{{ item.label }}
-        </li>
+        </li> -->
+        <li v-if="data.answerA || data.answerA === 0" :class="{'success-li' : data.rightAnswers == 'A'}"><span>A、</span>{{ data.answerA }}</li>
+        <li v-if="data.answerB || data.answerB === 0" :class="{'success-li' : data.rightAnswers == 'B'}"><span>B、</span>{{ data.answerB }}</li>
+        <li v-if="data.answerC || data.answerC === 0" :class="{'success-li' : data.rightAnswers == 'C'}"><span>C、</span>{{ data.answerC }}</li>
+        <li v-if="data.answerD || data.answerD === 0" :class="{'success-li' : data.rightAnswers == 'D'}"><span>D、</span>{{ data.answerD }}</li>
+        <li v-if="data.answerE || data.answerE === 0" :class="{'success-li' : data.rightAnswers == 'E'}"><span>E、</span>{{ data.answerE }}</li>
+        <li v-if="data.answerF || data.answerF === 0" :class="{'success-li' : data.rightAnswers == 'F'}"><span>F、</span>{{ data.answerF }}</li>
       </ul>
     </div>
     <div class="flex-center justify-between" style="margin-top: 10px;">
@@ -26,13 +32,13 @@
             <a-tag color="blue" >统计</a-tag>
           </div>
         </div>
-        <div class="analysis-value">答题时间：44秒，全站正确率：47%，易错项：D。</div>
+        <div class="analysis-value">答题时间：{{data.answerTime}}秒，全站正确率：{{data.accuracyRate}}%，易错项：{{data.wrongItem || '无'}}。</div>
       </div>
       <div class="flex-center analysis">
         <div class="analysis-label">
           <a-tag color="blue" style="margin-top: 6px;">解析</a-tag>
         </div>
-        <div class="analysis-value" style="color: #333;">第一步，本题考查新发展理念。第二步，“十三五”规划建议提出的创新、协调、绿色、开放、共享五大发展理念，集中反映了我们党对经济社会发展规律认识的深化，是建议的精髓和主线，也是本次全会的亮点和重大贡献。创新发展注重的是解决发展动力问题。我国创新能力不强，科技发展水平总体不高，科技对经济社会发展的支撑能力不足，科技对经济增长的贡献率远低于发达国家水平；协调发展注重的是解决发展不平衡问题。我国发展不协调是一个长期存在的问题，突出表现在区域、城乡、经济和社会、物质文明和精神文明、经济建设和国防建设等关系上；绿色发展注重的是解决人与自然和谐共生问题。我国资源约束趋紧、环境污染严重、生态系统退化的问题十分严峻；开放发展注重的是解决发展内外联动问题。现在的问题不是要不要对外开放，而是如何提高对外开放的质量和发展的内外联动性；共享发展注重的是解决社会公平正义问题。我国经济发展的“蛋糕”不断做大，但分配不公问题比较突出，收入差距、城乡区域公共服务水平差距较大。在共享改革发展成果上，无论是实际情况还是制度设计，都还有不完善的地方。所以①③④正确。因此，选择C选项。</div>
+        <div class="analysis-value" style="color: #333;">{{data.answerParse || '无'}}</div>
       </div>
     </div>
   </div>
@@ -41,6 +47,10 @@
 <script>
 export default {
   props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
     questionIndex: {
       type: [Number],
       default: 1

src/views/mycollection/index.vue

@@ -2,32 +2,43 @@
   <a-card :bordered="false">
     <a-tabs v-if="activeTab" :default-active-key="activeTab">
       <a-tab-pane key="1" tab="我的收藏">
-        <a-card title="我的收藏题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
-          <template v-for="(item, index) in 10" >
-            <div :key="index">
-              <DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
-              <a-divider></a-divider>
+        <a-card :title="`我的收藏题目(共${collectionInfo.total}题)`" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
+          <template v-if="collectionInfo.list && collectionInfo.list.length>0">
+            <template v-for="(item, index) in collectionInfo.list" >
+              <div :key="index">
+                <DbQuestionInfoItem :data="item" :questionIndex="index+1" ></DbQuestionInfoItem>
+                <a-divider></a-divider>
+              </div>
+            </template>
+            <div class="flex-center">
+              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'collection')}" :default-current="collectionInfo.pageNum" :total="collectionInfo.total" />
             </div>
           </template>
-          <a-pagination :default-current="6" :total="500" />
+          <a-empty style="margin: 30px 0;" v-else />
         </a-card>
       </a-tab-pane>
       <a-tab-pane key="2" tab="错题集">
         <a-card title="我的错题题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
-          <template v-for="(item, index) in 10" >
-            <div :key="index">
-              <DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
-              <a-divider></a-divider>
+          <template v-if="wrongInfo.list && wrongInfo.list.length>0">
+            <template v-for="(item, index) in wrongInfo.list" >
+              <div :key="index">
+                <DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
+                <a-divider></a-divider>
+              </div>
+            </template>
+            <div class="flex-center">
+              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'record')}" :default-current="wrongInfo.pageNum" :total="wrongInfo.total" />
             </div>
           </template>
+          <a-empty style="margin: 30px 0;" v-else />
         </a-card>
       </a-tab-pane>
       <a-tab-pane key="3" tab="答题记录">
-        <a-card v-for="(item, index) in 10" :key="index" style="margin-bottom: 15px;">
+        <a-card v-for="(item, index) in recordInfo.list" :key="index" style="margin-bottom: 15px;">
           <div class="flex-center" >
             <div style="flex: 1;">
-              <h3>建筑施工安全培训第一期课程学习（6.8-7.8）</h3>
-              <div><span style="margin-right: 20px;">答题情况：做对10/30</span><span>交卷时间：2021-06-18  12:00</span></div>
+              <h3>{{item.courseName}}</h3>
+              <div><span style="margin-right: 20px;">答题情况：做对{{item.rightQuestions}}/{{item.totalQuestions}}</span><span>交卷时间：{{item.submitTime}}</span></div>
             </div>
             <div style="flex: 0 0 200px; text-align: right;">
               <div :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看报告</a-button></div>
@@ -35,34 +46,41 @@
             </div>
           </div>
         </a-card>
+        <div class="flex-center">
+          <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'wrong')}" :default-current="recordInfo.pageNum" :total="recordInfo.total" />
+        </div>
       </a-tab-pane>
     </a-tabs>
   </a-card>
 </template>
 
 <script>
+import { Pagination } from 'ant-design-vue'
 import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
 import { practiceCollectionPageList, practiceRecordPageList, practiceWrongPageList } from '@/api/practice/practice'
 
 export default {
-  components: { DbQuestionInfoItem },
+  components: { DbQuestionInfoItem, 'a-pagination': Pagination },
   data () {
     return {
       activeTab: '',
       collectionInfo: {
         list: [],
-        size: 10,
-        pageIndex: 1
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
       },
       recordInfo: {
         list: [],
-        size: 10,
-        pageIndex: 1
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
       },
       wrongInfo: {
         list: [],
-        size: 10,
-        pageIndex: 1
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
       }
     }
   },
@@ -72,18 +90,45 @@ export default {
   },
   methods: {
     initData () {
-      this.getPracticeCollectionPageList()
-      this.getPracticeRecordPageList()
-      this.getPracticeWrongPageList()
+      this.getPracticecollectionPageList()
+      this.getPracticerecordPageList()
+      this.getPracticewrongPageList()
     },
-    getPracticeCollectionPageList () {
-      practiceCollectionPageList().then(res => {
+    // 获取收藏列表
+    getPracticecollectionPageList () {
+      const { collectionInfo } = this
+      practiceCollectionPageList({ pageSize: collectionInfo.pageSize, pageNum: collectionInfo.pageNum }).then(res => {
+        this.collectionInfo.list = res.rows
+        this.collectionInfo.total = res.total
+      })
+    },
+    // 获取答题记录
+    getPracticerecordPageList () {
+      const { recordInfo } = this
+      practiceRecordPageList({ pageSize: recordInfo.pageSize, pageNum: recordInfo.pageNum }).then(res => {
+        this.recordInfo.list = res.rows
+        this.recordInfo.total = res.total
+      })
+    },
+    // 获取错题集
+    getPracticewrongPageList () {
+      const { wrongInfo } = this
+      practiceWrongPageList({ pageSize: wrongInfo.pageSize, pageNum: wrongInfo.pageNum }).then(res => {
+        this.wrongInfo.list = res.rows
+        this.wrongInfo.total = res.total
+      })
+    },
+    // 分页切换
+    changePaginatio (page, size, type) {
+      this[`${type}Info`] = { ...this[`${type}Info`], pageSize: size, pageNum: page }
+      this.$nextTick(() => {
+        this[`getPractice${type}PageList`]()
       })
     }
   }
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 
 </style>

src/views/myexamDetail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DbExam></DbExam>
+    <DbExam :type="$route.query.type"></DbExam>
   </div>
 </template>