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

<template>
    <view class="fx-col tabs-swiper-content pb-40">
        <view class="mt-20 p-30 bg-white">
            <uv-text size="18" bold :text="overview.name"/>
            <view class="text-sm text-content mt-20" v-html="overview.summary"></view>
            <view class="mt-10 p-30 text-sm text-content rounded-lg bg-slate-100" v-html="overview.description"></view>
        </view>
        <view class="mt-20 bg-white">
            <uv-cell-group title="1" :border="false">
                <template #title>
                    <view class="text-lg">
                        相关岗位
                        <text class="text-error">{{ overview.postJobs?.length }}</text>
                        个
                    </view>
                </template>
                <uv-cell v-for="job in overview.postJobs" class="text-main" is-link :title="job.name"
                         @click="goPostInfo(job)">
                    <template #value>
                        <text class="text-xs text-light">
                            {{ `${job.salaryMin}-${job.salaryMax}/月` }}
                        </text>
                    </template>
                </uv-cell>
            </uv-cell-group>
        </view>
        <view class="mt-20 bg-white">
            <uv-cell-group title="1" :border="false">
                <template #title>
                    <view class="text-lg">
                        相关职业
                        <text class="text-error">{{ overview.jobs?.length }}</text>
                        个
                    </view>
                </template>
                <uv-cell v-for="vocation in overview.jobs" class="text-main" is-link :title="vocation.name"
                         @click="goVocation(vocation)">
                </uv-cell>
            </uv-cell-group>
        </view>
        <view class="mt-20 bg-white">
            <uv-cell-group title="1" :border="false">
                <template #title>
                    <view class="text-lg">
                        相关专业
                        <text class="text-error">{{ overview.postMajors?.length }}</text>
                        个
                    </view>
                </template>
                <uv-cell v-for="major in overview.postMajors" class="text-main" is-link :title="major.name"
                         @click="goMajor(major)">
                    <template #label>
                        <view class="mt-10 grid grid-cols-3">
                            <view class="fx-col fx-cen-cen font-light">
                                <view class="text-xs text-content font-bold">{{ major.code }}</view>
                                <view class="text-4xs text-tips">国标代码</view>
                            </view>
                            <view class="fx-col fx-cen-cen font-light">
                                <view class="text-xs text-content font-bold">{{ major.learnYear }}</view>
                                <view class="text-4xs text-tips">学制</view>
                            </view>
                            <view class="fx-col fx-cen-cen font-light">
                                <view class="text-xs text-content font-bold">
                                    {{ `${major.maleRatio}/${major.femaleRatio}` }}
                                </view>
                                <view class="text-4xs text-tips">男女比例</view>
                            </view>
                        </view>
                    </template>
                </uv-cell>
            </uv-cell-group>
        </view>
    </view>
</template>

<script setup>
import {useInjectVocationDetailService} from "@/pages/vocation-library/detail/components/useVocationDetailInjection";
import {useTransfer} from "@/hooks/useTransfer";

const {overview, currentPostName, currentTab, scrollTop} = useInjectVocationDetailService()
const {transferTo} = useTransfer()

const goPostInfo = async (post) => {
    currentTab.value = 1
    currentPostName.value = post.name
    scrollTop.value = 0
}
const goVocation = (vocation) => {
    transferTo('/pages/vocation-library/detail/detail', ['code'], vocation)
}
const goMajor = (major) => {
    transferTo('/pages/major-library/detail/detail', ['code', 'name'], major)
}
</script>

<style scoped>

</style>