ieplus-app/src/pagesOther/pages/university/detail/detail.vue

<template>
    <ie-page>
        <ie-navbar :title="prevData.name" transparent bg-color="#FFFFFF" title-color="black" keep-title-color/>
        <ie-image :src="baseInfo.bannerUrl||baseInfo.logo" custom-class="w-full h-360"/>
        <view class="-mt-60 z-1 rounded-t-3xl p-30 bg-white">
            <college-info :info="baseInfo" :loading="loading"/>
        </view>
        <uv-gap height="10" bg-color="#F6F8FA"/>
        <uv-sticky :offset-top="appStore.isH5?0:baseStickyTop">
            <view :style="{height: tabHeight + 'px'}">
                <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="false">
                    <swiper class="swiper h-full" :current="current" @change="handleChangeSwiper">
                        <swiper-item v-for="(item, index) in tabs" :key="index" class="h-full">
                            <scroll-view scroll-y :style="{height: (tabHeight-44) + 'px'}">
                                <college-profile v-if="item.slot==='profile'&&item.visited" :loading="loading"/>
                                <college-brochure v-if="item.slot==='brochure'&&item.visited"/>
                                <college-exam v-if="item.slot==='exam'&&item.visited"/>
                            </scroll-view>
                            <plan-enroll-list v-if="item.slot==='plan'&&item.visited" mode="plan" :list="planList"/>
                            <plan-enroll-list v-if="item.slot==='enroll'&&item.visited" mode="enroll" :list="enrollList"/>
                        </swiper-item>
                    </swiper>
                </ie-tabs-swiper>
            </view>
        </uv-sticky>
    </ie-page>
</template>
<script lang="ts" setup>

import {useTransferPage} from "@/hooks/useTransferPage";
import {UniversityDetail, University} from "@/types/university";
import {MajorItem} from "@/types/major";
import {universityDetail} from "@/api/modules/university";
import {getMajorTree} from "@/api/modules/major";
import CollegeInfo from "@/pagesOther/pages/university/detail/components/college-info.vue";
import {SwiperTabItem} from "@/types";
import {useNavbar} from "@/hooks/useNavbar";
import {useAppStore} from "@/store/appStore";
import {MAJOR_TREE, UNIVERSITY_DETAIL} from "@/types/injectionSymbols";
import CollegeProfile from "@/pagesOther/pages/university/detail/components/college-profile.vue";
import CollegeBrochure from "@/pagesOther/pages/university/detail/components/college-brochure.vue";
import CollegeExam from "@/pagesOther/pages/university/detail/components/college-exam.vue";
import PlanEnrollList from "@/pagesOther/pages/university/detail/components/plan-enroll-list.vue";

const {prevData} = useTransferPage()
const {baseStickyTop} = useNavbar()
const detail = ref<UniversityDetail>({} as UniversityDetail)
const baseInfo = computed<University>(() => detail.value.baseInfo || {} as University)
const planList = computed(() => detail.value.planHistories || [])
const enrollList = computed(() => detail.value.enrollHistories || [])
const majorTree = ref<MajorItem[]>([])
const loading = ref(true)
const appStore = useAppStore()

const current = ref(0)
const tabHeight = computed(() => appStore.sysInfo.screenHeight - baseStickyTop.value)
const tabs = ref<SwiperTabItem[]>([{
    name: '概况',
    slot: 'profile',
    visited: true
}, {
    name: '简章',
    slot: 'brochure',
    visited: false
}, {
    name: '计划',
    slot: 'plan',
    visited: false
}, {
    name: '录取',
    slot: 'enroll',
    visited: false
}, {
    name: '考试大纲',
    slot: 'exam',
    visited: false
}])

const handleChangeSwiper = function (e: any) {
    current.value = e.detail.current
    tabs.value[current.value].visited = true
}

provide(UNIVERSITY_DETAIL, detail)
provide(MAJOR_TREE, majorTree)
onMounted(() => {
    uni.$ie.showLoading()
    loading.value = true
    universityDetail({code: prevData.value.code})
        .then(res => {
            detail.value = res.data
            return getMajorTree({})
        })
        .then(res => majorTree.value = res.data)
        .finally(() => {
            uni.$ie.hideLoading()
            loading.value = false
        })
})
// 必须手动触发才能保证 navbar.transparent 正常工作
onPageScroll(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .uv-tabs__wrapper__nav__item__text {
    white-space: nowrap;
}
</style>