dz-app/pages/login/components/activate-steps-form.vue

<template>
    <uv-form ref="form" :model="model" :rules="rules">
        <template v-if="step==0">
            <card-pwd-fields/>
        </template>
        <template v-else-if="step==1">
            <province-field/>
            <gaokao-year-field/>
            <type-major-fields/>
            <school-info-fields/>
        </template>
        <template v-else>
            <view class="fx-1 fx-col items-center">
                <uv-icon name="checkmark-circle" color="success" size="110" class="my-40"/>
                <view class="text-primary mb-100">绑卡成功!</view>
            </view>
        </template>
    </uv-form>
</template>

<script setup>
import {ref} from 'vue'
import {useUserStore} from "@/hooks/useUserStore";
import {useTransfer} from "@/hooks/useTransfer";
import {bindCard} from "@/api/login";
import {getFrontLocationsList} from "@/api/webApi/resources";
import {createActivateCardModelRules} from "@/pages/login/components/hooks/defineFormModels";
import {useInjectActivateSteps} from "@/pages/login/components/hooks/useActivateStepsInjection";
import {useProvideFormRef} from "@/pages/login/components/hooks/useFormRefInjection";
import {useProvideFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import CardPwdFields from "@/pages/login/components/register-fields/card-pwd-fields.vue";
import {useProvideProvince} from "@/pages/login/components/hooks/useProvinceInjection";
import ProvinceField from "@/pages/login/components/register-fields/province-field.vue";
import GaokaoYearField from "@/pages/login/components/register-fields/gaokao-year-field.vue";
import TypeMajorFields from "@/pages/login/components/register-fields/type-major-fields.vue";
import SchoolInfoFields from "@/pages/login/components/register-fields/school-info-fields.vue";

const form = ref(null)
const provinceOptions = ref([])
const {relaunch} = useTransfer()
const {GetInfo} = useUserStore()
const {step, loading} = useInjectActivateSteps()
const [m, r, modelToValidate, modelToBindCard] = createActivateCardModelRules()
const [model, rules] = useProvideFormData(m, r)
useProvideFormRef(form)
useProvideProvince(provinceOptions)

// methods
const next = async () => {
    await form.value.validate()
    if (loading.value) return
    loading.value = true
    try {
        switch (step.value) {
            case 0:
                await handleValidateCard()
                break
            case 1:
                await handleBindCard()
                break
            case 2:
                relaunch()
                break
            default:
                console.warn('Unexpected step of ' + step.value)
        }
    } finally {
        loading.value = false
    }
}

const handleValidateCard = async () => {
    const commit = modelToValidate()
    const resLoc = await getFrontLocationsList({level: 1, ...commit})
    provinceOptions.value = resLoc.data.map(p => p.sname)

    // card valid, go next step.
    step.value = 1
}

const handleBindCard = async () => {
    const commit = modelToBindCard()
    await bindCard(commit)
    await GetInfo()

    // card bind success, go next step
    step.value = 2
}

// expose
defineExpose({next})
</script>

<style scoped>

</style>