exam_mp/pages/learn/rightPractice.vue

<script setup name="Exam">
import TopicPractice from "../../components/Topic/TopicPracticeEnd.vue";
import { ref, onMounted } from "vue";
import { getRoute, router } from "../../utils/router";
import { request } from "../../utils/request";

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

const title = ref("");
const total = ref(0);

const data = ref([]);
const user_exercise_paper_id = ref(0);
const getList = async (params) => {
  const res = await request(
    "api/question_bank/question_reception/study_book/get_answer_topic_record",
    {
      chapter_id: params.catalogue_id,
      is_correct: Number(params.isRight),
    }
  );
  total.value = res.data.total;
  data.value.push(
    ...res.data.data.map((item, ind) => {
      const selectAns = Number(params.isRight) ? item.answer.split(",") : [];
      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: selectAns.includes(current),
          isRight: ans.includes(current),
          index: i,
        });
      }

      return {
        ...item,
        questions, // 题目
        ansList, // 正确答案
        selectAns: selectAns.map((i) => ({ value: i, label: i })), // 选择的答案
        showResult: !!Number(params.isRight), // 是否展示答案
        isRight: !!Number(params.isRight), // 是否正确
        isImage: item.title.includes("<img"),
        ind,
      };
    })
  );
};

const lookReport = () => {
  router.back();
};

const onStar = (item) =>
  new Promise((resolve) => {
    request(
      !item.is_favorite
        ? "api/question_bank/question_reception/topic/set_favorite"
        : "api/question_bank/question_reception/topic/cancel_favorite",
      {
        id: item.id,
        chapter_id: getRoute().params.id,
        user_exercise_paper_id: user_exercise_paper_id.value,
      }
    ).then(() => {
      item.is_favorite = item.is_favorite ? 0 : 1;
      resolve(item.is_favorite);
    });
  });

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

<template>
  <TopicPractice
    :title="title"
    :total="total"
    :topics="data"
    :user_exercise_paper_id="user_exercise_paper_id"
    :onStar="onStar"
    :empty="!data.length"
    @lookReport="lookReport"
    text="加载中···"
    border
  />
</template>

<style lang="scss" scoped>
@import "@/uni.scss";
.template {
  padding: 15rpx;
  border-radius: 24rpx;
  background-color: #f8f9fb;
}
.red {
  color: #ff4444;
}

.title-r {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 50rpx;
  color: #002fa7;
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 63rpx;
  padding: 40rpx 50rpx;
  background-color: #f8f9fb;
  border-radius: 24rpx;
  &-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 32rpx;
  padding: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  .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>