labsop_h5/src/view/exam/mine.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-17 13:36:58
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-28 14:47:27
 * @FilePath: \labsop-h5\src\view\training\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad" class="mt10">
      <van-cell v-for="(item, index) in state.list" :key="index" :center="true">
        <template #title>
          <div class="list" @click="onDetail(item)">
            <header class="flex justify-between">
              <van-text-ellipsis class="title" :content="item.name" />
              <span>次数：{{ item.examineCount }}/{{ item.totalCount }}</span>
            </header>
            <footer>
              {{ `${formatDate(new Date(item.startTime), 'YYYY-mm-dd HH:MM')}~${formatDate(new Date(item.endTime), 'YYYY-mm-dd HH:MM')}` }}
            </footer>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
  import to from 'await-to-js'
  import { onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { useTrainingApi } from '/@/api/training'
  import { formatDate } from '/@/utils/formatTime'
  import { useUserInfo } from '/@/stores/userInfo'
  import { showNotify } from 'vant'
  const props = defineProps({
    isAll: {
      type: String,
      default: '10'
    }
  })
  const trainingApi = useTrainingApi()
  const router = useRouter()
  const state = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      isAll: false
    },
    list: [] as any[],
    loading: false,
    finished: false
  })
  const onLoad = async () => {
    if (state.loading) return
    state.loading = true
    const params = JSON.parse(JSON.stringify(state.queryParams))
    params.userId = useUserInfo().userInfos.id
    const [err, res]: ToResponse = await to(trainingApi.getExamList(params))
    if (err) {
      state.loading = false
      return
    }
    const list = res?.data?.list || []
    for (const item of list) {
      state.list.push(item)
    }
    if (list.length < state.queryParams.pageSize) {
      state.finished = true
    }
    state.queryParams.pageNum++
    state.loading = false
  }
  const onDetail = (row: any) => {
    if(!row.lastExam) return
    router.push({
      path: '/exam/result',
      query: {
        id: row.lastExam.answerId
      }
    })
  }
  onMounted(() => {
    onLoad()
  })
</script>

<style lang="scss" scoped>
  .app-container {
    .van-cell {
      background-color: #fff;
      margin-top: 10px;
      header {
        color: #333;
        font-size: 16px;
      }
      footer {
        color: #969799;
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
      }
      .title {
        font-weight: bold;
      }
      .inst-title {
        color: #333;
        text-align: left;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 4px;
      }
      .time {
        color: #f69a4d;
      }
    }
  }
</style>