dz-app/pages/test-center/components/step-paper/step-paper.vue

<template>
    <uv-transition v-if="welcomeShow" :show="welcomeShow">
        <view class="page-content h-screen">
            <mx-nav-bar :title="title"/>
            <view class="flex-1 fx-col">
                <view class="flex-1 tabs-swiper-content">
                    <slot name="welcome"/>
                </view>
                <view class="p-40 fx-col gap-20">
                    <uv-button v-bind="btnBinding" text="开始测评" @click="handleStart"/>
                    <uv-button v-bind="btnBinding" plain text="测评结果" @click="handleHistory"/>
                </view>
            </view>
        </view>
    </uv-transition>
    <mx-paper v-if="!welcomeShow&&!resultShow">
        <template #top>
            <view>
                <mx-steps :step="step" :steps="steps" key-name="name" class="mt-20"/>
                <view class="p-30 text-sm text-content">{{ currentStep.title }}</view>
            </view>
        </template>
        <template #bottom>
            <mx-paper-progress/>
            <step-paper-navigator/>
        </template>
    </mx-paper>
    <uv-transition v-if="resultShow" :show="resultShow">
        <view class="page-content">
            <mx-nav-bar :title="title"/>
            <slot name="result"/>
        </view>
    </uv-transition>
</template>

<script setup>
import {createPropDefine} from "@/utils";
import {useTransfer} from "@/hooks/useTransfer";
import {useInjectStepPaper} from "@/pages/test-center/components/step-paper/useStepPaperInjection";
import StepPaperNavigator from "@/pages/test-center/components/step-paper/step-paper-navigator.vue";
import MxPaperProgress from "@/components/mx-paper/components/mx-paper-progress.vue";

// 目前holland与mbti是同一套行为
const props = defineProps({
    history: createPropDefine('/pages/test-center/list/list'),
    type: createPropDefine(''),
    // transferTo中创建的URL中包含data参数，该参数会自动进入页面的props，
    // 这里申明一下防止多结点警告，并不需要使用它，useTransfer中包含使用方法。
    data: createPropDefine({}, [Object, Array, String])
})

const {transferTo} = useTransfer()
const {
    title, welcomeShow, resultShow,
    step, steps, currentStep
} = useInjectStepPaper()

const btnBinding = {
    size: 'large',
    type: 'primary',
    shape: 'circle',
    customStyle: {height: '44px'}
}

const handleStart = () => {
    // welcomeShow 会驱动测评的数据变更
    welcomeShow.value = false
}

const handleHistory = () => {
    const {type} = props
    transferTo(props.history, {type})
}
</script>

<style scoped>

</style>