dz-app/pages/ie/entry-ai-detail/entry-ai-detail.vue

<template>
    <view class="page-content h-screen">
        <mx-nav-bar :title="prevData.name" border/>
        <scroll-view scroll-y class="list-container">
            <view class="p-20 fx-col gap-20">
                <voluntary-card :data="prevData"/>
                <voluntary-major v-for="u in prevData.details" :data="u" hide-btn default-expand disable-summary/>
            </view>
        </scroll-view>
        <view class="h-[60px] fx-row fx-cen-cen px-30 bg-white mx-shadow-up z-10">
            <uv-button v-bind="gradientBtnBinding" text="生成志愿报告" @click="goReport"/>
        </view>
    </view>
</template>

<script>
import {computed} from 'vue';
import {getVoluntary} from "@/api/webApi/ie-voluntary";
import {universityDetail} from "@/api/webApi/collegemajor";
import VoluntaryCard from "../components/card/voluntary-card.vue";
import VoluntaryMajor from "../components/card/voluntary-major.vue";
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import {useTransfer} from "@/hooks/useTransfer";
import {useProvideMajorTreeService} from "@/pages/ie/hooks/useMajorTreeInjection";
import {useCacheStore} from "@/hooks/useCacheStore";
import {useProvideUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";

export default {
    mixins: [AIFormCommonStyle],
    components: {VoluntaryCard, VoluntaryMajor},
    setup() {
        const {usingCacheTransfer, prevData, transferTo} = useTransfer()
        const {dispatchCache} = useCacheStore()
        const snapshot = computed(() => prevData.value?.userSnapshot)
        useProvideMajorTreeService()
        useProvideUserSnapshot(snapshot)

        return {
            usingCacheTransfer,
            prevData,
            transferTo,
            dispatchCache
        }
    },
    async mounted() {
        if (!this.usingCacheTransfer && this.prevData.id) {
            // this scene is from ai-form page
            // reload voluntary then assign to `prevData`, make it the same as cache mode from list-page
            const {data} = await getVoluntary(this.prevData)
            // noinspection ES6MissingAwait
            const tasks = data.details?.map(async u => {
                // fill university info by need.
                if (!u.university?.name && u.university?.code) {
                    const payload = {code: u.university.code}
                    const {data} = await this.dispatchCache(universityDetail, payload)
                    u.university = data.baseInfo
                }
            })
            // 因为vue3不会自动深度监听，所以要确保university在prevData之前赋值
            await Promise.all(tasks)
            this.prevData = data
        }
    },
    methods: {
        goReport() {
            const path = '/pages/ie/entry-ai-report/entry-ai-report'
            this.transferTo(path, this.prevData, null, true)
        }
    }
}
</script>

<style lang="scss" scoped>
.list-container {
    height: calc(100vh - 44px - 60px - var(--window-bottom));
}
</style>