md-h5/components/My-shade/My-shade.vue

<template>
    <view v-if="show" class="main" @click="handleClick">
        <view class="head" @click.stop>
            <view class="text" @click.stop>
                当前页面需要登录才能继续使用
            </view>
            <My-button @onClick="toLogin" :customStyle="{
                width: '200rpx',
                height: '60rpx',
                backgroundColor: '#007AFF',
                color: '#fff',
                borderRadius: '30rpx',
                fontSize: '24rpx'
            }" text="立即登录" />
        </view>
    </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, getCurrentInstance } from 'vue'
const { $Http } = getCurrentInstance().proxy;

let show = ref(false);
onShow(() => {
    setTimeout(() => {
        show.value = !$Http.isLoad;
        if (!$Http.isLoad) setTimeout(() => show.value = !$Http.isLoad, 800);
    });
});

function handleClick() {
    uni.showModal({
        title: '提示',
        content: '当前页面需要登录才能继续使用',
        confirmText: '立即登录',
        success: ({ confirm }) => {
            if (confirm) toLogin()
        },

    })
}

function toLogin() {
    uni.navigateTo({
        url: '/pages/login/login'
    });
}
</script>

<style lang="scss" scoped>
.main {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    z-index: 2;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        background: rgba($color: #000000, $alpha: .5);
        padding: 20rpx;
        box-sizing: border-box;
        margin-top: env(safe-area-inset-top)px;

        .text {
            color: #fff;
            font-size: 24rpx;
        }
    }
}
</style>