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

<template>
  <ie-page ref="iePageRef" bg-color="white">
    <ie-navbar>
      <template #headerLeft>
        <view class="flex items-center">
          <uv-icon name="arrow-left" size="20px" color="#333"></uv-icon>
          <ie-image :is-oss="true" src="/study-title.png" custom-class="ml-8 w-148 h-36" mode="heightFix" />
          <view class="w-6 h-6 rounded-2 bg-black mx-12"></view>
          <view>
            <ie-dict :dict-name="EnumDictName.EXAM_TYPE" :dict-value="userStore.getExamType || '--'" />
          </view>
        </view>
      </template>
    </ie-navbar>
    <view class="mx-30 mt-20 flex items-center bg-[#E3F4FA] rounded-8 py-16 px-16 gap-x-40">
      <view class="text-24 text-[#34B0D7] flex-1">
        <text v-if="!hasDirectedSchool">你还未开启定向学习，快来设置吧！</text>
        <view v-else class="flex items-center">
          <text class="flex-shrink-0">定向：</text>
          <text class="min-w-1 ellipsis-1">{{ firstDirectedSchool.universityName }}</text>
          <uv-icon name="arrow-right" size="14" color="#0DACF5"></uv-icon>
          <text class="flex-shrink-0">{{ firstDirectedSchool.majorName }}</text>
        </view>
      </view>
      <view class="text-24 text-white bg-gradient-to-r from-[#26C5F7] to-[#0DACF5] rounded-full px-18 py-6"
        @click="handleSetting">{{ hasDirectedSchool ? '已开启' : '去开启' }}</view>
    </view>
    <view class="mx-30 mt-20">
      <view class="flex items-center gap-x-28">
        <view class="bg-gradient-to-r from-[#0088FE] to-[#31A0FC] flex-1 rounded-15 relative overflow-hidden">
          <!-- <view class="h-70 z-1 relative"></view> -->
          <view class="mt-30 p-30 z-1 relative">
            <view class="text-30 text-white font-bold">全量刷题</view>
            <view class="mt-8 text-24 text-white">全面刷题，高效备考</view>
            <view class="mt-32 w-200 h-56 flex items-center justify-center rounded-full text-26 text-primary bg-white"
              @click="handlePracticeAll">
              开始练习
            </view>
          </view>
          <ie-image :is-oss="true" src="/study-bg13.png" custom-class="absolute bottom-0 left-0 w-full h-full z-0"
            mode="aspectFill" />
        </view>
        <view class="bg-gradient-to-r from-[#32B5FD] to-[#79DCFD] flex-1 rounded-15 relative overflow-hidden">
          <view class="mt-30 p-30 z-1 relative">
            <view class="text-30 text-white font-bold">定向刷题</view>
            <view class="mt-8 text-24 text-white">紧扣考纲，精准练习</view>
            <view class="mt-32 w-200 h-56 flex items-center justify-center rounded-full text-26 text-primary bg-white"
              @click="handlePracticeDirected">
              开始练习
            </view>
          </view>
          <ie-image :is-oss="true" src="/study-bg13.png" custom-class="absolute bottom-0 left-0 w-full h-full z-0"
            mode="aspectFill" />
        </view>
      </view>
    </view>
    <index-menu />
    <index-banner />
    <block v-if="hasTestAndRecord">
      <view class="h-16 bg-back my-32"></view>
      <index-test :directed-school="firstDirectedSchool" />
      <index-exam-record />
    </block>
  </ie-page>
</template>

<script lang="ts" setup>
import IndexMenu from './compoentns/index-menu.vue';
import IndexBanner from './compoentns/index-banner.vue';
import IndexTest from './compoentns/index-test.vue';
import IndexExamRecord from './compoentns/index-exam-record.vue';
import { EnumDictName, EnumExamType } from '@/common/enum';
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';
import { getDirectedSchool } from '@/api/modules/study';
import { DirectedSchool } from '@/types/study';
import IePage from '@/components/ie-page/ie-page.vue';

const { transferTo } = useTransferPage();
const userStore = useUserStore();
const hasTestAndRecord = computed(() => userStore.getExamType !== EnumExamType.VHS);
// 通过 ref 获取 ie-page 组件实例
const iePageRef = ref<InstanceType<typeof IePage>>();

const directedSchoolData = ref<DirectedSchool[]>([]);
const firstDirectedSchool = computed(() => directedSchoolData.value[0] || {});
const hasDirectedSchool = computed(() => directedSchoolData.value.length > 0);

const handlePracticeAll = () => {
  transferTo('/pagesStudy/pages/knowledge-practice/knowledge-practice', {
    data: {
      directed: false
    }
  });
}
const handlePracticeDirected = async () => {
  if (!hasDirectedSchool.value) {
    uni.$ie.showToast('请先选择定向院校');
    return;
  }
  transferTo('/pagesStudy/pages/knowledge-practice/knowledge-practice', {
    data: {
      directed: true
    }
  });
}
const handleSetting = async () => {
  if (hasDirectedSchool.value) {
    const notice = firstDirectedSchool.value.notice;
    if (notice) {
      await uni.$ie.showModal({
        title: '提示',
        content: notice,
        showCancel: false,
        confirmText: '知道了'
      });
    }
  }
  transferTo('/pagesStudy/pages/targeted-setting/targeted-setting');
}
const loadData = async () => {
  const res = await getDirectedSchool();
  if (res.data) {
    directedSchoolData.value = res.data;
  }
}
onShow(() => {
  loadData();
});
</script>

<style></style>