zc_saas_h5/pages2/class/question_report.vue

<template>
  <view>
    <nav-bar title="试卷报告"></nav-bar>
    <view
      :class="
        reportStatus == 0
          ? 'redBtn'
          : reportStatus == 1
          ? 'greenBtn'
          : 'disNone'
      "
      v-if="reportStatus !== null"
    >
      {{
        reportStatus == 0 ? "测试未通过" : reportStatus == 1 ? "测试通过" : ""
      }}
    </view>
    <view class="top">
      <view class="box">
        <view class="left">
          <view
            >{{
              (
                (rightQuestionNum / (rightQuestionNum + doWrongQuestionNum)) *
                100
              ).toFixed(0)
            }}%</view
          >
          <view>正确率</view>
          <view>不含简答/案例题</view>
        </view>
        <view class="right">
          <view class="flex up">
            <!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
            <image
              class="right_num"
              src="/static/right_num.png"
              mode="widthFix"
            ></image>
            <view class="text">正确题数</view>
            <text class="green">{{ rightQuestionNum }}</text>
          </view>
          <view class="flex up">
            <!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
            <image
              class="right_num"
              src="/static/out_num.png"
              mode="widthFix"
            ></image>
            <view class="text">少选题数</view>
            <text class="yellow">{{ lessQuestionNum }}</text>
          </view>
          <view class="flex down">
            <!-- <u-icon name="close" color="#FF3B30" size="38" style="margin-right: 26rpx;"></u-icon> -->
            <image
              class="right_num"
              src="/static/wrong_num.png"
              mode="widthFix"
            ></image>
            <view class="text">错误题数</view>
            <text class="red">{{ doWrongQuestionNum }}</text>
          </view>
        </view>
      </view>

      <view class="dis_fst">
        <navigator
          v-if="doWrongQuestionNum != 0"
          :url="
            '/pages2/bank/questionBankWrongExplain?recordId=' +
            reportdata.recordId +
            '&id=' +
            reportdata.examId +
            '&courseType=2'
          "
        >
          <view class="btnACs">错题解析</view>
        </navigator>
        <navigator
          :url="
            '/pages2/bank/questionBankAllExplain?id=' +
            reportdata.examId +
            '&goodsid=' +
            reportdata.goodsId +
            '&moduleId=' +
            reportdata.moduleId +
            '&chapterId=' +
            reportdata.chapterId +
            '&recordId=' +
            reportdata.recordId +
            '&courseType=2'
          "
        >
          <view class="btnACs">全部解析</view>
        </navigator>
        <view
          class="btnACs"
          v-if="reportStatus == 1 || bankType == 1"
          @click="
            doRepeat(
              reportdata.examId,
              reportdata.goodsId,
              reportdata.moduleId,
              reportdata.chapterId
            )
          "
          >重新做题</view
        >
        <navigator v-if="isBackVideo" open-type="navigateBack">
          <view class="btnACs">返回学习</view>
        </navigator>
        <!-- <view class="btnACs" v-if="nextExamId" @click="backBank">继续做题</view> -->
      </view>
    </view>
    <view class="bottom">
      <view class="circle-wrap">
        <view class="circle-list">
          <view class="item" v-show="totalScore">
            <view class="title">
              试卷得分
              <text>（不含简答和案例题）</text>
            </view>
            <canvas class="canvas" canvas-id="Canvas1"></canvas>
          </view>
          <view class="item" v-show="examTime">
            <view class="title">答题时长</view>
            <canvas canvas-id="Canvas2"></canvas>
          </view>
        </view>
      </view>
    </view>

    <view v-if="courseList.length" class="course_list">
      <view class="titles">
        <image class="code" src="@/static/learn/act_icon.png"></image>
        <text class="title">推荐课程</text>
      </view>
      <view
        class="list_item"
        v-for="(item, index) in courseList"
        :key="index"
        @click="toBuy(item)"
      >
        <view class="course_content">
          <view class="c_title">{{ item.goodsName }}</view>
          <view class="c_downs">
            <view class="img">
              <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
              <view class="time" v-if="item.year">{{
                item.year ? item.year : ""
              }}</view>
            </view>
            <view class="text">
              <view class="desc">
                <view class="left">
                  <text class="mon_t">¥ {{ item.standPrice }}</text>
                  <!-- <text class="sale">/限时优惠</text> -->
                  <text v-if="item.linePrice" class="sale"> ¥ </text>
                  <text v-if="item.linePrice" class="price_line"
                    >&nbsp;{{ item.linePrice }}</text
                  >
                </view>
                <view class="right">
                  <view class="regiser_row" v-if="!hideBuyState">立即购买</view>
                </view>
              </view>
              <view v-if="item.buyUserNum" class="joins">
                <!-- <image class="people" src="/static/index/people.png"></image> -->
                <!-- 为0时，不显示 -->
                <view class="people">{{ item.buyUserNum }}人参与</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      id: "",
      hideBtns: false,
      examData: {},
      examId: "",
      context1: null,
      context2: null,
      rightQuestionNum: "",
      // doWrongQuestionNum:'',
      score: "",
      totalScore: "",
      doTime: "",
      examTime: "",
      reportStatus: null,
      lessQuestionNum: 0,
      courseList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      recordId: "",
      reportdata: {},
      examType: 0, // 3-模块，1-章，2-节
      orderGoodsId: "",
      bankType: "",
      isBackVideo: "",
    };
  },
  onPullDownRefresh() {
    this.pageNum = 1;
    this.courseList = [];
    this.getcourList();
    // this.timer = setTimeout(function() {
    // 	uni.stopPullDownRefresh()
    // }, 500)
  },
  onReachBottom() {
    console.log(this.total, "total");
    console.log(this.courseList.length, "length");
    if (this.courseList.length < this.total) {
      this.pageNum++;
      this.getcourList();
    }
  },
  onUnload() {},
  computed: {
    ...mapGetters(["userInfo", "hideBuyState"]),
    doWrongQuestionNum() {
      let value =
        this.reportdata.totalQuestionNum -
        this.reportdata.rightQuestionNum -
        this.reportdata.lessQuestionNum;
      return value > 0 ? value : 0;
    },
  },
  async onShow() {
    this.pageNum = 1;
    this.courseList = [];
    this.getcourList();
  },
  async onLoad(option) {
    this.examType = option.type;
    this.recordId = option.recordId;
    this.examId = option.examId;
    this.orderGoodsId = option.orderGoodsId;
    this.bankType = option.bankType;
    this.isBackVideo = option.isBackVideo;
    this.bankReport();
  },
  methods: {
    getCanvas() {
      this.$method.getCanvas(this).then(({ systemInfo }) => {
        var caculateX = systemInfo.screenWidth / 750;
        if (this.totalScore) {
          var context1 = uni.createCanvasContext("Canvas1");
          this.context1 = context1;
          context1.setStrokeStyle("#EEEEEE");
          context1.setLineWidth(caculateX * 20);
          context1.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            0,
            2 * Math.PI,
            true
          );
          context1.stroke();
          context1.beginPath();
          context1.setStrokeStyle("#32D74B");
          context1.setFillStyle("#32D74B");
          context1.setTextAlign("center");
          context1.setTextBaseline("middle");
          context1.setLineCap("round");
          context1.setFontSize(caculateX * 64);
          context1.fillText(
            this.score,
            caculateX * 90,
            caculateX * 90,
            caculateX * 180
          );
          context1.setFillStyle("#999999");
          context1.setFontSize(caculateX * 20);
          context1.fillText(
            `满分${this.totalScore}`,
            caculateX * 90,
            caculateX * 130,
            caculateX * 180
          );
          context1.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            -Math.PI / 2,
            -Math.PI / 2 + (this.score / this.totalScore) * 2 * Math.PI,
            false
          );
          context1.stroke();
          context1.draw();
        }

        if (this.examTime) {
          var context2 = uni.createCanvasContext("Canvas2");
          this.context2 = context2;
          context2.setStrokeStyle("#EEEEEE");
          context2.setLineWidth(caculateX * 20);
          context2.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            0,
            2 * Math.PI,
            true
          );
          context2.stroke();
          context2.beginPath();
          context2.setStrokeStyle("#007AFF");
          context2.setFillStyle("#007AFF");
          context2.setTextAlign("center");
          context2.setTextBaseline("middle");
          context2.setLineCap("round");
          context2.setFontSize(caculateX * 64);
          context2.fillText(
            `${this.doTime}'`,
            caculateX * 90,
            caculateX * 90,
            caculateX * 180
          );
          context2.setFillStyle("#999999");
          context2.setFontSize(caculateX * 20);
          context2.fillText(
            `限时${this.examTime}'`,
            caculateX * 90,
            caculateX * 130,
            caculateX * 180
          );
          context2.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            -Math.PI / 2,
            -Math.PI / 2 + (this.doTime / this.examTime) * 2 * Math.PI,
            false
          );
          context2.stroke();
          context2.draw();
        }
      });
    },
    getcourList() {
      this.$http({
        url: "/apply/recommend/goodsList",
        method: "post",
        data: {
          examId: this.examId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.courseList.push(...(res.data.rows || []));
          this.total = res.data.total;
        }
      });
    },
    toBuy(item) {
      // if (item.goodsType == 1) {
      //     uni.navigateTo({
      //         url: '/pages3/course/detail?id='+item.goodsId
      //     })
      // } else
      if (item.goodsType == 2) {
        uni.navigateTo({
          url: "/pages2/bank/detail?id=" + item.goodsId,
        });
      } else {
        // /pages5/liveDetail/index
        uni.navigateTo({
          url:
            "/pages3/course/detail?id=" +
            item.goodsId +
            "&goodsType=" +
            item.goodsType,
        });
      }
    },
    bankReport() {
      this.$api.bankReportData(this.recordId).then((res) => {
        this.reportdata = res.data.data;
        // console.log('reportdata:', this.reportdata)
        const {
          examTime,
          doTime,
          reportStatus,
          rightQuestionNum,
          performance,
          lessQuestionNum,
          totalScore,
        } = this.reportdata;
        this.examTime = examTime;
        this.doTime = doTime;
        this.reportStatus = reportStatus;
        this.rightQuestionNum = rightQuestionNum;
        // this.doWrongQuestionNum = +option.doWrongQuestionNum;
        this.score = performance;
        this.lessQuestionNum = lessQuestionNum;
        this.totalScore = totalScore;
        this.getCanvas();
      });
    },
    /**
     * 去做题
     */
    async doRepeat(examId, goodsId, moduleId = 0, chapterId = 0) {
      let count = await this.bankRecordDoNum();
      let answerNum = await this.getExamDetail(examId);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$u.toast("该试卷只能答题" + answerNum + "次!");
        return;
      }

      // answerNum==0没有答题次数限制
      if (answerNum == 0 || (answerNum - count > 0 && answerNum > 0)) {
        const { courseId, gradeId, sectionId } = this.reportdata;
        uni.redirectTo({
          url:
            "/pages2/class/questionBank?courseId=" +
            courseId +
            "&gradeId=" +
            gradeId +
            "&isFromVideo=1&id=" +
            examId +
            "&goodsid=" +
            goodsId +
            "&moduleId=" +
            moduleId +
            "&chapterId=" +
            chapterId +
            "&sectionId=" +
            sectionId +
            "&orderGoodsId=" +
            this.orderGoodsId +
            "&type=" +
            this.examType +
            "&learning=" +
            this.reportStatus,
        });
      }
    },
    /**
     * 获取试卷已做的次数
     */
    bankRecordDoNum() {
      return new Promise((resolve) => {
        this.$api
          .bankRecordDoNum({
            goodsId: this.reportdata.goodsId,
            gradeId: this.reportdata.gradeId,
            chapterId: this.reportdata.chapterId || 0,
            courseId: this.reportdata.courseId,
            moduleId: this.reportdata.moduleId || 0,
            examId: this.reportdata.examId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$api.getExamDetail(exam_id).then((res) => {
          resolve(res.data.data.answerNum);
        });
      });
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
@import "../../pages5/examReport/indexCourseList.scss";
.disNone {
  display: none;
}
.greenBtn {
  margin: 16rpx 16rpx 0;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #f7fff8;
  border-radius: 16rpx;
  color: #34c759;
  font-weight: bold;
  font-size: 30rpx;
}
.redBtn {
  margin: 16rpx 16rpx 0;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #fff3f2;
  border-radius: 16rpx;
  color: #ff3b30;
  font-weight: bold;
  font-size: 30rpx;
}
.dis_fst {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.btnACs {
  height: 48rpx;
  width: 160rpx;
  text-align: center;
  line-height: 48rpx;
  border: 1rpx solid #007aff;
  border-radius: 16rpx;
  color: #007aff;
  font-size: 24rpx;
}
.top {
  margin: 16rpx 16rpx 0;
  border-radius: 16rpx;
  padding: 40rpx 24rpx 16rpx;
  background: #fff;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  .desc {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .box {
    margin-top: 30rpx;
    display: flex;

    .left {
      width: 250rpx;
      height: 176rpx;
      background: #f5f5f5;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-right: 16rpx;

      view {
        text-align: center;

        &:nth-of-type(1) {
          font-size: 60rpx;
          font-weight: bold;
          color: #007aff;
        }
        &:nth-of-type(2) {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
        &:nth-of-type(3) {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .flex {
        background: #f5f5f5;
        display: flex;
        height: 80rpx;
        align-items: center;
        padding: 0 40rpx;
        border-radius: 16rpx;

        image {
          margin-right: 28rpx;

          &.right_num {
            width: 26rpx;
          }

          &.out_num {
            width: 38rpx;
          }

          &.wrong_num {
            width: 30rpx;
          }
        }

        .text {
          flex: 1;
          font-size: 30rpx;
          color: #666666;
        }

        text {
          font-size: 48rpx;
          color: #e12626;

          &.red {
            color: #ff3b30;
          }

          &.green {
            color: #36c75a;
          }

          &.yellow {
            color: #ffc53d;
          }
        }
      }
    }
  }
}

.bottom {
  .circle-wrap {
    .circle-list {
      display: flex;

      .item {
        padding: 20rpx;
        border-radius: 16rpx;
        background: #fff;
        margin: 16rpx;
        flex: 1;

        .title {
          font-weight: bold;
          font-size: 30rpx;
          line-height: 24rpx;
          color: #333333;

          text {
            font-size: 20rpx;
            color: #999999;
          }
        }

        canvas {
          margin: 36rpx auto 0;
          width: 180rpx;
          height: 180rpx;
        }

        .text {
          text-align: center;
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>