exam_mp/components/Topic/TopicExam.vue

<template>
  <Container
    :scrollX="true"
    :scrollY="true"
    :scroll-into-view="`item-${nowIndex}`"
    :title="title"
    @onSafeAreaChange="onSafeAreaChange"
    :onBack="onBack"
    v-bind="$attrs"
    v-show="!open && !showSheet"
  >
    <view
      :id="`item-${parindex}`"
      class="topic-item"
      :style="{
        width: `${safeArea.width}px`,
        height: `${safeArea.height}px`,
        flexShrink: 0, // 解决宽度无效问题
      }"
    >
      <!-- 头部 防止定时器不准bug -->
      <view class="topic-header">
        <view class="topic-header-left">
          <view class="topic-type" @click="openSheet">
            {{ styleMap[data[nowIndex]?.style] }}题
          </view>
          <view class="topic-count">
            第{{ nowIndex + 1 }}题/共{{ total }}题
          </view>
        </view>
        <uni-countdown
          :show-day="false"
          :hour="formatTime(Time.time.startTime, 'hour')"
          :minute="formatTime(Time.time.startTime, 'minute')"
          :second="formatTime(Time.time.startTime, 'second')"
        />
      </view>
      <template v-for="(item, parindex) in data" :key="parindex">
        <template v-if="parindex === nowIndex">
          <!-- 问题内容 -->
          <view class="topic-content">
            <uvParse
              v-if="item.isImage"
              :content="item.title"
              class="question-text"
            ></uvParse>
            <rich-text
              v-else
              :nodes="item.title"
              class="question-text"
            ></rich-text>
            <uvParse
              :content="item.questions_ex"
              v-if="item.style === 6 && item.isImage"
              class="question-text"
            ></uvParse>
            <rich-text
              v-else
              :nodes="item.questions_ex"
              class="question-text"
            ></rich-text>
            <questions
              v-if="item.style !== 6"
              v-for="(question, index) in item.questions"
              :key="index"
              :answerList="item.ansList"
              :index="index"
              :styleCount="item.style"
              :question="question"
              :showResult="item.showResult"
              :parindex="parindex"
              @select="handleSelect"
            />
            <view class="other" v-else>
              <questions
                v-for="(question, index) in item.questions"
                :key="index"
                :answerList="item.ansList"
                :index="index"
                :styleCount="item.style"
                :question="question"
                :showResult="item.showResult"
                :parindex="parindex"
                @select="handleSelect"
              />
            </view>
          </view>

          <!-- 答案展示 -->
          <view v-if="item.showResult" class="answer-section">
            <view class="answer-content">
              <view class="answer-row">
                <view class="answer-item border-r-primary">
                  正确答案:
                  <text class="answer-text">{{
                    item.ansList.map((i) => i.label).join("")
                  }}</text>
                </view>
                <view class="answer-item">
                  我的答案:
                  <text class="answer-text">{{
                    item.selectAns.map((i) => i.value).join("")
                  }}</text>
                </view>
                <view
                  class="tip"
                  :style="{
                    color: item.isRight ? '#00be00' : '#f00',
                  }"
                  >{{ item.isRight ? "太棒了~" : "再接再励!" }}</view
                >
              </view>
              <view class="parsing">
                <p>解析:</p>
                <scroll-view
                  :show-scrollbar="false"
                  scroll-y
                  class="parsing-text"
                >
                  <rich-text :nodes="item.explain"></rich-text>
                </scroll-view>
              </view>
            </view>
          </view>

          <!-- 底部按钮 -->
          <view class="button-group">
            <button
              v-if="parindex >= 1"
              class="prev-btn"
              @tap="handlePage(item, parindex, 'prevPage')"
            >
              上一题
            </button>
            <button
              v-if="parindex + 1 < total"
              class="next-btn"
              @tap="handlePage(item, parindex, 'nextPage')"
            >
              下一题
            </button>
            <button v-if="parindex + 1 === total" @click="submit">交卷</button>
          </view>
        </template>
      </template>
    </view>
  </Container>
  <uni-popup
    ref="bottomModal"
    @change="(e) => (showSheet = e.show)"
    type="bottom"
    backgroundColor="#fff"
    borderRadius="10px 10px 0 0"
    class="bottom-modal"
  >
    <view class="bottom-modal" v-if="showSheet">
      <view class="title">
        <view>答题卡</view>
        <uni-icons
          class="closeempty"
          type="closeempty"
          @click="bottomModal?.close"
        ></uni-icons>
      </view>
      <view class="content">
        <scroll-view class="scroll-view" scroll-y>
          <view v-for="(key, index) in styleMap" class="ques-type" :key="key">
            <view>{{ key }}题</view>
            <view class="grid">
              <view
                v-for="item in data.filter((i) => i.style === +index)"
                :key="item.id"
                class="item"
                :class="{
                  success: !!item.selectAns.length,
                }"
                @click="
                  () => {
                    nowIndex = item.ind;
                    bottomModal?.close();
                  }
                "
              >
                {{ item.ind + 1 }}
              </view>
            </view>
          </view>
        </scroll-view>
        <button @click="submit">交卷</button>
      </view>
    </view>
  </uni-popup>
  <Modal
    v-model:open="open"
    title="温馨提示"
    :submitter="submitter"
    :onClose="onClose"
    :onSubmit="onSubmit"
  >
    <view :style="{ margin: '10px 0' }">{{ submitter.context }}</view>
  </Modal>
</template>

<script setup>
// 答题组件
import { ref, watchEffect } from "vue";
import Questions from "./Questions.vue";
import Container from "../Container/Container.vue";
import Modal from "../Modal/Modal.vue";
import uvParse from "@/uni_modules/uv-parse/components/uv-parse/uv-parse.vue";
import { useTimeStore } from "@/store/time";
const styleMap = {
  2: "单选",
  3: "多选",
  6: "配伍",
};
const safeArea = ref({}); // 安全区域
const data = ref([]); // 题目数据
const open = ref(false); // 是否显示弹窗
const showSheet = ref(false); // 是否显示底部弹窗
let r = null; // 异步方法
const Time = useTimeStore();
const bottomModal = ref(null); // 底部弹窗

const openSheet = () => {
  bottomModal.value.open();
};
const submit = () => {
  const len = data.value.filter((item) => !item.selectAns.length).length;
  if (len) {
    bottomModal.value.close();
    submitter.value = {
      ...submitter.value,
      closeText: "提交试卷",
      context: `您还有${len}道题没做，确认交卷吗？`,
    };
    open.value = true;
  }
};
const formatTime = (time, type) => {
  // 获取time一个半小时后的时间戳
  const timeStamp = new Date(time + 1.5 * 60 * 60 * 1000);
  const date = new Date();
  switch (type) {
    case "hour":
      return timeStamp.getHours() - date.getHours();
    case "minute":
      return timeStamp.getMinutes() - date.getMinutes();
    case "second":
      return timeStamp.getSeconds() - date.getSeconds();
  }
};

const submitter = ref({
  text: "继续考试",
  closeText: "直接退出",
  context: "确定退出考试吗？退出后将不保留本次考试记录，确定要放弃吗？",
});

// Props 定义
const props = defineProps({
  topics: {
    type: Array,
    default: () => [],
  },
  onStar: {
    type: Function,
    default: null,
  },
  total: {
    type: Number,
    default: 0,
  },
  title: String,
});

watchEffect(() => {
  data.value = props.topics;
});

// Emits 定义
const emit = defineEmits([
  "prevPage",
  "nextPage",
  "answerChange",
  "lookReport",
]);

const onBack = () =>
  new Promise((resolve) => {
    if (!data.value.length) {
      resolve(true);
      return;
    }
    open.value = true;
    r = resolve;
  });

const onClose = () => {
  if (submitter.value.closeText !== "提交试卷") return r(true);
  data.value = data.value.map((item) => ({
    ...item,
    showResult: true,
    isRight: isRight(
      item.selectAns.map((q) => q.value),
      item.ansList.map((q) => q.label)
    ),
  }));
  emit("lookReport", data.value, submitter.value);
};
const onSubmit = () =>
  new Promise((res) => {
    res(true);
  });
// 响应式数据
const nowIndex = ref(0);

// 判断答案是否正确
const isRight = (selectAns, rightAns) => {
  return rightAns.every((item) => selectAns.includes(item));
};

const handleSelect = ({ pid, checked, index, style }) => {
  // 如果不是多选，就取消其他的选项
  if (style !== 3) {
    data.value[pid].questions = data.value[pid].questions.map((q) => ({
      ...q,
      checked: false,
    }));
    data.value[pid].selectAns = [];
  }
  // 更新选项
  const item = data.value[pid].questions[index];
  data.value[pid].questions[index].checked = !checked;
  data.value[pid].questions[index].isRight = isRight(
    [item.value],
    data.value[pid].ansList.map((q) => q.label)
  );

  // 更新答案
  data.value[pid].selectAns = data.value[pid].questions
    .filter((q) => q.checked)
    .map((q) => q.value);
};

const handlePage = (item, index, type) => {
  nowIndex.value = index + (type === "prevPage" ? -1 : 1);
  emit(type, { item, index });
};

const onSafeAreaChange = (s) => {
  safeArea.value = s;
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";
.other {
  display: flex;
  gap: 12px;
}
.scroll-view {
  height: 50vh;
}
.content {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 30rpx;

  .ques-type {
    display: flex;
    gap: 16rpx;
    flex-direction: column;
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.bottom-modal {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .closeempty {
    position: absolute;
    right: 0;
  }
}
.parsing-text {
  height: 381rpx;
  white-space: normal;
}
.answer-content {
  display: flex;
  flex-direction: column;
  gap: 45rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #666666;
}
.topic-container {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.topic-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-sizing: border-box;
}

.topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topic-header-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.item {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #dddddd;
  &.success {
    border-color: $success;
    color: $success;
  }
}

.topic-type {
  border: 1px solid $uni-primary;
  padding: 0 8px;
  border-radius: 6px;
  color: $uni-primary;
  font-weight: 600;
  font-size: 14px;
}

.topic-count {
  color: #333;
  font-size: 14px;
}

.topic-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-text {
  font-weight: bold;
  font-size: 14px;
  white-space: normal;
}

.answer-section {
  border-radius: 16rpx;
  border: 1px solid #ddd;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.answer-row {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.answer-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 12px;
}

.tip {
  margin-left: auto;
}

.border-r-primary {
  border-right: 2px solid $uni-primary;
}

.answer-text {
  color: $uni-primary;
}

.button-group {
  display: flex;
  gap: 8px;
  position: sticky;
  bottom: 0;
  margin-top: auto;
}

.prev-btn {
  flex: 1;
  background-color: $uni-primary-light;
  color: $uni-primary;
}

.next-btn {
  flex: 1;
  background-color: $uni-primary;
  color: #fff;
}

.star-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  font-size: 20rpx;
  color: #000000;
}
</style>