52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<template>
|
||
<!-- 会员权限拦截弹窗 — 无权限页面点击时弹出 -->
|
||
<Teleport to="body">
|
||
<div v-if="modelValue" class="member-access-dialog-overlay" @click="$emit('update:modelValue', false)">
|
||
<div class="member-access-dialog" @click.stop>
|
||
<!-- 提示图标 -->
|
||
<div class="member-access-dialog__icon">
|
||
<svg viewBox="0 0 48 48" fill="none" class="member-access-dialog__lock-svg">
|
||
<rect x="10" y="22" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2.5"/>
|
||
<path d="M16 22V16a8 8 0 1116 0v6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||
<circle cx="24" cy="33" r="3" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
<!-- 提示文字 -->
|
||
<p class="member-access-dialog__text">该功能仅对会员开放，升级会员，享受更强大的AI求职功能</p>
|
||
<!-- 操作按钮 -->
|
||
<div class="member-access-dialog__actions">
|
||
<button class="member-access-dialog__btn member-access-dialog__btn--cancel" @click="$emit('update:modelValue', false)">
|
||
先不升级
|
||
</button>
|
||
<button class="member-access-dialog__btn member-access-dialog__btn--confirm" @click="handleViewDetail">
|
||
了解详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* 会员权限拦截弹窗
|
||
* 当用户点击无权限（accessible=false）的菜单时弹出
|
||
* "了解详情"按钮打开会员购买组件 MemberDialog
|
||
*/
|
||
|
||
/** 组件 Props */
|
||
defineProps<{ modelValue: boolean }>()
|
||
|
||
/** 组件 Emits */
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', value: boolean): void
|
||
(e: 'openMember'): void
|
||
}>()
|
||
|
||
/** 点击了解详情 — 关闭当前弹窗，通知父组件打开会员购买弹窗 */
|
||
function handleViewDetail() {
|
||
emit('update:modelValue', false)
|
||
emit('openMember')
|
||
}
|
||
</script>
|