zhishifufei_uniapp/pages/topic/problem_result.vue

<template>
  <BaseContainer>
    <NavBar title="练习结果" />
    <view class="question-result-page">
      <view class="head">
        <view class="header">
          <view class="avatar"><img :src="userInfo.avatar"></view>
          <view class="nickname">{{ userInfo.nickname }}</view>
          <view class="circle-container">
            <canvas canvas-id="circle" class="my-canvas"></canvas>
          </view>


          <view class="title">{{ result.title }}</view>
          <view class="basic">
            <view class="item">
              <view>题目数</view>
              <view class="value">{{ result.test_paper_question.length }}</view>
            </view>
            <view class="item">
              <view>错题数</view>
              <view class="value">{{ result.wrong_question }}</view>
            </view>
            <view class="item">
              <view>未答数</view>
              <view class="value">{{ result.not_questions }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="result">
        <view class="result-hd">
          <view>答题情况</view>
          <view class="list">
            <view class="item"><text></text><text>正确</text></view>
            <view class="item"><text></text><text>错误</text></view>
            <view class="item"><text></text><text>未答</text></view>
          </view>
        </view>
        <view class="result-bd">
          <view v-for="(item, index) in result.test_paper_question"
            :class="{ no: item.is_correct === 1, ok: item.is_correct === 2 }">{{ index + 1 }}</view>
        </view>
        <view v-if="!footerHidden" class="result-ft">
          <navigator  open-type="redirect" :url="`/pages/topic/problem_sheet?from=problem_result&test_id=${test_id}&record_id=${result.id}`">
            返回答题卡</navigator>
          <!-- <a :href="'{:url('special/question_index')}?id=' + test_id">再考一次</a> -->
        </view>
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { getExaminationResult } from "@/api/topic";
import {
  getUserBaseData,
} from "@/api/user";
export default {
  data() {
    return {
      test_id: 0,
      result: {
        title: "--",
        score: 0,
        grade: "--",
        test_paper_question: [],
        wrong_question: 0,
        duration_time: "00:00:00",
      },
      fill: { gradient: ["rgba(44, 142, 255, 1)", "rgba(44, 142, 255, 0.05)"] },
      footerHidden: false,
      userInfo: {}
    };
  },
  onLoad({ test_id, from }) {
    this.test_id = test_id;
    this.footerHidden = from === "question_user";
    this.getUserBaseData();
  },
  mounted() {
    this.getResult();
  },
  methods: {
    async getUserBaseData() {
      try {
        const { data } = await getUserBaseData();
        const {
          userInfo
        } = data;
        Object.assign(this, {
          userInfo
        });
      } catch (error) { }
    },
    renderCircle() {
      const { screenWidth } = this.$util.getSystemInfo();

      const ctx = uni.createCanvasContext("circle");

      const maxValue = this.result.accuracy;
      let value = 0;

      const render = () => {
        ctx.clearRect(0, 0, screenWidth, 160);

        let text = parseInt(value) + "%";

        ctx.arc(screenWidth / 2, 80, 70, 0, 2 * Math.PI);
        ctx.setFillStyle("rgba(213, 224, 236, 0.6)");
        ctx.fill();

        ctx.beginPath();
        ctx.arc(
          screenWidth / 2,
          80,
          70,
          0,
          2 * Math.PI * (maxValue / 100) * (value / maxValue)
        );
        ctx.setFillStyle("#2c8eff");
        ctx.fill();

        ctx.beginPath();
        ctx.arc(screenWidth / 2, 80, 64, 0, 2 * Math.PI);
        ctx.setFillStyle("#ffffff");
        ctx.fill();

        ctx.font =
          '32px "PingFang SC", "STHeitiSC-Light", "Helvetica-Light", arial, sans-serif, "Droid Sans Fallback"';
        ctx.setFillStyle("#2c8eff");
        ctx.setTextBaseline("middle");
        let textWidth = ctx.measureText(text);
        ctx.fillText(text, screenWidth / 2 - textWidth.width / 2, 80);

        ctx.font =
          '11px "PingFang SC", "STHeitiSC-Light", "Helvetica-Light", arial, sans-serif, "Droid Sans Fallback"';
        ctx.setFillStyle("#999999");
        ctx.setTextBaseline("middle");
        text = "正确率";
        textWidth = ctx.measureText(text);
        ctx.fillText(text, screenWidth / 2 - textWidth.width / 2, 80 + 32);

        ctx.draw();
      };

      // #ifndef MP
      /*  const task = () => {
         render();
         if (value < maxValue) {
           value += 2;
           window.requestAnimationFrame(task);
         }
       };
 
       window.requestAnimationFrame(task); */
      // #endif


      const flag = setInterval(() => {
        render();
        if (value < maxValue) {
          value += 2;
        } else {
          clearInterval(flag);
        }
      }, 1000 / 60);

    },
    getResult() {
      getExaminationResult({
        test_id: this.test_id,
        type: 1,
      })
        .then(({ data: result }) => {
          let questions = result.test_paper_question;

          let duration = result.duration;
          let hours = Math.floor(duration / 3600000);
          let minutes = Math.floor((duration - hours * 3600000) / 60000);
          let seconds = Math.floor((duration - hours * 3600000 - minutes * 60000) / 1000);
          if (hours < 10) {
            hours = "0" + hours;
          }
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          result.duration_time = hours + ":" + minutes + ":" + seconds;

          for (let i = questions.length; i--;) {
            if (!Array.isArray(questions[i].userAnswer)) {
              Object.assign(questions[i], questions[i].userAnswer);
            }
          }

          this.result = result;
          this.renderCircle();
        })
        .catch((err) => {
          console.log(err);
          this.$util.showMsg(err);
          uni.redirectTo({
            url: "/pages/topic/question_user",
          });
        });
    },
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style scoped lang="scss">
@import "@/static/style/result.scss";

.avatar {
  position: absolute;
  top: -46rpx;
  left: 50%;
  width: 134rpx;
  height: 134rpx;
  border: 10rpx solid #FFFFFF;
  border-radius: 50%;
  background-color: #E8D8B1;
  overflow: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.nickname {
  text-align: center;
  font-weight: 500;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #333333;
}
.my-canvas{
  top:0rpx;
  left:-40rpx;
}
.head {
  margin-top: 80rpx;

  .header {
    position: relative;
    width: 94%;
    margin: auto;
    height: 790rpx;
    border-radius: 12rpx;
    background-color: #FFFFFF;
    padding-top: 90rpx;
  }
}
.result{
  width: 94%;
  border-radius: 12rpx;
  margin: auto;
  background: #ffffff;
}
</style>