exam_mp/pages/real/index.vue

<template>
  <Container :title="title">
    <view class="p-20">
      <view class="center"
        ><uni-segmented-control
          :flex="false"
          :current="current"
          :values="list.map((i) => i.name)"
          style-type="text"
          @clickItem="(e) => (current = e.currentIndex)"
      /></view>
      <!-- 执业药师 -->
      <template v-for="(item, index) in list" :key="item.id">
        <view v-if="current === index" class="grid">
          <view v-for="i in item?.children" class="flex">
            <view class="bg-red">
              <view class="text">{{ i.name }}</view>
              <view class="button" @click="clickClass(i)">开始考试</view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </Container>
</template>

<script setup name="real">
import { ref, onMounted } from "vue";
import Container from "../../components/Container/Container.vue";
import { getRoute, router } from "../../utils/router";
import { arrayToTree } from "../../utils";
import { request } from "../../utils/request";

const title = ref("");
const list = ref([]);
const current = ref(0);

const clickClass = (item) => {
  router.push({
    url: "/pages/real/history",
    params: {
      id: item.id,
      title: item.name,
    },
  });
};

onMounted(async () => {
  const params = getRoute().params;
  title.value = params.title;
  const res = await request(
    "api/question_bank/question_reception/chapter/get",
    {},
    "POST"
  );
  list.value = arrayToTree({
    list: res.data,
  });
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.title {
  font-family: "PingFang SC, PingFang SC";
  font-weight: 700;
  font-size: 32rpx;
  color: #000000;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  height: 100%;
}

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

.bg-red {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
  width: 214rpx;
  height: 282rpx;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/mrgkegM1h3pgz5taDRfQv5r1DX4DfONhIJtgJXEv.png");
  .text {
    margin-top: 32rpx;
    margin-left: 54rpx;
    margin-bottom: 126rpx;
  }
  .button {
    padding: 10rpx 0;
    width: 152rpx;
    border-radius: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    margin: 0 auto;
  }
  .btn-plain {
    color: $primary;
    border: 1rpx solid #3f75ff;
    background: transparent;
    border-radius: 24rpx;
  }
}
</style>