You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
2.5 KiB
134 lines
2.5 KiB
<template>
|
|
<view class="login-prompt" v-if="showPrompt">
|
|
<view class="mask" :class="{ 'mask-show': showAnimation }" @click="hide"></view>
|
|
<view class="prompt-content" :class="{ 'slide-up': showAnimation }">
|
|
<text class="prompt-title">登录以获得更好的体验</text>
|
|
<button class="login-btn" @click="goLogin">登录(推荐)</button>
|
|
<button class="visitor-btn" @click="continueAsVisitor">以访客身份继续</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick } from 'vue';
|
|
|
|
// 定义响应式数据
|
|
const showPrompt = ref(false);
|
|
const showAnimation = ref(false);
|
|
|
|
// 显示弹窗
|
|
const show = () => {
|
|
showPrompt.value = true;
|
|
// 在下一帧触发动画
|
|
nextTick(() => {
|
|
setTimeout(() => {
|
|
showAnimation.value = true;
|
|
}, 10);
|
|
});
|
|
};
|
|
|
|
// 隐藏弹窗
|
|
const hide = () => {
|
|
showAnimation.value = false;
|
|
// 等待动画结束后再隐藏
|
|
setTimeout(() => {
|
|
showPrompt.value = false;
|
|
}, 300);
|
|
};
|
|
|
|
// 跳转到登录页面
|
|
const goLogin = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
});
|
|
hide();
|
|
};
|
|
|
|
// 以访客身份继续
|
|
const continueAsVisitor = () => {
|
|
// 设置访客模式
|
|
uni.setStorageSync('visitorMode', true);
|
|
hide();
|
|
};
|
|
|
|
// 暴露方法给外部使用
|
|
defineExpose({
|
|
show,
|
|
hide
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-prompt {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.mask.mask-show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.prompt-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 300rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background-color: white;
|
|
padding: 20rpx 30rpx;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.prompt-content.slide-up {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.prompt-title {
|
|
display: block;
|
|
text-align: left;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color:rgb(35, 84, 230);
|
|
color: white;
|
|
font-size: 32rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.visitor-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
</style>
|