dz-app/pages/login/bind-profile.vue

<template>
    <mx-submit-layout :button-text="buttonText" :bar-options="barOptions" :loading="loading" @submit="handleSubmit">
        <template #prepend>
            <activate-steps/>
        </template>
        <activate-steps-form ref="form"/>
        <template v-if="!completed" #suffix>
            <text class="text-primary underline" @click="relaunch">跳过绑卡，回到首页</text>
        </template>
    </mx-submit-layout>
</template>

<script setup>
import {ref} from 'vue'
import {useTransfer} from "@/hooks/useTransfer";
import {confirmAsync, fnPlaceholder} from "@/utils/uni-helper";
import {useProvideActivateSteps} from "@/pages/login/components/hooks/useActivateStepsInjection";
import ActivateSteps from "@/pages/login/components/activate-steps.vue";
import ActivateStepsForm from "@/pages/login/components/activate-steps-form.vue";

// data
const {relaunch} = useTransfer()
const form = ref(null)
const {loading, buttonText, completed} = useProvideActivateSteps()
const barOptions = {
    title: '绑定会员卡',
    leftClickBlock: async () => {
        if (!completed.value) await confirmAsync('退出绑卡，回到首页')
        relaunch()
        return new Promise(fnPlaceholder)
    }
}

// methods
const handleSubmit = () => {
    form.value.next()
}
</script>

<style scoped>

</style>