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

<template>
    <step-paper type="mbti">
        <template #welcome>
            <view class="p-40 leading-6">
                <view class="text-main text-lg indent-50">
                    MBTI（Myers-Briggs Type Indicator）是一种全球广泛应用的性格评估工具，根据荣格心理学理论，将人类性格分为16种类型。通过对
                    内外向（I/E）、感知/直觉（S/N）、思维/情感（T/F）、判断/感知（J/P） 四个维度的分析，MBTI 帮助你深刻认识自己的性格倾向和行为模式。
                </view>
                <view class="text-content mt-60 flex flex-col gap-10">
                    <view class="indent-50">为什么需要 MBTI 测评？</view>
                    <view>
                        <text class="font-bold">发现你的天赋：</text>
                        了解自己的性格特点和潜在优势，找到适合的学习方法和职业领域。
                    </view>
                    <view>
                        <text class="font-bold">规划职业未来：</text>
                        在面对专业选择、实习和就业时，更有方向感和信心。
                    </view>
                    <view>
                        <text class="font-bold">提升沟通能力：</text>
                        更好地理解自己和他人的行为模式，提升人际交往与团队合作能力。
                    </view>
                    <view>
                        <text class="font-bold">避开盲目选择：</text>
                        不再随波逐流，让你的每一步决策都符合自己的性格特点。
                    </view>
                </view>
            </view>
        </template>
        <template #result>
            <character-result :code="mbtiCode" :scores="mbtiScores"/>
        </template>
    </step-paper>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import StepPaper from "@/pages/test-center/components/step-paper/step-paper.vue";
import {useTransfer} from "@/hooks/useTransfer";
import {
    questionsFormatter,
    stepFormatter,
    useProvideStepPaper
} from "@/pages/test-center/components/step-paper/useStepPaperInjection";
import {useProvideQuestionService} from "@/components/mx-question/useQuestionInjection";
import {
    useProvideStepPaperNavigationService
} from "@/pages/test-center/components/step-paper/useProvideStepPaperNavigationService";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {
    mbtiDetail, mbtiSave,
    mbtiSteps,
    mbtiStepsQuestions
} from "@/api/webApi/career-course";
import mxConst from "@/common/mxConst";
import CharacterResult from "@/pages/test-center/mbti/components/character-result.vue";
import {useCacheStore} from "@/hooks/useCacheStore";

const {prevData} = useTransfer()
const {dispatchCache} = useCacheStore()
const paperService = useProvideStepPaper('MBTI职业性格测评')
const {welcomeShow, resultShow, steps, stepQuestionContainer, onBegin, onStepStart, onFinish} = paperService
const questionService = useProvideQuestionService(paperService, 0, false)
useProvideStepPaperNavigationService(paperService, questionService)
useProvidePageScroll()

const mbtiCode = ref('')
const mbtiScores = ref([])

onBegin(async () => {
    const res = await dispatchCache(mbtiSteps)
    steps.value = stepFormatter(res.data)
})
onStepStart(async (stepId) => {
    if (stepQuestionContainer.value.has(stepId)) return
    const res = await dispatchCache(mbtiStepsQuestions, {stepId})
    // 只有单选，选项模式一致
    const typeId = mxConst.question.radioTypes[0]
    const options = (q) => [{id: q.valueA, label: 'A、' + q.optionA}, {id: q.valueB, label: 'B、' + q.optionB}]
    stepQuestionContainer.value.set(stepId, questionsFormatter(res.rows, typeId, options))
})
onFinish(async (commits) => {
    uni.showLoading({
        title: '正在生成报告',
        mask: true
    })
    try {
        const {data: code} = await mbtiSave(commits)
        await loadReport(code)
    } finally {
        uni.hideLoading()
    }
})
onMounted(async () => {
    // prevData.value.code = 'e402b1ed58d9a35110f4bfbcc9f234f9'
    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 mbtiDetail({code})
    const {scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP} = data
    mbtiCode.value = data.ruleCode
    mbtiScores.value = [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
}
</script>

<style lang="scss">

</style>