ieplus-app/src/pagesStudy/pages/exam-start/components/exam-stats-card.vue

<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" mode="bottom" :close-on-click-overlay="true" :closeable="false" :round="16">
        <view class="theme-ie w-auto box-border bg-white">
          <view class="popup-header">
            <view class="popup-header-left">
              <uv-icon name="calendar" size="26" />
              <view class="popup-header-left-title">
                <text>答题卡</text>
                <view class="ml-20">
                  <text class="text-30 text-primary">{{ doneCount }}</text>
                  <text>/</text>
                  <text class="text-30 text-fore-light">{{ virtualTotalCount }}</text>
                </view>
              </view>
            </view>
            <view class="popup-header-right">
              <block v-if="!readonly">
                <view class="stats-dot stats-dot-done">已答</view>
                <view class="stats-dot stats-dot-not-done">未答</view>
                <view class="stats-dot stats-dot-not-know">不会</view>
              </block>
              <block v-else>
                <view class="stats-dot stats-dot-correct">答对</view>
                <view class="stats-dot stats-dot-incorrect">答错</view>
                <view class="stats-dot stats-dot-not-done">未答</view>
              </block>
            </view>
          </view>
          <view class="popup-content">
            <view class="flex-1 min-h-1">
              <scroll-view class="h-full" scroll-y>
                <view v-for="(item, i) in groupedQuestionList" :key="i" class="">
                  <template v-if="item.list.length > 0">
                    <view class="h-70 bg-back px-20 leading-70 text-fore-subcontent sticky top-0 z-1">
                      {{ questionTypeDesc[item.type] }}
                    </view>
                    <view class="grid grid-cols-5 place-items-center gap-x-20 gap-y-30 p-30 relative z-0">
                      <view v-for="(qs, j) in item.list" :key="j" class="aspect-square flex items-center justify-center"
                        @click="hanadleNavigate(qs.question, qs.index)">
                        <view
                          class="w-74 h-74 rounded-full flex items-center justify-center bg-white border border-solid border-border relative"
                          :class="{
                            'is-done': !isViewMode && qs.question.isDone,
                            'is-not-know': !isViewMode && qs.question.isNotKnow,
                            'is-mark': !isViewMode && qs.question.isMark,
                            'is-correct': isViewMode && qs.question.isCorrect,
                            'is-incorrect': isViewMode && !qs.question.isCorrect,
                          }">
                          <text class="z-1 font-bold text-32">{{ qs.index + 1 }}</text>
                          <ie-image v-if="qs.question.isMark" src="/pagesStudy/static/image/icon-mark-active.png"
                            custom-class="absolute -top-12 left-14 w-28 h-28 z-1" mode="aspectFill" />
                        </view>
                      </view>
                    </view>
                  </template>
                </view>
              </scroll-view>
            </view>
            <view v-if="!isViewMode" class="h-150 bg-white flex items-center gap-x-120 px-40">
              <view class="flex flex-col items-center gap-x-10" @click="handleReset">
                <uv-icon name="reload" size="20" :color="doneCount > 0 ? '#999' : '#cccccc'" />
                <text class="mt-4 text-20 text-subcontent" :class="{ 'text-fore-light': doneCount <= 0 }">重新作答</text>
              </view>
              <view class="flex-1 py-20 text-center rounded-full bg-primary text-white" @click="handleSubmit">交卷</view>
            </view>
          </view>
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>

<script lang="ts" setup>
import { useExam } from '@/composables/useExam';
import { Study, Transfer } from '@/types';
import { EXAM_DATA } from '@/types/injectionSymbols';
import { EXAM_PAGE_OPTIONS } from '@/types/injectionSymbols';
const props = defineProps<{
  readonly?: boolean;
}>();
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { doneCount, virtualTotalCount, groupedQuestionList, questionTypeDesc, reset, startTiming, stopTiming, changeIndex, setSubQuestionIndex } = examData;
const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const isViewMode = computed(() => {
  return examPageOptions?.readonly || false;
});

const popupRef = ref();
const open = () => {
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
defineExpose({
  open,
  close
});
const handleReset = () => {
  if (doneCount.value <= 0) {
    return;
  }
  stopTiming();
  uni.$ie.showModal({
    title: '重新作答',
    content: '是否确认清空全部作答数据？',
  }).then(confirm => {
    if (confirm) {
      close();
      reset();
      setTimeout(() => {
        startTiming();
      }, 300);
    } else {
      startTiming();
    }
  });
}
const emit = defineEmits<{
  (e: 'submit'): void;
}>();
const handleSubmit = () => {
  emit('submit');
}
const hanadleNavigate = (question: Study.Question, index: number) => {
  if (question.isSubQuestion) {
    changeIndex(question.parentIndex || 0, question.subIndex || 0);
  } else {
    changeIndex(index);
  }
}
</script>

<style lang="scss" scoped>
.popup-header {
  @apply px-30 h-120 flex items-center justify-between;
}

.popup-header-left {
  @apply flex items-center;
}

.popup-header-left-title {
  @apply flex items-center text-30 text-fore-title font-bold;
}

.popup-header-right {
  @apply flex items-center gap-x-60;
}

.stats-dot {
  @apply relative text-22 text-fore-light;

  &::before {
    @apply content-[''] absolute top-6 -left-30 w-18 h-18 rounded-full;
  }

  &.stats-dot-done {
    &::before {
      @apply bg-primary;
    }
  }

  &.stats-dot-not-done {
    &::before {
      @apply w-14 h-14 border-2 border-solid border-back;
    }
  }

  &.stats-dot-not-know {
    &::before {
      @apply bg-back;
    }
  }

  &.stats-dot-correct {
    &::before {
      @apply bg-[#2CC6A0];
    }
  }

  &.stats-dot-incorrect {
    &::before {
      @apply bg-[#FF5B5C];
    }
  }
}

.popup-content {
  @apply h-[48vh] flex flex-col;
}

.scroll-view {
  @apply h-full;
}

.is-done {
  @apply text-primary border-[#EBF9FF] bg-[#EBF9FF];
}

.is-not-know {
  @apply text-fore-title border-[#F2F2F2] bg-[#F2F2F2];
}

.is-correct {
  @apply text-[#2CC6A0] border-[#E7FCF8] bg-[#E7FCF8];
}

.is-incorrect {
  @apply text-[#FF5B5C] border-[#FEEDE9] bg-[#FEEDE9];
}
</style>