谁关注我功能遮罩

pagesA/seenMe/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <view style="height: 100vh; position: relative;">
+  <view
+    style="height: 100vh; position: relative;"
+    :class="{
+      'disable1': userInfo?.vipExpireDate > Date.now() && !userInfo?.entitlement?.viewersList,
+      'disable2': !userInfo?.vipExpireDate || (userInfo?.vipExpireDate && userInfo?.vipExpireDate < Date.now())
+    }"
+  >
     <scroll-view v-if="showList" class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
       <view v-if="list.length > 0">
         <view v-for="(item, index) in list" :key="index" class="list-item default-border defaultBgc" @click="jumpToEnterpriseDetail(item.enterprise.id)">
@@ -38,16 +44,6 @@
         <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
       </view>
     </scroll-view>
-    <view v-else class="noviewlist">
-      <view v-if="userInfo?.vipExpireDate > Date.now() && !userInfo?.entitlement?.viewersList">
-        <span class="MiSans-Normal">当前会员套餐的权益不包含谁关注我，</span>
-        <span class="text-line MiSans-Medium" @tap.stop="handleToBuyVip">点击去升级</span>
-      </view>
-      <view v-if="!userInfo?.vipExpireDate || (userInfo?.vipExpireDate && userInfo?.vipExpireDate < Date.now())">
-        <span class="MiSans-Normal">谁关注我为会员权益内容，</span>
-        <span class="text-line MiSans-Medium" @tap.stop="handleToBuyVip">点击去开通</span>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -97,11 +93,11 @@ const loadingMore = () => {
 }
 
 // 跳转会员套餐
-const handleToBuyVip = () => {
-	uni.navigateTo({
-		url: '/pagesA/vipPackage/index'
-	})
-}
+// const handleToBuyVip = () => {
+// 	uni.navigateTo({
+// 		url: '/pagesA/vipPackage/index'
+// 	})
+// }
 </script>
 
 <style scoped lang="scss">
@@ -146,4 +142,46 @@ const handleToBuyVip = () => {
 	padding-bottom: 2px;
 	border-bottom: 1px solid #00B760;
 }
+.disable1 {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30rpx;
+  &::after {
+    content: '当前会员套餐的福利不包含谁关注我';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-family: 'MiSans-Semibold';
+    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;
+  padding: 0 30rpx;
+  &::after {
+    content: '谁关注我为会员福利内容';
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-family: 'MiSans-Semibold';
+    color: #fff;
+    top: 0;
+    // border-radius: 12px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}
 </style>