saas_pc/src/pages/person-center/bank-record/index.vue

<template>
  <div class="bank-record">
    <div class="bank-record__header">
      <div class="title" v-if="false">做题记录</div>
      <div class="content">
        <el-select
          clearable
          @change="reGetExamRecordList"
          v-model="param.goodsId"
          placeholder="请选择"
        >
          <el-option
            clearable
            v-for="item in list"
            :key="item.goodsId"
            :label="item.goodsName"
            :value="item.goodsId"
          >
          </el-option>
        </el-select>
        <el-select
          @change="reGetExamRecordList"
          v-model="param.paperId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in list1"
            :key="item.paperId"
            :label="item.paperName"
            :value="item.paperId"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="bank-record__body">
      <div class="bank-item" v-for="(record, index) in recordList" :key="index">
        <div class="bank-item__header">
          <div class="note" v-if="record.paperName">{{ record.paperName }}</div>
          {{ record.examName }}
        </div>
        <div class="bank-item__body">
          <div class="list">
            <div class="exam-item">
              <div class="exam-item__body">
                <div class="text">
                  <span class="title">{{
                    $tools.timestampToTime(record.updateTime, false)
                  }}</span>
                  <span class="desc"
                    >总{{ record.totalQuestionNum }}题/对{{
                      record.rightQuestionNum
                    }}题</span
                  >
                </div>
                <div class="btns-wrap">
                  <div class="btns">
                    <el-button
                      type="primary"
                      class="btn"
                      @click="
                        go('/bank-exam-continue/' + record.goodsId, {
                          recordId: record.recordId,
                          examId: record.examId,
                          chapterId: record.chapterExamId,
                          moduleId: record.moduleExamId,
                          orderGoodsId: record.orderGoodsId,
                        })
                      "
                      v-if="record.status == 0 && record.historyExamJson"
                      >继续答题</el-button
                    >

                    <div class="btn-line">
                      <div
                        class="btn-line__in"
                        @click="doRepeat(record)"
                        v-if="
                          record.status == 1 && record.paperName != '随机练习'
                        "
                      >
                        <div>重新做题</div>
                      </div>
                      <div
                        class="btn-line__in"
                        @click="
                          go(
                            record.doMode === 3
                              ? '/bank-exam-all-explain/' + record.recordId
                              : '/bank-exam-explain/' + record.goodsId,
                            {
                              simulateStatus: record.doMode === 3 ? 1 : 0,
                              examId: record.examId,
                              chapterId:
                                record.courseType == 2
                                  ? record.chapterId
                                  : record.chapterExamId,
                              moduleId:
                                record.courseType == 2
                                  ? record.moduleId
                                  : record.moduleExamId,
                              orderGoodsId: record.orderGoodsId,
                              examType:
                                record.paperName == '随机练习' ? 2 : undefined,
                              goodsId: record.goodsId,
                              courseType: record.courseType,
                            }
                          )
                        "
                        v-if="record.status == 1"
                      >
                        <div>解析</div>
                      </div>
                      <div
                        class="btn-line__in"
                        v-if="record.status == 1"
                        @click="doReport(record)"
                      >
                        <div>做题报告</div>
                      </div>
                      <div class="btn-line__in" @click="moreRecords(record)">
                        <div>更多记录</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bank-record__footer">
      <div class="pagination">
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
          :page-size="param.pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BankRecord",
  data() {
    return {
      list1: [],
      list: [],
      param: {
        pageNum: 1,
        pageSize: 5,
        goodsId: "",
        paperId: "",
      },
      recordList: [],
      total: 0,
      simulateStatus: "",
    };
  },
  mounted() {
    this.listGoodsUserQuestion();
    this.examaperList();
    this.getExamRecordList();
  },
  methods: {
    reGetExamRecordList() {
      this.param.pageNum = 1;
      this.getExamRecordList();
    },
    examaperList() {
      this.$request.examaperList().then((res) => {
        this.list1 = res.rows;
        this.list1.unshift({
          paperId: "",
          paperName: "全部试卷类型",
        });
      });
    },

    listGoodsUserQuestion() {
      this.$request.listGoodsUserQuestion().then((res) => {
        this.list = res.rows;
        this.list.unshift({
          goodsId: "",
          goodsName: "全部题库记录",
        });
      });
    },
    go(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
    moreRecords(record) {
      let queryData = {};
      if (record.courseType == 2) {
        queryData = {
          examId: record.examId,
          gradeId: record.gradeId,
          chapterId: record.chapterId,
          moduleId: record.moduleId,
          courseId: record.courseId,
          sectionId: record.sectionId,
          courseType: record.courseType,
        };
        this.$router.push({
          path: "/person-center/record-list/" + record.goodsId,
          query: queryData,
        });
      } else {
        queryData = {
          examId: record.examId,
          chapterId: record.chapterExamId,
          moduleId: record.moduleExamId,
          recordId: record.recordId,
          courseType: record.courseType,
        };
        this.$router.push({
          path: "/person-center/record-list/" + record.goodsId,
          query: queryData,
        });
      }
    },
    currentChange(e) {
      this.param.pageNum = e;
      this.getExamRecordList();
    },
    getExamRecordList() {
      this.$request.examRecordGroupList(this.param).then((res) => {
        this.recordList = res.rows;
        this.total = res.total;
      });
    },

    async doRepeat(section) {
      console.log("section:", section);
      let count = 0;
      if (section.courseType == 2) {
        count = await this.bankRecordDoNum(section);
      } else {
        count = await this.examRecordCount(section.examId);
      }
      console.log("已做的次数", count);
      let answerNum = await this.getExamDetail(section.examId);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + answerNum + "次!",
        });
        return;
      }

      this.$confirm(`是否清空答案重做？`, "提示", {
        confirmButtonText: "重做",
        cancelButtonText: "查看上次",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {
          if (section.courseType == 2) {
            this.$router.push({
              path: "/course-exam/" + section.goodsId,
              query: {
                courseId: section.courseId,
                gradeId: section.gradeId || 0,
                moduleId: section.moduleId || 0,
                sectionId: section.sectionId || 0,
                examId: section.examId,
                type: section.type, // 模块卷类型
                chapterId: section.chapterId || 0,
                orderGoodsId: section.orderGoodsId,
              },
            });
          } else {
            this.$router.push({
              path: "/bank-exam/" + section.goodsId,
              query: {
                simulateStatus: this.simulateStatus || 0,
                orderGoodsId: section.orderGoodsId,
                examId: section.examId,
                moduleId: section.moduleExamId || 0,
                chapterId: section.chapterExamId || 0,
              },
            });
          }
        })
        .catch((_) => {
          this.$router.push({
            path: "/bank-exam-all-explain/" + section.recordId,
            query: {
              simulateStatus: this.simulateStatus || 0,
              examId: section.examId,
              moduleId: section.moduleExamId || 0,
              chapterId: section.chapterExamId || 0,
              goodsId: section.goodsId,
              orderGoodsId: section.orderGoodsId,
              courseType: section.courseType,
            },
          });
        });
    },
    /**
     * 获取视频试卷已做的次数
     */
    bankRecordDoNum(section) {
      return new Promise((resolve) => {
        this.$request
          .bankRecordDoNum({
            goodsId: section.goodsId,
            gradeId: section.gradeId,
            chapterId: section.chapterId || 0,
            courseId: section.courseId,
            moduleId: section.moduleId || 0,
            examId: section.examId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    /**
     * 查询试卷历史做题次数
     */
    examRecordCount(examId) {
      return new Promise((resolve) => {
        this.$request
          .examRecordCount({
            examId: examId,
            goodsId: this.id,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$request.getExamDetail(exam_id).then((res) => {
          this.simulateStatus = res.data.simulateStatus;
          resolve(res.data.answerNum);
        });
      });
    },
    doReport(record) {
      if (record.courseType == 2) {
        this.$router.push({
          path: "/course-report",
          query: {
            examId: record.examId,
            recordId: record.recordId,
            type: record.type, //type:1章卷，2节卷，3模块卷
          },
        });
      } else {
        this.$router.push({
          path: "/bank-report/" + record.goodsId,
          query: {
            chapterId: record.chapterExamId,
            moduleId: record.moduleExamId,
            examId: record.examId,
            recordId: record.recordId,
            orderGoodsId: record.orderGoodsId,
            examType: record.paperName == "随机练习" ? 2 : undefined,
          },
        });
      }
      // go('/bank-report/' + record.goodsId, {
      //   chapterId: record.chapterExamId,
      //   moduleId: record.moduleExamId,
      //   examId: record.examId,
      //   recordId: record.recordId,
      //   orderGoodsId: record.orderGoodsId,
      // })
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-record {
  &__header {
    .title {
      height: 56px;
      line-height: 56px;
    }

    .content {
      padding-top: 10px;
      margin: 0px 0px 10px;
    }

    border-bottom: 1px solid #eee;
  }

  &__body {
    .bank-item {
      margin-top: 24px;

      &__header {
        height: 32px;
        line-height: 32px;

        .note {
          display: inline-block;
          margin-right: 15px;
          width: 80px;
          height: 32px;
          line-height: 32px;
          background: #3f8dfd;
          text-align: center;
          color: #fff;
          font-size: 16px;
          border-radius: 8px 0 8px 0;
        }
      }

      &__body {
        .list {
          .exam-item {
            height: 65px;
            background: #fafbfc;
            border-radius: 8px;
            overflow: hidden;
            line-height: 65px;
            border-top: 1px solid #eee;
            position: relative;

            &__body {
              .text {
                .title {
                  margin-left: 24px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                }

                .desc {
                  margin-left: 24px;
                  color: #666;
                  font-size: 16px;
                }
              }

              .btns-wrap {
                display: table;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                margin-right: 20px;

                .btns {
                  display: table-cell;
                  vertical-align: middle;
                  text-align: center;

                  .btn {
                    cursor: pointer;
                    width: 122px;
                    height: 32px;
                    padding: 0;
                    border-radius: 16px;
                    display: inline-block;
                    text-align: center;
                    line-height: 32px;
                    vertical-align: middle;

                    /deep/ span {
                      font-size: 16px;
                    }
                  }

                  .btn-line {
                    margin: 0 10px;
                    overflow: hidden;
                    vertical-align: middle;
                    display: inline-block;
                    background: #ffffff;
                    border: 1px solid #3f8dfd;
                    border-radius: 30px;
                    font-size: 0;
                    line-height: 0;

                    &__in {
                      cursor: pointer;
                      display: inline-block;
                      padding: 7px 0;
                      color: #3f8dfd;

                      > div {
                        text-align: center;
                        font-size: 16px;
                        line-height: 16px;
                        width: 96px;
                        height: 16px;
                        border-right: 1px solid #3f8dfd;
                      }

                      &:nth-last-of-type(1) {
                        > div {
                          border: 0;
                        }
                      }

                      &:hover {
                        background: #3f8dfd;
                        color: #fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &__footer {
    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }
}
</style>