exam_mp/pages/index/yearExam.vue

<script setup>
import Container from "../../components/Container/Container.vue";
import { ref } from "vue";
import { request } from "../../utils/request";
import { router } from "../../utils/router";
import { onShow } from "@dcloudio/uni-app";

const rightList = ref([]);
onShow(async () => {
  // 获取历年真题
  const rightListRes = await request(
    "api/question_bank/question_reception/real_catalogue/get_year",
    {},
    "post"
  );
  rightList.value = rightListRes.data.map((i) => {
    const newItem = {
      name: i + "年",
      originName: i,
    };
    if (i.includes("(")) {
      // 2022(1)变成 2022年(一)
      newItem.name = i.replace(/\((\d+)\)/g, (text, number) => {
        const chineseNumber = [
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九",
        ];
        return `年(${chineseNumber[number - 1]})`;
      });
    }
    return newItem;
  });
});

const toReal = (item) => {
  router.push({
    url: "/pages/real/index",
    params: item,
  });
};
</script>
<template>
  <Container title="往年真题">
    <view class="p-20">
      <view class="grid-3">
        <view
          v-for="item in rightList"
          :key="item.originName"
          class="flex"
          @click="
            toReal({
              title: item.name + '真题',
              origin: item.originName,
            })
          "
        >
          <view class="bg-red">
            <view class="text">{{ item.name }}真题</view>
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>
<style scoped lang="scss">
// https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/kPFuCa2RDyoUXbiCzj0MOwcCm7XowJcWqNqs18oB.png 往年真题
// https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/WsEF9w5bs7Gknnf3vUV3EMR0WxqleESpYSVxZtkn.png 高频考点
@import "@/uni.scss";

.p-20 {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #ffffff;
  padding: 24rpx;
  gap: 16rpx;
  border-radius: 16rpx;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #ffffff;
  padding: 24rpx;
  gap: 16rpx;
  border-radius: 16rpx;
  height: 100%;
  margin-bottom: 20rpx;
}

.flex {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  align-items: center;
  justify-content: center;
}

.bg-red {
  width: 191.07rpx;
  height: 179.61rpx;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/WmhlbORF2q8A62Ytg1RVac8AYSGPkf7F2pEY6jQP.png")
    no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;

  .text {
    font-family: jiangxizhuokai, jiangxizhuokai;
    font-weight: bold;
    font-size: 27rpx;
    color: #3f75ff;
    text-shadow: 0px 2px 4px #bdcfff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 16rpx;
    width: 95rpx;
    height: 70rpx;
  }
}
</style>