welfare-admin/src/views/myreport/index.vue

<template>
  <a-card :bordered="false">
    <a-tabs v-model="activeTab">
      <a-button @click="goBack" slot="tabBarExtraContent">
        返回
      </a-button>
      <a-tab-pane key="1" tab="答题报告">
        <a-card
          :bordered="false"
          :bodyStyle="{ padding: '0px !important' }"
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
            <h3 v-if="viewReport.courseName">{{ viewReport.courseName }}</h3>
            <div class="sub-info">
              <span>交卷时间：{{ viewReport.submitTime }}</span>
              <span v-if="viewReport.totalScore">
                答题用时：{{ (viewReport.answerTime / 60).toFixed(2) || 0 }}分钟
              </span>
            </div>
            <DbReport :data="viewReport"></DbReport>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="查看解析">
        <a-card
          :bordered="false"
          :bodyStyle="{ padding: '0px !important' }"
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
            <h4 v-if="viewReport.courseName">{{ viewReport.courseName }}</h4>
            <!-- <div class="sub-info"><span>选择题30/30</span><span>选择题30/30</span><span>选择题30/30</span></div> -->
          </template>
          <template v-for="(item, index) in questionList">
            <div :key="index">
              <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
              <div style="text-align: right;">
                <a-button
                  @click="handlerLike(0, item)"
                  v-if="item.isCollection"
                  icon="star"
                  size="small"
                >
                  取消收藏
                </a-button>
                <a-button v-else @click="handlerLike(1, item)" icon="star" size="small">
                  收藏
                </a-button>
              </div>
              <a-divider></a-divider>
            </div>
          </template>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
import DbReport from '@/components/DbReport/index.vue'
import {
  answerViewReport,
  answerViewResolution,
  reqCollection,
  reqCollectionCancel
} from '@/api/practice/report'

export default {
  components: { DbQuestionInfoItem, DbReport },
  data () {
    return {
      query: {},
      activeTab: '',
      viewReport: {}, // 答题报告
      questionList: [],
      viewResolution: [] // 答题解析
    }
  },
  mounted () {
    const query = this.$route.query
    this.query = query
    this.activeTab = String(query.index) || '1'
    // if (query.type === 'practice') {
    this.getAnswerViewReport()
    this.getAnswerViewResolution()
    // }
    // if (query.type === 'exam') {
    //   this.getExamViewReport()
    //   this.getExamViewResolution()
    // }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    handlerLike (type, data) {
      if (type === 1) {
        reqCollection({ questionId: data.questionId, type: 1 }).then(res => {
          this.$message.success('收藏成功!')
          this.$set(data, 'isCollection', 1)
        })
      }
      if (type === 0) {
        reqCollectionCancel({ questionId: data.questionId, type: 1 }).then(res => {
          this.$message.success('取消收藏成功!')
          this.$set(data, 'isCollection', 0)
        })
      }
    },
    // 考试 start
    // getExamViewReport () {
    //   reqExamViewReport({ projectId: this.query.reportId }).then(res => {
    //     this.viewReport = res.data
    //   })
    // },
    // getExamViewResolution () {
    //   reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
    //     const data = res.data
    //     let list = []
    //     if (Array.isArray(data)) {
    //       data.map(item => {
    //         list = [...list, ...data.questionList]
    //       })
    //     }
    //     console.log('list', list)
    //     this.viewResolution = list
    //   })
    // },
    // 练习 start
    getAnswerViewReport () {
      answerViewReport({ reportId: Number(this.query.reportId) }).then(res => {
        this.viewReport = res.data
      })
    },
    getAnswerViewResolution () {
      answerViewResolution({ reportId: Number(this.query.reportId) }).then(res => {
        const data = res.data.question
        let list = []
        if (Array.isArray(data)) {
          data.map(item => {
            list = [...list, ...item.questionList]
          })
        }
        console.log('list', list)
        this.viewResolution = res.data
        this.questionList = list
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sub-info {
  color: #666;
  font-weight: normal;
  font-size: 14px;
}
</style>