zc_saas_h5/pages2/bank/question_record.vue

<template>
  <view>
    <nav-bar title="做题记录" class="nav"></nav-bar>
    <view class="tabs">
      <view
        class="tab"
        :class="{ active: index == 1 }"
        data-index="1"
        @click="tab(1)"
      >
        全部题库记录
        <u-icon
          class="icon"
          :class="index == 1 ? 'animals' : ''"
          name="arrow-down"
        ></u-icon>
      </view>
      <view
        class="tab"
        :class="{ active: index == 2 }"
        data-index="2"
        @click="tab(2)"
      >
        全部试卷类型
        <u-icon
          class="icon"
          :class="index == 2 ? 'animals' : ''"
          name="arrow-down"
        ></u-icon>
      </view>
    </view>

    <view class="record">
      <view class="item" v-for="(record, index) in recordList" :key="index">
        <view class="note">{{ record.paperName }}</view>
        <view class="title">{{ record.examName }}</view>
        <view class="desc">
          <view>
            <image src="/static/icon/wk_icon2.png"></image>
            <text>{{ $method.timestampToTime(record.updateTime, false) }}</text>
          </view>
          <view>
            <image src="/static/icon/wk_icon2.png"></image>
            <text
              >总共 {{ record.totalQuestionNum }} 题 做对
              {{ record.rightQuestionNum }} 题</text
            >
          </view>
        </view>
        <view class="btns">
          <view
            class="btn"
            v-if="record.doMode == 1 && record.status == 1"
            @click="doRepeat(record.goodsId, record)"
            >重做</view
          >
          <view
            class="btn"
            @click="questionBankExplain(record)"
            v-if="record.status == 1"
            >解析</view
          >
          <view
            class="btn"
            @click="questionReport(record)"
            v-if="record.status == 1"
            >报告</view
          >
          <view
            class="btn continue"
            @click="doContinue(record, index)"
            v-if="
              record.courseType != 2 &&
              record.status == 0 &&
              record.historyExamJson &&
              record.doMode != 3
            "
            >继续答题</view
          >
          <view class="btn continue" @click="moreRecord(record, index)"
            >更多记录</view
          >
        </view>
      </view>
    </view>

    <view class="modal" :style="{ top: modalTop + 'px' }" v-if="index == 1">
      <view class="content">
        <scroll-view scroll-y="true" style="height: 100%">
          <view
            class="top"
            :class="activeIndex === 0 ? 'activesty' : ''"
            @click="testClick(3)"
            >全部题库记录</view
          >
          <view class="list">
            <view
              class="item"
              :class="activeIndex == listItem.goodsId ? 'activesty' : ''"
              v-for="(listItem, listIndex) in list"
              :key="listIndex"
              @click="testClick(listItem)"
            >
              {{ listItem.goodsName }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="modal_wrap" @click="index = 0"></view>
    </view>

    <view class="modal" :style="{ top: modalTop + 'px' }" v-if="index == 2">
      <view class="content">
        <scroll-view scroll-y="true" style="height: 100%">
          <view
            class="top"
            :class="typeIndex === 0 ? 'activesty' : ''"
            @click="paperClick(3)"
            >全部试卷类型</view
          >
          <view class="list">
            <view
              class="item"
              :class="typeIndex == listItem.paperId ? 'activesty' : ''"
              v-for="(listItem, listIndex) in list1"
              :key="listIndex"
              @click="paperClick(listItem)"
              >{{ listItem.paperName }}</view
            >
          </view>
        </scroll-view>
      </view>
      <view class="modal_wrap" @click="index = 0"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      list: [],
      list1: [],
      recordList: [],
      goodsData: {},
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      isRepeat: false,
      total: 0,
      activeIndex: 0,
      typeIndex: 0,
      itemIndex: "",
      modalTop: 0,
    };
  },
  onLoad(option) {
    this.listGoodsUserQuestion();
    this.examaperList();
    // this.getExamRecordList();

    uni.getSystemInfo({
      success: (e) => {
        let info = uni.createSelectorQuery().select(".nav");
        info
          .boundingClientRect((navData) => {
            //data - 各种参数

            let info = uni.createSelectorQuery().select(".tabs");
            info
              .boundingClientRect((tabData) => {
                //data - 各种参数
                this.modalTop = navData.height + tabData.height;
                console.log(navData); // 获取元素宽度
                console.log(tabData); // 获取元素宽度
              })
              .exec();
          })
          .exec();
      },
    });
  },
  onPullDownRefresh() {
    let that = this;
    this.param = {
      pageNum: 1,
      pageSize: 10,
    };
    this.getExamRecordList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    if (this.recordList.length < this.total) {
      this.param.pageNum++;
      this.getExamRecordList();
    }
  },
  onShow() {
    this.param.pageNum = 1;
    this.getExamRecordList();
    if (this.isRepeat) {
      // this.addRecord();
    } else {
      if (this.itemIndex !== "") {
        this.refreshByIndex();
      }
    }
  },
  methods: {
    questionBankExplain(record) {
      let moduleId =
        record.courseType == 2 ? record.moduleId : record.moduleExamId;
      let chapterId =
        record.courseType == 2 ? record.chapterId : record.chapterExamId;
      if (record.doMode == 3) {
        uni.navigateTo({
          url:
            "/pages2/bank/questionBankAllExplain?id=" +
            record.examId +
            "&goodsid=" +
            record.goodsId +
            "&moduleId=" +
            record.moduleId +
            "&chapterId=" +
            record.chapterExamId +
            "&recordId=" +
            record.recordId +
            "&orderGoodsId=" +
            record.orderGoodsId,
        });
        return;
      }
      uni.navigateTo({
        url:
          "/pages2/bank/questionBankExplain?id=" +
          record.examId +
          "&goodsid=" +
          record.goodsId +
          "&moduleId=" +
          moduleId +
          "&chapterId=" +
          chapterId +
          "&orderGoodsId=" +
          record.orderGoodsId +
          "&doMode=" +
          record.doMode,
      });
    },
    questionReport(record) {
      if (record.courseType == 2) {
        uni.navigateTo({
          url:
            "/pages2/class/question_report?examId=" +
            record.examId +
            "&recordId=" +
            record.recordId +
            "&type=" +
            record.type +
            "&orderGoodsId=" +
            record.orderGoodsId +
            "&doMode=" +
            record.doMode,
        });
      } else {
        let entryType = record.doMode == 2 ? "random" : "";
        uni.navigateTo({
          url:
            "/pages2/bank/question_report?goodsId=" +
            record.goodsId +
            "&chapterId=" +
            record.chapterExamId +
            "&moduleId=" +
            record.moduleExamId +
            "&examId=" +
            record.examId +
            "&id=" +
            record.recordId +
            "&orderGoodsId=" +
            record.orderGoodsId +
            "&entryType=" +
            entryType +
            "&doMode=" +
            record.doMode,
        });
      }
    },
    /**
     * 更多记录
     */
    moreRecord(record) {
      if (record.courseType == 2) {
        uni.navigateTo({
          url:
            "/pages2/bank/question_record_list?goodsId=" +
            record.goodsId +
            "&chapterId=" +
            record.chapterId +
            "&moduleId=" +
            record.moduleId +
            "&examId=" +
            record.examId +
            "&recordId=" +
            record.recordId +
            "&courseType=" +
            record.courseType +
            "&gradeId=" +
            record.gradeId +
            "&courseId=" +
            record.courseId +
            "&sectionId=" +
            record.sectionId,
        });
      } else {
        uni.navigateTo({
          url:
            "/pages2/bank/question_record_list?goodsId=" +
            record.goodsId +
            "&chapterId=" +
            record.chapterExamId +
            "&moduleId=" +
            record.moduleExamId +
            "&examId=" +
            record.examId +
            "&recordId=" +
            record.recordId +
            "&courseType=" +
            record.courseType,
        });
      }
    },
    addRecord() {
      this.$api
        .examRecordList({
          pageNum: 1,
          pageSize: 1,
        })
        .then((res) => {
          this.recordList.unshift(res.data.rows[0]);
        });
      this.isRepeat = false;
    },
    refreshByIndex() {
      this.$api
        .examRecordGroupList({
          pageNum: this.itemIndex + 1,
          pageSize: 1,
        })
        .then((res) => {
          this.$set(this.recordList, this.itemIndex, res.data.rows[0]);
          this.itemIndex = "";
        });
    },
    getExamRecordList() {
      if (this.param.pageNum == 1) {
        this.recordList = [];
      }
      this.$api.examRecordGroupList(this.param).then((res) => {
        this.recordList.push.apply(this.recordList, res.data.rows);
        this.total = res.data.total;
      });
    },
    /**
     * 继续做题
     */
    doContinue(record, index) {
      this.itemIndex = index;
      this.isRepeat = false;
      uni.navigateTo({
        url:
          "/pages2/bank/questionBankContinue?recordId=" +
          record.recordId +
          "&id=" +
          record.examId +
          "&goodsid=" +
          record.goodsId +
          "&moduleId=" +
          record.moduleExamId +
          "&chapterId=" +
          record.chapterExamId +
          "&orderGoodsId=" +
          record.orderGoodsId,
      });
    },
    /**
     * 去做题
     */
    async doRepeat(goodsId, record) {
      // await this.getDetail(goodsId);
      this.itemIndex = "";
      this.isRepeat = true;
      let count = 0;
      if (record.courseType == 2) {
        count = await this.bankRecordDoNum(record);
      } else {
        count = await this.examRecordCount(record.examId, goodsId);
      }
      // let count = await this.examRecordCount(record.examId,goodsId);
      let answerNum = await this.getExamDetail(record.examId);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$u.toast("该试卷只能答题" + answerNum + "次!");
        return;
      }

      if (record.courseType == 2) {
        const {
          courseId,
          gradeId,
          sectionId,
          examId,
          orderGoodsId = 0,
          type,
          reportStatus,
        } = record;
        let moduleId = record.moduleId || 0;
        let chapterId = record.chapterId || 0;
        uni.navigateTo({
          url:
            "/pages2/class/questionBank?courseId=" +
            courseId +
            "&gradeId=" +
            gradeId +
            "&isFromVideo=1&id=" +
            examId +
            "&goodsid=" +
            goodsId +
            "&moduleId=" +
            moduleId +
            "&chapterId=" +
            chapterId +
            "&sectionId=" +
            sectionId +
            "&orderGoodsId=" +
            orderGoodsId +
            "&type=" +
            type +
            "&learning=" +
            reportStatus,
        });
      } else {
        let moduleId = record.moduleExamId || 0;
        let chapterId = record.chapterExamId || 0;
        uni.navigateTo({
          url:
            "/pages2/bank/questionBank?id=" +
            record.examId +
            "&goodsid=" +
            goodsId +
            "&moduleId=" +
            moduleId +
            "&chapterId=" +
            chapterId +
            "&orderGoodsId=" +
            record.orderGoodsId,
        });
      }
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$api.getExamDetail(exam_id).then((res) => {
          resolve(res.data.data.answerNum);
        });
      });
    },
    /**
     * 查询试卷历史做题次数(题库的)
     */
    examRecordCount(examId, goodsId) {
      return new Promise((resolve) => {
        this.$api
          .examRecordCount({
            examId: examId,
            goodsId: goodsId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    /**
     * 获取试卷已做的次数(视频课程的)
     */
    bankRecordDoNum(record) {
      return new Promise((resolve) => {
        this.$api
          .bankRecordDoNum({
            goodsId: record.goodsId,
            gradeId: record.gradeId,
            chapterId: record.chapterId || 0,
            courseId: record.courseId,
            moduleId: record.moduleId || 0,
            examId: record.examId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    getDetail(id) {
      return new Promise((resolve) => {
        this.$api.goodsDetail(id).then((res) => {
          this.goodsData = res.data.data;
          resolve();
        });
      });
    },
    testClick(item) {
      if (item === 3) {
        this.index = 0;
        this.activeIndex = 0;
        this.param.goodsId = "";
        this.param.pageNum = 1;
        this.getExamRecordList();
      } else {
        this.index = 0;
        this.activeIndex = item.goodsId;
        this.param.goodsId = item.goodsId;
        this.param.pageNum = 1;
        this.getExamRecordList();
      }
    },
    paperClick(item) {
      if (item === 3) {
        this.index = 0;
        this.typeIndex = 0;
        this.param.paperId = "";
        this.param.pageNum = 1;
        this.getExamRecordList();
      } else {
        this.index = 0;
        this.typeIndex = item.paperId;
        this.param.paperId = item.paperId;
        this.param.pageNum = 1;
        this.getExamRecordList();
      }
    },
    tab(index) {
      console.log(index, this.index);
      if (this.index == index) {
        this.index = 0;
        return;
      }
      this.index = index;
      console.log(this.index);
    },

    examaperList() {
      this.$api.examaperList({}).then((res) => {
        this.list1 = res.data.rows;
      });
    },

    listGoodsUserQuestion() {
      this.$api.listGoodsUserQuestion({}).then((res) => {
        this.list = res.data.rows;
      });
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scope>
.animals {
  transition: all 0.3s;
  transform: rotate(180deg);
}
.tabs {
  position: fixed;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 10;
  .tab {
    flex: 1;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #ffffff;
    font-size: 32rpx;
    color: #999999;

    &.active {
      color: #333333;
      .icon {
        transform: rotate(180deg);
      }
    }
  }
}

.record {
  margin-top: 80rpx;
  padding: 16rpx 8rpx;
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-bottom: 16rpx;
    width: 359rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 65rpx 20rpx 22rpx;
    position: relative;
    overflow: hidden;

    &:nth-of-type(2n) {
      margin-left: 16rpx;
    }

    .note {
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      // width: 112rpx;
      padding: 0rpx 10rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      background: linear-gradient(180deg, #4facfe, #007aff);
      border-radius: 16rpx 0px 16rpx 0rpx;
    }

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .desc {
      margin-top: 26rpx;
      view {
        margin: 16rpx 0;

        image {
          width: 23rpx;
          height: 24rpx;
        }

        text {
          margin-left: 15rpx;
          font-size: 24rpx;
          color: #999999;
          line-height: 36rpx;
        }
      }
    }

    .btns {
      margin-top: 26rpx;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .btn {
        margin: 5rpx 0;
        width: 150rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        color: #007aff;
        background: #ffffff;
        border: 1rpx solid #007aff;
        border-radius: 16rpx;
      }
    }
  }
}

.modal {
  bottom: 0;
  z-index: 199999999;
  position: fixed;
  left: 0;
  width: 100%;

  .content {
    height: 80%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 8rpx 12rpx 20rpx;
    display: flex;
    flex-wrap: wrap;

    .top {
      margin: 0 auto;
      width: 726rpx;
      height: 80rpx;
      background: #f5f5f5;
      color: #666666;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
    }

    .list {
      width: 100%;
      margin-top: 16rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        padding: 25rpx 20rpx;
        width: 49%;
        background: #f5f5f5;
        border-radius: 16rpx;
        font-size: 32rpx;
        color: #666666;
        margin: 8rpx 0;
      }
    }
  }

  .modal_wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
}
.activesty {
  background: #007aff !important;
  color: #fff !important;
}
</style>