dz-app/pages/vocation-library/detail/detail.vue

<template>
    <view class="page-content">
        <mx-nav-bar :title="overview.name"/>
        <mx-tabs-swiper v-model="currentTab" :tabs="tabs" border :preload="false">
            <template #职业介绍>
                <vocation-overview/>
            </template>
            <template #就业岗位>
                <vocation-posts v-if="posts.length"/>
                <uv-empty v-else margin-top="100"/>
            </template>
        </mx-tabs-swiper>
    </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useTransfer} from "@/hooks/useTransfer";
import {vocationalOverview, vocationalPosts} from "@/api/webApi/collegemajor";
import VocationOverview from "@/pages/vocation-library/detail/components/vocation-overview.vue";
import VocationPosts from "@/pages/vocation-library/detail/components/vocation-posts.vue";
import {useProvideVocationDetailService} from "@/pages/vocation-library/detail/components/useVocationDetailInjection";

const {prevData} = useTransfer()
const overview = ref({})
const posts = ref([])
const tabs = ref([{name: '职业介绍'}, {name: '就业岗位'}])
const currentTab = ref(0)
const currentPostName = ref('')
const scrollTop = ref(0)
useProvideVocationDetailService(overview, posts, currentTab, currentPostName, scrollTop)

onMounted(async () => {
    const res = await vocationalOverview({code: prevData.value.code})
    overview.value = res.data
})
onMounted(async () => {
    const res = await vocationalPosts({code: prevData.value.code})
    posts.value = res.data
})
</script>

<style lang="scss">

</style>