dz-app/pages/test-center/holland/holland.vue

<template>
    <step-paper type="holland">
        <template #welcome>
            <view class="p-40 leading-6">
                <view class="text-lg text-main indent-50">
                    霍兰德职业兴趣测评（self-Directed Search）是由美国职业指导专家霍兰德（John
                    Holland）根据他本人大量的职业咨询经验及其汁液类型理论编制的测评工具。他认为，个人职业兴趣特性与职业之间有一种内在的对应关系，根据系兴趣不同人格可分为以下六种，每个人的性格都是这六个维度的不同程度的组合。
                </view>
                <uv-image src="/static/test-center/img_huolandeceshi.png" height="auto" width="90vw"
                          mode="widthFix" class="py-60"/>
                <view class="text-content indent-50">
                    职业兴趣测评，定位于高中的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划及大学的选则建议。
                </view>
            </view>
        </template>
        <template #result>
            <interest-result :holl-info="hollandData" :series-data="chartData"/>
        </template>
    </step-paper>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import mxConst from "@/common/mxConst";
import _ from 'lodash'
import StepPaper from "@/pages/test-center/components/step-paper/step-paper.vue";
import {
    questionsFormatter,
    stepFormatter,
    useProvideStepPaper
} from "@/pages/test-center/components/step-paper/useStepPaperInjection";
import {hollDetail, hollSaveHolland, hollSteps, hollStepsQuestions} from "@/api/webApi/career-course";
import {useProvideQuestionService} from "@/components/mx-question/useQuestionInjection";
import {
    useProvideStepPaperNavigationService
} from "@/pages/test-center/components/step-paper/useProvideStepPaperNavigationService";
import InterestResult from "@/pages/test-center/holland/components/interest-result.vue";
import {useTransfer} from "@/hooks/useTransfer";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useCacheStore} from "@/hooks/useCacheStore";

const {prevData} = useTransfer()
const {dispatchCache} = useCacheStore()
const paperService = useProvideStepPaper('霍兰德职业系兴趣测评', v => `[${v}]`)
const {welcomeShow, resultShow, steps, stepQuestionContainer, onBegin, onStepStart, onFinish} = paperService
const questionService = useProvideQuestionService(paperService, 0, false)
useProvideStepPaperNavigationService(paperService, questionService)
useProvidePageScroll()

const hollandData = ref({})
const chartData = ref([])

onBegin(async () => {
    const res = await dispatchCache(hollSteps)
    steps.value = stepFormatter(res.data)
})
onStepStart(async (stepId) => {
    if (stepQuestionContainer.value.has(stepId)) return
    const res = await dispatchCache(hollStepsQuestions, {stepId})
    const useRadio = stepId == 5
    const typeId = useRadio ? mxConst.question.radioTypes[0] : mxConst.question.checkboxTypes[0]
    const options = useRadio ? _.map(_.range(1, 8), id => ({id, label: id + '分'})) : null
    stepQuestionContainer.value.set(stepId, questionsFormatter(res.rows, typeId, options))
})
onFinish(async (commits) => {
    uni.showLoading({
        title: '正在生成报告',
        mask: true
    })
    try {
        const {data: code} = await hollSaveHolland(commits)
        await loadReport(code)
    } finally {
        uni.hideLoading()
    }
})
onMounted(async () => {
    // prevData.value.code = 'ee028df062bba5e6b6aee859100c43d1'
    if (prevData.value.code) {
        welcomeShow.value = false
        resultShow.value = true
        try {
            uni.showLoading()
            await loadReport(prevData.value.code)
        } finally {
            uni.hideLoading()
        }
    }
})

const loadReport = async (code) => {
    const {data} = await hollDetail({code})
    const {scorer, scorea, scorei, scores, scoree, scorec} = data
    hollandData.value = data
    chartData.value = [scorer, scorea, scorei, scores, scoree, scorec]
}
</script>