exam_mp/pages/real/exam.vue

<script setup name="Exam">
import TopicExam from "../../components/Topic/TopicExam.vue";
import { ref, onMounted } from "vue";
import { getRoute } from "../../utils/router";
import { request } from "../../utils/request";
import { useTimeStore } from "@/store/time";
import Container from "../../components/Container/Container.vue";

const Time = useTimeStore();

const TopicMapList = ["A", "B", "C", "D", "E"];

const title = ref("");
const total = ref(100000);
const correct = ref({
  rate: 0, // 正确率
  error: 0, // 错误数
  right: 0, // 正确数
  not: 0, // 未答题
});

const showReport = ref(false);
const submitter = ref({
  closeText: "直接退出",
  context: "您本次答题还未提交， 确定要退出答题吗？",
  isEndQuestion: false,
  text: "提交查看",
  totalTime: {
    formatTime: "00:03",
    totalTime: 2892,
  },
});

const pageParams = ref({
  page: 1,
  limit: 999,
});
const data = ref([]);

const getList = async (params) => {
  if (pageParams.value.page * pageParams.value.limit >= total.value) return;
  const res = await request(
    "api/question_bank/question_reception/topic/get_chapter_topic",
    {
      ...params,
      // id: getRoute().params.id,
      id: 66,
    }
  );
  total.value = res.data.total;
  data.value.push(
    ...res.data.data.map((item, ind) => {
      let questions = [];
      const ans = item.correct_answer.split(",");
      const ansList = [];
      for (let i = 0; i < item.question_count; i++) {
        const current = TopicMapList[i];
        if (ans.includes(current)) {
          ansList.push({
            label: current,
            value: i,
          });
        }
        const v =
          item[`select_${current.toLowerCase()}`].replace(/<br\s*\/?>/g, "") ||
          "";
        questions.push({
          label: v,
          value: current,
          checked: false,
          index: i,
        });
      }

      return {
        ...item,
        questions, // 题目
        ansList, // 正确答案
        selectAns: [], // 选择的答案
        showResult: false, // 是否展示答案
        isRight: false, // 是否正确
        isImage: item.title.includes("<img"),
        ind,
      };
    })
  );
  pageParams.value.page++;
};

const nextPage = (e) => {
  if (pageParams.value.page * pageParams.value.limit - e.index - 1 !== 1)
    return;
  getList(pageParams.value);
};

const lookReport = (d, s) => {
  data.value = d;
  showReport.value = true;
  const totalTime = Time.end();
  submitter.value = {
    ...s,
    totalTime,
  };
  const r = data.value.filter((item) => item.isRight).length;
  const n = data.value.filter((item) => !item.selectAns.length).length;
  correct.value = {
    rate: (r / total.value) * 100,
    right: r,
    error: total.value - r - n,
    not: n,
  };
};

onMounted(() => {
  Time.start();
  const params = getRoute().params;
  title.value = params.title;
  getList(pageParams.value);
});
</script>

<template>
  <TopicExam
    :title="title"
    :total="total"
    mode="practice"
    :topics="data"
    @nextPage="nextPage"
    @lookReport="lookReport"
    :empty="!data.length"
    border
    v-if="!showReport"
  />
  <Container v-else title="练习报告">
    <uni-card>
      <view class="card">
        <view class="card-time">
          <view>{{ submitter.totalTime?.formatTime }}</view>
          <view>学习时长</view>
        </view>
        <view class="card-time">
          <view>{{ correct.rate.toFixed(2) }}%</view>
          <view>正确率</view>
        </view>
      </view>
    </uni-card>
    <view class="reslut">
      <view class="header">
        <view>答题卡</view>
        <view class="right-error">
          <view class="right">答对({{ correct.right }})</view>
          <view class="error">答错({{ correct.error }})</view>
          <view class="not">未作({{ correct.not }})</view>
        </view>
      </view>
      <view class="group">
        <view
          class="item"
          :class="{
            right: it.isRight && it.showResult,
            error: !it.isRight && it.showResult && it.selectAns.length,
          }"
          v-for="(it, index) in data"
          :key="it.id"
          >{{ index + 1 }}</view
        >
      </view>
    </view>
    <template #footer>
      <view class="footer">
        <view class="button plain" @click="showReport = false">答题解析</view>
        <view class="button">炫耀一下</view>
      </view>
    </template>
  </Container>
</template>

<style lang="scss" scoped>
@import "@/uni.scss";

.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 50rpx;
  &-time {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    align-items: center;
  }
}

.reslut {
  margin: 0 30rpx;
  padding: 20rpx 50rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  background: #fff;
  border-radius: 10rpx;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right-error {
      display: flex;
      gap: 20rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      @mixin type($color) {
        display: flex;
        align-items: center;
        gap: 10rpx;
        &::before {
          content: "";
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          display: block;
          background: $color;
        }
      }
      .right {
        @include type($success);
      }
      .error {
        @include type($error);
      }
      .not {
        @include type($default);
      }
    }
  }

  .group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20rpx;
    margin-top: 20rpx;

    .item {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $default;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
    .item.right {
      background: $success;
    }
    .item.error {
      background: $error;
    }
  }
}

.footer {
  display: flex;
  gap: 20rpx;
  align-items: center;
  padding-top: 20rpx;
}
</style>