zc_saas_h5/pages5/examReport/index.vue

<template>
  <view>
    <nav-bar title="试卷报告"></nav-bar>
    <view class="top">
      <view class="title">{{ reportdata.examName }}</view>
      <view class="desc"
        >交卷时间：{{
          $method.timestampToTime(reportdata.updateTime, false)
        }}</view
      >

      <view class="box">
        <view class="left">
          <view>
            <!-- 考试 -->
            {{
              (
                (reportdata.rightQuestionNum / reportdata.totalQuestionNum ||
                  0) * 100
              ).toFixed(0)
            }}%
            <!-- {{ (((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">
        <navigator
          hover-class="none"
          :url="
            '/pages5/examReport/questionBankWrongExplain?recordId=' +
            reportdata.recordId +
            '&id=' +
            examData.examId +
            '&eachExamId=' +
            eachExamId
          "
        >
          <button
            hover-class="none"
            :disabled="subscribeInfo.canDo === 0"
            class="btnACs"
          >
            错题解析
          </button>
        </navigator>
        <navigator
          hover-class="none"
          :url="
            '/pages5/examReport/questionBankAllExplain?id=' +
            reportdata.examId +
            '&recordId=' +
            reportdata.recordId +
            '&eachExamId=' +
            eachExamId
          "
        >
          <button
            hover-class="none"
            :disabled="subscribeInfo.canDo === 0"
            class="btnACs"
          >
            全部解析
          </button>
        </navigator>
        <navigator
          hover-class="none"
          :url="
            '/pages5/examBank/index?examId=' +
            reportdata.examId +
            '&eachExamId=' +
            eachExamId +
            '&subscribeId=' +
            reportdata.subscribeId
          "
        >
          <button
            hover-class="none"
            :disabled="subscribeInfo.canDo === 0"
            class="btnACs"
          >
            去做题
          </button>
        </navigator>
      </view>
    </view>
    <view class="bottom">
      <view class="circle-wrap">
        <view class="circle-list">
          <view class="item" v-show="reportdata.totalScore">
            <view class="title">
              试卷得分
              <text>（不含简答和案例题）</text>
            </view>
            <canvas
              v-show="!noticeModal"
              class="canvas"
              canvas-id="Canvas1"
            ></canvas>
          </view>
          <view class="item" v-show="reportdata.examTime">
            <view class="title">答题时长</view>
            <canvas v-show="!noticeModal" canvas-id="Canvas2"></canvas>
          </view>

          <view class="item" v-show="reportdata.score != -1">
            <view class="title"
              >试卷得分
              <text>（含简答和案例题）</text>
            </view>
            <canvas v-show="!noticeModal" canvas-id="Canvas3"></canvas>
          </view>
        </view>
      </view>
    </view>

    <template v-if="subscribeInfo.liveStartTime">
      <template
        v-if="
          subscribeInfo.liveStartTime <= sysTime &&
          subscribeInfo.liveEndTime >= sysTime
        "
      >
        <view class="notice" v-if="subscribeInfo.liveSubscribe == 0">
          <image
            class="img"
            mode="widthFix"
            src="../static/notice1.png"
          ></image>
          <view class="text"> 模考讲解正在直播中 </view>
          <view class="btn" @click="goLive()">立即前往查看直播</view>
        </view>
      </template>

      <template v-else>
        <view class="notice" v-if="subscribeInfo.liveSubscribe == 0">
          <image
            class="img"
            mode="widthFix"
            src="../static/notice1.png"
          ></image>
          <view class="text">
            模考讲解直播将在<text class="blue">{{
              $method.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}</text
            >开始 开启模考讲解直播提醒，不错过每一个考点
          </view>
          <view class="btn" @click="noticeModal = true"
            >开启模考讲解直播提醒</view
          >
        </view>

        <view class="notice" v-if="subscribeInfo.liveSubscribe == 1">
          <image
            class="img"
            mode="widthFix"
            src="../static/notice2.png"
          ></image>
          <view class="text">
            模考讲解直播将在<text class="blue">{{
              $method.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}</text
            >开始
          </view>
        </view>
      </template>
    </template>

    <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>

    <u-popup
      class="notice__modal"
      v-model="noticeModal"
      mode="center"
      border-radius="24"
      :mask-close-able="false"
    >
      <view class="notice__content">
        <view class="body">
          <image
            class="img"
            src="/pages5/static/notice4.png"
            mode="widthFix"
          ></image>
          <view class="content">
            <view class="bold center">开启模考讲解直播提醒</view>

            <view class="center text">
              此科目模考分析将在<text class="blue">{{
                $method.timestampToTime(
                  subscribeInfo.liveStartTime,
                  false,
                  true
                )
              }}</text
              >进行直播讲解，开启直播提醒，不错过名师讲解
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="btn close" @click="noticeModal = false">暂不开启</view>
          <view class="btn" @click="openRemind">开启提醒</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import config from '@/common/config'
export default {
  data() {
    return {
      id: "",
      noticeModal: false,
      recordId: "",
      reportdata: {},
      examData: {},
      examId: "",
      chapterId: "",
      context1: null,
      context2: null,
      eachExamId: "",
      wrongRecordWrongNum: 0,
      subscribeInfo: {},
      courseList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      timer: null,
    };
  },

  computed: { ...mapGetters(["userInfo", "sysTime", "hideBuyState"]) },

  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();
    }
  },

  async onLoad(option) {
    console.log(option);
    this.recordId = option.id;
    this.examId = option.examId;
    this.eachExamId = option.eachExamId;
    this.subscribeId = option.subscribeId;
    await this.setSystemTime();
    this.mockSubscribeInfo();
    this.mockWrongRecordWrongNum();
    await this.bankExam();
    await this.mockReport();
  },
  onShow() {
    this.pageNum = 1;
    this.courseList = [];
    this.getcourList();
  },
  onUnload() {
    clearTimeout(this.timer);
  },
  methods: {
    ...mapActions(["setSystemTime"]),
    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}`,
            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}`,
            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);
          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,
        });
      }
    },
    goLive() {
      let uuid = new Date().valueOf() + "";
      // buyCourse 是否购买课程：1是 0否
      let encode = encodeURIComponent(
        config.WEBVIEW_URL +
          "pages/live/index?token=" +
          uni.getStorageSync("token") +
          "&userInfo=" +
          JSON.stringify(this.userInfo) +
          "&channelId=" +
          this.subscribeInfo.liveUrl +
          "&buyCourse=1" +
          "&ident=" +
          uuid
      );
      uni.navigateTo({
        url: `../../pages/webview/index?url=` + encode,
      });
    },
    mockSubscribeInfo() {
      this.$api.mockSubscribeInfo(this.subscribeId).then((res) => {
        console.log("subscribeInfo", this.subscribeInfo);
        this.subscribeInfo = res.data.data;
      });
    },
    openRemind() {
      this.noticeModal = false;
      this.$api
        .mockSubscribeEdit({
          subscribeId: this.subscribeId,
          liveSubscribe: 1,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.mockSubscribeInfo();
            uni.showToast({
              icon: "none",
              title: "开启成功",
            });
          }
        });
    },
    bankExam() {
      return new Promise((resolve) => {
        this.$api.bankExam(this.examId).then((res) => {
          this.examData = res.data.data;
          resolve();
        });
      });
    },
    /**
     * 去做题
     */
    async doRepeat(id, goodsId, moduleId = 0, chapterId = 0) {
      // 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:
          "/pages5/examReport/questionBank?orderGoodsId=" +
          this.orderGoodsId +
          "&id=" +
          id +
          "&goodsid=" +
          goodsId +
          "&moduleId=" +
          moduleId +
          "&chapterId=" +
          chapterId +
          "",
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$api.getExamDetail(exam_id).then((res) => {
          resolve(res.data.data.answerNum);
        });
      });
    },
    mockWrongRecordWrongNum() {
      return new Promise((resolve) => {
        // /mock/wwrong/record/wrongNum/${data}
        this.$api.mockWrongRecordWrongNum(this.recordId).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();
        });
      });
    },
    mockReport() {
      return new Promise((resolve) => {
        // /mock/record/'+data
        this.$api.mockReport(this.recordId).then((res) => {
          this.reportdata = res.data.data;
          this.getCanvas();
          resolve();
        });
      });
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
@import "./indexCourseList.scss";
.disNone {
  display: none;
}

.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: 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;
        }
      }
    }
  }
}

.notice {
  background: #fff;
  padding: 40rpx;

  .img {
    width: 100%;
  }

  .text {
    text-align: center;
    font-size: 28rpx;
    color: #666666;
    line-height: 48rpx;
    .blue {
      color: #007aff;
    }
  }

  .btn {
    text-align: center;
    line-height: 80rpx;
    margin: 40rpx auto 0;
    width: 528rpx;
    height: 80rpx;
    background: #007aff;
    border-radius: 40rpx;
    color: #fff;
  }
}

.notice__modal {
  .notice__content {
    width: 640rpx;
    height: 779rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .body {
      flex: 1;

      .content {
        padding: 30rpx 40rpx 28rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #666;

        .img {
          width: 100%;
        }

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

        .center {
          text-align: center;
        }

        .blue {
          color: #007aff;
        }

        .text {
          margin-top: 20rpx;
        }
      }
    }

    .footer {
      height: 140rpx;
      border-top: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        margin: 0 12rpx;
        width: 268rpx;
        height: 80rpx;
        color: #fff;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        background: #007aff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        &.close {
          color: #007aff;
          background: #f5f5f5;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }
  }
}
</style>