会员权限遮罩

src/views/recruit/personal/PersonalCenter/jobFeedback/components/seenMe.vue

@@ -1,5 +1,11 @@
 <template>
-  <div style="position: relative; height: 60vh;">
+  <div
+    style="position: relative; min-height: calc(100vh - 198px);"
+    :class="{
+      'disable1': userInfo?.vipExpireDate > Date.now() && !userInfo?.entitlement?.viewersList,
+      'disable2': !userInfo?.vipExpireDate || (userInfo?.vipExpireDate && userInfo?.vipExpireDate < Date.now())
+    }"
+  >
     <div  v-if="userInfo?.entitlement?.viewersList && userInfo?.vipFlag && userInfo?.vipExpireDate && userInfo?.vipExpireDate > Date.now()">
       <div v-if="items.length" class="mt-3">
         <div class="positionItem" :class="item.active ? 'elevation-8' : 'elevation-3'" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
@@ -36,14 +42,6 @@
       </div>
       <Empty v-else :elevation="false"></Empty>
     </div>
-    <div v-else class="mt-8 tips">
-      <span class="color-error" v-if="userInfo?.vipExpireDate > Date.now() && !userInfo?.entitlement?.viewersList">
-        当前会员套餐的福利不包含谁看过我，<span class="cursor-pointer border-bottom-error" @click.stop="goBuy">去升级</span>
-      </span>
-      <span class="color-error" v-if="!userInfo?.vipExpireDate || (userInfo?.vipExpireDate && userInfo?.vipExpireDate < Date.now())">
-        谁看过我为会员福利内容，<span class="cursor-pointer border-bottom-error" @click.stop="goBuy">去开通</span>
-      </span>
-    </div>
   </div>
 </template>
 
@@ -56,12 +54,10 @@ import { dealDictObjData } from '@/utils/position'
 import { timesTampChange } from '@/utils/date'
 import Empty from '@/components/Empty'
 import { getUserAvatar } from '@/utils/avatar'
-import { useRouter } from 'vue-router'
 import { useUserStore } from '@/store/user'
 import { formatName } from '@/utils/getText'
 import { jumpToEnterpriseDetail } from '@/utils/position'
 
-const router = useRouter()
 const total = ref(0)
 const items = ref([])
 const page = ref({
@@ -91,9 +87,6 @@ const handleChangePage = (e) => {
   getData()
 }
 
-const goBuy = () => {
-  router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')
-}
 </script>
 
 <style scoped lang="scss">
@@ -153,4 +146,44 @@ const goBuy = () => {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.disable1 {
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '当前会员套餐的福利不包含谁看过我';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    font-family: 'MiSans-Bold';
+    color: #fff;
+    top: 0;
+    border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
+.disable2 {
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '谁看过我为会员福利内容';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    font-family: 'MiSans-Bold';
+    color: #fff;
+    top: 0;
+    border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
 </style>

src/views/recruit/personal/PersonalCenter/resume/blockEnt/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="resume-box" style="position: relative; height: 100%;">
+  <div class="resume-box d-flex flex-column" style="position: relative; height: 100%;">
     <div class="resume-header">
       <div class="resume-title">屏蔽企业设置</div>
     </div>
@@ -18,11 +18,7 @@
         </template>
       </v-chip>
     </div>
-    <div v-else class="mt-8 tips">
-      <span class="color-error">
-        屏蔽企业为会员福利内容，<span class="text-decoration-underline cursor-pointer" @click="goBuy">去开通</span>
-      </span>
-    </div>
+    <div v-else class="disable2"> </div>
   </div>
 </template>
 
@@ -38,9 +34,7 @@ import Confirm from '@/plugins/confirm'
 import { ref } from 'vue'
 defineOptions({name: 'resume-blockEnt'})
 import { useUserStore } from '@/store/user'
-import { useRouter } from 'vue-router'
 
-const router = useRouter()
 const userStore = useUserStore()
 let userInfo = ref(JSON.parse(localStorage.getItem('userInfo')) || {})
 userStore.$subscribe((mutation, state) => {
@@ -72,10 +66,6 @@ const handleJoin = async () => {
   Snackbar.success('加入屏蔽企业成功！')
 }
 
-const goBuy = () => {
-  router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')
-}
-
 // 企业名称下拉列表
 const getEnterpriseData = async (name) => {
   if (!name) return
@@ -107,4 +97,26 @@ const item = ref({
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.disable2 {
+  position: relative;
+  overflow: hidden;
+  margin-top: 12px;
+  flex: 1;
+  &::after {
+    content: '屏蔽企业为会员福利内容';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    font-family: 'MiSans-Bold';
+    color: #fff;
+    top: 0;
+    border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
 </style>

src/views/recruit/personal/PersonalCenter/resume/template/index.vue

@@ -19,14 +19,14 @@
           </template>
         </CtTable>
       </div>
-      <div v-else class="mt-8 tips">
-        <span class="color-error" v-if="userStore.userInfo?.vipExpireDate > Date.now() && !userStore.userInfo?.entitlement?.resumeTemplate">
-          当前会员套餐的福利不包含简历模板，<span class="cursor-pointer border-bottom-error" @click="goBuy">去升级</span>
-        </span>
-        <span class="color-error" v-if="!userStore.userInfo?.vipExpireDate || (userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate < Date.now())">
-          简历模板为会员福利内容，<span class="cursor-pointer border-bottom-error" @click="goBuy">去开通</span>
-        </span>
-      </div>
+      <div
+        v-else
+        style="height: 100%;"
+        :class="{
+          'disable1': userStore.userInfo?.vipExpireDate > Date.now() && !userStore.userInfo?.entitlement?.resumeTemplate,
+          'disable2': !userStore.userInfo?.vipExpireDate || (userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate < Date.now())
+        }"
+      ></div>
     </div>
   </div>
 </template>
@@ -35,10 +35,8 @@
 defineOptions({name: 'resume-template'})
 import { ref, computed } from 'vue'
 import { previewFile, getBlob, saveAs } from '@/utils'
-import { useRouter } from 'vue-router'
 import { useUserStore } from '@/store/user'
 
-const router = useRouter()
 const userStore = useUserStore()
 // 简历模板列表
 const list = ref([
@@ -70,10 +68,6 @@ const handleDownload = (k) => {
     saveAs(blob, k.title)
   })
 }
-
-const goBuy = () => {
-  router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -83,4 +77,44 @@ const goBuy = () => {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.disable1 {
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '当前会员套餐的福利不包含简历模板';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    font-family: 'MiSans-Bold';
+    color: #fff;
+    top: 0;
+    border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
+.disable2 {
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '简历模板为会员福利内容';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    font-family: 'MiSans-Bold';
+    color: #fff;
+    top: 0;
+    border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
 </style>