dz-app/pages/major-library/detail/components/base-info.vue

<template>
    <view class="tabs-swiper-content pb-40">
        <view class="p-30">
            <view class="p-30 bg-white mx-card">
                <view class="fx-row fx-bet-sta mb-20">
                    <view class="text-tips text-xs">
                        <view v-for="p in majorPaths" :key="p">{{ p }}</view>
                    </view>
                    <major-item-collect :code="major.code" :model="detail"/>
                </view>
                <uv-text type="content" size="13" :text="detail.introduction"/>
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="核心课程" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">
                {{ detail.mainCourse || '暂无介绍' }}
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="就业方向" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">
                {{ detail.jobDirection || '暂无介绍' }}
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="职业能力" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">
                {{ detail.loreAndAbility || '暂无介绍' }}
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="资格证书" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">
                {{ detail.qualification || '暂无介绍' }}
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="衔接中职专业" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">
                {{ detail.zhongzhiMajors || '暂无介绍' }}
            </view>
        </view>
        <view class="p-30 bg-white">
            <index-title-wrap title="衔接本科专业" class="mb-10"/>
            <view class="bg-slate-100 p-30 rounded-lg text-xs text-content">{{ detail.benMajors || '暂无介绍' }}</view>
        </view>
        <view class="mt-30 bg-white">
            <view class="p-30">
                <uv-text type="main" bold size="18" text="相关专业"/>
            </view>
            <uv-cell v-for="m in relatedMajors" :key="m.code" :title="m.name" is-link @click="goMajorDetail(m)"/>
        </view>
    </view>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import _ from 'lodash';
import {createPropDefine} from "@/utils";
import {findTreePath} from "@/utils/tree-helper";
import {majorOverview} from "@/api/webApi/collegemajor";
import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import {useCacheStore} from "@/hooks/useCacheStore";
import {cacheActions} from "@/hooks/defineCacheActions";
import MajorItemCollect from "@/pages/major-library/detail/components/major-item-collect.vue";
import {useTransfer} from "@/hooks/useTransfer";

const props = defineProps({
    major: createPropDefine({}, Object)
})

const {dispatchCache} = useCacheStore()
const {transferTo} = useTransfer()
const majorTree = ref([])
const detail = ref({})
const paths = computed(() => findTreePath(majorTree.value, m => m.code == props.major.code) || [])
const majorPaths = computed(() => paths.value.map((m, idx) => Array(idx).fill('➣ ').join('') + m.name))
const relatedMajors = computed(() => props.major.parent.children.filter(m => m != props.major))

const goMajorDetail = (major) => {
    transferTo('/pages/major-library/detail/detail', ['code'], major)
}

onMounted(async () => {
    majorTree.value = await dispatchCache(cacheActions.getMajorTree)
})
onMounted(async () => {
    const {code} = props.major
    const res = await majorOverview({code})
    detail.value = res.data
})
</script>

<style scoped>

</style>