hongze_yb_en/src/views/verification/transitionPage.vue

<script setup>
    import { useRouter} from 'vue-router';
    import {onUnmounted, ref} from 'vue'
    const router = useRouter()
    /**
     * register - 注册成功
     * bindPhone - 绑定手机号
     */
    const transitionType=ref()
    
    let timer=null
    const time = ref(5)
    const bindPhonePageGo=()=>{
        router.replace('/bindPhoneNo')
    }

    const ybPageGo=()=>{
        let redirectPath=sessionStorage.getItem('login_redirect') || '/'
        sessionStorage.removeItem('login_redirect')
        router.replace(redirectPath)
    }

    onUnmounted(()=>{
        clearInterval(timer)
    })

    // -------------------created

    transitionType.value = sessionStorage.getItem('transitionPageMessage')
    // console.log(transitionType.value);
    // 判断是否是正常操作后的跳转，而不是人工在地址栏做的跳转
    if(!transitionType.value){
        router.replace('/')
    }else{
        if(transitionType.value =='bindPhone'){
            // 设置定时器
            timer=setInterval(()=>{
                if(time.value==1){
                    ybPageGo()
                    return 
                }
                time.value--
            },1000)
        }
    }
    // 清除
    sessionStorage.removeItem('transitionPageMessage')
    
</script>

<template>
    <div class="hint-box" v-show="transitionType">
        <div class="fixed-header">
            <span @click="$router.replace('/')" style="cursor: pointer;">
            HORIZON INSIGHTS
            </span>
        </div>
        <img src="@/assets/icons/transition-success.svg" class="success-svg" />
        <p v-if="transitionType=='register'" class="transitioin-text">You have successfully registered</p>
        <p v-else-if="transitionType=='bindPhone'" class="transitioin-text">Registration succeeded. You will be automatically redirected in {{ time }} seconds.</p>
        <div class="register-buttons" v-if="transitionType=='register'" >
            <el-button type="primary" class="transitioin-button" @click="bindPhonePageGo" 
            style="background-color: #1856A7;">Add a phone number to your account</el-button>
            <el-button class="transitioin-button" @click="ybPageGo" style="margin-left: 0;margin-top: 20px;">Skip</el-button>
        </div>
        <el-button type="primary" class="transitioin-button" @click="ybPageGo" 
        v-else-if="transitionType=='bindPhone'" style="background-color: #1856A7;">Got it</el-button>
    </div>
</template>
  
<style lang="scss" scoped>
    .hint-box{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 120px 30px;
        .success-svg{
            height: 60px;
        }
        .transitioin-text{
            margin: 20px 0 40px;
            font-weight: 400;
            font-size: 18px;
            line-height: 25px;
            color: #333333;
        }
        .register-buttons{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .transitioin-button{
            width: 360px;
            height: 40px;
        }
    }
    @media screen and (max-width: 768px) {
        .hint-box{
            padding: 100px 30px;
            .success-svg{
                height: 100px;
            }
            .transitioin-text{
                font-size: 15px;
            }
            .transitioin-button{
                width: 100%;
            }
        }

    }
</style>