dz-app/pages/personal-center/bind-card/bind-card.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="step==0" #suffix>
            <view class="border-0 !border-b border-solid border-primary">
                <uv-text type="primary" suffix-icon="shopping-cart" align="center"
                         icon-style="font-size: 20px; color:var(--primary-color);"
                         text="还没有卡？去购卡" @click="showBuyPopup"/>
            </view>
        </template>
    </mx-submit-layout>
</template>

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

const {relaunch} = useTransfer()
const form = ref(null)
const {loading, buttonText, step, completed} = useProvideActivateSteps()

const barOptions = {
    title: '绑定会员卡',
    leftClickBlock: async () => {
        // 因为用户进入这个绑卡页是有预期的，
        // 所以这里的逻辑与bind-profile页面是不一样的
        if (completed.value) {
            relaunch()
            return new Promise(fnPlaceholder)
        }
    }
}

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

const showBuyPopup = () => {
    const popup = useSingletonBuyVip()
    popup.open()
}
</script>

<style lang="scss">

</style>