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

<template>
    <view class="page-content h-screen">
        <mx-nav-bar :title="baseInfo.name"/>
        <college-item :item="baseInfo" hidden-star hidden-name :address-lines="0" @tag="handleDoublePopup">
            <template #right>
                <college-item-collect :college="baseInfo"/>
            </template>
        </college-item>
        <college-detail-summary :college="baseInfo" class="pb-20" @star="handleStarPopup"/>
        <uv-gap height="10"/>
        <mx-tabs-swiper :tabs="tabs" :tab-options="tabOptions" border class="bg-white">
            <template #概况>
                <view v-if="introduction" class="p-30 text-content text-sm tabs-swiper-content">
                    <uv-parse :content="introduction"/>
                </view>
                <uv-empty v-else margin-top="100"/>
            </template>
            <template #简章>
                <view v-if="enrollRuleBrochures.length" class="tabs-swiper-content">
                    <uv-cell-group :border="false">
                        <college-detail-brochure-cell v-for="b in enrollRuleBrochures" :item="b" :detail="detail"/>
                    </uv-cell-group>
                </view>
                <uv-empty v-else margin-top="100"/>
            </template>
            <template #考试大纲>
                <view v-if="enrollTimeBrochures.length" class="tabs-swiper-content">
                    <uv-cell-group :border="false">
                        <college-detail-brochure-cell v-for="b in enrollTimeBrochures" :item="b" :detail="detail"/>
                    </uv-cell-group>
                </view>
                <uv-empty v-else margin-top="100"/>
            </template>
            <template #计划>
                <plan-enroll-list v-if="planHistories.length" :list="planHistories" mode="plan"
                                  @rule="handleRulePopup"/>
                <uv-empty v-else margin-top="100"/>
            </template>
            <template #录取>
                <plan-enroll-list v-if="enrollHistories.length" :list="enrollHistories" mode="enroll"
                                  @rule="handleRulePopup"/>
                <uv-empty v-else margin-top="100"/>
            </template>
        </mx-tabs-swiper>
        <mx-popup-template ref="popup" v-bind="popupBinding"/>
    </view>
</template>

<script setup>
import {ref, computed, onMounted, watch} from 'vue';
import mxConfig from "@/common/mxConfig";
import mxConst from "@/common/mxConst";
import {object} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {useTransfer} from "@/hooks/useTransfer";
import {useUserStore} from "@/hooks/useUserStore";
import {useCacheStore} from "@/hooks/useCacheStore";
import {universityDetail} from "@/api/webApi/collegemajor";
import CollegeItem from "@/pages/college-library/components/college-item.vue";
import CollegeItemCollect from "@/pages/college-library/components/college-item-collect.vue";
import CollegeDetailSummary from "@/pages/college-library/components/college-detail-summary.vue";
import CollegeDetailBrochureCell from "@/pages/college-library/components/college-detail-brochureCell.vue";
import PlanEnrollList from "@/pages/college-library/components/plan-enroll-list.vue";

const {prevData} = useTransfer()
const {isCultural} = useUserStore()
const {dispatchCache} = useCacheStore()

const detail = ref({})
const baseInfo = computed(() => detail.value.baseInfo || {})
const planHistories = computed(() => detail.value.planHistories || [])
const enrollHistories = computed(() => detail.value.enrollHistories || [])

const tabs = ref([]) // NOTE: tabs申明为响应式的情况下，tabs切换才能保证缓存平滑响应，否则内部.show=true时不会触发重新渲染
const tabOptions = {
    scrollable: false,
    inactiveStyle: {color: 'var(--main-color)', fontWeight: 500},
    activeStyle: {color: 'var(--primary-color)', fontWeight: 500}
}
watch(isCultural, (val) => {
    tabs.value = val
        ? [{name: '概况'}, {name: '简章'}, {name: '计划'}, {name: '录取'}]
        : [{name: '概况'}, {name: '简章'}, {name: '计划'}, {name: '录取'}, {name: '考试大纲'}]
}, {immediate: true})

const enumBrochureType = mxConst.enum.brochureType
const enrollBrochures = computed(() => detail.value?.enrollBrochures || [])
const renderedTypes = computed(() => [enumBrochureType.introduction, enumBrochureType.enrollRule, enumBrochureType.examTime])
const enrollIntroBrochure = computed(() => enrollBrochures.value.find(b => b.type == enumBrochureType.introduction))
const enrollRuleBrochures = computed(() => enrollBrochures.value.filter(b => b.type == enumBrochureType.enrollRule))
const enrollTimeBrochures = computed(() => enrollBrochures.value.filter(b => b.type == enumBrochureType.examTime))
const enrollOtherBrochures = computed(() => enrollBrochures.value.filter(b => !renderedTypes.value.includes(b.type)))
const introduction = computed(() => enrollIntroBrochure.value?.content || baseInfo.value.introduction)

const popup = ref(null)
const popupType = ref('')
const popupConfig = mxConfig.collegeDetailPopups
const popupBinding = computed(() => {
    let cfg = popupConfig[popupType.value]
    if (!cfg && object(popupType.value)) cfg = popupType.value
    return {
        ...cfg,
        left: '',
        right: '我知道了',
        onRight: () => popup.value.close()
    }
})

const handleDoublePopup = () => {
    popupType.value = 'double'
    popup.value.open()
}
const handleStarPopup = () => {
    popupType.value = 'star'
    popup.value.open()
}
const handleMajorPopup = () => {
    popupType.value = 'major'
    popup.value.open()
}
const handleRulePopup = (rule) => {
    popupType.value = {title: '录取规则', content: rule || '暂无录取规则'}
    popup.value.open()
}

onMounted(async () => {
    const payload = {code: prevData.value.code}
    const res = await dispatchCache(universityDetail, payload)
    detail.value = res.data
})
</script>

<style lang="scss">

</style>