study-ipad/src/views/study/subject/question/list.vue

<template>
  <div class="grid grid-cols-1 gap-4">
    <template v-for="(item, index) in data">
      <div
        class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
      >
        <div class="p-4">
          <div class="mb-3 flex items-start justify-between">
            <div class="text-base font-semibold text-gray-800">
              题目 {{ index + 1 }}
            </div>
            <div class="flex space-x-1">
              <q-btn
                round
                size="xs"
                icon="book"
                color="red"
                @click="onHistory(item)"
              />
            </div>
          </div>
          <!-- 题目的图片 -->
          <template v-for="pic in item.questionImages">
            <div>
              <img :src="pic.imageUrl" alt="题目图片" />
            </div>
          </template>
          <!-- 答案的图片 -->
          <template v-for="pic in item.answerImages">
            <div>
              <img :src="pic.imageUrl" alt="题目图片" />
            </div>
          </template>
          <!-- 视频解析列表 -->
          <div v-if="showVideo && item.questionVideos?.length > 0">
            <div class="mb-2 text-sm font-medium text-gray-800">视频解析：</div>
            <ul class="space-y-2">
              <template v-for="video in item.questionVideos">
                <li
                  class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
                >
                  <span class="text-sm">{{ video.fileName }}</span>
                  <div
                    class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
                    @click="onVideo(video)"
                  >
                    <i class="fas fa-circle-play text-base"></i>
                  </div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </template>
  </div>
  <q-dialog v-model="state.video.show" persistent>
    <q-card style="width: 90%; max-width: 90%">
      <q-card-section>
        <div class="text-h6 flex items-center">
          视频解析（{{ state.video.name }}）
          <SvgIcon
            name="czr_close"
            color="#000000"
            class="ml-auto"
            @click="state.video.show = false"
          />
        </div>
      </q-card-section>
      <q-card-section>
        <video class="h-full w-full" :src="state.video.url" controls />
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog v-model="state.history.show">
    <q-card style="max-width: 60%">
      <q-card-section>
        <div class="text-h6"></div>
        <div class="text-h6 flex w-100 items-center">
          历史做题记录
          <SvgIcon
            name="czr_close"
            color="#000000"
            class="ml-auto"
            @click="state.history.show = false"
          />
        </div>
      </q-card-section>

      <q-card-section>
        <div class="px-4">
          <template v-for="item in state.history.data">
            <q-timeline>
              <q-timeline-entry heading>
                <div class="text-base">{{ item.date }}</div>
              </q-timeline-entry>
              <template v-for="son in item.list">
                <template v-if="son.isCorrect == 0">
                  <q-timeline-entry
                    :subtitle="Hms(son.solvingTime)"
                    icon="fa-solid fa-xmark "
                    color="red"
                  />
                </template>
                <template v-else-if="son.isCorrect == 1">
                  <q-timeline-entry
                    :subtitle="Hms(son.solvingTime)"
                    icon="fa-solid fa-check "
                    color="green"
                  />
                </template>
              </template>
            </q-timeline>
          </template>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { trainingCampPaperQuestionRelIpadHistoryRecords } from '@/api/modules/study'
import { Hms } from '@/utils/czr-util'
import { ElMessage } from 'element-plus'

const props = defineProps({
  data: { default: () => [] },
  showVideo: { default: false },
})
const state: any = reactive({
  history: {
    show: false,
    data: [],
  },
  video: {
    show: false,
    url: '',
    name: '',
  },
})
const onHistory = (row) => {
  trainingCampPaperQuestionRelIpadHistoryRecords(row.questionId)
    .then((data: any) => {
      if (data?.length > 0) {
        // 按年月日分组
        const groupedData = data.reduce((acc, item) => {
          // 提取年月日部分（格式：YYYY-MM-DD）
          const datePart = item.solvingTime.split(' ')[0] // 取日期部分（去掉时间）

          // 查找是否已有该日期的分组
          const existingGroup = acc.find((group) => group.date === datePart)

          if (existingGroup) {
            // 如果已有该分组，添加到对应的 list 中
            existingGroup.list.push(item)
          } else {
            // 如果没有该分组，创建新分组
            acc.push({
              date: datePart,
              list: [item],
            })
          }

          return acc
        }, [])
        state.history.data = groupedData
        state.history.show = true
      } else {
        ElMessage.info('暂无历史做题记录！')
      }
    })
    .finally(() => {})
}
const onVideo = (row) => {
  state.video.url = row.aliyunVideoUrl
  state.video.name = row.fileName
  state.video.show = true
}
</script>

<style lang="scss" scoped>
.question-card {
  transition: all 0.3s ease;
}

.question-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>