131 lines
2.7 KiB
Vue
131 lines
2.7 KiB
Vue
<script setup>
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const handleUpgrade = () => {
|
||
if(confirm('确认支付 9.9元 开通 VIP？')) {
|
||
userStore.upgradeVip()
|
||
alert('支付成功！')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container layout-grid">
|
||
<main>
|
||
<div class="ad-banner">VIP 页顶部广告</div>
|
||
|
||
<div class="tool-content tool-locked">
|
||
<!-- 真实内容 (根据权限决定是否模糊) -->
|
||
<div :class="{ 'content-blur': !userStore.isLoggedIn || !userStore.isVip }">
|
||
<h1>PDF 转 Word</h1>
|
||
<div class="upload-area">
|
||
<i class="fa-solid fa-cloud-upload-alt upload-icon"></i>
|
||
<p>点击上传 PDF 文件</p>
|
||
</div>
|
||
<button class="btn-full">开始转换</button>
|
||
</div>
|
||
|
||
<!-- 遮罩层 -->
|
||
<div v-if="!userStore.isLoggedIn" class="modal-overlay lock-overlay">
|
||
<div class="lock-content">
|
||
<i class="fa-solid fa-lock lock-icon"></i>
|
||
<h3>请登录后使用</h3>
|
||
<button class="btn-login" @click="userStore.openModal()">立即登录</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="!userStore.isVip" class="modal-overlay lock-overlay">
|
||
<div class="lock-content">
|
||
<i class="fa-solid fa-crown vip-icon"></i>
|
||
<h3>会员专享功能</h3>
|
||
<button class="btn-full btn-upgrade" @click="handleUpgrade">升级 VIP (¥9.9)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<aside>
|
||
<div class="vip-promo">
|
||
<h3>升级 VIP</h3>
|
||
<p>解锁所有高级功能，去除广告。</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tool-locked {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.content-blur {
|
||
filter: blur(5px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.upload-area {
|
||
border: 2px dashed var(--border-color);
|
||
padding: 50px;
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
border-radius: 12px;
|
||
background: var(--bg-body);
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 3rem;
|
||
color: var(--text-placeholder);
|
||
}
|
||
|
||
.lock-overlay {
|
||
position: absolute;
|
||
}
|
||
|
||
.lock-content {
|
||
text-align: center;
|
||
}
|
||
|
||
.lock-icon {
|
||
font-size: 3rem;
|
||
color: var(--text-sub);
|
||
}
|
||
|
||
.vip-icon {
|
||
font-size: 3rem;
|
||
color: #f59e0b;
|
||
}
|
||
|
||
.btn-upgrade {
|
||
background: #f59e0b;
|
||
}
|
||
|
||
.vip-promo {
|
||
background: #fff7ed;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
border: 1px solid #fed7aa;
|
||
}
|
||
|
||
.vip-promo h3 {
|
||
color: #d97706;
|
||
}
|
||
|
||
.vip-promo p {
|
||
font-size: 0.9rem;
|
||
color: #d97706;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
html.dark .vip-promo {
|
||
background: rgba(217, 119, 6, 0.1);
|
||
border-color: rgba(217, 119, 6, 0.3);
|
||
}
|
||
|
||
html.dark .vip-promo h3,
|
||
html.dark .vip-promo p {
|
||
color: #fbbf24;
|
||
}
|
||
</style> |