zc_saas_h5/pages2/bank/question_report.vue

<template>
  <view>
    <nav-bar title="试卷报告"></nav-bar>
    <view
      :class="
        reportdata.reportStatus === 0
          ? 'redBtn'
          : reportdata.reportStatus === 1
          ? 'greenBtn'
          : 'disNone'
      "
      v-if="examData.doType == 2 && reportdata.reportStatus !== null"
    >
      {{
        reportdata.reportStatus === 0
          ? "测试未通过"
          : reportdata.reportStatus === 1
          ? "测试通过"
          : ""
      }}
    </view>
    <view class="top">
      <view class="title">{{ examName }}</view>
      <view class="desc"
        >交卷时间：{{
          $method.timestampToTime(reportdata.updateTime, false)
        }}</view
      >

      <view class="box">
        <view class="left">
          <view>
            <!-- 练习 -->
            <template
              v-if="
                entryType == 'random' ||
                (examData.doType && examData.doType == 1)
              "
            >
              <!-- ((reportdata.rightQuestionNum /
									reportdata.doQuestionNum || 0).toFixed(0) *
									100) -->
              {{
                (
                  (reportdata.rightQuestionNum / reportdata.doQuestionNum ||
                    0) * 100
                ).toFixed(0)
              }}%
            </template>
            <!-- 考试 -->
            <template v-if="examData.doType == 2">
              <!-- ((reportdata.rightQuestionNum /
									reportdata.totalQuestionNum || 0).toFixed(0) *
									100) -->
              {{
                (
                  (reportdata.rightQuestionNum / reportdata.totalQuestionNum ||
                    0) * 100
                ).toFixed(0)
              }}%
            </template>
            <!-- {{ (((reportdata.rightQuestionNum / (reportdata.rightQuestionNum + wrongRecordWrongNum)) || 0) * 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">{{ reportdata.rightQuestionNum }}</text>
          </view>
          <view class="flex up">
            <!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
            <image
              class="out_num"
              src="/static/out_num.png"
              mode="widthFix"
            ></image>
            <view class="text">少选题数</view>
            <text class="yellow">{{ reportdata.lessQuestionNum }}</text>
          </view>
          <view class="flex down">
            <!-- <u-icon name="close" color="#FF3B30" size="38" style="margin-right: 26rpx;"></u-icon> -->
            <image
              class="wrong_num"
              src="/static/wrong_num.png"
              mode="widthFix"
            ></image>
            <view class="text">错误题数</view>
            <text class="red">{{ wrongRecordWrongNum }}</text>
          </view>
        </view>
      </view>
      <view class="dis_fst" v-if="!hideBtns">
        <navigator
          v-if="wrongRecordWrongNum != 0"
          :url="
            '/pages2/bank/questionBankWrongExplain?recordId=' +
            reportdata.recordId +
            '&id=' +
            examData.examId
          "
        >
          <view class="btnACs">错题解析</view>
        </navigator>
        <navigator
          :url="
            '/pages2/bank/questionBankAllExplain?id=' +
            reportdata.examId +
            '&goodsid=' +
            reportdata.goodsId +
            '&moduleId=' +
            reportdata.moduleExamId +
            '&chapterId=' +
            reportdata.chapterExamId +
            '&recordId=' +
            reportdata.recordId
          "
        >
          <view class="btnACs">全部解析</view>
        </navigator>
        <view
          class="btnACs"
          v-if="entryType != 'daily'"
          @click="
            doRepeat(
              reportdata.examId,
              reportdata.goodsId,
              reportdata.moduleExamId,
              reportdata.chapterExamId
            )
          "
          >重新做题</view
        >
        <view
          class="btnACs"
          v-if="doMode != 3 && (entryType == 'daily' || nextExamId)"
          @click="backBank"
          >继续做题</view
        >
      </view>
    </view>
    <view v-show="entryType != 'random'" class="bottom">
      <view class="circle-wrap">
        <view class="circle-list">
          <view class="item" v-show="reportdata.totalScore">
            <view class="title">
              试卷得分
              <text>（不含简答和案例题）</text>
            </view>
            <canvas class="canvas" canvas-id="Canvas1"></canvas>
          </view>
          <view class="item" v-show="reportdata.examTime">
            <view class="title">答题时长</view>
            <canvas canvas-id="Canvas2"></canvas>
          </view>

          <view class="item" v-show="reportdata.score != -1">
            <view class="title"
              >试卷得分
              <text>（含简答和案例题）</text>
            </view>
            <canvas canvas-id="Canvas3"></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";
import { goodsExamIsCanLearn, examClientCanLearn } from "@/utils/authority";
export default {
  data() {
    return {
      id: "",
      hideBtns: false,
      recordId: "",
      reportdata: {},
      examData: {},
      examId: "",
      moduleId: "",
      goodsId: "",
      chapterId: "",
      context1: null,
      context2: null,
      nextExamId: "",
      wrongRecordWrongNum: "",
      orderGoodsId: "",
      courseList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      entryType: "", // 进入做题页面的入口类型，daily-每日一练进来，其他的-题库做题进入
      bankNum: 5, // 随机练习的题目数量
      examName: "", // 试卷名称
      doMode: "",
      courseType: "",
    };
  },
  onUnload() {},
  computed: { ...mapGetters(["userInfo", "hideBuyState"]) },
  onShow() {
    this.pageNum = 1;
    this.courseList = [];
    this.getcourList();
  },

  async onLoad(option) {
    console.log(option);
    await goodsExamIsCanLearn(option.goodsid);
    this.entryType = option.entryType;
    this.bankNum = option.bankNum;
    this.orderGoodsId = option.orderGoodsId;
    this.recordId = option.id;
    this.examId = option.examId;
    this.moduleId = option.moduleId || 0;
    this.chapterId = option.chapterId || 0;
    this.goodsId = option.goodsId || "";
    this.doMode = option.doMode;
    this.courseType = option.courseType;
    this.examWrongRecordWrongNum();
    this.bankExamNextExam();
    // await this.bankExam();
    await this.examReport();
    if (this.entryType == "random") {
      this.bankExamTemp();
    } else {
      await this.bankExam();
    }
  },
  onPullDownRefresh() {
    this.pageNum = 1;
    this.courseList = [];
    this.getcourList();
    // this.timer = setTimeout(function() {
    // 	uni.stopPullDownRefresh()
    // }, 500)
  },
  onReachBottom() {
    if (this.courseList.length < this.total) {
      this.pageNum++;
      this.getcourList();
    }
  },
  methods: {
    getCanvas() {
      this.$method.getCanvas(this).then(({ systemInfo }) => {
        var caculateX = systemInfo.screenWidth / 750;
        if (this.reportdata.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.reportdata.performance,
            caculateX * 90,
            caculateX * 90,
            caculateX * 180
          );
          context1.setFillStyle("#999999");
          context1.setFontSize(caculateX * 20);
          context1.fillText(
            `满分${this.reportdata.totalScore || 0}`,
            caculateX * 90,
            caculateX * 130,
            caculateX * 180
          );
          context1.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            -Math.PI / 2,
            -Math.PI / 2 +
              (this.reportdata.performance / this.reportdata.totalScore) *
                2 *
                Math.PI,
            false
          );
          context1.stroke();
          context1.draw();
        }

        if (this.reportdata.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.reportdata.doTime}'`,
            caculateX * 90,
            caculateX * 90,
            caculateX * 180
          );
          context2.setFillStyle("#999999");
          context2.setFontSize(caculateX * 20);
          context2.fillText(
            `限时${this.reportdata.examTime}'`,
            caculateX * 90,
            caculateX * 130,
            caculateX * 180
          );
          context2.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            -Math.PI / 2,
            -Math.PI / 2 +
              (this.reportdata.doTime / this.reportdata.examTime) * 2 * Math.PI,
            false
          );
          context2.stroke();
          context2.draw();
        }

        if (this.reportdata.score != -1) {
          var context3 = uni.createCanvasContext("Canvas3");
          this.context3 = context3;
          context3.setStrokeStyle("#EEEEEE");
          context3.setLineWidth(caculateX * 20);
          context3.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            0,
            2 * Math.PI,
            true
          );
          context3.stroke();
          context3.beginPath();
          context3.setStrokeStyle("#32D74B");
          context3.setFillStyle("#32D74B");
          context3.setTextAlign("center");
          context3.setTextBaseline("middle");
          context3.setLineCap("round");
          context3.setFontSize(caculateX * 64);
          context3.fillText(
            this.reportdata.performance + this.reportdata.score,
            caculateX * 90,
            caculateX * 90,
            caculateX * 180
          );
          context3.setFillStyle("#999999");
          context3.setFontSize(caculateX * 20);
          context3.fillText(
            `满分${this.reportdata.totalScore || 0}`,
            caculateX * 90,
            caculateX * 130,
            caculateX * 180
          );
          context3.arc(
            caculateX * 90,
            caculateX * 90,
            caculateX * 80,
            -Math.PI / 2,
            -Math.PI / 2 +
              ((this.reportdata.performance + this.reportdata.score) /
                this.reportdata.totalScore) *
                2 *
                Math.PI,
            false
          );
          context3.stroke();
          context3.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 || []));
          console.log("this.courseList", this.courseList);
          this.total = res.data.total;
        }
      });
    },
    toBuy(item) {
      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,
        });
      }
    },
    bankExamNextExam() {
      this.$api
        .bankExamNextExam({
          chapterExamId: this.chapterId,
          examId: this.examId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          moduleExamId: this.moduleId,
        })
        .then((res) => {
          if (res.data.code == 500) {
            this.nextExamId = "";
          } else if (res.data.code == 200) {
            this.nextExamId = res.data.data.examId;
          }
        });
    },
    backBank() {
      if (this.entryType == "daily") {
        uni.navigateBack();
        return;
      }
      uni.navigateTo({
        url:
          "/pages2/bank/questionBank?orderGoodsId=" +
          this.orderGoodsId +
          "&id=" +
          this.nextExamId +
          "&goodsid=" +
          this.goodsId +
          "&moduleId=" +
          this.moduleId +
          "&chapterId=" +
          this.chapterId +
          "",
      });

      // uni.navigateBack({
      // 	delta:1
      // })
      // uni.redirectTo({
      // 	url: '/pages2/bank/my_question'
      // });
    },
    bankExam() {
      // '/bank/exam/'+data
      return new Promise((resolve, reject) => {
        this.$api.bankExam(this.examId).then((res) => {
          this.examData = res.data.data;
          if (!examClientCanLearn(res.data.data.examLimitClient)) {
            return;
          }
          resolve();
        });
      });
    },
    /**
     * 去做题
     */
    async doRepeat(id, goodsId, moduleId = 0, chapterId = 0) {
      if (this.entryType == "random") {
        uni.navigateBack();
        return;
      }
      // await this.getDetail(goodsId);
      let count = await this.examRecordCount(id, goodsId);
      let answerNum = await this.getExamDetail(id);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$u.toast("该试卷只能答题" + answerNum + "次!");
        return;
      }

      var pages = getCurrentPages();
      var prepage = pages[pages.length - 2]; //上一个页面
      prepage.$vm.isRepeat = true;
      uni.redirectTo({
        url:
          "/pages2/bank/questionBank?orderGoodsId=" +
          this.orderGoodsId +
          "&id=" +
          id +
          "&goodsid=" +
          goodsId +
          "&moduleId=" +
          moduleId +
          "&chapterId=" +
          chapterId +
          "&entryType=" +
          this.entryType +
          "&bankNum=" +
          this.bankNum,
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$api.getExamDetail(exam_id).then((res) => {
          resolve(res.data.data.answerNum);
        });
      });
    },
    examWrongRecordWrongNum() {
      return new Promise((resolve) => {
        this.$api
          .examWrongRecordWrongNum({
            recordId: this.recordId,
            courseType: this.courseType,
          })
          .then((res) => {
            this.wrongRecordWrongNum = res.data.data || 0;
            resolve();
          });
      });
    },
    /**
     * 查询试卷历史做题次数
     */
    examRecordCount(examId, goodsId) {
      return new Promise((resolve) => {
        this.$api
          .examRecordCount({
            examId: examId,
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    getDetail(id) {
      return new Promise((resolve) => {
        this.$api.goodsDetail(id).then((res) => {
          this.goodsData = res.data.data;
          resolve();
        });
      });
    },
    examReport() {
      return new Promise((resolve) => {
        this.$api.examReport(this.recordId).then((res) => {
          this.reportdata = res.data.data;
          if (this.entryType != "random") {
            this.examName = this.reportdata.examName;
          }
          this.getCanvas();
          resolve();
        });
      });
    },
    bankExamTemp() {
      // '/bank/exam/temp/'+data
      this.$api.bankTempReport(this.examId).then((res) => {
        if (res.data.code == 200) {
          this.examName = res.data.data.examName;
        }
      });
    },
  },
};
</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;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

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

    .left {
      width: 250rpx;
      height: 272rpx;
      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>