feat:认证提示弹窗

src/pages/tabbar/components/scroll-user.vue

@@ -36,6 +36,35 @@
   </scroll-list>
   <wd-config-provider theme="dark">
     <wd-message-box />
+    <wd-popup
+      v-model="authShow"
+      custom-style="border-radius:32rpx;"
+      closable
+      :safe-area-inset-bottom="true"
+    >
+      <view class="w-80vw py-3 text-center">
+        <view class="text-lg text-color-theme">魅力女生认证</view>
+        <image class="size-400rpx" src="@/static/auth-message-box-bg.png" mode="aspectFill" />
+        <view class="text-lg">— 认证特权 —</view>
+        <view class="mx-6 flex flex-wrap gap-4 my-4">
+          <view class="bg-#555 rounded-1 flex-1 text-xs flex items-center flex-nowrap">
+            <view class="w-70rpx py-1 icon-bg-clip bg-#D29E52 rounded-l-1">
+              <uni-icons type="vip-filled" color="#fff" size="12" />
+            </view>
+            <view class="flex-1 text-nowrap">优先推荐男士</view>
+          </view>
+          <view class="bg-#555 rounded-1 flex-1 text-xs flex items-center flex-nowrap">
+            <view class="w-70rpx py-1 icon-bg-clip bg-#D29E52 rounded-l-1">
+              <uni-icons type="hand-up-filled" color="#fff" size="12" />
+            </view>
+            <text class="flex-1 text-nowrap">免费私聊男士</text>
+          </view>
+        </view>
+        <wd-button class="my-4 w-80%" size="medium" @click="goAuth">
+          <text class="text-lg">魅力认证</text>
+        </wd-button>
+      </view>
+    </wd-popup>
   </wd-config-provider>
 </template>
 
@@ -63,6 +92,7 @@
   });
 
   const scrollTop = ref(1);
+  const authShow = ref(false);
   const params = reactive({
     scene: props.scene,
     province: '',
@@ -87,23 +117,17 @@
     },
   );
 
+  const goAuth = () => {
+    uni.navigateTo({
+      url: '/pages/profile/verify-status',
+    });
+  };
+
   // 判断查看用户详情时有无权限
   const judgeGetByUserRole = async (user: any) => {
     const { code } = await RecentApi.judgeGetByUserRole({ id: user.memberId });
     if (code === 2001000007) {
-      message
-        .confirm({
-          title: '魅力女生认证',
-          msg: '请先完成认证',
-          confirmButtonText: '去认证',
-          zIndex: 9999,
-        })
-        .then(() => {
-          uni.navigateTo({
-            url: '/pages/profile/verify-status',
-          });
-        })
-        .catch(() => {});
+      authShow.value = true;
       return;
     }
 
@@ -119,8 +143,7 @@
           uni.navigateTo({
             url: '/pages/profile/apply-vip',
           });
-        })
-        .catch(() => {});
+        });
       return;
     }
 
@@ -164,3 +187,9 @@
     });
   };
 </script>
+
+<style>
+  .icon-bg-clip {
+    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
+  }
+</style>