dz-app/pages/voluntary/index/index.vue

<template>
    <view class="page-content">
        <mx-nav-bar v-bind="navBinding"/>
        <view ref="container" class="flex-1 min-h-1">
            <swiper :current="currentStep" disable-touch :style="{height: height+'px'}">
                <swiper-item>
                    <score-step/>
                </swiper-item>
                <swiper-item>
                    <batch-step/>
                </swiper-item>
                <swiper-item>
                    <cart-step/>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script setup>
import {ref} from 'vue';
import {useProvideTransfer} from "@/hooks/useTransfer";
import {useProvideVoluntaryStep} from "@/pages/voluntary/hooks/useVoluntaryStepInjection";
import {useProvideVoluntaryData} from "@/hooks/useVoluntaryDataInjection";
import {useProvideVoluntaryForm} from "@/pages/voluntary/hooks/useVoluntaryFormInjection";
import {useProvideVoluntaryCart} from "@/pages/voluntary/hooks/useVoluntaryCartInjection";
import {useProvideVoluntaryAssistant} from "@/pages/voluntary/hooks/useVoluntaryAssistantInjection";
import ScoreStep from "@/pages/voluntary/index/components/score-step.vue";
import {useElementSize} from "@vueuse/core";
import {useProvideUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";
import BatchStep from "@/pages/voluntary/index/components/batch-step.vue";
import CartStep from "@/pages/voluntary/index/components/cart-step.vue";
import {useProvideVoluntaryMajorHighlight} from "@/pages/voluntary/hooks/useVoluntaryMajorHighlightInjection";
import {useProvideVoluntaryHeader} from "@/pages/voluntary/hooks/useVoluntaryHeaderInjection";

useProvideUserSnapshot()
const {transferTo} = useProvideTransfer()
const stepSvc = useProvideVoluntaryStep()
const dataSvc = useProvideVoluntaryData()
const formSvc = useProvideVoluntaryForm()
const cartSvc = useProvideVoluntaryCart()
const highlightSvc = useProvideVoluntaryMajorHighlight()
useProvideVoluntaryHeader()

const {currentStep} = stepSvc
const container = ref(null) // swiper必须指定明确的高度，所以多包了一层
const {height} = useElementSize(container)

const assistantSvc = useProvideVoluntaryAssistant(stepSvc, dataSvc, formSvc, cartSvc, highlightSvc, height)
const {navBinding, onComplete, resetAll} = assistantSvc

onComplete((id) => {
    transferTo('/pages/voluntary/detail/detail', {id})
    currentStep.value = 0
    resetAll()
})
</script>

<style scoped lang="scss">
</style>