exam_mp/pages/real/history.vue

<template>
  <Container title="往年真题" bgColor="#f8f8f8">
    <view class="user">
      <image
        class="avatar"
        :src="userInfo.userpic"
        width="40"
        height="40"
        v-if="userInfo.userpic"
      />
      <view class="name">{{ userInfo.username }}</view>
    </view>
    <view class="exam-info">
      <view class="item">
        <view class="score">100分</view>
        <view class="title">总分</view>
      </view>
      <view class="item">
        <view class="score">100题</view>
        <view class="title">题量</view>
      </view>
      <view class="item">
        <view class="score">150分钟</view>
        <view class="title">时长</view>
      </view>
    </view>
    <view class="tip"
      >注：题型可能会含有单选题、多选题、配伍题、综合分析题；请注意考试时长，无论答题是否完全，到时自动交卷。</view
    >

    <template v-if="list.length">
      <view class="title-exam">考试记录</view>
      <view class="exam-history">
        <view
          class="i"
          :class="index !== list.length - 1 && 'no-laster'"
          v-for="(item, index) in list"
          :id="item.id"
          @click="
            onClick({
              id: item.id,
              catalogue_id: item.catalogue_id,
            })
          "
        >
          <view>{{ util.timestampToString_day(item.begin_time) }}</view>
          <view>{{ item.use_time_str?.split(":")?.[0] }}分钟</view>
          <view>{{ item.complete }}/100题</view>
          <view class="score"
            >{{ item.score }}分<uni-icons type="right"
          /></view>
        </view>
      </view>
    </template>
    <template #footer>
      <button @click="onClick">开始考试</button>
    </template>
  </Container>
</template>

<script setup name="history">
import { ref } from "vue";
import Container from "../../components/Container/Container.vue";
import { getRoute, router } from "../../utils/router";
import { request } from "../../utils/request";
import { onShow } from "@dcloudio/uni-app";
import util from "@/utils/common";

const userInfo = ref({
  userpic: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
  username: "Hi, 这里是历史题库",
});
const list = ref([]);

const onClick = (data = {}) => {
  router.push({
    url: "/pages/real/exam",
    params: {
      title: "考试",
      id: getRoute().params.id, // 考试id
      ...data,
    },
  });
};
onShow(async () => {
  const res = await request(
    "api/question_bank/question_reception/real_topic/get_user_all_real_paper",
    {
      catalogue_id: getRoute().params.id, // 考试id
    }
  );
  list.value = res.data;
  userInfo.value = uni.getStorageSync("userInfo");
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.user {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 30rpx 20rpx;
  background: #eff4ff;
  border-radius: 24rpx;

  .avatar {
    border-radius: 50%;
    height: 96rpx;
    width: 96rpx;
  }
}

.exam-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background: #eff4ff;
  border-radius: 24rpx;
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30rpx;
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }
  }
}

.title-exam {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  margin: 32rpx 0 16rpx;
}

.exam-history {
  background: #fff;
  border-radius: 24rpx;
  padding: 16rpx;

  .i {
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-size: 28rpx;
    color: #333;
    align-items: center;
    justify-content: space-between;

    .score {
      color: $error;
    }
  }

  .no-laster {
    padding-bottom: 16rpx;
    margin-bottom: 8rpx;
    border-bottom: 1rpx solid #dddddd;
  }
}
</style>