welfare-admin/src/views/mycollection/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
          :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>
                <div style="text-align: right;">
                  <a-button
                    @click="handlerDelete(item, 1)"
                    icon="delete"
                    type="danger"
                    size="small"
                  >
                    删除
                  </a-button>
                </div>
                <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-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-if="wrongInfo.list && wrongInfo.list.length > 0">
            <template v-for="(item, index) in wrongInfo.list">
              <div :key="index">
                <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
                <div style="text-align: right;">
                  <a-button
                    @click="handlerDelete(item, 2)"
                    icon="delete"
                    type="danger"
                    size="small"
                  >
                    删除
                  </a-button>
                </div>
                <a-divider></a-divider>
              </div>
            </template>
            <div class="flex-center">
              <a-pagination
                @change="
                  (page, size) => {
                    changePaginatio(page, size, 'wrong');
                  }
                "
                :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="答题记录">
        <template v-if="recordInfo.list && recordInfo.list.length > 0">
          <a-card
            v-for="(item, index) in recordInfo.list"
            :key="index"
            style="margin-bottom: 15px;"
          >
            <div class="flex-center">
              <div style="flex: 1;">
                <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 @click="handlerGoReport(item, 1)" :span="24" style="margin-bottom: 10px;">
                  <a-button type="primary" size="small">查看报告</a-button>
                </div>
                <div @click="handlerGoReport(item, 2)" :span="24">
                  <a-button type="danger" size="small">查看解析</a-button>
                </div>
              </div>
            </div>
          </a-card>
          <div class="flex-center">
            <a-pagination
              @change="
                (page, size) => {
                  changePaginatio(page, size, 'record');
                }
              "
              :default-current="recordInfo.pageNum"
              :total="recordInfo.total"
            />
          </div>
        </template>
        <a-empty v-else :image="$emptyImg"></a-empty>
      </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'
import { reqCollectionCancel } from '@/api/practice/report'

export default {
  components: { DbQuestionInfoItem, 'a-pagination': Pagination },
  data () {
    return {
      activeTab: '',
      collectionInfo: {
        list: [],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      recordInfo: {
        list: [],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      wrongInfo: {
        list: [],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    }
  },
  mounted () {
    this.activeTab = String(this.$route.query.type) || '1'
    console.log('>>>>>>>>>.', this.activeTab)
    this.initData()
  },
  methods: {
    initData () {
      this.getPracticecollectionPageList()
      this.getPracticerecordPageList()
      this.getPracticewrongPageList()
    },
    handlerDelete (data, type) {
      const _this = this
      this.$confirm({
        title: '安全培训',
        content: '确定删除吗?',
        onOk () {
          reqCollectionCancel({ questionId: data.questionId, type: type }).then(res => {
            _this.$message.success('删除成功!')
            _this.initData()
          })
        },
        onCancel () {}
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    // 获取收藏列表
    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`]()
      })
    },
    // 查看报告/查看解析
    handlerGoReport (item, type) {
      this.$router.push({
        path: '/myreport',
        query: { type: 'practice', index: type, reportId: item.reportId }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>