exam_mp/pages/real/index.vue

<template>
  <Container :title="title">
    <view class="p-20">
      <uni-segmented-control
        :flex="false"
        :current="current"
        :values="list.map((i) => i.name)"
        style-type="text"
        @clickItem="(e) => (current = e.currentIndex)"
      />
      <!-- 执业药师 -->
      <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" @click="clickClass(i)">
            <view
              class="bg-red"
              :style="{
                background: '#d9d9d9',
              }"
              >{{ i.name }}</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">
.title {
  font-family: "PingFang SC, PingFang SC";
  font-weight: 700;
  font-size: 32rpx;
  color: #000000;
}

.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: 20rpx;
  align-items: center;
  justify-content: center;
}

.bg-red {
  width: 146rpx;
  height: 198rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>