ieplus-app/src/pagesStudy/pages/index/compoentns/index-test.vue

<template>
  <view class="mx-30">
    <view class="flex items-center justify-between">
      <view class="w-fit text-32 text-fore-title font-bold leading-60">模拟测试</view>
    </view>
    <view class="my-44">
      <view class="border border-solid border-primary rounded-15">
        <view class="h-132 bg-[#EBF9FF] flex px-30 text-center rounded-t-15">
          <view class="flex-1 -translate-y-24">
            <view class="w-50 h-50 bg-primary rounded-full text-28 text-white font-bold leading-50 mx-auto">1</view>
            <view class="mt-26 text-24 text-fore-title">定向院校专业</view>
          </view>
          <ie-image src="/pagesStudy/static/image/icon-arrow-multiple.png" customClass="w-30 h-18 -translate-y-8" />
          <view class="flex-1 -translate-y-24">
            <view class="w-50 h-50 bg-primary rounded-full text-28 text-white font-bold leading-50 mx-auto">2</view>
            <view class="mt-26 text-24 text-fore-title">选择考试科目</view>
          </view>
          <ie-image src="/pagesStudy/static/image/icon-arrow-multiple.png" customClass="w-30 h-18 -translate-y-8" />
          <view class="flex-1 -translate-y-24">
            <view class="w-50 h-50 bg-primary rounded-full text-28 text-white font-bold leading-50 mx-auto">3</view>
            <view class="mt-26 text-24 text-fore-title">AI智能出卷</view>
          </view>
        </view>
        <view class="py-60 px-46">
          <view class="h-104 rounded-8 border border-solid border-border mb-40 px-30 flex items-center justify-between"
            @click="handleSelectCollege">
            <view class="flex-1 text-30 text-fore-subtitle">定向</view>
            <view class="flex items-center">
              <text class="mr-8 text-30 text-[#B3B3B3]">{{ directedSchool.universityName || '请选择' }}</text>
              <uv-icon name="arrow-right" size="15px" color="#B3B3B3"></uv-icon>
            </view>
          </view>
          <ie-button type="primary" :disabled="simulationDisabled" @click="handleStartTest">开始考试</ie-button>
        </view>
      </view>

    </view>
  </view>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
import { DirectedSchool, SelectedUniversityMajor, SimulationTestInfo, SimulationTestOptions } from '@/types/study';
import { getSimulationInfo } from '@/api/modules/study';
import { useUserStore } from '@/store/userStore';

const userStore = useUserStore();
const { hasDirectedSchool, directedSchoolList } = toRefs(userStore);
const firstDirectedSchool = computed(() => directedSchoolList.value[0] || {});
const { transferTo } = useTransferPage();

type Props = {
  directedSchool: DirectedSchool;
}
const props = withDefaults(defineProps<Props>(), {
  directedSchool: () => ({}) as DirectedSchool
});

const tab = ref('0');
const simulationInfo = ref<SimulationTestInfo>({} as SimulationTestInfo);
const tabOptions = ref<{ label: string, value: string }[]>([]);
const simulationDisabled = computed(() => {
  return !props.directedSchool.universityId;
});
const handleSelectCollege = () => {
  transferTo('/pagesStudy/pages/targeted-setting/targeted-setting', {
    data: {}
  });
}
const handleStartTest = async () => {
  const notice = firstDirectedSchool.value.notice;
  if (notice) {
    await uni.$ie.showModal({
      title: '提示',
      content: notice,
      showCancel: false,
      confirmText: '知道了'
    });
  } else {
    transferTo('/pagesStudy/pages/simulation-entry/simulation-entry', {
      data: props.directedSchool
    });
  }
}
const loadData = () => {
  getSimulationInfo().then(res => {
    tabOptions.value = res.data.subjects.map(item => ({
      label: item,
      value: item
    }));
    tab.value = tabOptions.value[0].value;
    simulationInfo.value = res.data;
  });
}
onShow(() => {
  loadData();
});
</script>
<style lang="scss" scoped>
.item {
  @apply flex-1 py-28 rounded-15 bg-[#FAFAFA] border border-solid border-[#F5F5F5];

  .item-label {
    @apply mt-12 text-30 text-fore-title font-bold text-center;
  }
}

.test-tip {
  @apply w-fit px-18 py-8 bg-[#FFF5E7] rounded-full text-24 text-fore-title;
}
</style>